Designing a PopUp in Silverlight

1 minute read

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 :)

Updated: