In this post, I’m going to demonstrate the concepts of how to create a simple message box in Silverlight. We want the message box to be able to do the following:
1. Center the message box vertically and horizontally on the screen when shown.
2. When shown, overlay the screen and disable any interaction with controls beneath our message box.
3. Have a Text property that can be past to the message box programmatically when shown or either via XAML at design time.
4. The message box should take up 50% of the screen vertically and horizontally when visible.
The requirements above are very basic. However they should help you get started creating your own message box. The first thing we’ll do is create our message box control. We’ll have a rectangle that will function as the overlay behind the message box yet above our work area. This will fulfill requirement #2. We’ll also have the UI elements that will be used for the actual message box. Here’s our control XAML:
1: <UserControl x:Class="SilverlightMsgBox.MsgBox"
2: xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Visibility="Collapsed">
4: <Grid>
5: <Rectangle HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Fill="Transparent" />
6: <Border x:Name="brdMsgBox" BorderBrush="Black" BorderThickness="1,1,1,1">
7: <Border.Background>
8: <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
9: <GradientStop Color="White"/>
10: <GradientStop Color="Gray" Offset="1"/>
11: </LinearGradientBrush>
12: </Border.Background>
13:
14: <Grid Margin="10,10,10,10">
15: <Grid.ColumnDefinitions>
16: <ColumnDefinition />
17: </Grid.ColumnDefinitions>
18: <Grid.RowDefinitions>
19: <RowDefinition Height="*" />
20: <RowDefinition Height="50" />
21: </Grid.RowDefinitions>
22:
23: <TextBlock x:Name="tbkText" Grid.Column="0" Grid.Row="0" Text="Error Text goes here." FontSize="16" VerticalAlignment="Center" HorizontalAlignment="Center" TextWrapping="Wrap" />
24: <Button x:Name="btnOk" Content="Ok" Width="100" Height="50" Grid.Column="0" Grid.Row="1" />
25: </Grid>
26: </Border>
27: </Grid>
28: </UserControl>
We have a TextBlock for the message and our ok Button which will close the message box once the user reads the message. Now that our UI elements are defined we create our properties & actions for the control. Here is the code behind of the MsgBox control:
1: Partial Public Class MsgBox
2: Inherits UserControl
3:
4: Public Shared ReadOnly TextProperty As DependencyProperty = DependencyProperty.Register("Text", GetType(String), GetType(MsgBox), New PropertyMetadata(AddressOf TextChangedHandler))
5:
6: Public Property Text() As String
7: Get
8: Return GetValue(MsgBox.TextProperty).ToString()
9: End Get
10: Set(ByVal value As String)
11: SetValue(MsgBox.TextProperty, value)
12: End Set
13: End Property
14:
15: Public Sub New()
16: InitializeComponent()
17: End Sub
18:
19: Private Shared Sub TextChangedHandler(ByVal o As DependencyObject, ByVal args As DependencyPropertyChangedEventArgs)
20: DirectCast(o, MsgBox).OnTextChanged(args.NewValue.ToString())
21: End Sub
22:
23: Private Sub OnTextChanged(ByVal newText As String)
24: Me.tbkText.Text = newText
25: End Sub
26:
27: Private Sub MsgBox_SizeChanged(ByVal sender As Object, ByVal e As System.Windows.SizeChangedEventArgs) Handles Me.SizeChanged
28: 'message box will be 50% of the width of its parent
29: Me.brdMsgBox.Width = Me.ActualWidth * 0.5
30: Me.brdMsgBox.Height = Me.ActualHeight * 0.5
31: End Sub
32:
33: Public Sub Show(Optional ByVal text As String = "")
34: If Not String.IsNullOrEmpty(text) Then
35: Me.Text = text
36: End If
37: Me.Visibility = Windows.Visibility.Visible
38: End Sub
39:
40: Public Sub Hide()
41: Me.Visibility = Windows.Visibility.Collapsed
42: End Sub
43:
44: Private Sub btnOk_Click(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles btnOk.Click
45: Hide()
46: End Sub
47:
48: End Class
We create a Text dependency property so we can set the message box’s text either programmatically or via XAML at design time (requirement #3). When the text is changed, we set the text property of our text block control. I also made 2 public functions to either show or hide the message box. We also define the OK button to hide/close the message box when clicked. The last functionality of the message box I’d like to discuss is the SizeChanged event. When the size changes, we want to ensure that our message box only occupies 50% of its parent’s size (requirement #4).
Now we are ready to put our message box control to use. In this example, I have a textbox and a button. When I click the button, I read what the user entered into the textbox and show my message box with the entered text. Here is a screenie of the message box control being put to use.
SilverlightMsgBox_Soln.zip (597.59 kb)