Customizing the Popup Dialog With Styles
The Popup Dialog control can be skinned using the standard Silverlight 2 method of setting Styles in the App.xaml file of your Silverlight project.
You need to login to Download the default Popup Dialog styles, If you do not have a login you can register for free!
Example of how to Apply a Skin to the Popup Dialog
These styles are placed in your XAML and referred to using the Style property:
<Style TargetType="local:Dialog">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:Dialog">
<Canvas x:Name="RootElement" Background="#00ffffff" Opacity="0">
<Canvas.Resources>
<Storyboard x:Name="ElementFadeOut" BeginTime="0">
<DoubleAnimation Storyboard.TargetName="RootElement" Storyboard.TargetProperty="Opacity" From="1.0" To="0.0" Duration="0:0:0.3"/>
</Storyboard>
<Storyboard x:Name="ElementFadeIn" BeginTime="0">
<DoubleAnimation Storyboard.TargetName="RootElement" Storyboard.TargetProperty="Opacity" From="0.0" To="1.0" Duration="0:0:0.3"/>
</Storyboard>
<Storyboard x:Name="ElementToggleExpand" BeginTime="0">
<DoubleAnimation Storyboard.TargetName="ElementShadow" Storyboard.TargetProperty="Width"/>
<DoubleAnimation Storyboard.TargetName="ElementBackground" Storyboard.TargetProperty="Width"/>
<DoubleAnimation Storyboard.TargetName="ElementTopBar" Storyboard.TargetProperty="Width"/>
<DoubleAnimation Storyboard.TargetName="ElementCross" Storyboard.TargetProperty="(Canvas.Left)"/>
<DoubleAnimation Storyboard.TargetName="ElementRightContent" Storyboard.TargetProperty="(Canvas.Left)"/>
<DoubleAnimation Storyboard.TargetName="ElementApply" Storyboard.TargetProperty="(Canvas.Left)"/>
<DoubleAnimation Storyboard.TargetName="ElementClose" Storyboard.TargetProperty="(Canvas.Left)"/>
<DoubleAnimation Storyboard.TargetName="ElementCancel" Storyboard.TargetProperty="(Canvas.Left)"/>
<DoubleAnimation Storyboard.TargetName="ElementNo" Storyboard.TargetProperty="(Canvas.Left)"/>
<DoubleAnimation Storyboard.TargetName="ElementOK" Storyboard.TargetProperty="(Canvas.Left)"/>
<DoubleAnimation Storyboard.TargetName="ElementYes" Storyboard.TargetProperty="(Canvas.Left)"/>
</Storyboard>
</Canvas.Resources>
<Rectangle x:Name="ElementShadow" Canvas.Top="1" Canvas.Left="1" Fill="#888888" StrokeThickness="0.5" Stroke="#888888" Opacity="0.2" RadiusX="4" RadiusY="4" />
<Rectangle x:Name="ElementBackground" StrokeThickness="2" Stroke="#888888" RadiusX="4" RadiusY="4" Opacity="0.95" >
<Rectangle.Fill>
<RadialGradientBrush GradientOrigin="0.9,0.9" Center="0.5,0.5" RadiusX="1.0" RadiusY="1.0">
<GradientStop Color="#f0f0f0" Offset="0.0" />
<GradientStop Color="#e0e0e0" Offset="0.6" />
<GradientStop Color="#f0f0f0" Offset="1.0" />
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Canvas x:Name="ElementWhole" Canvas.Left="2" Canvas.Top="2">
<Canvas.Clip>
<RectangleGeometry x:Name="ElementClipping" />
</Canvas.Clip>
<Rectangle x:Name="ElementTopBar" Canvas.Left="1" Canvas.Top="1" Height="21" StrokeThickness="0.5" Stroke="#7A8295" RadiusX="3" RadiusY="3">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="#626C88" Offset="0.0" />
<GradientStop Color="#393F4D" Offset="0.5" />
<GradientStop Color="#151516" Offset="0.5" />
<GradientStop Color="#3C476F" Offset="1.0" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock x:Name="ElementTitle" Canvas.Left="6" Canvas.Top="4" FontSize="12" FontFamily="Arial" Text="" Foreground="#ffffff" />
<Button x:Name="ElementCross" Canvas.Top="2" Canvas.Left="100" Width="17" Height="18">
<Button.Content>
<Polygon Points="0,0 1,0 4,3 5,3 8,0 9,0 9,1 6,4 6,5 9,8 9,9 8,9 5,6 4,6 1,9 0,9 0,8 3,5 3,4 0,1 0,0" StrokeThickness="0" Fill="#313131" />
</Button.Content>
</Button>
<ContentControl Canvas.Left="1" Canvas.Top="22" Canvas.ZIndex="1" Content="{TemplateBinding Content}"/>
<Canvas x:Name="ElementRight" Canvas.Top="22" Canvas.ZIndex="1">
<Canvas.Clip>
<RectangleGeometry x:Name="ElementRightClipping" />
</Canvas.Clip>
<ContentControl x:Name="ElementRightContent" Content="{TemplateBinding ContentRight}"/>
</Canvas>
<Button x:Name="ElementApply" Height="24" Tag="apply" />
<Button x:Name="ElementClose" Height="24" Tag="close" />
<Button x:Name="ElementCancel" Height="24" Tag="cancel" />
<Button x:Name="ElementNo" Height="24" Tag="no" />
<Button x:Name="ElementOK" Height="24" Tag="ok" />
<Button x:Name="ElementYes" Height="24" Tag="yes" />
</Canvas>
</Canvas>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
As you can see, styling is a powerful method of customizing the controls to suite the look and feel of your Silverlight application.