样式demo
This commit is contained in:
GG Z
@@ -7,7 +7,7 @@
|
||||
</ResourceDictionary.MergedDictionaries>
|
||||
|
||||
<!-- 滑块默认样式 -->
|
||||
<ControlTemplate x:Key="DefaultSliderThumbTemplate" TargetType="{x:Type Thumb}">
|
||||
<ControlTemplate x:Key="ShadowSliderThumbTemplate" TargetType="{x:Type Thumb}">
|
||||
<Grid
|
||||
HorizontalAlignment="Center"
|
||||
VerticalAlignment="Center"
|
||||
@@ -47,6 +47,363 @@
|
||||
</Trigger>
|
||||
</ControlTemplate.Triggers>
|
||||
</ControlTemplate>
|
||||
<ControlTemplate x:Key="ShadowSliderVerticalTemplate" TargetType="{x:Type Slider}">
|
||||
<Border
|
||||
x:Name="border"
|
||||
Background="{TemplateBinding Background}"
|
||||
BorderBrush="{TemplateBinding BorderBrush}"
|
||||
BorderThickness="{TemplateBinding BorderThickness}"
|
||||
SnapsToDevicePixels="True">
|
||||
<Grid>
|
||||
<Grid.ColumnDefinitions>
|
||||
<ColumnDefinition Width="Auto" />
|
||||
<ColumnDefinition Width="Auto" MinWidth="{TemplateBinding MinWidth}" />
|
||||
<ColumnDefinition Width="Auto" />
|
||||
</Grid.ColumnDefinitions>
|
||||
<Grid.RowDefinitions>
|
||||
<RowDefinition Height="*" />
|
||||
<RowDefinition Height="40" />
|
||||
</Grid.RowDefinitions>
|
||||
<TickBar
|
||||
x:Name="TopTick"
|
||||
Grid.Column="0"
|
||||
Width="4"
|
||||
Margin="0,0,2,0"
|
||||
Fill="{TemplateBinding Foreground}"
|
||||
Placement="Left"
|
||||
Visibility="Collapsed" />
|
||||
<Border
|
||||
x:Name="TrackBackground"
|
||||
Grid.Row="0"
|
||||
Grid.Column="1"
|
||||
Width="8"
|
||||
HorizontalAlignment="center"
|
||||
BorderBrush="{DynamicResource BorderNormalBrush}"
|
||||
BorderThickness="1"
|
||||
CornerRadius="4">
|
||||
<Grid>
|
||||
<Border
|
||||
Width="8"
|
||||
Margin="-1"
|
||||
VerticalAlignment="Bottom"
|
||||
Background="{TemplateBinding Foreground}"
|
||||
CornerRadius="4">
|
||||
<Border.Height>
|
||||
<MultiBinding Converter="{x:Static internal:ValueToRangeWidthConverter.Instance}" ConverterParameter="1">
|
||||
<Binding
|
||||
Mode="OneWay"
|
||||
Path="Minimum"
|
||||
RelativeSource="{RelativeSource TemplatedParent}" />
|
||||
<Binding
|
||||
Mode="OneWay"
|
||||
Path="Maximum"
|
||||
RelativeSource="{RelativeSource TemplatedParent}" />
|
||||
<Binding
|
||||
Mode="OneWay"
|
||||
Path="Value"
|
||||
RelativeSource="{RelativeSource TemplatedParent}" />
|
||||
<Binding
|
||||
Mode="OneWay"
|
||||
Path="ActualHeight"
|
||||
RelativeSource="{RelativeSource AncestorType={x:Type Border}}" />
|
||||
</MultiBinding>
|
||||
</Border.Height>
|
||||
</Border>
|
||||
<Canvas Margin="-1,-6">
|
||||
<Rectangle
|
||||
x:Name="PART_SelectionRange"
|
||||
Width="4.0"
|
||||
Fill="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"
|
||||
Visibility="Hidden" />
|
||||
</Canvas>
|
||||
</Grid>
|
||||
</Border>
|
||||
<Track
|
||||
x:Name="PART_Track"
|
||||
Grid.Row="0"
|
||||
Grid.Column="1">
|
||||
<Track.DecreaseRepeatButton>
|
||||
<RepeatButton Command="{x:Static Slider.DecreaseLarge}" Style="{StaticResource RepeatButtonTransparentStyle}" />
|
||||
</Track.DecreaseRepeatButton>
|
||||
<Track.IncreaseRepeatButton>
|
||||
<RepeatButton Command="{x:Static Slider.IncreaseLarge}" Style="{StaticResource RepeatButtonTransparentStyle}" />
|
||||
</Track.IncreaseRepeatButton>
|
||||
<Track.Thumb>
|
||||
<Thumb
|
||||
x:Name="Thumb"
|
||||
Width="22"
|
||||
Height="20"
|
||||
VerticalAlignment="Top"
|
||||
Focusable="False"
|
||||
OverridesDefaultStyle="True"
|
||||
Template="{StaticResource ShadowSliderThumbTemplate}" />
|
||||
</Track.Thumb>
|
||||
</Track>
|
||||
<TickBar
|
||||
x:Name="BottomTick"
|
||||
Grid.Row="0"
|
||||
Grid.Column="2"
|
||||
Width="4"
|
||||
Margin="2,0,0,0"
|
||||
Fill="{TemplateBinding Foreground}"
|
||||
Placement="Right"
|
||||
Visibility="Collapsed" />
|
||||
<!-- 新增：简单的值显示TextBlock -->
|
||||
<TextBlock
|
||||
x:Name="ValueDisplay"
|
||||
Grid.Row="1"
|
||||
Grid.Column="1"
|
||||
Margin="0,4,0,0"
|
||||
HorizontalAlignment="Center"
|
||||
VerticalAlignment="Center"
|
||||
Foreground="{DynamicResource PrimaryNormalBrush}"
|
||||
Text="{Binding Value, RelativeSource={RelativeSource TemplatedParent}, StringFormat=F1}">
|
||||
<TextBlock.LayoutTransform>
|
||||
<RotateTransform Angle="-90" />
|
||||
</TextBlock.LayoutTransform>
|
||||
</TextBlock>
|
||||
</Grid>
|
||||
</Border>
|
||||
<ControlTemplate.Triggers>
|
||||
<Trigger Property="TickPlacement" Value="TopLeft">
|
||||
<Setter TargetName="TrackBackground" Property="Margin" Value="2,5,0,5" />
|
||||
<Setter TargetName="TopTick" Property="Visibility" Value="Visible" />
|
||||
</Trigger>
|
||||
<Trigger Property="TickPlacement" Value="BottomRight">
|
||||
<Setter TargetName="TrackBackground" Property="Margin" Value="0,5,2,5" />
|
||||
<Setter TargetName="BottomTick" Property="Visibility" Value="Visible" />
|
||||
</Trigger>
|
||||
<Trigger Property="TickPlacement" Value="Both">
|
||||
<Setter TargetName="TopTick" Property="Visibility" Value="Visible" />
|
||||
<Setter TargetName="BottomTick" Property="Visibility" Value="Visible" />
|
||||
</Trigger>
|
||||
<Trigger Property="IsSelectionRangeEnabled" Value="True">
|
||||
<Setter TargetName="PART_SelectionRange" Property="Visibility" Value="Visible" />
|
||||
</Trigger>
|
||||
<Trigger Property="IsKeyboardFocused" Value="True">
|
||||
<Setter TargetName="Thumb" Property="Foreground" Value="{DynamicResource PrimaryFocusedBrush}" />
|
||||
</Trigger>
|
||||
<!-- 新增：可以选择是否显示值 -->
|
||||
<Trigger Property="Tag" Value="HideValue">
|
||||
<Setter TargetName="ValueDisplay" Property="Visibility" Value="Collapsed" />
|
||||
</Trigger>
|
||||
</ControlTemplate.Triggers>
|
||||
</ControlTemplate>
|
||||
<ControlTemplate x:Key="ShadowSliderHorizontalTemplate" TargetType="{x:Type Slider}">
|
||||
<Border
|
||||
x:Name="border"
|
||||
Background="{TemplateBinding Background}"
|
||||
BorderBrush="{TemplateBinding BorderBrush}"
|
||||
BorderThickness="{TemplateBinding BorderThickness}"
|
||||
SnapsToDevicePixels="True">
|
||||
<Grid>
|
||||
<Grid.RowDefinitions>
|
||||
<RowDefinition Height="Auto" />
|
||||
<RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}" />
|
||||
<RowDefinition Height="Auto" />
|
||||
</Grid.RowDefinitions>
|
||||
<Grid.ColumnDefinitions>
|
||||
<ColumnDefinition Width="*" />
|
||||
<ColumnDefinition Width="40" />
|
||||
</Grid.ColumnDefinitions>
|
||||
<TickBar
|
||||
x:Name="TopTick"
|
||||
Grid.Row="0"
|
||||
Height="4"
|
||||
Margin="0,0,0,2"
|
||||
Fill="{TemplateBinding Foreground}"
|
||||
Placement="Top"
|
||||
Visibility="Collapsed" />
|
||||
<Border
|
||||
x:Name="TrackBackground"
|
||||
Grid.Row="1"
|
||||
Grid.Column="0"
|
||||
Height="8"
|
||||
VerticalAlignment="center"
|
||||
BorderBrush="{DynamicResource BorderNormalBrush}"
|
||||
BorderThickness="1"
|
||||
CornerRadius="4">
|
||||
<Grid>
|
||||
<Border
|
||||
Height="8"
|
||||
Margin="-1"
|
||||
HorizontalAlignment="Left"
|
||||
Background="{TemplateBinding Foreground}"
|
||||
CornerRadius="4">
|
||||
<Border.Width>
|
||||
<MultiBinding Converter="{x:Static internal:ValueToRangeWidthConverter.Instance}" ConverterParameter="0">
|
||||
<Binding
|
||||
Mode="OneWay"
|
||||
Path="Minimum"
|
||||
RelativeSource="{RelativeSource TemplatedParent}" />
|
||||
<Binding
|
||||
Mode="OneWay"
|
||||
Path="Maximum"
|
||||
RelativeSource="{RelativeSource TemplatedParent}" />
|
||||
<Binding
|
||||
Mode="OneWay"
|
||||
Path="Value"
|
||||
RelativeSource="{RelativeSource TemplatedParent}" />
|
||||
<Binding
|
||||
Mode="OneWay"
|
||||
Path="ActualWidth"
|
||||
RelativeSource="{RelativeSource AncestorType={x:Type Border}}" />
|
||||
</MultiBinding>
|
||||
</Border.Width>
|
||||
</Border>
|
||||
<Canvas Margin="-6,-1">
|
||||
<Rectangle
|
||||
x:Name="PART_SelectionRange"
|
||||
Height="4.0"
|
||||
Fill="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"
|
||||
Visibility="Hidden" />
|
||||
</Canvas>
|
||||
</Grid>
|
||||
|
||||
</Border>
|
||||
<Track
|
||||
x:Name="PART_Track"
|
||||
Grid.Row="1"
|
||||
Grid.Column="0">
|
||||
<Track.DecreaseRepeatButton>
|
||||
<RepeatButton Command="{x:Static Slider.DecreaseLarge}" Style="{StaticResource RepeatButtonTransparentStyle}" />
|
||||
</Track.DecreaseRepeatButton>
|
||||
<Track.IncreaseRepeatButton>
|
||||
<RepeatButton Command="{x:Static Slider.IncreaseLarge}" Style="{StaticResource RepeatButtonTransparentStyle}" />
|
||||
</Track.IncreaseRepeatButton>
|
||||
<Track.Thumb>
|
||||
<Thumb
|
||||
x:Name="Thumb"
|
||||
Width="20"
|
||||
Height="22"
|
||||
VerticalAlignment="Center"
|
||||
Focusable="False"
|
||||
OverridesDefaultStyle="True"
|
||||
Template="{StaticResource ShadowSliderThumbTemplate}" />
|
||||
</Track.Thumb>
|
||||
</Track>
|
||||
<TickBar
|
||||
x:Name="BottomTick"
|
||||
Grid.Row="2"
|
||||
Grid.Column="0"
|
||||
Height="4"
|
||||
Margin="0,2,0,0"
|
||||
Fill="{TemplateBinding Foreground}"
|
||||
Placement="Bottom"
|
||||
Visibility="Collapsed" />
|
||||
<!-- 新增：简单的值显示TextBlock，放在滑块下方 -->
|
||||
<TextBlock
|
||||
x:Name="ValueDisplay"
|
||||
Grid.Row="1"
|
||||
Grid.Column="1"
|
||||
Margin="4,0,0,0"
|
||||
HorizontalAlignment="Center"
|
||||
VerticalAlignment="Center"
|
||||
Foreground="{DynamicResource PrimaryNormalBrush}"
|
||||
Text="{Binding Value, RelativeSource={RelativeSource TemplatedParent}, StringFormat=F1}" />
|
||||
</Grid>
|
||||
</Border>
|
||||
<ControlTemplate.Triggers>
|
||||
<Trigger Property="TickPlacement" Value="TopLeft">
|
||||
<Setter TargetName="TrackBackground" Property="Margin" Value="5,2,5,0" />
|
||||
<Setter TargetName="TopTick" Property="Visibility" Value="Visible" />
|
||||
</Trigger>
|
||||
<Trigger Property="TickPlacement" Value="BottomRight">
|
||||
<Setter TargetName="TrackBackground" Property="Margin" Value="5,0,5,2" />
|
||||
<Setter TargetName="BottomTick" Property="Visibility" Value="Visible" />
|
||||
</Trigger>
|
||||
<Trigger Property="TickPlacement" Value="Both">
|
||||
<Setter TargetName="TopTick" Property="Visibility" Value="Visible" />
|
||||
<Setter TargetName="BottomTick" Property="Visibility" Value="Visible" />
|
||||
</Trigger>
|
||||
<Trigger Property="IsSelectionRangeEnabled" Value="True">
|
||||
<Setter TargetName="PART_SelectionRange" Property="Visibility" Value="Visible" />
|
||||
</Trigger>
|
||||
<Trigger Property="IsKeyboardFocused" Value="True">
|
||||
<Setter TargetName="Thumb" Property="Foreground" Value="{DynamicResource PrimaryFocusedBrush}" />
|
||||
</Trigger>
|
||||
</ControlTemplate.Triggers>
|
||||
</ControlTemplate>
|
||||
<Style x:Key="ShadowSliderStyle" TargetType="{x:Type Slider}">
|
||||
<Setter Property="Background" Value="Transparent" />
|
||||
<Setter Property="BorderBrush" Value="Transparent" />
|
||||
<Setter Property="FocusVisualStyle" Value="{DynamicResource FocusVisual}" />
|
||||
<Setter Property="Foreground" Value="{DynamicResource PrimaryGradientBrush}" />
|
||||
<Setter Property="HorizontalAlignment" Value="Stretch" />
|
||||
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
|
||||
<Setter Property="Stylus.IsPressAndHoldEnabled" Value="False" />
|
||||
<Setter Property="Template" Value="{StaticResource ShadowSliderHorizontalTemplate}" />
|
||||
<Style.Triggers>
|
||||
<Trigger Property="Orientation" Value="Vertical">
|
||||
<Setter Property="Template" Value="{StaticResource ShadowSliderVerticalTemplate}" />
|
||||
<Setter Property="VerticalAlignment" Value="Stretch" />
|
||||
<Setter Property="VerticalContentAlignment" Value="Stretch" />
|
||||
</Trigger>
|
||||
<!-- 触发器：当IsEnabled属性为False时，设置前景色为灰色 -->
|
||||
<Trigger Property="IsEnabled" Value="False">
|
||||
<Setter Property="Foreground" Value="{DynamicResource PrimaryDisabledBrush}" />
|
||||
</Trigger>
|
||||
<MultiTrigger>
|
||||
<MultiTrigger.Conditions>
|
||||
<Condition Property="TickPlacement" Value="TopLeft" />
|
||||
</MultiTrigger.Conditions>
|
||||
<Setter Property="IsSnapToTickEnabled" Value="True" />
|
||||
</MultiTrigger>
|
||||
<MultiTrigger>
|
||||
<MultiTrigger.Conditions>
|
||||
<Condition Property="TickPlacement" Value="BottomRight" />
|
||||
</MultiTrigger.Conditions>
|
||||
<Setter Property="IsSnapToTickEnabled" Value="True" />
|
||||
</MultiTrigger>
|
||||
<MultiTrigger>
|
||||
<MultiTrigger.Conditions>
|
||||
<Condition Property="TickPlacement" Value="Both" />
|
||||
</MultiTrigger.Conditions>
|
||||
<Setter Property="IsSnapToTickEnabled" Value="True" />
|
||||
</MultiTrigger>
|
||||
</Style.Triggers>
|
||||
</Style>
|
||||
|
||||
<ControlTemplate x:Key="DefaultSliderThumbTemplate" TargetType="{x:Type Thumb}">
|
||||
<Grid
|
||||
HorizontalAlignment="Center"
|
||||
VerticalAlignment="Center"
|
||||
UseLayoutRounding="True">
|
||||
<Ellipse
|
||||
x:Name="grip"
|
||||
Width="15"
|
||||
Height="15"
|
||||
Fill="{DynamicResource ControlBackgroundNormalBrush}"
|
||||
StrokeThickness="1">
|
||||
<!--<Ellipse.Effect>
|
||||
<DropShadowEffect
|
||||
BlurRadius="12"
|
||||
Opacity="0.4"
|
||||
Color="{DynamicResource DarkShadowColor}" />
|
||||
</Ellipse.Effect>-->
|
||||
</Ellipse>
|
||||
|
||||
</Grid>
|
||||
<ControlTemplate.Triggers>
|
||||
<Trigger Property="IsMouseOver" Value="True" />
|
||||
<Trigger Property="IsDragging" Value="True">
|
||||
<!--<Setter TargetName="grip" Property="Effect">
|
||||
<Setter.Value>
|
||||
<DropShadowEffect
|
||||
BlurRadius="4"
|
||||
Opacity="0.6"
|
||||
ShadowDepth="3"
|
||||
Color="{DynamicResource DarkShadowColor}" />
|
||||
</Setter.Value>
|
||||
</Setter>-->
|
||||
</Trigger>
|
||||
<Trigger Property="IsEnabled" Value="False">
|
||||
<Setter TargetName="grip" Property="Effect" Value="{x:Null}" />
|
||||
<Setter TargetName="grip" Property="Fill" Value="{DynamicResource ControlBackgroundDisabledBrush}" />
|
||||
<Setter TargetName="grip" Property="Stroke" Value="{DynamicResource PrimaryDisabledBrush}" />
|
||||
</Trigger>
|
||||
</ControlTemplate.Triggers>
|
||||
</ControlTemplate>
|
||||
|
||||
<!-- 轨道垂直默认样式 -->
|
||||
<ControlTemplate x:Key="SliderVerticalTemplate" TargetType="{x:Type Slider}">
|
||||
@@ -133,8 +490,6 @@
|
||||
<Track.Thumb>
|
||||
<Thumb
|
||||
x:Name="Thumb"
|
||||
Width="22"
|
||||
Height="20"
|
||||
VerticalAlignment="Top"
|
||||
Focusable="False"
|
||||
OverridesDefaultStyle="True"
|
||||
|
||||
Reference in New Issue
Block a user