Click here to Skip to main content
15,886,110 members
Articles / Programming Languages / C#

Custom MessageBox Control for Silverlight 3

Rate me:
Please Sign up or sign in to vote.
4.20/5 (16 votes)
19 Sep 2009CPOL4 min read 92.2K   3.5K   21  
Creating a user control for displaying a custom messagebox in Silverlight 3.0
<basics:ChildWindow
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:basics="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
	x:Class="MessageBoxControl.MessageBoxChildWindow"
	Title="MessageBoxChildWindow"
	Width="400" Height="150" mc:Ignorable="d">
	<basics:ChildWindow.Resources>
		<Style x:Key="MessageBoxStyle" TargetType="basics:ChildWindow">
			<Setter Property="IsTabStop" Value="false"/>
			<Setter Property="TabNavigation" Value="Cycle"/>
			<Setter Property="HorizontalAlignment" Value="Center"/>
			<Setter Property="VerticalAlignment" Value="Center"/>
			<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
			<Setter Property="VerticalContentAlignment" Value="Stretch"/>
			<Setter Property="BorderThickness" Value="1"/>
			<Setter Property="BorderBrush">
				<Setter.Value>
					<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
						<GradientStop Color="#FFA3AEB9" Offset="0"/>
						<GradientStop Color="#FF8399A9" Offset="0.375"/>
						<GradientStop Color="#FF718597" Offset="0.375"/>
						<GradientStop Color="#FF617584" Offset="1"/>
					</LinearGradientBrush>
				</Setter.Value>
			</Setter>
			<Setter Property="OverlayBrush" Value="#7F000000"/>
			<Setter Property="OverlayOpacity" Value="1"/>
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="basics:ChildWindow">
						<Grid x:Name="Root">
							<Grid.Resources>
								<Style x:Key="ButtonStyle" TargetType="Button">
									<Setter Property="Background" Value="#FF1F3B53"/>
									<Setter Property="Foreground" Value="#FF000000"/>
									<Setter Property="Padding" Value="3"/>
									<Setter Property="BorderThickness" Value="1"/>
									<Setter Property="BorderBrush">
										<Setter.Value>
											<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
												<GradientStop Color="#FFA3AEB9" Offset="0"/>
												<GradientStop Color="#FF8399A9" Offset="0.375"/>
												<GradientStop Color="#FF718597" Offset="0.375"/>
												<GradientStop Color="#FF617584" Offset="1"/>
											</LinearGradientBrush>
										</Setter.Value>
									</Setter>
									<Setter Property="Template">
										<Setter.Value>
											<ControlTemplate TargetType="Button">
												<Grid x:Name="grid" Height="14" HorizontalAlignment="Center" VerticalAlignment="Center" Width="15" Background="#02FFFFFF">
													<VisualStateManager.VisualStateGroups>
														<VisualStateGroup x:Name="CommonStates">
															<VisualState x:Name="Normal"/>
															<VisualState x:Name="MouseOver">
																<Storyboard>
																	<ObjectAnimationUsingKeyFrames Storyboard.TargetName="X_Fuzz2" Storyboard.TargetProperty="Visibility">
																		<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
																	</ObjectAnimationUsingKeyFrames>
																	<ObjectAnimationUsingKeyFrames Storyboard.TargetName="X_Fuzz1" Storyboard.TargetProperty="Visibility">
																		<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
																	</ObjectAnimationUsingKeyFrames>
																	<ObjectAnimationUsingKeyFrames Storyboard.TargetName="X_Fuzz0" Storyboard.TargetProperty="Visibility">
																		<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
																	</ObjectAnimationUsingKeyFrames>
																	<DoubleAnimation Duration="0" Storyboard.TargetName="X" Storyboard.TargetProperty="Opacity" To="0.95"/>
																</Storyboard>
															</VisualState>
															<VisualState x:Name="Pressed">
																<Storyboard>
																	<DoubleAnimation Duration="0" Storyboard.TargetName="X" Storyboard.TargetProperty="Opacity" To="0.85"/>
																	<ObjectAnimationUsingKeyFrames Storyboard.TargetName="X_Fuzz2" Storyboard.TargetProperty="Visibility">
																		<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
																	</ObjectAnimationUsingKeyFrames>
																	<ObjectAnimationUsingKeyFrames Storyboard.TargetName="X_Fuzz1" Storyboard.TargetProperty="Visibility">
																		<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
																	</ObjectAnimationUsingKeyFrames>
																	<ObjectAnimationUsingKeyFrames Storyboard.TargetName="X_Fuzz0" Storyboard.TargetProperty="Visibility">
																		<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
																	</ObjectAnimationUsingKeyFrames>
																</Storyboard>
															</VisualState>
															<VisualState x:Name="Disabled">
																<Storyboard>
																	<DoubleAnimation Duration="0" Storyboard.TargetName="X" Storyboard.TargetProperty="Opacity" To="0.5"/>
																</Storyboard>
															</VisualState>
														</VisualStateGroup>
													</VisualStateManager.VisualStateGroups>
													<Path x:Name="X_Fuzz2" Fill="#14C51900" Stretch="Fill" Stroke="#14C51900" Height="8" HorizontalAlignment="Center" Margin="0,-1,0,0" VerticalAlignment="Center" Width="9" Opacity="1" RenderTransformOrigin="0.5,0.5" Visibility="Collapsed" Data="F1 M 6.742676,3.852539 L 9.110840,1.559570 L 8.910645,0.500000 L 6.838379,0.500000 L 4.902832,2.435547 L 2.967285,0.500000 L 0.895020,0.500000 L 0.694824,1.559570 L 3.062988,3.852539 L 0.527832,6.351563 L 0.689941,7.600586 L 2.967285,7.600586 L 4.897949,5.575195 L 6.854004,7.600586 L 9.115723,7.600586 L 9.277832,6.351563 L 6.742676,3.852539 Z">
														<Path.RenderTransform>
															<TransformGroup>
																<ScaleTransform ScaleX="1.3" ScaleY="1.3"/>
															</TransformGroup>
														</Path.RenderTransform>
													</Path>
													<Path x:Name="X_Fuzz1" Fill="#1EC51900" Stretch="Fill" Stroke="#1EC51900" Height="8" HorizontalAlignment="Center" Margin="0,-1,0,0" VerticalAlignment="Center" Width="9" Opacity="1" RenderTransformOrigin="0.5,0.5" Visibility="Collapsed" Data="F1 M 6.742676,3.852539 L 9.110840,1.559570 L 8.910645,0.500000 L 6.838379,0.500000 L 4.902832,2.435547 L 2.967285,0.500000 L 0.895020,0.500000 L 0.694824,1.559570 L 3.062988,3.852539 L 0.527832,6.351563 L 0.689941,7.600586 L 2.967285,7.600586 L 4.897949,5.575195 L 6.854004,7.600586 L 9.115723,7.600586 L 9.277832,6.351563 L 6.742676,3.852539 Z">
														<Path.RenderTransform>
															<TransformGroup>
																<ScaleTransform ScaleX="1.1" ScaleY="1.1"/>
															</TransformGroup>
														</Path.RenderTransform>
													</Path>
													<Path x:Name="X_Fuzz0" Fill="#FFC51900" Stretch="Fill" Stroke="#FFC51900" Height="8" HorizontalAlignment="Center" Margin="0,-1,0,0" VerticalAlignment="Center" Width="9" Opacity="1" Visibility="Collapsed" Data="F1 M 6.742676,3.852539 L 9.110840,1.559570 L 8.910645,0.500000 L 6.838379,0.500000 L 4.902832,2.435547 L 2.967285,0.500000 L 0.895020,0.500000 L 0.694824,1.559570 L 3.062988,3.852539 L 0.527832,6.351563 L 0.689941,7.600586 L 2.967285,7.600586 L 4.897949,5.575195 L 6.854004,7.600586 L 9.115723,7.600586 L 9.277832,6.351563 L 6.742676,3.852539 Z"/>
													<Path x:Name="X" Fill="#FFFFFFFF" Stretch="Fill" Height="8" HorizontalAlignment="Center" Margin="0,-1,0,0" VerticalAlignment="Center" Width="9" Opacity="0.7" Data="F1 M 6.742676,3.852539 L 9.110840,1.559570 L 8.910645,0.500000 L 6.838379,0.500000 L 4.902832,2.435547 L 2.967285,0.500000 L 0.895020,0.500000 L 0.694824,1.559570 L 3.062988,3.852539 L 0.527832,6.351563 L 0.689941,7.600586 L 2.967285,7.600586 L 4.897949,5.575195 L 6.854004,7.600586 L 9.115723,7.600586 L 9.277832,6.351563 L 6.742676,3.852539 Z">
														<Path.Stroke>
															<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
																<GradientStop Color="#FF313131" Offset="1"/>
																<GradientStop Color="#FF8E9092" Offset="0"/>
															</LinearGradientBrush>
														</Path.Stroke>
													</Path>
												</Grid>
											</ControlTemplate>
										</Setter.Value>
									</Setter>
								</Style>
							</Grid.Resources>
							<VisualStateManager.VisualStateGroups>
								<VisualStateGroup x:Name="WindowStates">
									<VisualState x:Name="Open">
										<Storyboard>
											<DoubleAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetName="Overlay" Storyboard.TargetProperty="Opacity">
												<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
												<EasingDoubleKeyFrame KeyTime="00:00:00.3" Value="1"/>
											</DoubleAnimationUsingKeyFrames>
											<DoubleAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetName="ContentRoot" Storyboard.TargetProperty="(RenderTransform).(Children)[0].ScaleX">
												<SplineDoubleKeyFrame KeyTime="0" Value="0"/>
												<SplineDoubleKeyFrame KeyTime="00:00:00.25" Value="0"/>
												<SplineDoubleKeyFrame KeyTime="00:00:00.4" Value="1"/>
												<SplineDoubleKeyFrame KeyTime="00:00:00.45" Value="1.05" KeySpline="0,0,0.5,1"/>
												<SplineDoubleKeyFrame KeyTime="00:00:00.55" Value="1"/>
											</DoubleAnimationUsingKeyFrames>
											<DoubleAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetName="ContentRoot" Storyboard.TargetProperty="(RenderTransform).(Children)[0].ScaleY">
												<SplineDoubleKeyFrame KeyTime="0" Value="0"/>
												<SplineDoubleKeyFrame KeyTime="00:00:00.25" Value="0"/>
												<SplineDoubleKeyFrame KeyTime="00:00:00.4" Value="1"/>
												<SplineDoubleKeyFrame KeyTime="00:00:00.45" Value="1.05" KeySpline="0,0,0.5,1"/>
												<SplineDoubleKeyFrame KeyTime="00:00:00.55" Value="1"/>
											</DoubleAnimationUsingKeyFrames>
										</Storyboard>
									</VisualState>
									<VisualState x:Name="Closed">
										<Storyboard>
											<DoubleAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetName="Overlay" Storyboard.TargetProperty="Opacity">
												<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
												<EasingDoubleKeyFrame KeyTime="00:00:00.3" Value="0"/>
											</DoubleAnimationUsingKeyFrames>
											<DoubleAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetName="ContentRoot" Storyboard.TargetProperty="(RenderTransform).(Children)[0].ScaleX">
												<SplineDoubleKeyFrame KeyTime="00:00:00.2" Value="1"/>
												<SplineDoubleKeyFrame KeyTime="00:00:00.25" Value="1.05"/>
												<SplineDoubleKeyFrame KeyTime="00:00:00.45" Value="0"/>
											</DoubleAnimationUsingKeyFrames>
											<DoubleAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetName="ContentRoot" Storyboard.TargetProperty="(RenderTransform).(Children)[0].ScaleY">
												<SplineDoubleKeyFrame KeyTime="00:00:00.2" Value="1"/>
												<SplineDoubleKeyFrame KeyTime="00:00:00.25" Value="1.05"/>
												<SplineDoubleKeyFrame KeyTime="00:00:00.45" Value="0"/>
											</DoubleAnimationUsingKeyFrames>
										</Storyboard>
									</VisualState>
								</VisualStateGroup>
							</VisualStateManager.VisualStateGroups>
							<Grid x:Name="Overlay" HorizontalAlignment="Stretch" Margin="0" VerticalAlignment="Top" Opacity="{TemplateBinding OverlayOpacity}" Background="{TemplateBinding OverlayBrush}"/>
							<Grid x:Name="ContentRoot" Height="{TemplateBinding Height}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}" Width="{TemplateBinding Width}" RenderTransformOrigin="0.5,0.5">
								<Grid.RenderTransform>
									<TransformGroup>
										<ScaleTransform/>
										<SkewTransform/>
										<RotateTransform/>
										<TranslateTransform/>
									</TransformGroup>
								</Grid.RenderTransform>
								<Border HorizontalAlignment="Stretch" Margin="-1" VerticalAlignment="Stretch" Background="#14000000" BorderBrush="#14000000" BorderThickness="1" CornerRadius="2"/>
								<Border HorizontalAlignment="Stretch" Margin="-2" VerticalAlignment="Stretch" Background="#0F000000" BorderBrush="#0F000000" BorderThickness="1" CornerRadius="2.25"/>
								<Border HorizontalAlignment="Stretch" Margin="-3" VerticalAlignment="Stretch" Background="#0C000000" BorderBrush="#0C000000" BorderThickness="1" CornerRadius="2.5"/>
								<Border HorizontalAlignment="Stretch" Margin="-4" VerticalAlignment="Stretch" Background="#0A000000" BorderBrush="#0A000000" BorderThickness="1" CornerRadius="2.75"/>
								<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2">
									<Border Margin="1" CornerRadius="1.5">
										<Border.Background>
											<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
												<GradientStop Color="#FF0E2347" Offset="0"/>
												<GradientStop Color="#FFC4C7D0" Offset="0.986"/>
												<GradientStop Color="#FF6A7FA7" Offset="0.787"/>
												<GradientStop Color="#FF1D3D74" Offset="0.397"/>
											</LinearGradientBrush>
										</Border.Background>
										<Grid>
											<Grid.RowDefinitions>
												<RowDefinition Height="Auto"/>
												<RowDefinition/>
											</Grid.RowDefinitions>
											<Image Height="148" HorizontalAlignment="Center" Margin="0" VerticalAlignment="Center" Width="498" Grid.RowSpan="2" Source="aero bg.png" Stretch="Fill" Canvas.ZIndex="-100" Opacity="0.8"/>
											<Border x:Name="Chrome" Width="Auto" BorderBrush="#FFFFFFFF" BorderThickness="0,0,0,1" CornerRadius="3" Opacity="0.9">
												<Border.Background>
													<LinearGradientBrush EndPoint="0.5,0.528" StartPoint="0.5,0">
														<GradientStop Color="#CCFF0000" Offset="1"/>
														<GradientStop Color="#FFFEFEFE" Offset="0"/>
														<GradientStop Color="#B2A53C3E" Offset="0.346"/>
													</LinearGradientBrush>
												</Border.Background>
												<Grid Height="Auto" Width="Auto">
													<Grid.ColumnDefinitions>
														<ColumnDefinition/>
														<ColumnDefinition Width="30"/>
													</Grid.ColumnDefinitions>
													<ContentControl HorizontalAlignment="Stretch" Margin="6,0,6,0" VerticalAlignment="Center" FontWeight="Bold" IsTabStop="False" Content="{TemplateBinding Title}" Foreground="White"/>
												</Grid>
											</Border>
											<Border Margin="7" Grid.Row="1" Background="{TemplateBinding Background}">
												<ContentPresenter x:Name="ContentPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
											</Border>
										</Grid>
									</Border>
								</Border>
							</Grid>
						</Grid>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>
	</basics:ChildWindow.Resources>
	<basics:ChildWindow.Style>
		<StaticResource ResourceKey="MessageBoxStyle"/>
	</basics:ChildWindow.Style>
	<Grid x:Name="LayoutRoot">
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="0.135*"/>
			<ColumnDefinition Width="0.865*"/>
		</Grid.ColumnDefinitions>
		<Grid.RowDefinitions>
			<RowDefinition />
			<RowDefinition Height="Auto" MinHeight="26.634" />
		</Grid.RowDefinitions>
		<TextBlock x:Name="txtMsg" Text="You must select one record in order to be able to complete the delete process" TextWrapping="Wrap" Foreground="White" FontSize="13.333" FontWeight="Bold" Margin="9.5,0,8,8" Grid.Column="1" HorizontalAlignment="Center" TextAlignment="Center" VerticalAlignment="Center" Width="313">
			<TextBlock.Effect>
				<DropShadowEffect Opacity="0.27"/>
			</TextBlock.Effect>
		</TextBlock>
		<StackPanel HorizontalAlignment="Center" Grid.Row="1" VerticalAlignment="Center" Orientation="Horizontal" Margin="1" Grid.ColumnSpan="2">
			<Button x:Name="btnYes" Content="Yes" Click="OKButton_Click" Height="23" HorizontalAlignment="Right" Margin="0" d:LayoutOverrides="Height" Width="75" />
			<Button x:Name="btnNo" Width="75" Content="No" Click="btnNo_Click"/>
			<Button x:Name="btnCancel" Content="Cancel" Click="CancelButton_Click" Height="23"  Margin="0" d:LayoutOverrides="Height" Width="75" />
		</StackPanel>
		<Image x:Name="imgIcon" Margin="0,12,0,26" Source="info.png" Stretch="Fill">
			<Image.Effect>
				<DropShadowEffect Color="#FF434343"/>
			</Image.Effect>
		</Image>
	</Grid>
</basics:ChildWindow>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer Asset Technology Group
Egypt Egypt
I'm a professional components designer, web developer, UX engineer and 3d designer as well, I'm 4 years experienced .net software engineer and 7 years experienced 3d designer using 3D Max. I'm very interested in RIA technologies, prototyping and UX engineering.

Ahmed Said
Senior .Net Software Engineer

Comments and Discussions