This post is an extension to one of the the earlier one in this NGTweet series which I did on Data Templates. In that post we saw how to represent data using template in Silverlight. Today I am going to use the feature of applying Styles for standardizing the visual elements.
Styles are very common in web development using HTML. They are normally implemented as CSS stylesheets. Similar feature was missing in desktop clients like VB6 or Winforms applications. WPF and Silverlight added support for Styles which behave much like the CSS styles. Windows Phone 7 is also based on XAML and supports styling out of the box.
Apply Styles to controls
The steps for applying Style to any control are pretty much same to that of applying a data template. Lets look at some code which is not using Style currently and refactor it to use Style so that we can get the context right.
All this while we have been using the inline Style for ListBox in our Mentions as well as the Timeline user controls. The following code block is what I am talking about
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalAlignment"
Value="Stretch" />
<Setter Property="HorizontalContentAlignment"
Value="Stretch" />
</Style>
</ListBox.ItemContainerStyle>
We are styling the ItemContainer of the ListBox control. This is the container for each and every item in the ListBox. We have set the HorizontalAlingment and HorizontalContentAlignment properties to value Stretch. Like in Data Templates, in case of Styles as well we get the Intellisence support which is quite helpful in assigning the valid values. This code is exactly the same in the two user controls I mentioned above. This is a potential code smell and we should try and avoid it as much as possible. (In the hindsight, I think sometimes its better to put some intentional code smells as they allow you to refactor the code and write an exclusive post about it 
We follow exactly the same steps we did for moving Data Templates from the user control to the resource dictionary. I’ll use the same resource dictionary to store the Styles as well, but if you want you can create a separate one for the Data Templates and Styles.
In case you are not aware how to create Resource Dictionary, refer to my earlier post. We’ll need the step 3 from this post as well to merge the resources into the main Application Resources. Assuming that the resource Dictionary is created we can move the Style definition to it.
<Style TargetType="ListBoxItem"
x:Key="ListBoxItemStyle">
<Setter Property="HorizontalAlignment"
Value="Stretch" />
<Setter Property="HorizontalContentAlignment"
Value="Stretch" />
</Style>
Note that we need to assign a unique Key for this Style element. This will be used to associate a Style with a control. If we specify the TargetType for the Style then this Style can be applied only to the controls of the target type. In the above case, we can apply this style only to ListBoxItem controls. So once we have defined the Style in the resource dictionary, we need to follow the 3rd step from the earlier post and merge the resource dictionary with the Applications resources.
As a final step we link the style to the control. So we delete the inline style for the ListBox.ItemContainerStyle and update the markup for ListBox to use the Style from resource dictionary as follows
<ListBox Width="400"
Height="500"
HorizontalAlignment="Center"
HorizontalContentAlignment="Stretch"
ItemContainerStyle="{StaticResource ListBoxItemStyle}"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ItemsSource="{Binding TweeterStatusViewModels}">
We bind the Style as a StaticResource to the ItemContainerStyle of ListBox using the key of Style. We can see the final output which is exactly the same as it was before
Conclusion
Advantages of Styles is similar to those of using CSS. We can modify the style in a central location and all the places where it is used will get impacted. The main difference between a data template and style is that the Style is applied to visual elements while a data template is applied to a data and its representation.
What I have demonstrated here is the explicit way of using Styles. We use the Key of the Style to associate the Style with a type of control. There is also an implicit way of applying Styles to controls. I’ll cover that in another post.
We can override the Styles at the control level for specific needs. This behaves the same way like in HTML where you can assign attributes to HTML elements even though they are defined in the CSS stylesheet.
Styles provide a great way for building consistent user interfaces using XAML. It also helps in collaborating the work between the designers and developers. Designers can concentrate on making the user interface appealing to the user while the developers can concentrate on building the application logic.
Hope you enjoyed reading this post. As always the complete working solution is available for download at Dropbox.
Until next time Happy Programming
No comments:
Post a Comment