<UserControl x:Class="AxisScrollbar.AxisScrollbarDemo"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:Chart="using:C1.Xaml.Chart"
             xmlns:Interaction="using:C1.Xaml.Chart.Interaction"
             xmlns:local="using:AxisScrollbar"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <Grid Margin="20 0">
        <Grid.DataContext>
            <local:AxisScrollbarModel />
        </Grid.DataContext>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition />
        </Grid.RowDefinitions>
        <TextBlock x:Name="txtDescription" Text="{Binding Description}" TextWrapping="Wrap" Style="{ThemeResource CaptionTextBlockStyle}" FontSize="10"/>
        <Chart:C1FlexChart x:Name="flexChart" FontSize="10" RenderMode="Direct2D" ChartType="Line" BindingX="Date" ItemsSource="{Binding Data}" LegendPosition="None" Margin="0 10" Grid.Row="1">
            <Chart:Series SeriesName="Series1" Binding="Series1" />
            <Chart:C1FlexChart.AxisX>
                <Chart:Axis>
                    <Chart:Axis.Scrollbar>
                        <Interaction:C1AxisScrollbar x:Name="axisXScrollbar" Height="20" FontSize="6" />
                    </Chart:Axis.Scrollbar>
                </Chart:Axis>
            </Chart:C1FlexChart.AxisX>
            <Chart:C1FlexChart.AxisY>
                <Chart:Axis AxisLine="False" MajorTickMarks="None">
                    <Chart:Axis.Scrollbar>
                        <Interaction:C1AxisScrollbar x:Name="axisYScrollbar" ScrollButtonsVisible="False" Width="20" />
                    </Chart:Axis.Scrollbar>
                </Chart:Axis>
            </Chart:C1FlexChart.AxisY>
        </Chart:C1FlexChart>
    </Grid>
</UserControl>
