tsai
/
Avalonia
mirror of https://github.com/AvaloniaUI/Avalonia.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

working horizontal slider.

feature/fluent-slider
Dan Walmsley 6 years ago
parent
1f25cf737b
commit
a1a1125cc6
1 changed files with 133 additions and 179 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 312
      src/Avalonia.Themes.Fluent/Slider.xaml

312
src/Avalonia.Themes.Fluent/Slider.xaml
View File

@ -1,4 +1,9 @@
<Styles xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Design.PreviewWith>
<Border Margin="20" Width="200">
<Slider Value="50" />
</Border>
</Design.PreviewWith>
<Styles.Resources>
<Thickness x:Key="SliderTopHeaderMargin">0,0,0,4</Thickness>
<GridLength x:Key="SliderPreContentMargin">15</GridLength>
@ -11,202 +16,151 @@
<x:Double x:Key="SliderVerticalThumbWidth">20</x:Double>
<x:Double x:Key="SliderVerticalThumbHeight">20</x:Double>
</Styles.Resources>
<!-- Disabled State -->
<!-- <Style Selector="Slider:disabled /template/ ContentPresenter#HeaderContentPresenter">
<Setter Property="Foreground" Value="{DynamicResource SliderHeaderForegroundDisabled}" />
</Style> -->
<Style Selector="Slider:disabled /template/ Border#HorizontalDecreaseRect">
<Setter Property="Background" Value="{DynamicResource SliderTrackValueFillDisabled}" />
</Style>
<Style Selector="Slider:disabled /template/ Border#HorizontalTrackRect">
<Setter Property="Background" Value="{DynamicResource SliderTrackFillDisabled}" />
</Style>
<Style Selector="Slider:disabled /template/ Border#VerticalDecreaseRect">
<Setter Property="Background" Value="{DynamicResource SliderTrackValueFillDisabled}" />
</Style>
<Style Selector="Slider:disabled /template/ Border#VerticalTrackRect">
<Setter Property="Background" Value="{DynamicResource SliderTrackFillDisabled}" />
</Style>
<Style Selector="Slider:disabled /template/ Thumb#HorizontalThumb /template/ Border">
<Setter Property="Background" Value="{DynamicResource SliderThumbBackgroundDisabled}" />
</Style>
<Style Selector="Slider:disabled /template/ Thumb#VerticalThumb /template/ Border">
<Setter Property="Background" Value="{DynamicResource SliderThumbBackgroundDisabled}" />
</Style>
<!-- <Style Selector="Slider:disabled /template/ TickBar#TopTickBar">
<Setter Property="Background" Value="{DynamicResource SliderTickBarFillDisabled}" />
</Style>
<Style Selector="Slider:disabled /template/ TickBar#BottomTickBar">
<Setter Property="Background" Value="{DynamicResource SliderTickBarFillDisabled}" />
</Style>
<Style Selector="Slider:disabled /template/ TickBar#LeftTickBar">
<Setter Property="Background" Value="{DynamicResource SliderTickBarFillDisabled}" />
</Style>
<Style Selector="Slider:disabled /template/ TickBar#RightTickBar">
<Setter Property="Background" Value="{DynamicResource SliderTickBarFillDisabled}" />
</Style> -->
<Style Selector="Slider:disabled /template/ Grid#SliderContainer">
<Setter Property="Background" Value="{DynamicResource SliderContainerBackgroundDisabled}" />
</Style>
<!-- Pressed State -->
<Style Selector="Slider:pressed /template/ Border#HorizontalTrackRect">
<Setter Property="Background" Value="{DynamicResource SliderTrackFillPressed}" />
</Style>
<Style Selector="Slider:pressed /template/ Border#HorizontalTrackRect">
<Setter Property="Background" Value="{DynamicResource SliderTrackFillPressed}" />
</Style>
<Style Selector="Slider:pressed /template/ Border#VerticalTrackRect">
<Setter Property="Background" Value="{DynamicResource SliderTrackFillPressed}" />
</Style>
<Style Selector="Slider:pressed /template/ Thumb#HorizontalThumb /template/ Border">
<Setter Property="Background" Value="{DynamicResource SliderThumbBackgroundPressed}" />
</Style>
<Style Selector="Slider:pressed /template/ Thumb#VerticalThumb /template/ Border">
<Setter Property="Background" Value="{DynamicResource SliderThumbBackgroundPressed}" />
</Style>
<Style Selector="Slider:pressed /template/ Grid#SliderContainer">
<Setter Property="Background" Value="{DynamicResource SliderContainerBackgroundPressed}" />
</Style>
<Style Selector="Slider:pressed /template/ Border#HorizontalDecreaseRect">
<Setter Property="Background" Value="{DynamicResource SliderTrackValueFillPressed}" />
</Style>
<Style Selector="Slider:pressed /template/ Border#VerticalDecreaseRect">
<Setter Property="Background" Value="{DynamicResource SliderTrackValueFillPressed}" />
</Style>
<!-- PointerOver State -->
<Style Selector="Slider:pointerover /template/ Border#HorizontalTrackRect">
<Setter Property="Background" Value="{DynamicResource SliderTrackFillPointerOver}" />
</Style>
<Style Selector="Slider:pointerover /template/ Border#VerticalTrackRect">
<Setter Property="Background" Value="{DynamicResource SliderTrackFillPointerOver}" />
</Style>
<Style Selector="Slider:pointerover /template/ Thumb#HorizontalThumb /template/ Border">
<Setter Property="Background" Value="{DynamicResource SliderThumbBackgroundPointerOver}" />
</Style>
<Style Selector="Slider:pointerover /template/ Thumb#VerticalThumb /template/ Border">
<Setter Property="Background" Value="{DynamicResource SliderThumbBackgroundPointerOver}" />
</Style>
<Style Selector="Slider:pointerover /template/ Grid#SliderContainer">
<Setter Property="Background" Value="{DynamicResource SliderContainerBackgroundPointerOver}" />
</Style>
<Style Selector="Slider:pointerover /template/ Border#HorizontalDecreaseRect">
<Setter Property="Background" Value="{DynamicResource SliderTrackValueFillPointerOver}" />
</Style>
<Style Selector="Slider:pointerover /template/ Border#VerticalDecreaseRect">
<Setter Property="Background" Value="{DynamicResource SliderTrackValueFillPointerOver}" />
</Style>
<!-- TODO: We don't have an equivalent for this afaik. -->
<!-- <VisualState Name="FocusDisengaged" />
<VisualState 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>
<VisualState Name="FocusEngagedVertical">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SliderContainer" Storyboard.TargetProperty="(Control.IsTemplateFocusTarget)">
<DiscreteObjectKeyFrame KeyTime="0" Value="False" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalThumb" Storyboard.TargetProperty="(Control.IsTemplateFocusTarget)">
<DiscreteObjectKeyFrame KeyTime="0" Value="True" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
-->
<Style Selector="Slider:vertical /template/ Grid#VerticalTemplate">
<Setter Property="IsVisible" Value="True" />
</Style>
<Style Selector="Slider:vertical /template/ Grid#HorizontalTemplate">
<Setter Property="IsVisible" Value="False" />
</Style>
<Style Selector="Slider:horizontal /template/ Grid#HorizontalTemplate">
<Setter Property="IsVisible" Value="True" />
</Style>
<Style Selector="Slider:horizontal /template/ Grid#VerticalTemplate">
<Setter Property="IsVisible" Value="False" />
</Style>
<Style Selector="Slider">
<Style Selector="Slider:horizontal">
<Setter Property="Background" Value="{DynamicResource SliderTrackFill}" />
<Setter Property="BorderThickness" Value="{DynamicResource SliderBorderThemeThickness}" />
<Setter Property="Foreground" Value="{DynamicResource SliderTrackValueFill}" />
<Setter Property="FontFamily" Value="{DynamicResource ContentControlThemeFontFamily}" />
<Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
<!-- TODO Non-existent properties in avalonia. -->
<!-- <Setter Property="ManipulationMode" Value="None" />
<Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
<Setter Property="FocusVisualMargin" Value="-7,0,-7,0" />
<Setter Property="IsFocusEngagementEnabled" Value="True" /> -->
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Border Margin="{TemplateBinding Padding}" CornerRadius="{DynamicResource ControlCornerRadius}">
<Border.Styles>
<ControlTemplate>
<Border BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}"
CornerRadius="{DynamicResource ControlCornerRadius}">
<Grid Name="grid" Margin="{TemplateBinding Padding}" RowDefinitions="Auto, *">
<Grid.Styles>
<Style Selector="Thumb.SliderThumbStyle">
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Background" Value="{DynamicResource SliderThumbBackground}" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{DynamicResource SliderThumbCornerRadius}" />
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{DynamicResource SliderThumbCornerRadius}" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Border.Styles>
<Grid RowDefinitions="Auto,*">
<!-- TODO removed TextBlock.TextWrapping; bind Content -> Header and ContentTemplate -> HeaderTemplate -->
<ContentPresenter Name="HeaderContentPresenter" Grid.Row="0" TextBlock.FontWeight="{DynamicResource SliderHeaderThemeFontWeight}" TextBlock.Foreground="{DynamicResource SliderHeaderForeground}" Margin="{DynamicResource SliderTopHeaderMargin}"
IsVisible="False" />
<!-- TODO removed Control.IsTemplateFocusTarget -->
<Grid Name="SliderContainer" Grid.Row="1" Background="{DynamicResource SliderContainerBackground}">
<Grid Name="HorizontalTemplate" ColumnDefinitions="Auto,Auto,*" MinHeight="{DynamicResource SliderHorizontalHeight}">
<Grid.RowDefinitions>
<RowDefinition Height="{DynamicResource SliderPreContentMargin}" />
<RowDefinition Height="Auto" />
<RowDefinition Height="{DynamicResource SliderPostContentMargin}" />
</Grid.RowDefinitions>
<Border Name="HorizontalTrackRect" Background="{TemplateBinding Background}" Height="{DynamicResource SliderTrackThemeHeight}" Grid.Row="1" Grid.ColumnSpan="3" CornerRadius="{Binding CornerRadius}" />
<Border Name="HorizontalDecreaseRect" Background="{TemplateBinding Foreground}" Grid.Row="1" CornerRadius="{Binding CornerRadius}" />
<!-- TODO TickBars are not implemented yet. -->
<!--
<TickBar Name="TopTickBar" Visibility="Collapsed" Fill="{DynamicResource SliderTickBarFill}" Height="{DynamicResource SliderOutsideTickBarThemeHeight}" VerticalAlignment="Bottom" Margin="0,0,0,4" Grid.ColumnSpan="3" />
<TickBar Name="HorizontalInlineTickBar" Visibility="Collapsed" Fill="{DynamicResource SliderInlineTickBarFill}" Height="{DynamicResource SliderTrackThemeHeight}" Grid.Row="1" Grid.ColumnSpan="3" />
<TickBar Name="BottomTickBar" Visibility="Collapsed" Fill="{DynamicResource SliderTickBarFill}" Height="{DynamicResource SliderOutsideTickBarThemeHeight}" VerticalAlignment="Top" Margin="0,4,0,0" Grid.Row="2" Grid.ColumnSpan="3" />
-->
<!-- TODO Removed FocusVisualMargin and AutomationProperties.AccessibilityView -->
<Thumb Name="HorizontalThumb" Classes="SliderThumbStyle" DataContext="{TemplateBinding Value}" Height="{DynamicResource SliderHorizontalThumbHeight}" Width="{DynamicResource SliderHorizontalThumbWidth}" Grid.Row="0"
Grid.RowSpan="3" Grid.Column="1" />
</Grid>
<Grid Name="VerticalTemplate" RowDefinitions="*,Auto,Auto" MinWidth="{DynamicResource SliderVerticalWidth}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="{DynamicResource SliderPreContentMargin}" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="{DynamicResource SliderPostContentMargin}" />
</Grid.ColumnDefinitions>
<Border Name="VerticalTrackRect" Background="{TemplateBinding Background}" Width="{DynamicResource SliderTrackThemeHeight}" Grid.Column="1" Grid.RowSpan="3" CornerRadius="{Binding CornerRadius}" />
<Border Name="VerticalDecreaseRect" Background="{TemplateBinding Foreground}" Grid.Column="1" Grid.Row="2" CornerRadius="{Binding CornerRadius}" />
<!-- TODO TickBars are not implemented yet. -->
<!--
<TickBar Name="LeftTickBar" Visibility="Collapsed" Fill="{DynamicResource SliderTickBarFill}" Width="{DynamicResource SliderOutsideTickBarThemeHeight}" HorizontalAlignment="Right" Margin="0,0,4,0" Grid.RowSpan="3" />
<TickBar Name="VerticalInlineTickBar" Visibility="Collapsed" Fill="{DynamicResource SliderInlineTickBarFill}" Width="{DynamicResource SliderTrackThemeHeight}" Grid.Column="1" Grid.RowSpan="3" />
<TickBar Name="RightTickBar" Visibility="Collapsed" Fill="{DynamicResource SliderTickBarFill}" Width="{DynamicResource SliderOutsideTickBarThemeHeight}" HorizontalAlignment="Left" Margin="4,0,0,0" Grid.Column="2" Grid.RowSpan="3" />
-->
<!-- TODO Removed FocusVisualMargin and AutomationProperties.AccessibilityView-->
<Thumb Name="VerticalThumb" Classes="SliderThumbStyle" DataContext="{TemplateBinding Value}" Width="{DynamicResource SliderVerticalThumbWidth}" Height="{DynamicResource SliderVerticalThumbHeight}" Grid.Row="1" Grid.Column="0"
</Grid.Styles>
<ContentPresenter x:Name="HeaderContentPresenter"
Grid.Row="0"
TextBlock.FontWeight="{DynamicResource SliderHeaderThemeFontWeight}"
TextBlock.Foreground="{DynamicResource SliderHeaderForeground}"
Margin="{DynamicResource SliderTopHeaderMargin}" />
<Grid x:Name="SliderContainer"
Grid.Row="1">
<Grid x:Name="HorizontalTemplate" MinHeight="{DynamicResource SliderHorizontalHeight}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="{DynamicResource SliderPreContentMargin}" />
<RowDefinition Height="Auto" />
<RowDefinition Height="{DynamicResource SliderPostContentMargin}" />
</Grid.RowDefinitions>
<!--
<TickBar x:Name="TopTickBar"
Visibility="Collapsed"
Fill="{DynamicResource SliderTickBarFill}"
Height="{DynamicResource SliderOutsideTickBarThemeHeight}"
VerticalAlignment="Bottom"
Margin="0,0,0,4"
Grid.ColumnSpan="3" />
<TickBar x:Name="HorizontalInlineTickBar"
Visibility="Collapsed"
Fill="{DynamicResource SliderInlineTickBarFill}"
Height="{DynamicResource SliderTrackThemeHeight}"
Grid.Row="1"
Grid.ColumnSpan="3" />
</Grid>
<TickBar x:Name="BottomTickBar"
Visibility="Collapsed"
Fill="{DynamicResource SliderTickBarFill}"
Height="{DynamicResource SliderOutsideTickBarThemeHeight}"
VerticalAlignment="Top"
Margin="0,4,0,0"
Grid.Row="2"
Grid.ColumnSpan="3" /> -->
<Track Name="PART_Track"
Grid.Row="1"
Grid.ColumnSpan="3"
Orientation="Horizontal">
<Track.DecreaseButton>
<RepeatButton Name="PART_DecreaseButton" Background="{TemplateBinding Foreground}">
<RepeatButton.Template>
<ControlTemplate>
<Border Name="TrackBackground" Background="{TemplateBinding Background}" CornerRadius="{DynamicResource ControlCornerRadius}" Height="{DynamicResource SliderTrackThemeHeight}" VerticalAlignment="Center"/>
</ControlTemplate>
</RepeatButton.Template>
</RepeatButton>
</Track.DecreaseButton>
<Track.IncreaseButton>
<RepeatButton Name="PART_IncreaseButton" Margin="0" Padding="0" Background="{TemplateBinding Background}"
Classes="repeattrack">
<RepeatButton.Template>
<ControlTemplate>
<Border Name="TrackBackground" Background="{TemplateBinding Background}" CornerRadius="{DynamicResource ControlCornerRadius}" Height="{DynamicResource SliderTrackThemeHeight}" VerticalAlignment="Center"/>
</ControlTemplate>
</RepeatButton.Template>
</RepeatButton>
</Track.IncreaseButton>
<Thumb Classes="SliderThumbStyle"
Name="thumb"
Margin="0" Padding="0"
DataContext="{TemplateBinding Value}"
Height="{DynamicResource SliderHorizontalThumbHeight}"
Width="{DynamicResource SliderHorizontalThumbWidth}" />
</Track>
</Grid>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Grid>
</Border>
</ControlTemplate>
</Setter>
</Style>
<Style Selector="Slider /template/ Track#PART_Track">
<Setter Property="Minimum" Value="{TemplateBinding Minimum}"/>
<Setter Property="Maximum" Value="{TemplateBinding Maximum}"/>
<Setter Property="Value" Value="{TemplateBinding Value, Mode=TwoWay}"/>
</Style>
<!-- Normal State -->
<Style Selector="Slider /template/ Thumb.SliderThumbStyle">
<Setter Property="Background" Value="{DynamicResource SliderThumbBackground}" />
</Style>
<Style Selector="Slider /template/ Grid#SliderContainer">
<Setter Property="Background" Value="{DynamicResource SliderContainerBackground}" />
</Style>
<!-- Pressed State -->
<!-- Disabled State -->
<!-- PointerOver State -->
<Style Selector="Slider:pointerover /template/ RepeatButton#PART_IncreaseButton">
<Setter Property="Background" Value="{DynamicResource SliderTrackFillPointerOver}" />
</Style>
<Style Selector="Slider:pointerover /template/ Thumb.SliderThumbStyle">
<Setter Property="Background" Value="{DynamicResource SliderThumbBackgroundPointerOver}" />
</Style>
<Style Selector="Slider:pointerover /template/ Grid#SliderContainer">
<Setter Property="Background" Value="{DynamicResource SliderContainerBackgroundPointerOver}" />
</Style>
<Style Selector="Slider:pointerover /template/ RepeatButton#PART_DecreaseButton">
<Setter Property="Background" Value="{DynamicResource SliderTrackValueFillPointerOver}" />
</Style>
</Styles>

Write Preview
Loading…
Cancel
Save