<?xml version="1.0" encoding="utf-8"?>
<UserControl x:Class="ScrollbarStyles.MainPage" mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="400" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006">

    <UserControl.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>
    </UserControl.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 for the ScrollBars in the grid
                
                Notice that this is a generic style (no Key), therefore it will be applied
                to all controls of the specified type (ScrollBar) in the current scope.
                
                If you add this style to the resources in the App.xaml file, it will be 
                applied to all scrollbars in your application. If you add it to a page's
                resources, it will be applied to all scrollbars on the page, and so on.
                
                Notice that we defined the style here, but the template in the App.xaml
                file. This demonstrates how you can apply styles locally while still 
                re-using the template definitions.
                -->
                <Style TargetType="ScrollBar">
                    <Setter Property="MinWidth" Value="17" />
                    <Setter Property="MinHeight" Value="17" />
                    <Setter Property="IsTabStop" Value="False" />
                    <Setter Property="Template" Value="{StaticResource simpleScrollbarTemplate}">
                    </Setter>
                </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>
</UserControl>