Posted by: Zeeshan Amjad | April 24, 2012

Define style for ToolBar control


ToolBar in WPF has a special feature that it already defines some styles for some controls and create a resource key for it. There are eight different resource key are defined for different controls as shown by this class diagram of ToolBar class.

ToolBar

As shown in the class diagram, resource key is defined for Button, CheckBox, ComboBox, Menu, RadioButton, Seperator, TextBox and ToggleButton. Here we are going to make a program that override few resource key to apply the style for the toolbar controls.

One important thing is that we have to define the style with the appropriate name to override the existing styles.

For example here is a style defined for CheckBox.

Code Snippet
<Style x:Key="{x:Static ToolBar.CheckBoxStyleKey}" TargetType="{x:Type CheckBox}">
    <Setter Property="FontWeight" Value="Bold"/>
    <Setter Property="Foreground" Value="Red"/>
</Style>

 

Similarly we can define style for the controls defined in ToolBar class. Here is our program to demonstrate this concept.

Code Snippet
<Window x:Class="WpfToolbar.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml&quot;
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <Style x:Key="{x:Static ToolBar.ButtonStyleKey}" TargetType="{x:Type Button}">
            <Setter Property="Background" Value="AliceBlue"/>
            <Setter Property="Foreground" Value="Navy"/>
            <Setter Property="BorderBrush" Value="Brown"/>
            <Setter Property="BorderThickness" Value="3"/>
            <Setter Property="Width" Value="65"/>
            <Setter Property="Margin" Value="2"/>
        </Style>
        <Style x:Key="{x:Static ToolBar.ComboBoxStyleKey}" TargetType="{x:Type ComboBox}">
            <Setter Property="Margin" Value="2"/>
            <Setter Property="Foreground" Value="Green"/>
        </Style>
        <Style x:Key="{x:Static ToolBar.CheckBoxStyleKey}" TargetType="{x:Type CheckBox}">
            <Setter Property="FontWeight" Value="Bold"/>
            <Setter Property="Foreground" Value="Red"/>
        </Style>
    </Window.Resources>
    <DockPanel>
        <ToolBar DockPanel.Dock="Top" Name="ToolBar1" HorizontalAlignment="Left">
            <Button>Zoo</Button>
            <Button>Park</Button>
            <Button>Meuseum</Button>
            <Button>Aquarium</Button>
            <Button>Theater</Button>
            <ComboBox SelectedIndex="0">
                <ComboBoxItem>Maryland</ComboBoxItem>
                <ComboBoxItem>California</ComboBoxItem>
                <ComboBoxItem>Texas</ComboBoxItem>
                <ComboBoxItem>Washington</ComboBoxItem>
            </ComboBox>
            <CheckBox>Visited</CheckBox>
        </ToolBar>
        <TextBlock/>
    </DockPanel>
</Window>

 

Here is an output of this program.

ToolBarControlsStyle

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: