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
9382c07609
commit
fb6bdc1705
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
Unified 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"> <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> <Styles.Resources>
<Thickness x:Key="SliderTopHeaderMargin">0,0,0,4</Thickness> <Thickness x:Key="SliderTopHeaderMargin">0,0,0,4</Thickness>
<GridLength x:Key="SliderPreContentMargin">15</GridLength> <GridLength x:Key="SliderPreContentMargin">15</GridLength>
@ -11,202 +16,151 @@
<x:Double x:Key="SliderVerticalThumbWidth">20</x:Double> <x:Double x:Key="SliderVerticalThumbWidth">20</x:Double>
<x:Double x:Key="SliderVerticalThumbHeight">20</x:Double> <x:Double x:Key="SliderVerticalThumbHeight">20</x:Double>
</Styles.Resources> </Styles.Resources>
<!-- Disabled State --> <Style Selector="Slider:horizontal">
<!-- <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">
<Setter Property="Background" Value="{DynamicResource SliderTrackFill}" /> <Setter Property="Background" Value="{DynamicResource SliderTrackFill}" />
<Setter Property="BorderThickness" Value="{DynamicResource SliderBorderThemeThickness}" /> <Setter Property="BorderThickness" Value="{DynamicResource SliderBorderThemeThickness}" />
<Setter Property="Foreground" Value="{DynamicResource SliderTrackValueFill}" /> <Setter Property="Foreground" Value="{DynamicResource SliderTrackValueFill}" />
<Setter Property="FontFamily" Value="{DynamicResource ContentControlThemeFontFamily}" /> <Setter Property="FontFamily" Value="{DynamicResource ContentControlThemeFontFamily}" />
<Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" /> <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 Property="Template">
<Setter.Value> <ControlTemplate>
<ControlTemplate> <Border BorderThickness="{TemplateBinding BorderThickness}"
<Border Margin="{TemplateBinding Padding}" CornerRadius="{DynamicResource ControlCornerRadius}"> BorderBrush="{TemplateBinding BorderBrush}"
<Border.Styles> CornerRadius="{DynamicResource ControlCornerRadius}">
<Grid Name="grid" Margin="{TemplateBinding Padding}" RowDefinitions="Auto, *">
<Grid.Styles>
<Style Selector="Thumb.SliderThumbStyle"> <Style Selector="Thumb.SliderThumbStyle">
<Setter Property="BorderThickness" Value="0" /> <Setter Property="BorderThickness" Value="0" />
<Setter Property="Background" Value="{DynamicResource SliderThumbBackground}" />
<Setter Property="Template"> <Setter Property="Template">
<Setter.Value> <Setter.Value>
<ControlTemplate> <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> </ControlTemplate>
</Setter.Value> </Setter.Value>
</Setter> </Setter>
</Style> </Style>
</Border.Styles> </Grid.Styles>
<Grid RowDefinitions="Auto,*"> <ContentPresenter x:Name="HeaderContentPresenter"
<!-- TODO removed TextBlock.TextWrapping; bind Content -> Header and ContentTemplate -> HeaderTemplate --> Grid.Row="0"
<ContentPresenter Name="HeaderContentPresenter" Grid.Row="0" TextBlock.FontWeight="{DynamicResource SliderHeaderThemeFontWeight}" TextBlock.Foreground="{DynamicResource SliderHeaderForeground}" Margin="{DynamicResource SliderTopHeaderMargin}"
IsVisible="False" /> TextBlock.FontWeight="{DynamicResource SliderHeaderThemeFontWeight}"
<!-- TODO removed Control.IsTemplateFocusTarget --> TextBlock.Foreground="{DynamicResource SliderHeaderForeground}"
<Grid Name="SliderContainer" Grid.Row="1" Background="{DynamicResource SliderContainerBackground}"> Margin="{DynamicResource SliderTopHeaderMargin}" />
<Grid Name="HorizontalTemplate" ColumnDefinitions="Auto,Auto,*" MinHeight="{DynamicResource SliderHorizontalHeight}"> <Grid x:Name="SliderContainer"
<Grid.RowDefinitions> Grid.Row="1">
<RowDefinition Height="{DynamicResource SliderPreContentMargin}" /> <Grid x:Name="HorizontalTemplate" MinHeight="{DynamicResource SliderHorizontalHeight}">
<RowDefinition Height="Auto" />
<RowDefinition Height="{DynamicResource SliderPostContentMargin}" /> <Grid.ColumnDefinitions>
</Grid.RowDefinitions> <ColumnDefinition Width="Auto" />
<Border Name="HorizontalTrackRect" Background="{TemplateBinding Background}" Height="{DynamicResource SliderTrackThemeHeight}" Grid.Row="1" Grid.ColumnSpan="3" CornerRadius="{Binding CornerRadius}" /> <ColumnDefinition Width="Auto" />
<Border Name="HorizontalDecreaseRect" Background="{TemplateBinding Foreground}" Grid.Row="1" CornerRadius="{Binding CornerRadius}" /> <ColumnDefinition Width="*" />
<!-- TODO TickBars are not implemented yet. --> </Grid.ColumnDefinitions>
<!--
<TickBar Name="TopTickBar" Visibility="Collapsed" Fill="{DynamicResource SliderTickBarFill}" Height="{DynamicResource SliderOutsideTickBarThemeHeight}" VerticalAlignment="Bottom" Margin="0,0,0,4" Grid.ColumnSpan="3" /> <Grid.RowDefinitions>
<TickBar Name="HorizontalInlineTickBar" Visibility="Collapsed" Fill="{DynamicResource SliderInlineTickBarFill}" Height="{DynamicResource SliderTrackThemeHeight}" Grid.Row="1" Grid.ColumnSpan="3" /> <RowDefinition Height="{DynamicResource SliderPreContentMargin}" />
<TickBar Name="BottomTickBar" Visibility="Collapsed" Fill="{DynamicResource SliderTickBarFill}" Height="{DynamicResource SliderOutsideTickBarThemeHeight}" VerticalAlignment="Top" Margin="0,4,0,0" Grid.Row="2" Grid.ColumnSpan="3" /> <RowDefinition Height="Auto" />
--> <RowDefinition Height="{DynamicResource SliderPostContentMargin}" />
<!-- TODO Removed FocusVisualMargin and AutomationProperties.AccessibilityView --> </Grid.RowDefinitions>
<Thumb Name="HorizontalThumb" Classes="SliderThumbStyle" DataContext="{TemplateBinding Value}" Height="{DynamicResource SliderHorizontalThumbHeight}" Width="{DynamicResource SliderHorizontalThumbWidth}" Grid.Row="0"
Grid.RowSpan="3" Grid.Column="1" /> <!--
</Grid> <TickBar x:Name="TopTickBar"
<Grid Name="VerticalTemplate" RowDefinitions="*,Auto,Auto" MinWidth="{DynamicResource SliderVerticalWidth}"> Visibility="Collapsed"
<Grid.ColumnDefinitions> Fill="{DynamicResource SliderTickBarFill}"
<ColumnDefinition Width="{DynamicResource SliderPreContentMargin}" /> Height="{DynamicResource SliderOutsideTickBarThemeHeight}"
<ColumnDefinition Width="Auto" /> VerticalAlignment="Bottom"
<ColumnDefinition Width="{DynamicResource SliderPostContentMargin}" /> Margin="0,0,0,4"
</Grid.ColumnDefinitions> Grid.ColumnSpan="3" />
<Border Name="VerticalTrackRect" Background="{TemplateBinding Background}" Width="{DynamicResource SliderTrackThemeHeight}" Grid.Column="1" Grid.RowSpan="3" CornerRadius="{Binding CornerRadius}" /> <TickBar x:Name="HorizontalInlineTickBar"
<Border Name="VerticalDecreaseRect" Background="{TemplateBinding Foreground}" Grid.Column="1" Grid.Row="2" CornerRadius="{Binding CornerRadius}" /> Visibility="Collapsed"
<!-- TODO TickBars are not implemented yet. --> Fill="{DynamicResource SliderInlineTickBarFill}"
<!-- Height="{DynamicResource SliderTrackThemeHeight}"
<TickBar Name="LeftTickBar" Visibility="Collapsed" Fill="{DynamicResource SliderTickBarFill}" Width="{DynamicResource SliderOutsideTickBarThemeHeight}" HorizontalAlignment="Right" Margin="0,0,4,0" Grid.RowSpan="3" /> Grid.Row="1"
<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.ColumnSpan="3" /> 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>
</Grid> </Grid>
</Border> </Grid>
</ControlTemplate> </Border>
</Setter.Value> </ControlTemplate>
</Setter> </Setter>
</Style> </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> </Styles>

Write Preview
Loading…
Cancel
Save