<HeaderedContentControl
    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"
    mc:Ignorable="d"
    d:DesignWidth="1280" d:DesignHeight="720"
    Style="{StaticResource SampleControlStyle}"
    Header="RepeatButton"
    Tag="https://www.noesisengine.com/docs/Gui.Core._RepeatButton.html">

    <StackPanel>
        <TextBlock Style="{StaticResource SampleSectionDesc}" Text="The RepeatButton control is like a standard Button, except the Click event occurs continuosly while the user keeps the button pressed."/>
        <HeaderedContentControl Style="{StaticResource SampleSectionStyle}" Tag="https://www.noesisengine.com/xamltoy/6c11a2c28d8b0ee2872e3551d0757c1b" TabIndex="100">
            <HeaderedContentControl.Header>
                <StackPanel>
                    <TextBlock Style="{StaticResource SampleSectionTitle}" Text="Delay and Interval"/>
                    <TextBlock Style="{StaticResource SampleSectionDesc}" Margin="0,5,0,0">
                        <Run FontWeight="Bold">Delay</Run>
                        <Run>property indicates the time in milliseconds before it starts repeating the click action.</Run><LineBreak/>
                        <Run FontWeight="Bold">Interval</Run>
                        <Run>property indicates the time in millisecods between repetitions.</Run>
                    </TextBlock>
                </StackPanel>
            </HeaderedContentControl.Header>
            <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <StackPanel Grid.Row="0">
                    <StackPanel.Triggers>
                        <EventTrigger RoutedEvent="ButtonBase.Click">
                            <BeginStoryboard>
                                <Storyboard>
                                    <ColorAnimation Duration="0:0:0.3" Storyboard.TargetName="Rect2" Storyboard.TargetProperty="Fill.Color" From="#00ADFF2F" To="#FFADFF2F"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                    </StackPanel.Triggers>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition/>
                            <ColumnDefinition Width="50"/>
                        </Grid.ColumnDefinitions>
                        <RepeatButton x:Name="Button4" Content="Repeat Button" VerticalAlignment="Center" Padding="32,8" Interval="{Binding Value, ElementName=Interval}" Delay="{Binding Value, ElementName=Delay}"/>
                        <TextBlock Grid.Column="1" Text="{Binding IsPressed, ElementName=Button4}" VerticalAlignment="Center" Margin="8,0,0,0"/>
                    </Grid>
                </StackPanel>
                <Grid Grid.Column="1" Grid.Row="0" Margin="8,0,0,0" UseLayoutRounding="True" Background="Lime">
                    <Rectangle Fill="DodgerBlue" Width="40"/>
                    <Rectangle Fill="#FFADFF2F" Width="40" x:Name="Rect2"/>
                </Grid>
                <Grid Grid.Row="1" Margin="0,16,0,0" Grid.ColumnSpan="2">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="40"/>
                    </Grid.ColumnDefinitions>
                    <StackPanel Grid.Column="0">
                        <Border Height="{Binding ActualHeight, ElementName=Delay}">
                            <TextBlock Text="Delay: " VerticalAlignment="Center"/>
                        </Border>
                        <Border Height="{Binding ActualHeight, ElementName=Interval}" Margin="0,4,0,0">
                            <TextBlock Text="Interval: " VerticalAlignment="Center"/>
                        </Border>
                    </StackPanel>
                    <StackPanel Grid.Column="1" Margin="0,0,16,0" VerticalAlignment="Top">
                        <Slider x:Name="Delay" Maximum="500" SmallChange="10" LargeChange="100" Value="400"/>
                        <Slider x:Name="Interval" Margin="0,4,0,0" Minimum="5" Maximum="500" LargeChange="100" SmallChange="10" Value="250"/>
                    </StackPanel>
                    <StackPanel Grid.Column="2" Margin="0,0,0,0">
                        <Border HorizontalAlignment="Right" Height="{Binding ActualHeight, ElementName=Delay}">
                            <TextBlock Text="{Binding Value, ElementName=Delay, StringFormat=F1}" VerticalAlignment="Center"/>
                        </Border>
                        <Border HorizontalAlignment="Right" Height="{Binding ActualHeight, ElementName=Interval}" Margin="0,4,0,0">
                            <TextBlock Text="{Binding Value, ElementName=Interval, StringFormat=F1}" VerticalAlignment="Center"/>
                        </Border>
                    </StackPanel>
                </Grid>
            </Grid>
        </HeaderedContentControl>
        <HeaderedContentControl Style="{StaticResource SampleSectionStyle}" Tag="https://www.noesisengine.com/xamltoy/8369ce269f29564d0bc6c37eeb9f9cd9" TabIndex="200">
            <HeaderedContentControl.Header>
                <StackPanel>
                    <TextBlock Style="{StaticResource SampleSectionTitle}" Text="Hover scroll"/>
                    <TextBlock Style="{StaticResource SampleSectionDesc}" Margin="0,5,0,0">
                        <Run>A RepeatButton is very useful to implement scrolling.</Run>
                    </TextBlock>
                </StackPanel>
            </HeaderedContentControl.Header>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
                <ItemsControl Width="360">
                    <ItemsControl.Template>
                        <ControlTemplate TargetType="ItemsControl">
                            <ScrollViewer HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Disabled">
                                <ScrollViewer.Template>
                                    <ControlTemplate TargetType="ScrollViewer">
                                        <Grid Background="#30888888">
                                            <ScrollContentPresenter />
                                            <RepeatButton Command="ScrollBar.LineLeftCommand" ClickMode="Hover" HorizontalAlignment="Left" Delay="20" Interval="20" Padding="10" Opacity="0.65">
                                                <Path Data="M6,0L0,5 6,10" Stroke="{Binding Foreground, RelativeSource={RelativeSource AncestorType={x:Type RepeatButton}}}" StrokeThickness="4" StrokeLineJoin="Round" StrokeStartLineCap="Round" StrokeEndLineCap="Round" Stretch="Uniform" Height="24"/>
                                            </RepeatButton>
                                            <RepeatButton Command="ScrollBar.LineRightCommand" ClickMode="Hover" HorizontalAlignment="Right" Delay="20" Interval="20" Padding="10" Opacity="0.65">
                                                <Path Data="M0,0L6,5 0,10" Stroke="{Binding Foreground, RelativeSource={RelativeSource AncestorType={x:Type RepeatButton}}}" StrokeThickness="4" StrokeLineJoin="Round" StrokeStartLineCap="Round" StrokeEndLineCap="Round" Stretch="Uniform" Height="24"/>
                                            </RepeatButton>
                                        </Grid>
                                    </ControlTemplate>
                                </ScrollViewer.Template>
                                <ItemsPresenter/>
                            </ScrollViewer>
                        </ControlTemplate>
                    </ItemsControl.Template>
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel Orientation="Horizontal"/>
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                    <Ellipse Fill="Red" Width="100" Height="100"/>
                    <Ellipse Fill="OrangeRed" Width="100" Height="100"/>
                    <Ellipse Fill="Orange" Width="100" Height="100"/>
                    <Ellipse Fill="Yellow" Width="100" Height="100"/>
                    <Ellipse Fill="Lime" Width="100" Height="100"/>
                    <Ellipse Fill="Cyan" Width="100" Height="100"/>
                    <Ellipse Fill="DodgerBlue" Width="100" Height="100"/>
                    <Ellipse Fill="Blue" Width="100" Height="100"/>
                    <Ellipse Fill="Purple" Width="100" Height="100"/>
                </ItemsControl>
            </StackPanel>
        </HeaderedContentControl>
    </StackPanel>
</HeaderedContentControl>