<?xml version="1.0" encoding="utf-8"?>
<UserControl x:Class="C1DataGrid_Demo2010.Viewport" d:DataContext="{d:DesignData Source=/DesignData/SampleProducts.xaml}" mc:Ignorable="d" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml">
    <UserControl.Resources>
       
    </UserControl.Resources>

    <Grid Margin="4">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Border Margin="0 0 0 10">
            <StackPanel Orientation="Horizontal">
                <Canvas x:Name="scrollCanvas" Width="100" Height="100">
                    <Border x:Name="extentSizeElement" Background="#26000000" BorderBrush="#FFBBBBBB" BorderThickness="1" />
                    <Border x:Name="viewportElement" Background="#FFE0F6FF" BorderBrush="#FF00CAFF" BorderThickness="1" Opacity=".7" Cursor="Hand" />
                </Canvas>
                <ToggleButton x:Name="btnAnimation" IsChecked="{Binding IsAnimationRunning, Mode=TwoWay}" Margin="10,4,4,4" VerticalAlignment="Center" Height="24" Width="24">
                    <Grid Margin="4">
                        <Grid.Resources>
                            <c1:VisibilityConverter x:Key="converter" />
                            <c1:VisibilityConverter x:Key="opositeConverter" Opposite="True" />
                        </Grid.Resources>
                        <Path x:Name="icopause" Fill="Black" Data="M11.5,1.02811E-08 L11.628656,0.0024657547 C12.949663,0.053216022 14,0.88103408 14,1.8947369 L14,16.105265 C14,17.151667 12.880777,18 11.5,18 C10.11925,18 9,17.151676 9,16.105265 L9,1.8947369 C9,0.8810252 10.050364,0.053215463 11.371345,0.0024657547 z M2.5,0 C3.880796,6.3110804E-08 5,0.8483296 5,1.8947369 L5,16.105265 C5,17.151661 3.8807883,18 2.5,18 C1.1191955,18 0,17.151619 0,16.105265 L0,1.8947369 C0,0.84837353 1.1191878,6.3110804E-08 2.5,0 z" Stretch="Fill" Width="8" Height="10" Visibility="{Binding ElementName=btnAnimation, Path=IsChecked, Converter={StaticResource converter}}" />
                        <Path x:Name="icoplay" Stretch="Uniform" Fill="Black" Data="M1,2.8309214 C0.95346516,1.1423991 2.7568073,0.40946418 4.2441177,1.4446989 L15,8.48909 C16.140579,9.3145008 17,9.886631 17,10.9912 L17,11.008795 C17,12.113363 16.109327,12.728537 15,13.4904 L4.1752372,20.655039 C2.9820821,21.484116 1.0097007,20.864441 1,18.887381 z" Width="14" Height="10" Visibility="{Binding ElementName=btnAnimation, Path=IsChecked, Converter={StaticResource opositeConverter}}" d:IsHidden="True" />
                    </Grid>
                </ToggleButton>
                <TextBlock x:Name="txtOffset" Margin="4" MinWidth="70" VerticalAlignment="Center" />
            </StackPanel>
        </Border>        
        <c1:C1DataGrid x:Name="grid" ItemsSource="{Binding}" RowHeight="40" Grid.Row="1" AutoGeneratingColumn="grid_AutoGeneratingColumn" LayoutUpdated="grid_LayoutUpdated" />
    </Grid>

</UserControl>