In this aticle I will discuss how we can create custom message box in Windows Phone 7.

Let's write code:
Step 1: Create a silverlight for Windows Phone project
Step 2: Add Windows Phone User Control.
Step 3: Add below code in the .xaml of User Control. I have defined the StackPanel background color with PhoneAccentBrush.
<StackPanel Width="480" Height="226" Margin="0,0,0,0" Background="{StaticResource PhoneAccentBrush}" > <TextBlock Text="Custom Message Box" Margin="22,110,0,0" Style="{StaticResource PhoneTextTitle3Style}"/> <Button x:Name="MessageBoxClose" Content="close" Margin="12,0,0,0" Width="180" HorizontalAlignment="Left" /> </StackPanel>
Step 4: Add a button inside ContentPanel of MainPage.xaml.
< Button Content="Custom Message Box" HorizontalAlignment="Left" Name="customMessagebox" VerticalAlignment="Top" Click="btncustomMessagebox_Click" />
Step 5: Add System.Windows.Controls.Primitives and directive in MainPage.xaml.cs.
using System.Windows.Controls.Primitives; using System.ComponentModel;
Step 6: Declare below class level variables.
public partial class MainPage : PhoneApplicationPage { Popup customMessageBox = new Popup(); Canvas canvas = null;
Step 7: Add below button handler which will show custom message box. I have used canvas to make the message box modal.
private void btncustomMessagebox_Click(object sender, RoutedEventArgs e) { canvas = new Canvas(); Color backgroundColor = (Color)Application.Current.Resources["PhoneAccentColor"]; canvas.Background = new SolidColorBrush(backgroundColor); canvas.Margin = new Thickness(-50, 0, 0, 0); canvas.Width = 1000; canvas.Opacity = 0.5; ContentPanel.Children.Add(canvas);
if (customMessageBox.Child == null) { CustomMessageBox messageBox = new CustomMessageBox(); messageBox.MessageBoxClose.Click += new RoutedEventHandler(CustomMessageBoxClose_Click); customMessageBox.Child = messageBox; } customMessageBox.IsOpen = true; }
Step 8: The hardware back key button needs to be handle to hide message box on press of back key.
protected override void OnBackKeyPress(CancelEventArgs e) { if (customMessageBox != null && customMessageBox.IsOpen) { customMessageBox.IsOpen = false; e.Cancel = true; ContentPanel.Children.Remove(canvas); } }
Step 9: Below method will close the message box on click of button on message box.
private void CustomMessageBoxClose_Click(object sender, RoutedEventArgs e) { if (customMessageBox != null) { customMessageBox.IsOpen = false; ContentPanel.Children.Remove(canvas); } }
Step 10: Now run the application and click on Custom Message Box button. You will get the message box of accent color like shown below.
|