Customizing the Popup Bubble With Styles
The Popup Bubble 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 Bubble styles, If you do not have a login you can register for free!
Example of how to Apply a Skin to the Popup Bubble
These styles are placed in your XAML and referred to using the Style property:
<Style TargetType="local:Bubble">
<Setter Property="FontFamily" Value="Arial" />
<Setter Property="FontSize" Value="14" />
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="#ffffff" Offset="0.0" />
<GradientStop Color="#eeeeee" Offset="1.0" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderBrush" Value="#888888" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:Bubble">
<Canvas x:Name="RootElement" Background="#00ffffff" Opacity="0">
<Canvas.Resources>
<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="ElementFadeOut" BeginTime="0">
<DoubleAnimation Storyboard.TargetName="RootElement" Storyboard.TargetProperty="Opacity" From="1.0" To="0.0" Duration="0:0:0.3"/>
</Storyboard>
</Canvas.Resources>
<Polygon x:Name="ElementBackground" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="{TemplateBinding BorderThickness}" Fill="{TemplateBinding Background}">
<Polygon.Effect>
<DropShadowEffect Opacity="0.6" />
</Polygon.Effect>
</Polygon>
<ContentPresenter />
</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.
Rate this page:
1 Star
2 Star
3 Star
4 Star
5 Star
16 Ratings / 3.0 Average