Arguably the most celebrated feature in WPF is the ability to give any user interface element a radically different look without having to give up all of the built-in functionality that it provides. HTML lacks this power, which is the reason most websites use images to represent buttons rather than “real buttons.” Of course, it’s pretty easy to simulate a button’s behavior with an image in HTML, but what if you want to give a completely different look to a SELECT element (HTML’s version of ComboBox)? It’s a lot of work if you want to do more than change simple properties (such as its foreground and background colors)
WPF’s restyling support:
| Styles |
| A simple mechanism for separating property values from user interface elements (similar to the relationship between Cascading Style Sheets [CSS] and HTML). They’re also the foundation for applying the other mechanisms in this chapter. |
| Templates |
| Powerful objects that most people are really referring to when they talk about “restyling” in WPF |
| Skins |
| Application-specific collections of styles and/or templates, typically with the ability to be replaced dynamically |
| Theme |
| Visual characteristics of the host operating system, with potential customizations by the end user |
Why you need to Style?
Consider the following example
We want to make this course to each button as appear in the following windows
All what you need to do the following in XAML:-
You would need to duplicate these identical assignments on all three Buttons.
<StackPanel Orientation="Horizontal">
<Button FontSize="22" Background="Purple" Foreground="White"
Height="50" Width="50" RenderTransformOrigin=".5,.5">
<Button.RenderTransform>
<RotateTransform Angle="10"/>
Button.RenderTransform>
1
Button>
<Button FontSize="22" Background="Purple" Foreground="White"
Height="50" Width="50" RenderTransformOrigin=".5,.5">
<Button.RenderTransform>
<RotateTransform Angle="10"/>
Button.RenderTransform>
2
Button>
<Button FontSize="22" Background="Purple" Foreground="White"
Height="50" Width="50" RenderTransformOrigin=".5,.5">
<Button.RenderTransform>
<RotateTransform Angle="10"/>
Button.RenderTransform>
3
Button>
StackPanel>
But!!
§ With a Style, you can add a level of indirection—setting them in one place and pointing each Button to this new element.
§ This is nice for several reasons, such as having only one spot to change if you later have second thoughts about rotating the Buttons or if you want to change their Background.
§ Defining a Style as a resource also gives you all the flexibility that the resource mechanism provides. For example, you could define one version of buttonStyle at the application level, but override it with a different Style (still with a key of buttonStyle) in an individual Window’s Resources collection
XAML using Style
<StackPanel Orientation="Horizontal">
<StackPanel.Resources>
<Style x:Key="buttonStyle">
<Setter Property="Button.FontSize" Value="22"/>
<Setter Property="Button.Background" Value="Purple"/>
<Setter Property="Button.Foreground" Value="White"/>
<Setter Property="Button.Height" Value="50"/>
<Setter Property="Button.Width" Value="50"/>
<Setter Property="Button.RenderTransformOrigin" Value=".5,.5"/>
<Setter Property="Button.RenderTransform">
<Setter.Value>
<RotateTransform Angle="10"/>
Setter.Value>
Setter>
Style>
StackPanel.Resources>
<Button Style="{StaticResource buttonStyle}">1Button>
<Button Style="{StaticResource buttonStyle}">2Button>
<Button Style="{StaticResource buttonStyle}">3Button>
StackPanel>
Hint
Styles can even inherit from one another! The following Style adds bold text to
buttonStyle.
<Style x:Key="buttonStyleWithBold" BasedOn="{StaticResource buttonStyle}">
<Setter Property="Button.FontWeight" Value="Bold"/>
<Setter Property="Button.Background" Value="Red"/> Style>
And to apply the inherited Style to button
<Button Style="{StaticResource buttonStyleWithBold}">4Button>
Sharing Styles
Although you could set an element’s Style property directly in its XAML definition (using property element syntax), the whole point of using a Style is to share it among multiple elements so we can make Sharing among Heterogeneous Elements with the same style.
<StackPanel Orientation="Horizontal">
<StackPanel.Resources>
<Style x:Key="controlStyle">
<Setter Property="Control.FontSize" Value="22"/>
<Setter Property="Control.Background" Value="Green"/>
<Setter Property="Control.Foreground" Value="White"/>
<Setter Property="Control.Height" Value="100"/>
<Setter Property="Control.Width" Value="100"/>
<Setter Property="Control.RenderTransformOrigin" Value=".5,.5"/>
<Setter Property="Control.RenderTransform">
<Setter.Value>
<RotateTransform Angle="10"/>
Setter.Value>
Setter>
Style>
StackPanel.Resources>
<Button Style="{StaticResource controlStyle}">1Button>
<ComboBox Style="{StaticResource controlStyle}">
<ComboBox.Items>2ComboBox.Items>
ComboBox>
<Expander Style="{StaticResource controlStyle}" Content="3"/>
<TabControl Style="{StaticResource controlStyle}">
<TabControl.Items>4TabControl.Items>
TabControl>
<ToolBar Style="{StaticResource controlStyle}">
<ToolBar.Items>5ToolBar.Items>
ToolBar>
<InkCanvas Style="{StaticResource controlStyle}"/>
<TextBox Style="{StaticResource controlStyle}" Text="7"/>
StackPanel>
Note
You don’t need to worry if a Style is applied to an element that doesn’t have all the listed dependency properties; the properties that exist are set and the ones that don’t are ignored.
Restricting the Use of Styles
If you want to enforce that a Style can only be applied to a particular type, you can set its TargetType property accordingly.
<Style x:Key="buttonStyle" TargetType="{x:Type Button}">
<Setter Property="Button.FontSize" Value="22"/>
<Setter Property="Button.Background" Value="Purple"/>
<Setter Property="Button.Foreground" Value="White"/>
<Setter Property="Button.Height" Value="50"/>
<Setter Property="Button.Width" Value="50"/>
<Setter Property="Button.RenderTransformOrigin" Value=".5,.5"/>
<Setter Property="Button.RenderTransform">
<Setter.Value>
<RotateTransform Angle="10"/>
Setter.Value>
Setter>
Style>
Note
Any attempt to apply this Style to a non-Button generates a compile-time error.
Therefore, TargetType=”{x:Type Control}” could be applied to the Style
0 التعليقات:
إرسال تعليق