Designing a PopUp in Silverlight

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']

   

   
       
           
       
       
                           
               
                   
       
           
           
   

[/sourcecode]

C# PopUp code appears like:

[sourcecode language='csharp']

public partial class PopupControl : UserControl
    {
        public event EventHandler PopUpClosed;
        public PopupControl()
        {
            // Required to initialize variables
            InitializeComponent();
        }

        private void btnClose_Click(object sender, System.Windows.RoutedEventArgs e)
        {
            Visibility = Visibility.Collapsed;
            PopUpClosed(sender, new EventArgs());
        }

        public object Title
        {
            get { return lblTitle.Content; }
            set { lblTitle.Content = value; }
        }
    }

[/sourcecode]

XAML code that consumes this PopUp:

[sourcecode language='xml']

[/sourcecode]

 
You can directly embed this PopUp in your application and get it going :)