silverlight
ChildWindow in Silverlight 3
Min-gu, Kim
2009. 6. 30. 16:00
Silverlight 3 에는 ChildWindow 가 추가 됐습니다.
ChildWindow 는 Winform 등의 Dialog창과 비슷한데요. 주로, 새로운 Dialog창을 띄워 사용자의 입력을 확인하거나, 사용자에게 경고 또는 공지를 알리는 창입니다.
우선, ChildWindow 를 사용하기 위해선 Silverlight 3가 설치 되 있어야 합니다. (VS2008 SP1 설치와 VS2008 SP1용 Silverlight 3 개발도구가 설치 되 있어야 합니다.)
Silverlight 프로젝트에서 ChildWindow 를 생성하려면 Add New Item 에서 Silverlight Child Window 를 선택 하신 후 ChildWindow를 명명한 뒤 Add 하시면 됩니다.
저는 TestChildWindow.cs 라고 명명 했습니다.
그럼 생성 된 TestChildWindow.cs 를 한 번 살펴 보겠습니다.
System.Windows.Contols 네임스페이스가 추가 되 있네요. ChildWindow가 System.Windows.Controls 에 있나 봅니다^^;
그리고, 레이아웃도 일정한 폼으로 정해져 있는데요, 이는 Blend 3 Preview 에서 열어보시면 확인 하실 수 있습니다.
비하인드 코드도 살펴보죠.
기본적으로 OK, Cancel 버튼의 이벤트가 구현 되 있네요.
여기서 유념해 보실 사항은, OK, Cancel 버튼 각각은 DialogResult Property의 값을 할당 할 뿐 아무 코드도 추가 되 있지 않다는 것입니다. 이렇게 되 있는데도 ChildWindow를 띄워 동작을 해 보시게 되면, OK, Cancel 버튼 클릭 시 ChildWindow 가 닫히게 됩니다. 이는 ChildWindow 의 DialogResult Property에 값을 할당하면 Closing -> Closed 순으로 ChildWindow 가 닫힌다는 것을 반증하는 것이죠.
그럼, 말씀 드렸던 ChildWindow를 어떻게 띄우는 지 살펴 보겠습니다.
MessageBox에 비해 ChildWindow가 가지는 장점은, ChildWindow 의 XAML 내용을 보시면 짐작하시겠지만, 바로 개발자의 마음대로 Content 를 구성할 수 있다는 것입니다. 또한, DialogResult 값으로 사용자의 입력(OK, Cancel)을 ChildWindow를 띄운 MainPage에서 확인 할 수 있다는 것이죠.
ChildWindow에 DialogResult Property 가 사용자의 입력을 확인 할 수 있는 Property 입니다.(Nullable Boolean) 한 가지, 유의하실 점은 Property 값을 사용하는 시점을 명확하게 해야 한다는 것인데요, Silverlight 에서는 모든 동작이 비동기로 이뤄지기 때문에 DialogResult Property 의 값을 아무곳에서나 사용하게 되면 값이 없거나, 사용자의 입력과 상관 없는 값을 가지고 있을 수 있겠죠.
그래서, ChildWindow의 Closed 이벤트가 일어나는 시점의 DialogResult 값을 사용하시면 됩니다.
위 코드와 같이 구현하게 되면, 정확히 ChildWindow 가 사용자의 입력에 의해 닫히고, 그 때의 DialogResult 값을 확인 할 수 있게 되는 것이죠 :D (ChildWindow 는 여러모로 활용도가 높은 컨트롤임에도 불구하고, 사용하기 참 쉽네요^^)
<Sample>
ChildWindow 는 Winform 등의 Dialog창과 비슷한데요. 주로, 새로운 Dialog창을 띄워 사용자의 입력을 확인하거나, 사용자에게 경고 또는 공지를 알리는 창입니다.
우선, ChildWindow 를 사용하기 위해선 Silverlight 3가 설치 되 있어야 합니다. (VS2008 SP1 설치와 VS2008 SP1용 Silverlight 3 개발도구가 설치 되 있어야 합니다.)
Silverlight 프로젝트에서 ChildWindow 를 생성하려면 Add New Item 에서 Silverlight Child Window 를 선택 하신 후 ChildWindow를 명명한 뒤 Add 하시면 됩니다.
저는 TestChildWindow.cs 라고 명명 했습니다.
그럼 생성 된 TestChildWindow.cs 를 한 번 살펴 보겠습니다.
<controls:ChildWindow x:Class="ChildWindowTest.TestChildWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
Width="400" Height="300"
Title="TestChildWindow">
<Grid x:Name="LayoutRoot" Margin="2">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
Width="400" Height="300"
Title="TestChildWindow">
<Grid x:Name="LayoutRoot" Margin="2">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Button x:Name="CancelButton" Content="Cancel" Click="CancelButton_Click" Width="75" Height="23" HorizontalAlignment="Right" Margin="0,12,0,0" Grid.Row="1" />
<Button x:Name="OKButton" Content="OK" Click="OKButton_Click" Width="75" Height="23" HorizontalAlignment="Right" Margin="0,12,79,0" Grid.Row="1" />
</Grid>
</controls:ChildWindow>
<Button x:Name="OKButton" Content="OK" Click="OKButton_Click" Width="75" Height="23" HorizontalAlignment="Right" Margin="0,12,79,0" Grid.Row="1" />
</Grid>
</controls:ChildWindow>
System.Windows.Contols 네임스페이스가 추가 되 있네요. ChildWindow가 System.Windows.Controls 에 있나 봅니다^^;
그리고, 레이아웃도 일정한 폼으로 정해져 있는데요, 이는 Blend 3 Preview 에서 열어보시면 확인 하실 수 있습니다.
비하인드 코드도 살펴보죠.
public partial class TestChildWindow : ChildWindow
{
public TestChildWindow()
{
InitializeComponent();
}
{
public TestChildWindow()
{
InitializeComponent();
}
private void OKButton_Click(object sender, RoutedEventArgs e)
{
this.DialogResult = true;
}
private void CancelButton_Click(object sender, RoutedEventArgs e)
{
this.DialogResult = false;
}
}
기본적으로 OK, Cancel 버튼의 이벤트가 구현 되 있네요.
여기서 유념해 보실 사항은, OK, Cancel 버튼 각각은 DialogResult Property의 값을 할당 할 뿐 아무 코드도 추가 되 있지 않다는 것입니다. 이렇게 되 있는데도 ChildWindow를 띄워 동작을 해 보시게 되면, OK, Cancel 버튼 클릭 시 ChildWindow 가 닫히게 됩니다. 이는 ChildWindow 의 DialogResult Property에 값을 할당하면 Closing -> Closed 순으로 ChildWindow 가 닫힌다는 것을 반증하는 것이죠.
그럼, 말씀 드렸던 ChildWindow를 어떻게 띄우는 지 살펴 보겠습니다.
TestChildWindow t = new TestChildWindow();
t.Show();
(너무 쉬운가요? ㅎ)t.Show();
MessageBox에 비해 ChildWindow가 가지는 장점은, ChildWindow 의 XAML 내용을 보시면 짐작하시겠지만, 바로 개발자의 마음대로 Content 를 구성할 수 있다는 것입니다. 또한, DialogResult 값으로 사용자의 입력(OK, Cancel)을 ChildWindow를 띄운 MainPage에서 확인 할 수 있다는 것이죠.
ChildWindow에 DialogResult Property 가 사용자의 입력을 확인 할 수 있는 Property 입니다.(Nullable Boolean) 한 가지, 유의하실 점은 Property 값을 사용하는 시점을 명확하게 해야 한다는 것인데요, Silverlight 에서는 모든 동작이 비동기로 이뤄지기 때문에 DialogResult Property 의 값을 아무곳에서나 사용하게 되면 값이 없거나, 사용자의 입력과 상관 없는 값을 가지고 있을 수 있겠죠.
그래서, ChildWindow의 Closed 이벤트가 일어나는 시점의 DialogResult 값을 사용하시면 됩니다.
TestChildWindow t = new TestChildWindow();
t.Show();
t.Closed += (s2, e2) =>
{
bool? result = t.DialogResult;
t.Show();
t.Closed += (s2, e2) =>
{
bool? result = t.DialogResult;
if (result != null)
{
if((bool)result)
{
this.myTextBlock.Text = "Nice to meet you.";
}
else
{
this.myTextBlock.Text = "Who are you?";
}
}
};
위 코드와 같이 구현하게 되면, 정확히 ChildWindow 가 사용자의 입력에 의해 닫히고, 그 때의 DialogResult 값을 확인 할 수 있게 되는 것이죠 :D (ChildWindow 는 여러모로 활용도가 높은 컨트롤임에도 불구하고, 사용하기 참 쉽네요^^)
<Sample>