Click here to Skip to main content
Click here to Skip to main content
Add your own
alternative version

WPF: A Beginner's Guide - Part 6 of n

, 5 Apr 2008
An introduction into WPF Styles and Templates.
part6_styles_and_templates.zip
Part6_Styles_And_Templates
Styles_And_Templates
Beatriz Costa Planet ListBox
bin
Debug
Styles_And_Templates.exe
Styles_And_Templates.vshost.exe
Styles_And_Templates.vshost.exe.manifest
Data
Images
2moons_2.gif
DataLogo.png
earglobe.gif
jupglobe.gif
marglobe.gif
merglobe.gif
nepglobe.gif
planetx.jpg
plutoch_2.gif
sun.jpg
uraglobe.gif
venglobe.gif
obj
Debug
Bea Costa Planet ListBox
Beatriz Costa Planet ListBox
Templates
TempPE
Properties
Settings.settings
part6_styles_and_templates_vb.zip
Part6_Styles_And_Templates_VB
Part6_Styles_And_Templates_VB
Beatriz Costa Planet ListBox
bin
Debug
Part6_Styles_And_Templates.exe
Part6_Styles_And_Templates.vshost.exe
Part6_Styles_And_Templates.vshost.exe.manifest
Data
Images
2moons_2.gif
DataLogo.png
earglobe.gif
jupglobe.gif
marglobe.gif
merglobe.gif
nepglobe.gif
planetx.jpg
plutoch_2.gif
sun.jpg
uraglobe.gif
venglobe.gif
My Project
MyExtensions
Settings.settings
obj
Debug
Beatriz Costa Planet ListBox
TempPE
Part6_Styles_And_Templates_VB.vbproj.user
<Window x:Class="Styles_And_Templates.VariousControlTemplatesWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero"
    Title="Styles_And_Templates" Height="700" Width="700">

    <!-- Window Level Resources-->
    <Window.Resources>

        <!-- Brushses -->
        <LinearGradientBrush x:Key="buttonNormalBrush" StartPoint="0.5,0" EndPoint="0.5,1">
            <GradientStop Offset="0" Color="Pink"/>
            <GradientStop Offset="1" Color="Crimson"/>
        </LinearGradientBrush>

        <LinearGradientBrush x:Key="buttonPressedBrush" StartPoint="0.5,0" EndPoint="0.5,1">
            <GradientStop Offset="0" Color="Pink"/>
            <GradientStop Offset="1" Color="DarkRed"/>
        </LinearGradientBrush>

        <LinearGradientBrush x:Key="buttonDisabledBrush" StartPoint="0.5,0" EndPoint="0.5,1">
            <GradientStop Offset="0" Color="White"/>
            <GradientStop Offset="1" Color="DarkGray"/>
        </LinearGradientBrush>

        <LinearGradientBrush x:Key="ButtonNormalBackground" EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="#F3F3F3" Offset="0"/>
            <GradientStop Color="#EBEBEB" Offset="0.5"/>
            <GradientStop Color="#DDDDDD" Offset="0.5"/>
            <GradientStop Color="#CDCDCD" Offset="1"/>
        </LinearGradientBrush>

        <LinearGradientBrush x:Key="TabItemHotBackground" EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="#EAF6FD" Offset="0.15"/>
            <GradientStop Color="#D9F0FC" Offset=".5"/>
            <GradientStop Color="#BEE6FD" Offset=".5"/>
            <GradientStop Color="#A7D9F5" Offset="1"/>
        </LinearGradientBrush>

        <SolidColorBrush x:Key="TabControlNormalBorderBrush" Color="#8C8E94"/>
        <SolidColorBrush x:Key="TabItemSelectedBackground" Color="#F9F9F9"/>
        <SolidColorBrush x:Key="TabItemHotBorderBrush" Color="#3C7FB1"/>
        <SolidColorBrush x:Key="TabItemDisabledBackground" Color="#F4F4F4"/>
        <SolidColorBrush x:Key="TabItemDisabledBorderBrush" Color="#FFC9C7BA"/>

        <!-- Close Button Template (for Button used on TabItems Header) -->
        <ControlTemplate x:Key="closeButtonTemplate"  TargetType="{x:Type Button}">
            <Border x:Name="bgBorder" Background="{TemplateBinding Background}" Width="10" Height="10" BorderThickness="0.5">
                <Border.BorderBrush>
                    <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                        <GradientStop Offset="0" Color="Red"/>
                        <GradientStop Offset="1" Color="Black"/>
                    </LinearGradientBrush>
                </Border.BorderBrush>
                <Canvas>
                    <Line X1="2" Y1="2" X2="7" Y2="7" Stroke="White" StrokeThickness="1.5"/>
                    <Line X1="7" Y1="2" X2="2" Y2="7" Stroke="White" StrokeThickness="1.5"/>
                </Canvas>
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="BitmapEffect">
                        <Setter.Value>
                            <OuterGlowBitmapEffect/>
                        </Setter.Value>
                    </Setter>
                </Trigger>
                <Trigger Property="IsPressed" Value="True">
                    <Setter TargetName="bgBorder" Property="Background" 
                            Value="{StaticResource buttonPressedBrush}"/>
                </Trigger>
                <Trigger Property="IsEnabled" Value="False">
                    <Setter TargetName="bgBorder" Property="Background" 
                            Value="{StaticResource buttonDisabledBrush}"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>

        <!-- Tab Item Focused Visual -->
        <Style x:Key="TabItemFocusVisual">
            <Setter Property="Control.Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Rectangle SnapsToDevicePixels="true" Stroke="Black" StrokeDashArray="1 2" StrokeThickness="1" Margin="3,3,3,1"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <!-- Tab Item Style -->
        <Style x:Key="TabItemStyle1" TargetType="{x:Type TabItem}">
            <Setter Property="FocusVisualStyle" Value="{StaticResource TabItemFocusVisual}"/>
            <Setter Property="Foreground" Value="Black"/>
            <Setter Property="Padding" Value="6,1,6,1"/>
            <Setter Property="BorderBrush" Value="{StaticResource TabControlNormalBorderBrush}"/>
            <Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/>
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="VerticalContentAlignment" Value="Stretch"/>
            <Setter Property="HeaderTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="{Binding}"/>
                                <Button x:Name="btnClose" Margin="10,3,3,3" 
                                        Template="{StaticResource closeButtonTemplate}" 
                                        Background="{StaticResource buttonNormalBrush}" 
                                        IsEnabled="True"/>
                        </StackPanel>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TabItem}">
                        <Grid SnapsToDevicePixels="true" Margin="0,5,0,0">
                            <Border x:Name="Bd" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1,1,1,0" CornerRadius="10,10,0,0" Padding="{TemplateBinding Padding}">
                                <ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" HorizontalAlignment="{Binding Path=HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" x:Name="Content" VerticalAlignment="{Binding Path=VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" ContentSource="Header" RecognizesAccessKey="True"/>
                            </Border>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="true">
                                <Setter Property="Background" TargetName="Bd" Value="{StaticResource TabItemHotBackground}"/>
                            </Trigger>
                            <Trigger Property="IsSelected" Value="true">
                                <Setter Property="Panel.ZIndex" Value="1"/>
                                <Setter Property="Background" TargetName="Bd" Value="{StaticResource TabItemSelectedBackground}"/>
                            </Trigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsSelected" Value="false"/>
                                    <Condition Property="IsMouseOver" Value="true"/>
                                </MultiTrigger.Conditions>
                                <Setter Property="BorderBrush" TargetName="Bd" 
                                        Value="{StaticResource TabItemHotBorderBrush}"/>
                            </MultiTrigger>
                            <Trigger Property="TabStripPlacement" Value="Bottom">
                                <Setter Property="BorderThickness" TargetName="Bd" Value="1,0,1,1"/>
                            </Trigger>
                            <Trigger Property="TabStripPlacement" Value="Left">
                                <Setter Property="BorderThickness" TargetName="Bd" Value="1,1,0,1"/>
                            </Trigger>
                            <Trigger Property="TabStripPlacement" Value="Right">
                                <Setter Property="BorderThickness" TargetName="Bd" Value="0,1,1,1"/>
                            </Trigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsSelected" Value="true"/>
                                    <Condition Property="TabStripPlacement" Value="Top"/>
                                </MultiTrigger.Conditions>
                                <Setter Property="Margin" Value="-2,-2,-2,-1"/>
                                <Setter Property="Margin" TargetName="Content" Value="0,0,0,1"/>
                            </MultiTrigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsSelected" Value="true"/>
                                    <Condition Property="TabStripPlacement" Value="Bottom"/>
                                </MultiTrigger.Conditions>
                                <Setter Property="Margin" Value="-2,-1,-2,-2"/>
                                <Setter Property="Margin" TargetName="Content" Value="0,1,0,0"/>
                            </MultiTrigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsSelected" Value="true"/>
                                    <Condition Property="TabStripPlacement" Value="Left"/>
                                </MultiTrigger.Conditions>
                                <Setter Property="Margin" Value="-2,-2,-1,-2"/>
                                <Setter Property="Margin" TargetName="Content" Value="0,0,1,0"/>
                            </MultiTrigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsSelected" Value="true"/>
                                    <Condition Property="TabStripPlacement" Value="Right"/>
                                </MultiTrigger.Conditions>
                                <Setter Property="Margin" Value="-1,-2,-2,-2"/>
                                <Setter Property="Margin" TargetName="Content" Value="1,0,0,0"/>
                            </MultiTrigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Background" TargetName="Bd" 
                                        Value="{StaticResource TabItemDisabledBackground}"/>
                                <Setter Property="BorderBrush" TargetName="Bd" 
                                        Value="{StaticResource TabItemDisabledBorderBrush}"/>
                                <Setter Property="Foreground" 
                                        Value="{DynamicResource 
                                    {x:Static SystemColors.GrayTextBrushKey}}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    </Window.Resources>

    <TabControl x:Name="tabControlStyled">

        <!-- ********************************************************* -->
        <!-- Start of TAB1 Content-->
        <!-- ********************************************************* -->
        <TabItem  Header="Tab Styles / Templates">

            <!-- TAB1 Content-->
            <DockPanel x:Name="dockTab1" LastChildFill="True">
                <!-- Top content-->
                <TextBlock TextWrapping="Wrap" DockPanel.Dock="Top" Background="Orange" Foreground="Black"
                           HorizontalAlignment="Left" Margin="0,0,0,10" Height="50"
                           Text="This tab demonstrates Styling TabItems To Include Round Corners and Close Buttons" 
                           LineStackingStrategy="BlockLineHeight" TextAlignment="Justify" 
                           Width="{Binding ElementName=dockTab1, Path=ActualWidth}" />
                <!-- Bottom content-->            
                <TabControl Margin="40" DockPanel.Dock="Bottom">
                    <TabItem Header="Styled Tab1" Style="{StaticResource TabItemStyle1}"/>
                    <TabItem Header="Styled Tab2" Style="{StaticResource TabItemStyle1}"/>
                    <TabItem Header="Styled Tab3" Style="{StaticResource TabItemStyle1}"/>
                </TabControl>
            </DockPanel>

        </TabItem>

        <!-- ********************************************************* -->
        <!-- Start of TAB2 -->
        <!-- ********************************************************* -->
        <TabItem  Header="Button Styles / Templates">

            <!-- RESOURCES FOR TAB2-->
            <TabItem.Resources>

            <!-- Simple Button with simple properties-->
            <ControlTemplate x:Key="bordereredButtonTemplate" TargetType="{x:Type Button}">
                <Border x:Name="border" CornerRadius="3" Background="Transparent" BorderBrush="{TemplateBinding Foreground}" BorderThickness="2" Width="auto" Visibility="Visible">
                    <ContentPresenter  Margin="3" Content="{TemplateBinding Content}" Width="auto" Height="auto"/>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter TargetName="border" Property="Opacity" Value="0.4"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
            <!-- Simple Button with some Mouse events-->
            <ControlTemplate x:Key="bordereredButtonTemplateWithMouseEvents" TargetType="{x:Type Button}">
                <Border x:Name="border" CornerRadius="3" Background="Transparent" BorderBrush="{TemplateBinding Foreground}" BorderThickness="2" Width="auto" Visibility="Visible">
                    <ContentPresenter  Margin="3" Content="{TemplateBinding Content}" Width="auto" Height="auto"/>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter TargetName="border" Property="Opacity" Value="0.4"/>
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="true">
                        <Setter TargetName="border" Property="Background" Value="Orange"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>

            <!-- Simple Button with some Mouse events/Property Hi-Jacking-->
            <ControlTemplate x:Key="bordereredButtonTemplateWithMouseAndPropHiJacking" TargetType="{x:Type Button}">
                <Border x:Name="border" CornerRadius="3" Background="{TemplateBinding Background}" 
                        BorderBrush="{TemplateBinding Foreground}" 
                        BorderThickness="2" Width="auto" Visibility="Visible">
                    <StackPanel Orientation="Horizontal">
                        <Image Source="{Binding RelativeSource={RelativeSource TemplatedParent},
                             Path=Tag}" Width="20" Height="20" HorizontalAlignment="Left"
                             Margin="{TemplateBinding Padding}" />
                        <ContentPresenter  
                            Margin="{TemplateBinding Padding}" 
                            Content="{TemplateBinding Content}" 
                            Width="auto" Height="auto"/>
                    </StackPanel>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter TargetName="border" Property="Opacity" Value="0.4"/>
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="true">
                        <Setter TargetName="border" Property="Background" Value="Orange"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>


            </TabItem.Resources>

            <!-- TAB2 Content-->
            <DockPanel LastChildFill="True" x:Name="dockTab2">
                <!-- Top content-->
                <TextBlock TextWrapping="Wrap" DockPanel.Dock="Top" Background="Orange" Foreground="Black"
                           HorizontalAlignment="Left" Margin="0,0,0,10" Height="50"
                           Text="This tab demonstrates various Button Templates" 
                           LineStackingStrategy="BlockLineHeight" TextAlignment="Justify" 
                           Width="{Binding ElementName=dockTab2, Path=ActualWidth}" />
                <!-- Bottom content-->            
                <StackPanel Orientation="Vertical" Margin="0,0,0,0" DockPanel.Dock="Bottom" >
                    <Button Width="auto" Height="auto" Content="NO Template (uses default)" 
                            Margin="5"/>
                    <Button Template="{StaticResource bordereredButtonTemplate}" 
                            Width="auto" Height="auto" Content="Simple Button Template" 
                            Foreground="Black" Margin="5"/>
                    <Button Template="{StaticResource bordereredButtonTemplate}" 
                            Width="auto" Height="auto" Content="Simple Button Template (IsEnabled=false)" 
                            Foreground="Black" IsEnabled="False" Margin="5"/>
                    <Button Template="{StaticResource bordereredButtonTemplateWithMouseEvents}" 
                            Width="auto" Height="auto" Content="Simple Button Template Using Mouse" 
                            Foreground="Black" Margin="5"/>
                    <Button Template="{StaticResource bordereredButtonTemplateWithMouseAndPropHiJacking}" 
                            Width="auto" Height="auto" Content="Simple Button Template Using Mouse + Image" 
                            Tag="Images/venglobe.gif" Foreground="Black" Margin="5"/>
                </StackPanel>
            </DockPanel>
        </TabItem>

        <!-- ********************************************************* -->
        <!-- Start of TAB3 -->
        <!-- ********************************************************* -->
        <TabItem Header="Scrollbar Styles / Templates ">

            <!-- RESOURCES FOR TAB3-->
            <TabItem.Resources>

                <!-- Brushses-->
                <LinearGradientBrush x:Key="VerticalScrollBarBackground" 
                     EndPoint="1,0" StartPoint="0,0">
                    <GradientStop Color="#E1E1E1" Offset="0"/>
                    <GradientStop Color="#EDEDED" Offset="0.20"/>
                    <GradientStop Color="#EDEDED" Offset="0.80"/>
                    <GradientStop Color="#E3E3E3" Offset="1"/>
                </LinearGradientBrush>

                <LinearGradientBrush x:Key="HorizontalScrollBarBackground" 
                     EndPoint="0,1" StartPoint="0,0">
                    <GradientStop Color="#E1E1E1" Offset="0"/>
                    <GradientStop Color="#EDEDED" Offset="0.20"/>
                    <GradientStop Color="#EDEDED" Offset="0.80"/>
                    <GradientStop Color="#E3E3E3" Offset="1"/>
                </LinearGradientBrush>

                <LinearGradientBrush x:Key="ListBoxBackgroundBrush"
StartPoint="0,0" EndPoint="1,0.001">
                    <GradientBrush.GradientStops>
                        <GradientStopCollection>
                            <GradientStop Color="White" Offset="0.0" />
                            <GradientStop Color="White" Offset="0.6" />
                            <GradientStop Color="#DDDDDD" Offset="1.2"/>
                        </GradientStopCollection>
                    </GradientBrush.GradientStops>
                </LinearGradientBrush>

                <LinearGradientBrush x:Key="StandardBrush"
StartPoint="0,0" EndPoint="0,1">
                    <GradientBrush.GradientStops>
                        <GradientStopCollection>
                            <GradientStop Color="#FFF" Offset="0.0"/>
                            <GradientStop Color="#CCC" Offset="1.0"/>
                        </GradientStopCollection>
                    </GradientBrush.GradientStops>
                </LinearGradientBrush>

                <LinearGradientBrush x:Key="PressedBrush"
StartPoint="0,0" EndPoint="0,1">
                    <GradientBrush.GradientStops>
                        <GradientStopCollection>
                            <GradientStop Color="#BBB" Offset="0.0"/>
                            <GradientStop Color="#EEE" Offset="0.1"/>
                            <GradientStop Color="#EEE" Offset="0.9"/>
                            <GradientStop Color="#FFF" Offset="1.0"/>
                        </GradientStopCollection>
                    </GradientBrush.GradientStops>
                </LinearGradientBrush>

                <SolidColorBrush x:Key="ScrollBarDisabledBackground" Color="#F4F4F4"/>
                <SolidColorBrush x:Key="StandardBorderBrush" Color="#888" />
                <SolidColorBrush x:Key="StandardBackgroundBrush" Color="#FFF" />
                <SolidColorBrush x:Key="HoverBorderBrush" Color="#DDD" />
                <SolidColorBrush x:Key="SelectedBackgroundBrush" Color="Gray" />
                <SolidColorBrush x:Key="SelectedForegroundBrush" Color="White" />
                <SolidColorBrush x:Key="DisabledForegroundBrush" Color="#888" />
                <SolidColorBrush x:Key="NormalBrush" Color="#888" />
                <SolidColorBrush x:Key="NormalBorderBrush" Color="#888" />
                <SolidColorBrush x:Key="HorizontalNormalBrush" Color="#888" />
                <SolidColorBrush x:Key="HorizontalNormalBorderBrush" Color="#888" />
                <SolidColorBrush x:Key="GlyphBrush" Color="#444" />

                <!-- ScrollBarButton Vertical -->
                <Style x:Key="VerticalScrollBarPageButton" TargetType="{x:Type RepeatButton}">
                    <Setter Property="OverridesDefaultStyle" Value="true"/>
                    <Setter Property="Background" Value="Transparent"/>
                    <Setter Property="Focusable" Value="false"/>
                    <Setter Property="IsTabStop" Value="false"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type RepeatButton}">
                                <Rectangle Fill="{TemplateBinding Background}" 
                           Width="{TemplateBinding Width}" 
                           Height="{TemplateBinding Height}"/>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>

                <!-- ScrollBarButton Horizontal -->
                <Style x:Key="HorizontalScrollBarPageButton" TargetType="{x:Type RepeatButton}">
                    <Setter Property="OverridesDefaultStyle" Value="true"/>
                    <Setter Property="Background" Value="Transparent"/>
                    <Setter Property="Focusable" Value="false"/>
                    <Setter Property="IsTabStop" Value="false"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type RepeatButton}">
                                <Rectangle Fill="{TemplateBinding Background}" 
                           Width="{TemplateBinding Width}" 
                           Height="{TemplateBinding Height}"/>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>

                <!-- Scroll Buttons Down-->
                <Style x:Key="RepeatButtonStyleDown" TargetType="{x:Type RepeatButton}">
                    <Setter Property="OverridesDefaultStyle" Value="true"/>
                    <Setter Property="Focusable" Value="false"/>
                    <Setter Property="IsTabStop" Value="false"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type RepeatButton}">
                                <Grid>
                                    <Ellipse HorizontalAlignment="Center" 
                             VerticalAlignment="Center"
				             Fill="{TemplateBinding Background}" 
                             Stroke="{TemplateBinding Background}" 
                             Width="Auto" Height="Auto"/>
                                    <Path Data="M0,0 L 4,8 L 8,0" 
                          Fill="{TemplateBinding Foreground}" 
                          Stretch="Fill" Stroke="Black" Width="8" 
                          Height="8"  />
                                </Grid>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>

                <!-- Scroll Buttons Up-->
                <Style x:Key="RepeatButtonStyleUp" TargetType="{x:Type RepeatButton}">
                    <Setter Property="OverridesDefaultStyle" Value="true"/>
                    <Setter Property="Focusable" Value="false"/>
                    <Setter Property="IsTabStop" Value="false"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type RepeatButton}">
                                <Grid>
                                    <Ellipse HorizontalAlignment="Center" 
                             VerticalAlignment="Center"
				Fill="{TemplateBinding Background}" 
                             Stroke="{TemplateBinding Background}" 
                             Width="Auto" Height="Auto"/>
                                    <Path Data="M0,8 L 8,8 L 4,0" 
                          Fill="{TemplateBinding Foreground}" 
                          Stretch="Fill" Stroke="Black" Width="8" 
                          Height="8" />
                                </Grid>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>

                <!-- Scroll Thumb Style-->
                <Style x:Key="ThumbStyle1" TargetType="{x:Type Thumb}">
                    <Setter Property="OverridesDefaultStyle" Value="true"/>
                    <Setter Property="IsTabStop" Value="false"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type Thumb}">
                                <Border RenderTransformOrigin="0.5,0.5"
                        Margin="3,0,3,0" Width="Auto" 
                        Height="10" 
                        Background="{TemplateBinding Foreground}" 
                        CornerRadius="5,5,5,5"/>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>

                <!-- ScrollBar  Style-->
                <Style x:Key="ScrollBarStyle1" TargetType="{x:Type ScrollBar}">
                    <Setter Property="Background" 
            Value="{StaticResource VerticalScrollBarBackground}"/>
                    <Setter Property="Stylus.IsPressAndHoldEnabled" Value="false"/>
                    <Setter Property="Stylus.IsFlicksEnabled" Value="false"/>
                    <Setter Property="Foreground" 
            Value="{DynamicResource 
        {x:Static SystemColors.ControlTextBrushKey}}"/>
                    <Setter Property="Width" 
            Value="{DynamicResource 
        {x:Static SystemParameters.VerticalScrollBarWidthKey}}"/>
                    <Setter Property="MinWidth" 
            Value="{DynamicResource 
        {x:Static SystemParameters.VerticalScrollBarWidthKey}}"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type ScrollBar}">
                                <Grid SnapsToDevicePixels="true" 
                      x:Name="Bg" 
                      Background="{TemplateBinding Background}">
                                    <Grid.RowDefinitions>
                                        <RowDefinition 
                            MaxHeight="{DynamicResource 
                            {x:Static 
                            SystemParameters.VerticalScrollBarButtonHeightKey}}"/>
                                        <RowDefinition Height="0.1*"/>
                                        <RowDefinition 
                            MaxHeight="{DynamicResource 
                            {x:Static 
                            SystemParameters.VerticalScrollBarButtonHeightKey}}"/>
                                    </Grid.RowDefinitions>
                                    <RepeatButton IsEnabled="{TemplateBinding IsMouseOver}" 
                                  Style="{StaticResource RepeatButtonStyleUp}" 
                                  Command="{x:Static ScrollBar.LineUpCommand}" 
                                  Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph=
                                  "UpArrow"/>
                                    <Track IsEnabled="{TemplateBinding IsMouseOver}" 
                           x:Name="PART_Track" Grid.Row="1" 
                           IsDirectionReversed="true">
                                        <Track.DecreaseRepeatButton>
                                            <RepeatButton Style="{StaticResource 
                                VerticalScrollBarPageButton}" 
                                Command="{x:Static ScrollBar.PageUpCommand}"/>
                                        </Track.DecreaseRepeatButton>
                                        <Track.IncreaseRepeatButton>
                                            <RepeatButton Style="{StaticResource 
                                VerticalScrollBarPageButton}" 
                                Command="{x:Static ScrollBar.PageDownCommand}"/>
                                        </Track.IncreaseRepeatButton>
                                        <Track.Thumb>
                                            <Thumb Style="{StaticResource ThumbStyle1}" 
                                   Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph=
                                   "VerticalGripper" HorizontalAlignment="Center" 
                                   VerticalAlignment="Center" Width="16" Height="60" 
                                   Background="#FFD8A2A2"/>
                                        </Track.Thumb>
                                    </Track>
                                    <RepeatButton IsEnabled="{TemplateBinding IsMouseOver}" 
                                  Style="{StaticResource RepeatButtonStyleDown}" 
                                  Grid.Row="2" 
                                  Command="{x:Static ScrollBar.LineDownCommand}" 
                                  Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph=
                                  "DownArrow"/>
                                </Grid>
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsEnabled" Value="false">
                                        <Setter Property="Background" TargetName="Bg" 
                                Value="{StaticResource ScrollBarDisabledBackground}"/>
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                    <Style.Triggers>
                        <Trigger Property="Orientation" Value="Horizontal">
                            <Setter Property="Width" Value="Auto"/>
                            <Setter Property="MinWidth" Value="0"/>
                            <Setter Property="Height" Value="{DynamicResource 
                {x:Static SystemParameters.HorizontalScrollBarHeightKey}}"/>
                            <Setter Property="MinHeight" 
                    Value="{DynamicResource 
                {x:Static SystemParameters.HorizontalScrollBarHeightKey}}"/>
                            <Setter Property="Background" 
                    Value="{StaticResource HorizontalScrollBarBackground}"/>
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="{x:Type ScrollBar}">
                                        <Grid SnapsToDevicePixels="true" x:Name="Bg" 
                              Background="{TemplateBinding Background}">
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition 
                                    MaxWidth="{DynamicResource 
                                    {x:Static SystemParameters.HorizontalScrollBarButtonWidthKey}}"/>
                                                <ColumnDefinition Width="0.00001*"/>
                                                <ColumnDefinition 
                                    MaxWidth="{DynamicResource 
                                    {x:Static SystemParameters.HorizontalScrollBarButtonWidthKey}}"/>
                                            </Grid.ColumnDefinitions>
                                            <RepeatButton IsEnabled="{TemplateBinding IsMouseOver}" 
                                          Style="{DynamicResource RepeatButtonStyle2}" 
                                          Command="{x:Static ScrollBar.LineLeftCommand}" 
                                          Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph=
                                          "LeftArrow"/>
                                            <Track IsEnabled="{TemplateBinding IsMouseOver}" 
                                   x:Name="PART_Track" Grid.Column="1">
                                                <Track.DecreaseRepeatButton>
                                                    <RepeatButton 
                                        Style="{StaticResource 
                                        HorizontalScrollBarPageButton}" 
                                        Command="{x:Static ScrollBar.PageLeftCommand}"/>
                                                </Track.DecreaseRepeatButton>
                                                <Track.IncreaseRepeatButton>
                                                    <RepeatButton Style="{StaticResource 
                                        HorizontalScrollBarPageButton}" 
                                        Command="{x:Static ScrollBar.PageRightCommand}"/>
                                                </Track.IncreaseRepeatButton>
                                                <Track.Thumb>
                                                    <Thumb Style="{DynamicResource ThumbStyle1}" 
                                    Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph=
                                    "HorizontalGripper"/>
                                                </Track.Thumb>
                                            </Track>
                                            <RepeatButton IsEnabled="{TemplateBinding IsMouseOver}" 
                                   Style="{DynamicResource RepeatButtonStyle1}" 
                                   Grid.Column="2" 
                                   Command="{x:Static 
                                   ScrollBar.LineRightCommand}" 
                                   Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph=
                                   "RightArrow"/>
                                        </Grid>
                                        <ControlTemplate.Triggers>
                                            <Trigger Property="IsEnabled" Value="false">
                                                <Setter Property="Background" TargetName="Bg" 
                                Value="{StaticResource ScrollBarDisabledBackground}"/>
                                            </Trigger>
                                        </ControlTemplate.Triggers>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                    </Style.Triggers>
                </Style>

                <!-- ScrollBar  Repeat Button-->
                <Style x:Key="ScrollBarLineButton" TargetType="{x:Type RepeatButton}">
                    <Setter Property="SnapsToDevicePixels" Value="True"/>
                    <Setter Property="OverridesDefaultStyle" Value="true"/>
                    <Setter Property="Focusable" Value="false"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type RepeatButton}">
                                <Border
Name="Border"
Margin="1"
CornerRadius="2"
Background="{StaticResource NormalBrush}"
BorderBrush="{StaticResource NormalBorderBrush}"
BorderThickness="1">
                                    <Path
HorizontalAlignment="Center"
VerticalAlignment="Center"
Fill="{StaticResource GlyphBrush}"
Data="{Binding Path=Content,
RelativeSource={RelativeSource TemplatedParent}}" />
                                </Border>
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsPressed" Value="true">
                                        <Setter TargetName="Border" Property="Background"
                Value="{StaticResource PressedBrush}" />
                                    </Trigger>
                                    <Trigger Property="IsEnabled" Value="false">
                                        <Setter Property="Foreground"
                Value="{StaticResource DisabledForegroundBrush}"/>
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>

                <!-- ScrollBar  Repeat Button-->
                <Style x:Key="ScrollBarPageButton" TargetType="{x:Type RepeatButton}">
                    <Setter Property="SnapsToDevicePixels" Value="True"/>
                    <Setter Property="OverridesDefaultStyle" Value="true"/>
                    <Setter Property="IsTabStop" Value="false"/>
                    <Setter Property="Focusable" Value="false"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type RepeatButton}">
                                <Border Background="Transparent" />
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>

                <!-- Scroll Thumb Style-->
                <Style x:Key="ScrollBarThumb" TargetType="{x:Type Thumb}">
                    <Setter Property="SnapsToDevicePixels" Value="True"/>
                    <Setter Property="OverridesDefaultStyle" Value="true"/>
                    <Setter Property="IsTabStop" Value="false"/>
                    <Setter Property="Focusable" Value="false"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type Thumb}">
                                <Border
CornerRadius="2"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="1" />
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>

                <!-- Vertical ScrollBar Template -->
                <ControlTemplate x:Key="VerticalScrollBar"
TargetType="{x:Type ScrollBar}">
                    <Grid >
                        <Grid.RowDefinitions>
                            <RowDefinition MaxHeight="18"/>
                            <RowDefinition Height="0.00001*"/>
                            <RowDefinition MaxHeight="18"/>
                        </Grid.RowDefinitions>
                        <Border
Grid.RowSpan="3"
CornerRadius="2"
Background="#F0F0F0" />
                        <RepeatButton
Grid.Row="0"
Style="{StaticResource ScrollBarLineButton}"
Height="18"
Command="ScrollBar.LineUpCommand"
Content="M 0 4 L 8 4 L 4 0 Z" />
                        <Track
Name="PART_Track"
Grid.Row="1"
IsDirectionReversed="true">
                            <Track.DecreaseRepeatButton>
                                <RepeatButton
Style="{StaticResource ScrollBarPageButton}"
Command="ScrollBar.PageUpCommand" />
                            </Track.DecreaseRepeatButton>
                            <Track.Thumb>
                                <Thumb
Style="{StaticResource ScrollBarThumb}"
Margin="1,0,1,0"
Background="{StaticResource HorizontalNormalBrush}"
BorderBrush="{StaticResource HorizontalNormalBorderBrush}" />
                            </Track.Thumb>
                            <Track.IncreaseRepeatButton>
                                <RepeatButton
Style="{StaticResource ScrollBarPageButton}"
Command="ScrollBar.PageDownCommand" />
                            </Track.IncreaseRepeatButton>
                        </Track>
                        <RepeatButton
Grid.Row="3"
Style="{StaticResource ScrollBarLineButton}"
Height="18"
Command="ScrollBar.LineDownCommand"
Content="M 0 0 L 4 4 L 8 0 Z"/>
                    </Grid>
                </ControlTemplate>

                <!-- Horizontal ScrollBar Template -->
                <ControlTemplate x:Key="HorizontalScrollBar"
TargetType="{x:Type ScrollBar}">
                    <Grid >
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition MaxWidth="18"/>
                            <ColumnDefinition Width="0.00001*"/>
                            <ColumnDefinition MaxWidth="18"/>
                        </Grid.ColumnDefinitions>
                        <Border
Grid.ColumnSpan="3"
CornerRadius="2"
Background="#F0F0F0" />
                        <RepeatButton
Grid.Column="0"
Style="{StaticResource ScrollBarLineButton}"
Width="18"
Command="ScrollBar.LineLeftCommand"
Content="M 4 0 L 4 8 L 0 4 Z" />
                        <Track
Name="PART_Track"
Grid.Column="1"
IsDirectionReversed="False">
                            <Track.DecreaseRepeatButton>
                                <RepeatButton
Style="{StaticResource ScrollBarPageButton}"
Command="ScrollBar.PageLeftCommand" />
                            </Track.DecreaseRepeatButton>
                            <Track.Thumb>
                                <Thumb
Style="{StaticResource ScrollBarThumb}"
Margin="0,1,0,1"
Background="{StaticResource NormalBrush}"
BorderBrush="{StaticResource NormalBorderBrush}" />
                            </Track.Thumb>
                            <Track.IncreaseRepeatButton>
                                <RepeatButton
Style="{StaticResource ScrollBarPageButton}"
Command="ScrollBar.PageRightCommand" />
                            </Track.IncreaseRepeatButton>
                        </Track>
                        <RepeatButton
Grid.Column="3"
Style="{StaticResource ScrollBarLineButton}"
Width="18"
Command="ScrollBar.LineRightCommand"
Content="M 0 0 L 4 4 L 0 8 Z"/>
                    </Grid>
                </ControlTemplate>

                <!-- ScrollBar Style -->
                <Style x:Key="{x:Type ScrollBar}" TargetType="{x:Type ScrollBar}">
                    <Setter Property="SnapsToDevicePixels" Value="True"/>
                    <Setter Property="OverridesDefaultStyle" Value="true"/>
                    <Style.Triggers>
                        <Trigger Property="Orientation" Value="Horizontal">
                            <Setter Property="Width" Value="Auto"/>
                            <Setter Property="Height" Value="18" />
                            <Setter Property="Template"
        Value="{StaticResource HorizontalScrollBar}" />
                        </Trigger>
                        <Trigger Property="Orientation" Value="Vertical">
                            <Setter Property="Width" Value="18"/>
                            <Setter Property="Height" Value="Auto" />
                            <Setter Property="Template"
        Value="{StaticResource VerticalScrollBar}" />
                        </Trigger>
                    </Style.Triggers>
                </Style>

                <!-- ScrollViewer Template -->
                <ControlTemplate x:Key="ScrollViewerControlTemplate" TargetType="{x:Type ScrollViewer}">
                    <Grid x:Name="Grid" Background="{TemplateBinding Background}">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <Rectangle 
            Fill="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" 
            x:Name="Corner" Grid.Column="1" Grid.Row="1"/>
                        <ScrollContentPresenter Margin="{TemplateBinding Padding}" 
            x:Name="PART_ScrollContentPresenter" Grid.Column="0" Grid.Row="0" 
            Content="{TemplateBinding Content}" 
            ContentTemplate="{TemplateBinding ContentTemplate}" 
            CanContentScroll="{TemplateBinding CanContentScroll}" 
            CanHorizontallyScroll="False" CanVerticallyScroll="False"/>
                        <ScrollBar Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" 
            Cursor="Arrow" x:Name="PART_VerticalScrollBar" Grid.Column="1" Grid.Row="0"
            ViewportSize="{TemplateBinding ViewportHeight}" 
            Maximum="{TemplateBinding ScrollableHeight}" Minimum="0" 
            Value="{Binding Path=VerticalOffset, Mode=OneWay, 
            RelativeSource={RelativeSource TemplatedParent}}" 
            AutomationProperties.AutomationId="VerticalScrollBar"/>
                        <ScrollBar Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" 
            Cursor="Arrow" x:Name="PART_HorizontalScrollBar" 
            Grid.Column="0" Grid.Row="1" Orientation="Horizontal" 
            ViewportSize="{TemplateBinding ViewportWidth}" 
            Maximum="{TemplateBinding ScrollableWidth}" Minimum="0" 
            Value="{Binding Path=HorizontalOffset, Mode=OneWay, 
            RelativeSource={RelativeSource TemplatedParent}}" 
            AutomationProperties.AutomationId="HorizontalScrollBar"/>
                    </Grid>
                </ControlTemplate>

            </TabItem.Resources>

            <!-- TAB3 Content-->
            <DockPanel LastChildFill="True" x:Name="dockTab3">
                <!-- Top content-->
                <TextBlock TextWrapping="Wrap" DockPanel.Dock="Top" Background="Orange" Foreground="Black"
                           HorizontalAlignment="Left" Margin="0,0,0,10" Height="50"
                           Text="This tab demonstrates Styling a single ScrollBar (Vertical), which demonstrates the use of comples Styles and Templates, and PARTxxx within Templates" 
                           LineStackingStrategy="BlockLineHeight" TextAlignment="Justify" 
                           Width="{Binding ElementName=dockTab3, Path=ActualWidth}"/>
                <!-- Left content-->
                <Canvas Width="150" DockPanel.Dock="Left">  
                    <ScrollBar Orientation="Vertical" Height="150" Canvas.Left="40" Canvas.Top="20" Style="{StaticResource ScrollBarStyle1}"/>
                </Canvas>
                <!-- Right content-->
                <Canvas DockPanel.Dock="Right">
		            <ScrollViewer Canvas.Left="0" Canvas.Top="20" Width="150" Height="150"
		            Template="{DynamicResource ScrollViewerControlTemplate}" 
                                  HorizontalScrollBarVisibility="Visible" >
                                <ListBox>
                                    <ListBoxItem Content="listbox item1 this has some long text to show the ScrollViewer Template"/>
                                    <ListBoxItem Content="listbox item2"/>
                                    <ListBoxItem Content="listbox item3"/>
                                    <ListBoxItem Content="listbox item4"/>
                                    <ListBoxItem Content="listbox item5"/>
                                    <ListBoxItem Content="listbox item6"/>
                                    <ListBoxItem Content="listbox item7"/>
                                    <ListBoxItem Content="listbox item8"/>
                                    <ListBoxItem Content="listbox item9"/>
                                    <ListBoxItem Content="listbox item10"/>
                                    <ListBoxItem Content="listbox item11"/>
                                    <ListBoxItem Content="listbox item12"/>
                                    <ListBoxItem Content="listbox item13"/>
                                    <ListBoxItem Content="listbox item14"/>
                                    <ListBoxItem Content="listbox item15"/>    
                                    <ListBoxItem Content="listbox item16"/>
                                    <ListBoxItem Content="listbox item17"/>
                                    <ListBoxItem Content="listbox item18"/>
                                    <ListBoxItem Content="listbox item19"/>
                                    <ListBoxItem Content="listbox item20"/>
                                    <ListBoxItem Content="listbox item21"/>
                                    <ListBoxItem Content="listbox item22"/>
                                    <ListBoxItem Content="listbox item23"/>
                                    <ListBoxItem Content="listbox item24"/>
                                    <ListBoxItem Content="listbox item25"/>                                     
                                </ListBox>		
		            </ScrollViewer>
                </Canvas>            
            </DockPanel>
        </TabItem>

    </TabControl>

</Window>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Sacha Barber
Software Developer (Senior)
United Kingdom United Kingdom
I currently hold the following qualifications (amongst others, I also studied Music Technology and Electronics, for my sins)
 
- MSc (Passed with distinctions), in Information Technology for E-Commerce
- BSc Hons (1st class) in Computer Science & Artificial Intelligence
 
Both of these at Sussex University UK.
 
Award(s)

I am lucky enough to have won a few awards for Zany Crazy code articles over the years

  • Microsoft C# MVP 2014
  • Codeproject MVP 2014
  • Microsoft C# MVP 2013
  • Codeproject MVP 2013
  • Microsoft C# MVP 2012
  • Codeproject MVP 2012
  • Microsoft C# MVP 2011
  • Codeproject MVP 2011
  • Microsoft C# MVP 2010
  • Codeproject MVP 2010
  • Microsoft C# MVP 2009
  • Codeproject MVP 2009
  • Microsoft C# MVP 2008
  • Codeproject MVP 2008
  • And numerous codeproject awards which you can see over at my blog

| Advertise | Privacy | Mobile
Web03 | 2.8.140827.1 | Last Updated 5 Apr 2008
Article Copyright 2008 by Sacha Barber
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid