NGTweet Part 14–BasedOn Style in Silverlight

The two previous posts have been dedicated to styling in Silverlight. This is another one which is probably going to be the shortest of all the ones related to styling. We saw how to apply the explicit styles or named styles in the Part 12 of the NGTweet series. And in Part 13 we saw how we can use Implicit Styles to apply styles to controls without specifying any key.

This is not a third approach to apply styles in Silverlight. But using this approach we can make use of existing explicit Styles and extend them further. Although not completely related, this is much more like overriding a base class method in an object oriented language .

Apply BasedOn style

Without any further delay lets see how we can make use of this feature to our advantage. This is the familiar sight of the NGTweet application screen.

We have the border applied to each of the item in the listbox under both the timeline (AllFriends) and Mentions views. It uses the same style for both the borders. This is the Style definition for the border applied to items in the listbox.

    <Style x:Key="BorderStyle"
           TargetType="Border">
        <Setter Property="Margin"
                Value="2" />
        <Setter Property="Padding"
                Value="3" />
        <Setter Property="BorderBrush"
                Value="Black" />
        <Setter Property="CornerRadius"
                Value="5" />
        <Setter Property="BorderThickness"
                Value="1" />
    </Style>

Lets modify the border on the left hand side for All Friends. We’ll add a shadow effect to this border. We don’t want to change settings like Margin and Padding which were set earlier. In most cases we would just copy the existing style and add the new elements or override the ones we are interested in. But the problem comes when we need to change any of the properties. We’ll have to change in multiple places.

Instead of that we can extend the existing style by adding or modifying only the properties we wish to change. So to add shadow to the border we can add following markup

    <Style BasedOn="{StaticResource BorderStyle}"
           TargetType="Border"
           x:Key="ThickBorderStyle">
        <Setter Property="BorderThickness"
                Value="1,1,4,4" />
        <Setter Property="BorderBrush">
            <Setter.Value>
                <LinearGradientBrush>
                    <GradientStop Color="#ccc"
                                  Offset="0" />
                    <GradientStop Color="#ddd"
                                  Offset="1" />
                </LinearGradientBrush>
            </Setter.Value>
        </Setter>
    </Style>

The style definition is exactly the same like we define in case of implicit styles or explicit style. The only exception is the addition of BasedOn attribute which uses a StaticResource to refer to an existing style. We have overridden the BorderThickness and added a LinearGradientBrush to give the shadow effect.

To apply this new style we go to the timeline view’s markup and update the style for the border within the data template as

        <Border Style="{StaticResource ThickBorderStyle}">

We can run the application and see the effect of this change.

We can see the difference in the border for the timeline tweets and the mentions tweets.

Conclusion

Styles is one of the most powerful feature of WPF and Silverlight. Prior to this it was very difficult for Winforms developers to apply same settings for all the controls across application. Imagine doing this in a Winforms 2.0 application. We’ll have to repeatedly apply same settings in the property window for each control.  Styles are very easy to use and extend as we saw in this example. Web developers had success by means of CSS stylesheets. But the features offered by Styles in WPF and Silverlight are powerful than in CSS. 

As always I have uploaded the complete working solution to Dropbox.

Until next time Happy Programming

Share: