Page 1 of 1

Silverlight 4 - Creating a Custom Modal Dialog

#1 eclipsed4utoo  Icon User is offline

  • Not Your Ordinary Programmer
  • member icon

Reputation: 1524
  • View blog
  • Posts: 5,957
  • Joined: 21-March 08

Posted 23 July 2010 - 11:05 AM

For 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.
Attached Image

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.
Attached Image

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…
Attached Image

We are going to keep it simple and save the new style to the ChildWindow document.
Attached Image

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.
Attached Image

Next, we need to delete some of the Borders. These give the window a grey border that I didn’t want.
Attached Image

Next, we are going to round the corners of the window. Drill-down and click on the Border shown below.
Attached Image

In the Properties window, set the CornerRadius to 20.
Attached Image

Move down to the next Border,
Attached Image

And set it’s CornerRadius to 20.
Attached Image

With the same Border selected, in the Properties window, set the Background Brush to a color of your choice.
Attached Image

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..
Attached Image

Is This A Good Question/Topic? 2
  • +

Page 1 of 1