223 строки
15 KiB
XML
223 строки
15 KiB
XML
<UserControl
|
|
x:Class="LottieViewer.Scrubber"
|
|
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
|
|
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
|
xmlns:local="using:LottieViewer"
|
|
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
|
|
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
|
|
mc:Ignorable="d"
|
|
d:DesignHeight="40"
|
|
d:DesignWidth="400">
|
|
<Grid>
|
|
<!-- Markers are drawn here, under the slider. -->
|
|
<Grid>
|
|
<Grid.RowDefinitions>
|
|
<RowDefinition/>
|
|
<RowDefinition Height="3*"/>
|
|
<RowDefinition/>
|
|
</Grid.RowDefinitions>
|
|
<Grid x:Name="_markersTop"/>
|
|
<Grid x:Name="_markersBottom" Grid.Row="2"/>
|
|
</Grid>
|
|
|
|
<Slider x:Name="_slider"
|
|
Maximum="1"
|
|
StepFrequency="0.0001"
|
|
SmallChange="0.001"
|
|
AutomationProperties.Name="Progress slider">
|
|
<Slider.Template>
|
|
<!-- This is a copy of the default Slider template, but modified:
|
|
* Made mostly transparent so that the drawing can be done by Composition instead of XAML.
|
|
* Thumb is an ellipse instead of a rounded rectangle.
|
|
* Only supports horizontal orientation (vertical stuff is stripped out).
|
|
-->
|
|
<ControlTemplate TargetType="Slider">
|
|
<Grid Margin="{TemplateBinding Padding}">
|
|
<Grid.Resources>
|
|
<Style TargetType="Thumb" x:Key="SliderThumbStyle">
|
|
<Setter Property="BorderThickness" Value="0" />
|
|
<Setter Property="Background" Value="{ThemeResource SliderThumbBackground}" />
|
|
<Setter Property="Template">
|
|
<Setter.Value>
|
|
<ControlTemplate TargetType="Thumb">
|
|
<!-- The content of the Thumb has been modified to make it an Ellipse instead of
|
|
a border with rounded corners. -->
|
|
<Ellipse
|
|
Opacity="0"
|
|
Fill="{TemplateBinding Background}"
|
|
Stroke="{TemplateBinding BorderBrush}"
|
|
StrokeThickness="{TemplateBinding BorderThickness}" />
|
|
</ControlTemplate>
|
|
</Setter.Value>
|
|
</Setter>
|
|
</Style>
|
|
</Grid.Resources>
|
|
|
|
<VisualStateManager.CustomVisualStateManager>
|
|
<local:SliderVisualStateManager/>
|
|
</VisualStateManager.CustomVisualStateManager>
|
|
|
|
<VisualStateManager.VisualStateGroups>
|
|
<VisualStateGroup x:Name="CommonStates">
|
|
<VisualState x:Name="Normal" />
|
|
|
|
<VisualState x:Name="Pressed">
|
|
<Storyboard>
|
|
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalTrackRect" Storyboard.TargetProperty="Fill">
|
|
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTrackFillPressed}" />
|
|
</ObjectAnimationUsingKeyFrames>
|
|
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SliderContainer" Storyboard.TargetProperty="Background">
|
|
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderContainerBackgroundPressed}" />
|
|
</ObjectAnimationUsingKeyFrames>
|
|
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalDecreaseRect" Storyboard.TargetProperty="Fill">
|
|
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTrackValueFillPressed}" />
|
|
</ObjectAnimationUsingKeyFrames>
|
|
</Storyboard>
|
|
</VisualState>
|
|
|
|
<VisualState x:Name="Disabled">
|
|
<Storyboard>
|
|
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderContentPresenter" Storyboard.TargetProperty="Foreground">
|
|
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderHeaderForegroundDisabled}" />
|
|
</ObjectAnimationUsingKeyFrames>
|
|
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalDecreaseRect" Storyboard.TargetProperty="Fill">
|
|
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTrackValueFillDisabled}" />
|
|
</ObjectAnimationUsingKeyFrames>
|
|
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalTrackRect" Storyboard.TargetProperty="Fill">
|
|
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTrackFillDisabled}" />
|
|
</ObjectAnimationUsingKeyFrames>
|
|
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SliderContainer" Storyboard.TargetProperty="Background">
|
|
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderContainerBackgroundDisabled}" />
|
|
</ObjectAnimationUsingKeyFrames>
|
|
</Storyboard>
|
|
</VisualState>
|
|
|
|
<VisualState x:Name="PointerOver">
|
|
<Storyboard>
|
|
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalTrackRect" Storyboard.TargetProperty="Fill">
|
|
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTrackFillPointerOver}" />
|
|
</ObjectAnimationUsingKeyFrames>
|
|
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SliderContainer" Storyboard.TargetProperty="Background">
|
|
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderContainerBackgroundPointerOver}" />
|
|
</ObjectAnimationUsingKeyFrames>
|
|
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalDecreaseRect" Storyboard.TargetProperty="Fill">
|
|
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTrackValueFillPointerOver}" />
|
|
</ObjectAnimationUsingKeyFrames>
|
|
</Storyboard>
|
|
</VisualState>
|
|
</VisualStateGroup>
|
|
|
|
<VisualStateGroup x:Name="FocusEngagementStates">
|
|
<VisualState x:Name="FocusDisengaged" />
|
|
<VisualState x:Name="FocusEngagedHorizontal">
|
|
<Storyboard>
|
|
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SliderContainer" Storyboard.TargetProperty="(Control.IsTemplateFocusTarget)">
|
|
<DiscreteObjectKeyFrame KeyTime="0" Value="False" />
|
|
</ObjectAnimationUsingKeyFrames>
|
|
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalThumb" Storyboard.TargetProperty="(Control.IsTemplateFocusTarget)">
|
|
<DiscreteObjectKeyFrame KeyTime="0" Value="True" />
|
|
</ObjectAnimationUsingKeyFrames>
|
|
</Storyboard>
|
|
</VisualState>
|
|
</VisualStateGroup>
|
|
|
|
</VisualStateManager.VisualStateGroups>
|
|
|
|
<Grid.RowDefinitions>
|
|
<RowDefinition Height="Auto" />
|
|
<RowDefinition Height="*" />
|
|
</Grid.RowDefinitions>
|
|
<ContentPresenter x:Name="HeaderContentPresenter"
|
|
Grid.Row="0"
|
|
Content="{TemplateBinding Header}"
|
|
ContentTemplate="{TemplateBinding HeaderTemplate}"
|
|
FontWeight="{ThemeResource SliderHeaderThemeFontWeight}"
|
|
Foreground="{ThemeResource SliderHeaderForeground}"
|
|
Margin="{ThemeResource SliderTopHeaderMargin}"
|
|
TextWrapping="Wrap"
|
|
Visibility="Collapsed"
|
|
x:DeferLoadStrategy="Lazy"/>
|
|
<Grid x:Name="SliderContainer"
|
|
Grid.Row="1"
|
|
Background="{ThemeResource SliderContainerBackground}"
|
|
Control.IsTemplateFocusTarget="True">
|
|
|
|
<Grid x:Name="HorizontalTemplate" MinHeight="{ThemeResource SliderHorizontalHeight}">
|
|
<Grid.ColumnDefinitions>
|
|
<ColumnDefinition Width="Auto" />
|
|
<ColumnDefinition Width="Auto" />
|
|
<ColumnDefinition Width="*" />
|
|
</Grid.ColumnDefinitions>
|
|
<Grid.RowDefinitions>
|
|
<RowDefinition Height="{ThemeResource SliderPreContentMargin}" />
|
|
<RowDefinition Height="Auto" />
|
|
<RowDefinition Height="{ThemeResource SliderPostContentMargin}" />
|
|
</Grid.RowDefinitions>
|
|
<Rectangle x:Name="HorizontalTrackRect"
|
|
Opacity="0"
|
|
Fill="{TemplateBinding Background}"
|
|
Height="{ThemeResource SliderTrackThemeHeight}"
|
|
Grid.Row="1"
|
|
Grid.ColumnSpan="3" />
|
|
<Rectangle x:Name="HorizontalDecreaseRect" Fill="{TemplateBinding Foreground}" Grid.Row="1" Opacity="0" />
|
|
<TickBar x:Name="TopTickBar"
|
|
Visibility="Collapsed"
|
|
Fill="{ThemeResource SliderTickBarFill}"
|
|
Height="{ThemeResource SliderOutsideTickBarThemeHeight}"
|
|
VerticalAlignment="Bottom"
|
|
Margin="0,0,0,4"
|
|
Grid.ColumnSpan="3" />
|
|
<TickBar x:Name="HorizontalInlineTickBar"
|
|
Visibility="Collapsed"
|
|
Fill="{ThemeResource SliderInlineTickBarFill}"
|
|
Height="{ThemeResource SliderTrackThemeHeight}"
|
|
Grid.Row="1"
|
|
Grid.ColumnSpan="3" />
|
|
<TickBar x:Name="BottomTickBar"
|
|
Visibility="Collapsed"
|
|
Fill="{ThemeResource SliderTickBarFill}"
|
|
Height="{ThemeResource SliderOutsideTickBarThemeHeight}"
|
|
VerticalAlignment="Top"
|
|
Margin="0,4,0,0"
|
|
Grid.Row="2"
|
|
Grid.ColumnSpan="3" />
|
|
<!-- The left and right TickBars are needed even though we are always horizontal. They are referenced
|
|
by the Scrubber when it is not enabled. -->
|
|
<TickBar x:Name="LeftTickBar"
|
|
Visibility="Collapsed"
|
|
Fill="{ThemeResource SliderTickBarFill}"
|
|
Height="{ThemeResource SliderOutsideTickBarThemeHeight}"
|
|
VerticalAlignment="Top"
|
|
Margin="0,4,0,0"
|
|
Grid.Row="2"
|
|
Grid.ColumnSpan="3" />
|
|
<TickBar x:Name="RightTickBar"
|
|
Visibility="Collapsed"
|
|
Fill="{ThemeResource SliderTickBarFill}"
|
|
Height="{ThemeResource SliderOutsideTickBarThemeHeight}"
|
|
VerticalAlignment="Top"
|
|
Margin="0,4,0,0"
|
|
Grid.Row="2"
|
|
Grid.ColumnSpan="3" />
|
|
|
|
<!-- The Width of the Thumb has been modified to make it round. -->
|
|
<Thumb x:Name="HorizontalThumb"
|
|
Opacity="0"
|
|
Style="{StaticResource SliderThumbStyle}"
|
|
DataContext="{TemplateBinding Value}"
|
|
Height="20"
|
|
Width="20"
|
|
Grid.Row="0"
|
|
Grid.RowSpan="3"
|
|
Grid.Column="1"
|
|
FocusVisualMargin="-14,-6,-14,-6"
|
|
AutomationProperties.AccessibilityView="Raw" />
|
|
</Grid>
|
|
</Grid>
|
|
</Grid>
|
|
</ControlTemplate>
|
|
</Slider.Template>
|
|
</Slider>
|
|
</Grid>
|
|
</UserControl>
|