Designing a PopUp in Silverlight is one of the common tasks in Silverlight Application Development.  Let’s see a code snippet that can help you do that in few steps.

XAML Code for PopUp appears like:

 

xmlns:d=http://schemas.microsoft.com/expression/blend/2008
xmlns:mc=http://schemas.openxmlformats.org/markup-compatibility/2006
mc:Ignorable=”d”
xmlns:dataInput=”clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.Input”
x:Class=”SilverlightPoC.PopupControl” d:DesignWidth=”722″  d:DesignHeight=”332″>
<UserControl.Resources>
<Style x:Key=”CloseButton” TargetType=”Button”>
<Setter Property=”HorizontalAlignment” Value=”Right”/>
<Setter Property=”Width” Value=”50″/>
<Setter Property=”Height” Value=”25″/>
<Setter Property=”Template”>
<Setter.Value>
<ControlTemplate>
<Border x:Name=”brd1″ Width=”22″ Height=”22″ CornerRadius=”15″>
<TextBlock x:Name=”txt1″ Foreground=”#222″ TextAlignment=”center” Text=”r” FontSize=”11″ VerticalAlignment=”center” FontFamily=”Webdings”/>
<Border.Background>
<RadialGradientBrush GradientOrigin=”.3, .3″>
<GradientStop Color=”#FFF” Offset=”.15″/>
<GradientStop Color=”#777″ Offset=”1″/>
</RadialGradientBrush>
</Border.Background>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Grid x:Name=”LayoutRoot”>
<Border CornerRadius=”30″>
<Border.Effect>
<DropShadowEffect BlurRadius=”10″ Color=”#FF290C0C” ShadowDepth=”15″/>
</Border.Effect>
<Border.Background>
<LinearGradientBrush EndPoint=”0.5,1″ StartPoint=”0.5,0″>
<GradientStop Color=”#FF83B5EB” Offset=”0″/>
<GradientStop Color=”#FFFFF3D6″ Offset=”1″/>
</LinearGradientBrush>
</Border.Background>
<StackPanel Margin=”5, 7, 0, 5″>
<!– Top Right Close Button –>
<Button x:Name=”btnClose” Content=”Close” Style=”{StaticResource CloseButton}” Click=”btnClose_Click”/>
<dataInput:Label x:Name=”lblTitle” Height=”37″ Margin=”30,0,297,0″ FontSize=”13.333″ Foreground=”#FF010C48″ Content=””/>
<Grid x:Name=”grdContent” Height=”244″ Margin=”28,0,33,0″/>
</StackPanel>
</Border>
</Grid>
</UserControl>
[/sourcecode]
[sourcecode language=’xml’]