Software Architecture-Silverlight 4-New Feature-Implicit Style

Silverlight 3 Style:
In Silverlight 3, style was supported as by specifying the Style property in the control.
One Style can be based on other Style as shown the code below.

<Grid x:Name="LayoutRoot" Background="White">
        <Grid.Resources>
            <Style x:Key="ButtonStyle" TargetType="Button">
                <Setter Property="Foreground" Value="Black" />
                <Setter Property="Background" Value="Red" />                
            </Style>
            <Style x:Key="NewButtonStyle" TargetType="Button" BasedOn="{StaticResource ButtonStyle}">
                <Setter Property="FontSize" Value="20" />
                <Setter Property="FontFamily" Value="Times New Roman"></Setter>
            </Style>

        </Grid.Resources>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="500"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="100" ></RowDefinition>
            <RowDefinition Height="100" ></RowDefinition>
            <RowDefinition Height="100" ></RowDefinition>
        </Grid.RowDefinitions>
        <Button Name="btnClick" Grid.Column="0" Grid.Row="0" Width="300" Height="40" Content="Hello Sarwar" Style="{StaticResource ButtonStyle}" ></Button>
        <Button Name="btnClick2" Grid.Column="0" Grid.Row="1" Width="300" Height="40" Content="Hello Sarwar" Style="{StaticResource NewButtonStyle}" ></Button>
        <Button Name="btnClick3" Grid.Column="0" Grid.Row="2" Width="300" Height="40" Content="Hello Sarwar"></Button>
    </Grid>

So Output will be as:


First button is attached with style named “ButtonStyle”. Second button is attached with style named “NewButtonStyle” which is based on parent style named “ButtonStyle”.
Third button is not attached to any style, so it is with any style.

Sliverlight 4 Style:
With Silverlight 4, now we have implicit style feature which provide functionality to style control by specifying the TargetType property.

So Style for Button control can be defined as:

<Grid x:Name="LayoutRoot" Background="White">        
        <Grid.Resources>
            <Style TargetType="Button" >
                <Setter Property="Foreground" Value="Black" />
                <Setter Property="Background" Value="Red" />
                <Setter Property="FontSize" Value="15" />
                <Setter Property="FontFamily" Value="Times New Roman"></Setter>
            </Style>
        </Grid.Resources>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="600"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="100" ></RowDefinition>
            <RowDefinition Height="100" ></RowDefinition>
            <RowDefinition Height="100" ></RowDefinition>
        </Grid.RowDefinitions>
        <Button Name="btnClick" Grid.Column="0" Grid.Row="1" Width="300" Height="40" Content="Hello Sarwar"></Button>
    </Grid>

It will apply to all the Buttons inside this Grid scope and will look like as:


If Style tag is added with x:Key=”MyStyle”, then implicit style feature will no longer work.

WPF was having this implicit style feature previously(Before WPF 4.0), but now Silverlight 4 also has this feature.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: