Silverlight 4 – Creating a Custom Modal Dialog
Fri ,23/07/2010For a Silverlight application I did recently, I wanted to do a custom modal dialog box for showing informational messages, error messages, or other messages to the user. This dialog box would have no title bar or “X” button, and would have rounded corners.
For this tutorial, we will use Blend 4 to accomplish our task.
First, create a new Silverlight 4 application. I named mine CustomDialog.
Once the project has been created, we are going to add a new item to our Silverlight project. This item will be a ChildWindow. I named mine DialogPopup.
The ChildWindow will handle the modal dialog part of our window. However, there are parts of the ChildWindow that I didn’t like and wanted to remove/change, such as the window chrome. I also wanted to round the corners of the window. To do this, we need to edit the template for the window. In the Objects and Timeline window, right-click on the ChildWindow parent –> Edit Template –> Edit a Copy…
We are going to keep it simple and save the new style to the ChildWindow document.
So first, we are just going to delete the window chrome from the window. The window chrome is the title bar and the “X” used to close the window. Drill-down in the treeview until you find the Chrome entry. Right-click, and choose Delete.
Next, we need to delete some of the Borders. These give the window a grey border that I didn’t want.
Next, we are going to round the corners of the window. Drill-down and click on the Border shown below.
In the Properties window, set the CornerRadius to 20.
Move down to the next Border,
And set it’s CornerRadius to 20.
With the same Border selected, in the Properties window, set the Background Brush to a color of your choice.
The window “jazz” is now complete. Next, we are going to move to the XAML.
First, we need to give our window a name so we can handle binding. I named mine myCustomPopup.
<sdk:ChildWindow xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" x:Class="CustomDialog.DialogPopup" x:Name="myCustomPopup" Title="DialogPopup" Width="400" Height="300">
Now we need to add a TextBlock to the window to hold our message.
<TextBlock
Text="{Binding Message, ElementName=myCustomPopup}"
Margin="51,88,57,113"
TextWrapping="Wrap"
Foreground="#FF1D1515"
FontWeight="Bold"
TextAlignment="Center"/>
You may notice that we are binding to a property called Message. This is a custom DependencyProperty that will correspond to a public property that we will set when we create an instance of the window.
/// <summary>
/// Creates a public property for the TextBlock to bind to
/// </summary>
public static DependencyProperty MessageProperty = DependencyProperty.Register("Message", typeof(string), typeof(DialogPopup), new PropertyMetadata(""));
public string Message
{
get { return (string)GetValue(MessageProperty); }
set { SetValue(MessageProperty, value); }
}
This will complete our work for the window. To show off the new window, lets add a Button to the MainPage.xaml, create an EventHandler for the Click event.
<Grid
x:Name="LayoutRoot"
Background="White">
<Button
x:Name="btnShowMessage"
Content="Click Me"
Click="btnShowMessage_Click"
Margin="251,207,289,236" />
</Grid>
And the code for the Click event…
private void btnShowMessage_Click(object sender, System.Windows.RoutedEventArgs e)
{
DialogPopup dialog = new DialogPopup();
dialog.Message = "Our message";
dialog.Show();
}
And that will complete our tutorial. Run the application from Blend using F5, and you should see this..
