Now Silverlight has become quite similar to WPF, it's become easier to change the visual appearance of the controls.With the beta 2 release of Silverlight we've found rich set of controls now to work with.In this demonstration of changing appearance of the controls,I just tried to apply what I learnt from WPF.Those useful styling and Templating of controls by using Style and ControlTemplate.
There's two classes that assist us in specifying the appearance of our controls in fact our applications are Style and ControlTemplate. By setting Property values of style we can apply the style to multiple instances of a control.Each control uses the property value that we set in the Style.To change the appearance beyond setting Control's properties,we can create ControlTemplate which defines the appearance and visual behavior of a control. Element that inherits from FrameworkElement can have a style applied to it.Elements that inherit from the Control have a ControlTemplate.
The Style class defined in System.Windows.The most important property of style is named Setters.The Setters property is of type SetterBaseCollection, which is a collection of SetterBase objects.Setter is the content property of Style.Setter basically associates a particular property with a value,and the two crucial properties of the Setter class are property of type Dependency property and Value of type object.The following Xaml syntax uses Setter property of Style to fix the Background of a Button and Foreground of a TextBlock :
<UserControl.Resources>
<Style TargetType="Button" x:Key="MyButtonStyle">
<Setter Property="Background" Value="Maroon"></Setter>
</Style>
<Style TargetType="TextBlock" x:Key="MyTextBlockStyle">
<Setter Property="Foreground" Value="Blue"></Setter>
</Style>
</UserControl.Resources>
Now apply this to our Button and TextBlock like the following Xaml.
<Grid>
<Button Width="86" Height="55" Style="{StaticResource MyButtonStyle}" >
<TextBlock Width="76" Height="55" Text="My Button" Style="{StaticResource MyTextBlockStyle}"></TextBlock>
</Button>
</Grid>
Here's the screen shot of the styled control :
You can also change the FontSize ,FontStyle to your like.Just set the property and it's value to the Style section to your linking.x:key attribute uniquely identifies elements that are created and referenced as resources and which exist within a ResourceDictionary which provides a dictionary that contains keyed resources used by components of a Silverlight based application.Each resource property element within each ResourceDictionary must have a unique value for the x:key,which servers as the uniqe key when values are retrieved from the ResourceDictionary.
Notice that I've defined the style in the UserControl's resources section to apply the styles here to all the Button's and TextBlock's.By defining styles in resources section they can be shared among multiple elements and controls.Styles defined in the Resources section of the Application object can be used throughout the application.The Resources property of application gets a collection of resources like Styles,Templates and Brushes.The value of the Resources property contains the ResourceDictionary that is set from XAML by using the Application.Resources property element.These resources can be used to support multiple themes across an application.The example below shows a style named myStyle for a Button and brush style for a TextBlock's Foreground which is defined as an application-scoped resource which can be shared across multiple UIs.
<Application xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="Silverlight2InAction.App"
>
<Application.Resources>
<Style x:Key="myStyle" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Margin="3">
<Rectangle x:Name="backGlow" Fill="#FFEE08" RadiusX="10" RadiusY="10"/>
<Rectangle x:Name="backDark" RadiusX="10" RadiusY="10">
<Rectangle.Fill>
<RadialGradientBrush GradientOrigin="0.9,0.9">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="Black" Offset="0.60"/>
<GradientStop Color="Transparent" Offset="0.2"/>
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle x:Name="mainButton" Fill="DarkBlue" Opacity="0.75"
RadiusX="10" RadiusY="10"/>
<Rectangle x:Name="mainButtonBorder" Stroke="SteelBlue"
StrokeThickness="2" RadiusX="10" RadiusY="10"/>
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center">
</ContentPresenter>
<Rectangle x:Name="buttonTopShine" Grid.ColumnSpan="3"
RadiusX="10" RadiusY="10">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1" Opacity="0.8">
<GradientStop Color="White" Offset="0"/>
<GradientStop Color="Transparent" Offset="0.3"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle x:Name="buttonholers" Opacity="0" RadiusX="10" RadiusY="10">
<Rectangle.Fill>
<LinearGradientBrush>
<GradientStop Color="White" Offset="0"/>
<GradientStop Color="White" Offset="0.1"/>
<GradientStop Color="Transparent" Offset="0.6"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="brushStyle" TargetType="TextBlock">
<Setter Property="Foreground">
<Setter.Value>
<LinearGradientBrush>
<GradientStop Color="LightBlue" Offset="0"></GradientStop>
<GradientStop Color="SteelBlue" Offset="1"></GradientStop>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Style>
</Application.Resources>
</Application>
In the above Xaml two styles created one for Button which defined as myStyle and another one is brushStyle to change the Foreground of TextBlock.The Foreground of the TextBlock has been styled by specifying which property we want to stylize.Here assigned setter Property as Foreground.The Button's look is based on ControlTemplate.The shape of the button has been customized by creating rounded Rectangle.The ControlTemplate has a Button as it's target type.Since i need multiple things I constructed ControlTemplate to hold a Grid layout and have the Grid layout hold multiple children.Inside the Grid I've created a rounded rectangle to accomplish the glow with a bright yellow Color.The next Rectangle I created for dark effect by using RadialGradient by setting it's start to black and then to transparent.To get a slightly bigger area I used two gradient stops as Black at first before the gradient drops off.To put it towards the bottom right corner I've set the origin to 0.9 and 0.9.The next rectangle is named mainButton.To see the glow of the dark highlights behind it I tried to make this transculent by setting it's opacity to 0.75 .for the button border I created the next Rectangle named mainButtonBorder here I set the stroke to SteelBlue to get the desired border color of my Button.After this I defined Rectangle named buttonTopShine for the shining gradient effect on the top.You can play with the GradientStops of this which has been set to White and Transparent to see the effect.It makes the nice glow at the top of the button. It's a rounded rectangle with a gradient, the gradient is linear.The last one is buttonHoverGlow which I created for hovering effect.Below is the Xaml to set the Style on the desired Control.
<Grid>
<Button Style="{StaticResource myStyle}" Width="300" Height="175"
MouseEnter="Button_MouseEnter" x:Name="button" ></Button>
<TextBlock Text="My Styled Button" TextAlignment="Center" FontSize="25"
Style="{StaticResource brushStyle}" Width="280" Height="140"
Margin="190,90,200,0" FontStyle="Italic">
</TextBlock>
</Grid>
To get some hovering effect I've used Expression Blend 2.5 March 2008 Preview.
I've just set the opacity of the button by creating a new Storyboard and marked on the timeline to reduce the opacity from 100 to 76.
This settings of timeline created an Xaml in the UserControl.Resources section like the following :
<UserControl.Resources>
<Storyboard x:Name="Storyboard1">
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="button" Storyboard.TargetProperty="(UIElement.Opacity)" BeginTime="00:00:00">
<SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0.985"/>
<SplineDoubleKeyFrame KeyTime="00:00:01" Value="0.755"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
To wire the event's of the button I've just called the Storyboard's begin method in the Button's MouseEnter event.
void Button_MouseEnter(object sender, MouseEventArgs e)
{
Storyboard1.Begin();
}
Now let's run the application and see what happens.
After entering the mouse over the button I got the result something shown above.
This was my first experience after releasing of Silverlight 2.0 Beta.I've just started to learn Silverlight.Hope you've enjoyed and I'm expecting suggestion and comments to give my best in my next post.
Thanks.
