<Window xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml"  x:Class="ScrollBarStyles.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="ScrollBar Styles " Height="300" Width="400" WindowState="Maximized">
    <Window.Resources>
        <Style x:Key="_sg" TargetType="c1:C1FlexGrid" >
            <Setter Property="Background" Value="Black" />
            <Setter Property="Foreground" Value="White" />
            <Setter Property="RowBackground" Value="Black" />
            <Setter Property="AlternatingRowBackground" Value="Black" />
            <Setter Property="ColumnHeaderForeground" Value="Black" />
            <Setter Property="SelectionForeground" Value="Black" />
        </Style>
    </Window.Resources>
    <Grid x:Name="LayoutRoot" >
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <!-- top grid uses custom scrollbars -->
        <c1:C1FlexGrid 
            Name="_flex1" Style="{StaticResource _sg}" 
            ToolTipService.ToolTip="Implicit ScrollBar style defined in this grid's resources." >

            <c1:C1FlexGrid.Resources>

                <Style TargetType="ScrollBar">
                    <Setter Property="MinWidth" Value="17"/>
                    <Setter Property="MinHeight" Value="17"/>
                    <Setter Property="IsTabStop" Value="False"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="ScrollBar">
                                <Grid x:Name="Root" Background="{TemplateBinding Background}" >
                                    <!-- Vertical Template -->
                                    <Grid x:Name="VerticalRoot" Background="#10000000" >
                                        <Grid.RowDefinitions>
                                            <!-- ************ 3 rows instead of 5 ************-->
                                            <RowDefinition MaxHeight="{DynamicResource {x:Static SystemParameters.VerticalScrollBarButtonHeightKey}}"/>
                                            <RowDefinition Height="0.00001*"/>
                                            <RowDefinition MaxHeight="{DynamicResource {x:Static SystemParameters.VerticalScrollBarButtonHeightKey}}"/>
                                        </Grid.RowDefinitions>
                                        <RepeatButton x:Name="VerticalSmallDecrease" Foreground="{TemplateBinding Foreground}" Grid.Row="0" Height="16" IsTabStop="False" Interval="50" Template="{StaticResource VerticalDecrementTemplate}" Margin="1" />
                                        <!-- ************ Thumb inside Track element called "PART_Track" ************-->
                                        <Track x:Name="PART_Track" IsDirectionReversed="true" IsEnabled="{TemplateBinding IsMouseOver}" Grid.Row="1">
                                            <Track.DecreaseRepeatButton>
                                                <RepeatButton Command="{x:Static ScrollBar.PageUpCommand}" Style="{StaticResource VerticalScrollBarPageButton}"/>
                                            </Track.DecreaseRepeatButton>
                                            <Track.IncreaseRepeatButton>
                                                <RepeatButton Command="{x:Static ScrollBar.PageDownCommand}" Style="{StaticResource VerticalScrollBarPageButton}"/>
                                            </Track.IncreaseRepeatButton>
                                            <Track.Thumb>
                                                <Thumb x:Name="VerticalThumb" Background="{TemplateBinding Background}" MinHeight="18" Height="18" Grid.Row="1" Template="{StaticResource VerticalThumbTemplate}" />
                                            </Track.Thumb>
                                        </Track>
                                        <RepeatButton x:Name="VerticalSmallIncrease" Foreground="{TemplateBinding Foreground}" Grid.Row="2" Height="16" IsTabStop="False" Interval="50" Template="{StaticResource VerticalIncrementTemplate}" Margin="1" />
                                    </Grid>
                                </Grid>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                    <Style.Triggers>
                        <!-- ************ Horizontal Orientation defined as a Trigger" ************-->
                        <Trigger Property="Orientation" Value="Horizontal">
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="{x:Type ScrollBar}">
                                        <!-- Horizontal Template -->
                                        <Grid x:Name="HorizontalRoot" Background="Silver" >
                                            <Grid.ColumnDefinitions>
                                                <!-- ************ 3 columns instead of 5 ************-->
                                                <ColumnDefinition MaxWidth="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarButtonWidthKey}}"/>
                                                <ColumnDefinition Width="0.00001*"/>
                                                <ColumnDefinition MaxWidth="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarButtonWidthKey}}"/>
                                            </Grid.ColumnDefinitions>
                                            <RepeatButton x:Name="HorizontalSmallDecrease" Foreground="{TemplateBinding Foreground}" Grid.Column="0" Width="16" IsTabStop="False" Interval="50" Template="{StaticResource HorizontalDecrementTemplate}" Margin="1" />
                                            <!-- ************ Thumb inside Track element called "PART_Track" ************-->
                                            <Track x:Name="PART_Track" Grid.Column="1" IsEnabled="{TemplateBinding IsMouseOver}">
                                                <Track.DecreaseRepeatButton>
                                                    <RepeatButton Command="{x:Static ScrollBar.PageLeftCommand}" Style="{StaticResource HorizontalScrollBarPageButton}"/>
                                                </Track.DecreaseRepeatButton>
                                                <Track.IncreaseRepeatButton>
                                                    <RepeatButton Command="{x:Static ScrollBar.PageRightCommand}" Style="{StaticResource HorizontalScrollBarPageButton}"/>
                                                </Track.IncreaseRepeatButton>
                                                <Track.Thumb>
                                                    <Thumb x:Name="HorizontalThumb" Background="{TemplateBinding Background}" MinWidth="18" Width="100" HorizontalAlignment="Left" Grid.Column="0" Grid.ColumnSpan="3" Template="{StaticResource HorizontalThumbTemplate}" />
                                                </Track.Thumb>
                                            </Track>
                                            <RepeatButton x:Name="HorizontalSmallIncrease" Foreground="{TemplateBinding Foreground}" Grid.Column="2" Width="16" IsTabStop="False" Interval="50" Template="{StaticResource HorizontalIncrementTemplate}" Margin="1" />
                                        </Grid>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                    </Style.Triggers>
                </Style>

            </c1:C1FlexGrid.Resources>
        </c1:C1FlexGrid>
        <!-- bottom grid uses standard scrollbars -->
        <c1:C1FlexGrid 
            Name="_flex2" Style="{StaticResource _sg}" Grid.Row="1" 
            ToolTipService.ToolTip="Default ScrollBar style, nothing special here." />
    </Grid>
</Window>
