Posted by: Zeeshan Amjad | March 16, 2010

Using different framework elements in Style


We saw how to apply style in our program here. We also see how to use the style based on existing style here. But in all of the examples, we make style on some specific user interface element. But if we want to apply style on more than one UI element then we can define the name of the class with its property. Here is a piece of XAML code to define style with class name and its properties.

  1: <Window.Resources>
  2: 	<Style x:Key="AllStyles">
  3: 		<Setter Property="Border.Height" Value="35"/>
  4: 		<Setter Property="Border.BorderBrush" Value="Black"/>
  5: 		<Setter Property="Border.BorderThickness" Value="2"/>
  6: 		<Setter Property="Border.CornerRadius" Value="15"/>
  7: 		<Setter Property="Border.Background" Value="LightBlue"/>
  8: 		<Setter Property="Button.Margin" Value="5"/>
  9: 		<Setter Property="Button.FontSize" Value="16"/>
 10: 		<Setter Property="Rectangle.Fill" Value="Wheat"/>
 11: 		<Setter Property="Rectangle.Height" Value="35"/>
 12: 	</Style>
 13: </Window.Resources>
 14: 

Here we define the properties with class name such as “Border.Height”, “Button.FontSize” etc. Now style will apply depends on the class name. But there is one important thing to remember. If any control has another control in its visual tree then it will set its properties too. Such as button as border in its visual tree, so it will automatically set  background color of button too, although we don’t select it automatically. If we set background property of button in this style, then whichever comes latter will override the other property. It means that although it is very useful feature of WPF, but it should be used with care, specially when we are not aware of Visual tree of any UI element.

Here is complete XAML of the program.

  1: <Window x:Class="WpfStyle.Window1"
  2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4:     Title="Style" Height="300" Width="300">
  5:     <Window.Resources>
  6:         <Style x:Key="AllStyles">
  7:             <Setter Property="Border.Height" Value="35"/>
  8:             <Setter Property="Border.BorderBrush" Value="Black"/>
  9:             <Setter Property="Border.BorderThickness" Value="2"/>
 10:             <Setter Property="Border.CornerRadius" Value="15"/>
 11:             <Setter Property="Border.Background" Value="LightBlue"/>
 12:             <Setter Property="Button.Margin" Value="5"/>
 13:             <Setter Property="Button.FontSize" Value="16"/>
 14:             <Setter Property="Rectangle.Fill" Value="Wheat"/>
 15:             <Setter Property="Rectangle.Height" Value="35"/>
 16:         </Style>
 17:     </Window.Resources>
 18:     <StackPanel>
 19:         <Button Style="{StaticResource AllStyles}" Content="Button 1"/>
 20:         <Button Style="{StaticResource AllStyles}" Content="Button 2"/>
 21:         <Rectangle Style="{StaticResource AllStyles}"/>
 22:         <Border Style="{StaticResource AllStyles}"/>
 23:     </StackPanel>
 24: </Window>
 25: 

Here is the output of the program.

StyleOutput

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

Categories

%d bloggers like this: