调整代码
This commit is contained in:
121
Melskin/Controls/StepBar.xaml
Normal file
121
Melskin/Controls/StepBar.xaml
Normal file
@@ -0,0 +1,121 @@
|
||||
<ResourceDictionary
|
||||
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
|
||||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
||||
xmlns:local="clr-namespace:Melskin.Controls">
|
||||
<Style TargetType="{x:Type local:StepBarItem}">
|
||||
<Setter Property="Background" Value="Transparent" />
|
||||
<Setter Property="Cursor" Value="Hand" />
|
||||
<!-- 添加手型光标 -->
|
||||
<Setter Property="Template">
|
||||
<Setter.Value>
|
||||
<ControlTemplate TargetType="{x:Type local:StepBarItem}">
|
||||
<!-- 使用透明背景的 Grid 扩大点击区域 -->
|
||||
<Grid
|
||||
x:Name="Root"
|
||||
Margin="2"
|
||||
Background="Transparent">
|
||||
<StackPanel x:Name="Container" Orientation="{TemplateBinding Orientation}">
|
||||
<Grid>
|
||||
<Ellipse
|
||||
x:Name="Node"
|
||||
Width="28"
|
||||
Height="28"
|
||||
Fill="#222"
|
||||
Stroke="{DynamicResource TextSecondaryBrush}"
|
||||
StrokeThickness="2" />
|
||||
<TextBlock
|
||||
x:Name="IndexText"
|
||||
HorizontalAlignment="Center"
|
||||
VerticalAlignment="Center"
|
||||
FontSize="12"
|
||||
Foreground="White"
|
||||
Text="{TemplateBinding Index}" />
|
||||
<Path
|
||||
x:Name="CheckMark"
|
||||
HorizontalAlignment="Center"
|
||||
VerticalAlignment="Center"
|
||||
Data="M2,5 L5,8 L10,2"
|
||||
Stroke="White"
|
||||
StrokeThickness="2"
|
||||
Visibility="Collapsed" />
|
||||
</Grid>
|
||||
<ContentPresenter Margin="8,4" VerticalAlignment="Center" />
|
||||
<Rectangle
|
||||
x:Name="Line"
|
||||
Margin="4"
|
||||
Fill="{DynamicResource TextSecondaryBrush}" />
|
||||
</StackPanel>
|
||||
</Grid>
|
||||
<ControlTemplate.Triggers>
|
||||
<Trigger Property="Status" Value="Completed">
|
||||
<Setter TargetName="Node" Property="Fill" Value="{DynamicResource PrimaryNormalBrush}" />
|
||||
<Setter TargetName="Node" Property="Stroke" Value="{DynamicResource PrimaryNormalBrush}" />
|
||||
<Setter TargetName="IndexText" Property="Visibility" Value="Collapsed" />
|
||||
<Setter TargetName="CheckMark" Property="Visibility" Value="Visible" />
|
||||
<Setter TargetName="Line" Property="Fill" Value="{DynamicResource PrimaryNormalBrush}" />
|
||||
<!-- 添加一个小动画 -->
|
||||
<Trigger.EnterActions>
|
||||
<BeginStoryboard>
|
||||
<Storyboard>
|
||||
<DoubleAnimation
|
||||
Storyboard.TargetName="CheckMark"
|
||||
Storyboard.TargetProperty="Opacity"
|
||||
From="0"
|
||||
To="1"
|
||||
Duration="0:0:0.2" />
|
||||
</Storyboard>
|
||||
</BeginStoryboard>
|
||||
</Trigger.EnterActions>
|
||||
</Trigger>
|
||||
<Trigger Property="Orientation" Value="Horizontal">
|
||||
<Setter TargetName="Line" Property="Width" Value="40" />
|
||||
<Setter TargetName="Line" Property="Height" Value="2" />
|
||||
<Setter TargetName="Line" Property="VerticalAlignment" Value="Center" />
|
||||
<Setter TargetName="Node" Property="VerticalAlignment" Value="Center" />
|
||||
</Trigger>
|
||||
<Trigger Property="Orientation" Value="Vertical">
|
||||
<Setter TargetName="Line" Property="Width" Value="2" />
|
||||
<Setter TargetName="Line" Property="Height" Value="30" />
|
||||
<Setter TargetName="Line" Property="HorizontalAlignment" Value="Center" />
|
||||
<Setter TargetName="Node" Property="HorizontalAlignment" Value="Center" />
|
||||
</Trigger>
|
||||
<Trigger Property="Status" Value="Active">
|
||||
<Setter TargetName="Node" Property="Stroke" Value="{DynamicResource PrimaryNormalBrush}" />
|
||||
<Setter TargetName="IndexText" Property="Foreground" Value="{DynamicResource PrimaryNormalBrush}" />
|
||||
</Trigger>
|
||||
<Trigger Property="Status" Value="Completed">
|
||||
<Setter TargetName="Node" Property="Fill" Value="{DynamicResource PrimaryNormalBrush}" />
|
||||
<Setter TargetName="Node" Property="Stroke" Value="{DynamicResource PrimaryNormalBrush}" />
|
||||
<Setter TargetName="IndexText" Property="Visibility" Value="Collapsed" />
|
||||
<Setter TargetName="CheckMark" Property="Visibility" Value="Visible" />
|
||||
<Setter TargetName="Line" Property="Fill" Value="{DynamicResource PrimaryNormalBrush}" />
|
||||
</Trigger>
|
||||
<Trigger Property="IsLast" Value="True">
|
||||
<Setter TargetName="Line" Property="Visibility" Value="Collapsed" />
|
||||
</Trigger>
|
||||
</ControlTemplate.Triggers>
|
||||
</ControlTemplate>
|
||||
</Setter.Value>
|
||||
</Setter>
|
||||
</Style>
|
||||
|
||||
<!-- StepBar Style -->
|
||||
<Style TargetType="{x:Type local:StepBar}">
|
||||
<Setter Property="Template">
|
||||
<Setter.Value>
|
||||
<ControlTemplate TargetType="{x:Type local:StepBar}">
|
||||
<ItemsPresenter />
|
||||
</ControlTemplate>
|
||||
</Setter.Value>
|
||||
</Setter>
|
||||
<Setter Property="ItemsPanel">
|
||||
<Setter.Value>
|
||||
<ItemsPanelTemplate>
|
||||
<!-- 通过绑定方向来切换面板 -->
|
||||
<StackPanel Orientation="{Binding Orientation, RelativeSource={RelativeSource AncestorType=local:StepBar}}" />
|
||||
</ItemsPanelTemplate>
|
||||
</Setter.Value>
|
||||
</Setter>
|
||||
</Style>
|
||||
|
||||
</ResourceDictionary>
|
||||
Reference in New Issue
Block a user