User Controls and the Popup Dialog
There are instances when it is desirable to set the content of a dialog control to a custom User Control, in the example below we show how to first create a custom user control and secondly to set it as the content source for a popup dialog:
You need to login to Download the Dialog User Control example, If you do not have a login you can register for free!
Creating the User Control
The XAML here creates a simple login form consisting of username and password fields.
<UserControl x:Class="DialogUserControl.myUserControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="300" Height="50">
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="25" />
<RowDefinition Height="25" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="70" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="Username:" HorizontalAlignment="Right" VerticalAlignment="Center" />
<TextBox Grid.Row="0" Grid.Column="1" Width="150" Height="20" HorizontalAlignment="Left" VerticalAlignment="Center" />
<TextBlock Grid.Row="1" Grid.Column="0" Text="Password:" HorizontalAlignment="Right" VerticalAlignment="Center" />
<PasswordBox Grid.Row="1" Grid.Column="1" Width="150" Height="20" HorizontalAlignment="Left" VerticalAlignment="Center" />
</Grid>
</UserControl>
As this is a very simple example there is no C# to write, your application will of course be more complex. So next we have the main control that contains the Popup Dialog which has it's content set to the custom user control we created earlier:
<UserControl x:Class="DialogUserControl.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:liquid="clr-namespace:Liquid;assembly=Liquid"
xmlns:my="clr-namespace:DialogUserControl"
Width="500" Height="500">
<Canvas x:Name="LayoutRoot" Background="White" Width="500" Height="500">
<liquid:Dialog x:Name="popup" Width="230" Height="110" Buttons="OK,Cancel" Title="Login" IsOpen="True" IsResizable="False" IsMaximizeEnabled="False" IsMinimizeEnabled="False">
<my:myUserControl />
</liquid:Dialog>
</Canvas>
</UserControl>
The important line above is xmlns:my="clr-namespace:DialogUserControl", this allows you to refer to the custom User Control anywhere in your XAML.
Example User Control in a Popup Dialog:
