mirror of
https://gitcode.com/gh_mirrors/se/Semi.Avalonia
synced 2026-04-08 02:06:37 +08:00
c128feb4ff
* refactor: refactor ProgressBar styles for improved layout and animation. * fix: set MinHeight for ProgressBar text part. * chore: remove useless Progress resources.
415 lines
24 KiB
XML
415 lines
24 KiB
XML
<ResourceDictionary
|
|
xmlns="https://github.com/avaloniaui"
|
|
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
|
xmlns:semi="https://irihi.tech/semi"
|
|
xmlns:converters="using:Avalonia.Controls.Converters">
|
|
<Design.PreviewWith>
|
|
<StackPanel Width="400" Margin="20">
|
|
<ProgressBar />
|
|
<ProgressBar Value="20" />
|
|
<ProgressBar Value="50" Classes="Success" />
|
|
<ProgressBar Value="80" Classes="Warning" />
|
|
<ProgressBar Value="100" Classes="Error" />
|
|
<ProgressBar ShowProgressText="True" />
|
|
<ProgressBar Value="20" ShowProgressText="True" />
|
|
<ProgressBar Value="50" Classes="Success" ShowProgressText="True" />
|
|
<ProgressBar Value="80" Classes="Warning" ShowProgressText="True" />
|
|
<ProgressBar Value="100" Classes="Error" ShowProgressText="True" />
|
|
<ProgressBar Classes="Left" ShowProgressText="True" />
|
|
<ProgressBar Value="20" Classes="Left" ShowProgressText="True" />
|
|
<ProgressBar Value="50" Classes="Left Success" ShowProgressText="True" />
|
|
<ProgressBar Value="80" Classes="Left Warning" ShowProgressText="True" />
|
|
<ProgressBar Value="100" Classes="Left Error" ShowProgressText="True" />
|
|
<ProgressBar Classes="Right" ShowProgressText="True" />
|
|
<ProgressBar Value="20" Classes="Right" ShowProgressText="True" />
|
|
<ProgressBar Value="50" Classes="Right Success" ShowProgressText="True" />
|
|
<ProgressBar Value="80" Classes="Right Warning" ShowProgressText="True" />
|
|
<ProgressBar Value="100" Classes="Right Error" ShowProgressText="True" />
|
|
|
|
<StackPanel Orientation="Horizontal">
|
|
<StackPanel.Styles>
|
|
<Style Selector="ProgressBar">
|
|
<Setter Property="Orientation" Value="Vertical" />
|
|
</Style>
|
|
</StackPanel.Styles>
|
|
<ProgressBar />
|
|
<ProgressBar Value="20" />
|
|
<ProgressBar Value="50" Classes="Success" />
|
|
<ProgressBar Value="80" Classes="Warning" />
|
|
<ProgressBar Value="100" Classes="Error" />
|
|
<ProgressBar ShowProgressText="True" />
|
|
<ProgressBar Value="20" ShowProgressText="True" />
|
|
<ProgressBar Value="50" Classes="Success" ShowProgressText="True" />
|
|
<ProgressBar Value="80" Classes="Warning" ShowProgressText="True" />
|
|
<ProgressBar Value="100" Classes="Error" ShowProgressText="True" />
|
|
<ProgressBar Classes="Top" ShowProgressText="True" />
|
|
<ProgressBar Value="20" Classes="Top" ShowProgressText="True" />
|
|
<ProgressBar Value="50" Classes="Top Success" ShowProgressText="True" />
|
|
<ProgressBar Value="80" Classes="Top Warning" ShowProgressText="True" />
|
|
<ProgressBar Value="100" Classes="Top Error" ShowProgressText="True" />
|
|
<ProgressBar Classes="Bottom" ShowProgressText="True" />
|
|
<ProgressBar Value="20" Classes="Bottom" ShowProgressText="True" />
|
|
<ProgressBar Value="50" Classes="Bottom Success" ShowProgressText="True" />
|
|
<ProgressBar Value="80" Classes="Bottom Warning" ShowProgressText="True" />
|
|
<ProgressBar Value="100" Classes="Bottom Error" ShowProgressText="True" />
|
|
</StackPanel>
|
|
</StackPanel>
|
|
</Design.PreviewWith>
|
|
|
|
<converters:StringFormatConverter x:Key="StringFormatConverter" />
|
|
|
|
<ControlTheme x:Key="{x:Type ProgressBar}" TargetType="ProgressBar">
|
|
<Setter Property="Foreground" Value="{DynamicResource ProgressBarIndicatorBrush}" />
|
|
<Setter Property="Background" Value="{DynamicResource ProgressBarBackground}" />
|
|
<Setter Property="BorderThickness" Value="{DynamicResource ProgressBarBorderThemeThickness}" />
|
|
<Setter Property="CornerRadius" Value="{DynamicResource ProgressBarBackgroundCornerRadius}" />
|
|
<Setter Property="BorderBrush" Value="{DynamicResource ProgressBarRootBorderBrush}" />
|
|
<Setter Property="MinHeight" Value="{DynamicResource ProgressBarThemeMinHeight}" />
|
|
<Setter Property="VerticalAlignment" Value="Center" />
|
|
<Setter Property="Template">
|
|
<ControlTemplate TargetType="ProgressBar">
|
|
<Grid ColumnDefinitions="Auto, *, Auto" RowDefinitions="Auto, *, Auto">
|
|
<Border
|
|
Name="ProgressBarRoot"
|
|
Grid.Row="1"
|
|
Grid.Column="1"
|
|
Background="{TemplateBinding Background}"
|
|
BorderBrush="{TemplateBinding BorderBrush}"
|
|
BorderThickness="{TemplateBinding BorderThickness}"
|
|
ClipToBounds="True"
|
|
CornerRadius="{TemplateBinding CornerRadius}">
|
|
<Panel>
|
|
<Panel Name="DeterminateRoot" Opacity="1">
|
|
<Panel.Transitions>
|
|
<Transitions>
|
|
<DoubleTransition Property="Opacity" Duration="0:0:0.2" />
|
|
</Transitions>
|
|
</Panel.Transitions>
|
|
<Border
|
|
Name="PART_Indicator"
|
|
Margin="{TemplateBinding Padding}"
|
|
Background="{TemplateBinding Foreground}"
|
|
CornerRadius="{TemplateBinding CornerRadius}" />
|
|
</Panel>
|
|
<Panel Name="IndeterminateRoot" Opacity="0">
|
|
<Panel.Transitions>
|
|
<Transitions>
|
|
<DoubleTransition Property="Opacity" Duration="0:0:0.2" />
|
|
</Transitions>
|
|
</Panel.Transitions>
|
|
<Border
|
|
Name="IndeterminateProgressBarIndicator"
|
|
Margin="{TemplateBinding Padding}"
|
|
Background="{TemplateBinding Foreground}"
|
|
CornerRadius="{TemplateBinding CornerRadius}" />
|
|
<Border
|
|
Name="IndeterminateProgressBarIndicator2"
|
|
Margin="{TemplateBinding Padding}"
|
|
Background="{TemplateBinding Foreground}"
|
|
CornerRadius="{TemplateBinding CornerRadius}" />
|
|
</Panel>
|
|
</Panel>
|
|
</Border>
|
|
<LayoutTransformControl
|
|
Name="PART_LayoutTransformControl"
|
|
Grid.Row="1"
|
|
Grid.Column="1"
|
|
Margin="0"
|
|
HorizontalAlignment="Center"
|
|
VerticalAlignment="Center"
|
|
IsVisible="{TemplateBinding ShowProgressText}">
|
|
<TextBlock
|
|
Name="PART_ProgressText"
|
|
FontWeight="{DynamicResource ProgressBarTextFontWeight}"
|
|
Foreground="{DynamicResource ProgressBarTextForeground}">
|
|
<TextBlock.Text>
|
|
<MultiBinding Converter="{StaticResource StringFormatConverter}">
|
|
<TemplateBinding Property="ProgressTextFormat" />
|
|
<TemplateBinding Property="Value" />
|
|
<TemplateBinding Property="Percentage" />
|
|
<TemplateBinding Property="Minimum" />
|
|
<TemplateBinding Property="Maximum" />
|
|
</MultiBinding>
|
|
</TextBlock.Text>
|
|
</TextBlock>
|
|
</LayoutTransformControl>
|
|
</Grid>
|
|
</ControlTemplate>
|
|
</Setter>
|
|
<Style Selector="^.Primary">
|
|
<Setter Property="Foreground" Value="{DynamicResource ProgressBarPrimaryForeground}" />
|
|
</Style>
|
|
<Style Selector="^.Secondary">
|
|
<Setter Property="Foreground" Value="{DynamicResource ProgressBarSecondaryForeground}" />
|
|
</Style>
|
|
<Style Selector="^.Tertiary">
|
|
<Setter Property="Foreground" Value="{DynamicResource ProgressBarTertiaryForeground}" />
|
|
</Style>
|
|
<Style Selector="^.Success">
|
|
<Setter Property="Foreground" Value="{DynamicResource ProgressBarSuccessForeground}" />
|
|
</Style>
|
|
<Style Selector="^.Warning">
|
|
<Setter Property="Foreground" Value="{DynamicResource ProgressBarWarningForeground}" />
|
|
</Style>
|
|
<Style Selector="^.Danger">
|
|
<Setter Property="Foreground" Value="{DynamicResource ProgressBarDangerForeground}" />
|
|
</Style>
|
|
<!-- Error style is obsolete, use Danger instead -->
|
|
<Style Selector="^.Error">
|
|
<Setter Property="Foreground" Value="{DynamicResource ProgressBarErrorForeground}" />
|
|
</Style>
|
|
|
|
<Style Selector="^:horizontal">
|
|
<Setter Property="MinWidth" Value="200" />
|
|
<Setter Property="MinHeight" Value="4" />
|
|
<Style Selector="^ /template/ Border#PART_Indicator">
|
|
<Setter Property="HorizontalAlignment" Value="Left" />
|
|
</Style>
|
|
<Style Selector="^ /template/ Border#IndeterminateProgressBarIndicator">
|
|
<Setter Property="Width" Value="{Binding $parent[ProgressBar].TemplateSettings.ContainerWidth}" />
|
|
</Style>
|
|
<Style Selector="^ /template/ Border#IndeterminateProgressBarIndicator2">
|
|
<Setter Property="Width" Value="{Binding $parent[ProgressBar].TemplateSettings.Container2Width}" />
|
|
</Style>
|
|
|
|
<Style Selector="^.Left,^.Top">
|
|
<Style Selector="^ /template/ LayoutTransformControl#PART_LayoutTransformControl">
|
|
<Setter Property="Grid.Column" Value="0" />
|
|
<Setter Property="Grid.Row" Value="1" />
|
|
<Setter Property="Margin" Value="0 0 16 0" />
|
|
<Setter Property="MinWidth" Value="45" />
|
|
</Style>
|
|
<Style Selector="^ /template/ Border#ProgressBarRoot">
|
|
<Setter Property="MinHeight" Value="4" />
|
|
<Setter Property="VerticalAlignment" Value="Center" />
|
|
</Style>
|
|
</Style>
|
|
<Style Selector="^.Right,^.Bottom">
|
|
<Style Selector="^ /template/ LayoutTransformControl#PART_LayoutTransformControl">
|
|
<Setter Property="Grid.Column" Value="2" />
|
|
<Setter Property="Grid.Row" Value="1" />
|
|
<Setter Property="Margin" Value="16 0 0 0" />
|
|
<Setter Property="MinWidth" Value="45" />
|
|
</Style>
|
|
<Style Selector="^ /template/ Border#ProgressBarRoot">
|
|
<Setter Property="MinHeight" Value="4" />
|
|
<Setter Property="VerticalAlignment" Value="Center" />
|
|
</Style>
|
|
</Style>
|
|
</Style>
|
|
|
|
<Style Selector="^:vertical">
|
|
<Style Selector="^ /template/ LayoutTransformControl#PART_LayoutTransformControl">
|
|
<Setter Property="LayoutTransform">
|
|
<RotateTransform Angle="90" />
|
|
</Setter>
|
|
</Style>
|
|
<Setter Property="MinWidth" Value="4" />
|
|
<Setter Property="MinHeight" Value="200" />
|
|
<Style Selector="^ /template/ Border#PART_Indicator">
|
|
<Setter Property="VerticalAlignment" Value="Top" />
|
|
</Style>
|
|
<Style Selector="^ /template/ Border#IndeterminateProgressBarIndicator">
|
|
<Setter Property="Height" Value="{Binding $parent[ProgressBar].TemplateSettings.ContainerWidth}" />
|
|
</Style>
|
|
<Style Selector="^ /template/ Border#IndeterminateProgressBarIndicator2">
|
|
<Setter Property="Height" Value="{Binding $parent[ProgressBar].TemplateSettings.Container2Width}" />
|
|
</Style>
|
|
<Style Selector="^.Left,^.Top">
|
|
<Style Selector="^ /template/ LayoutTransformControl#PART_LayoutTransformControl">
|
|
<Setter Property="Grid.Column" Value="1" />
|
|
<Setter Property="Grid.Row" Value="0" />
|
|
<Setter Property="Margin" Value="0 0 0 16" />
|
|
<Setter Property="MinHeight" Value="45" />
|
|
</Style>
|
|
<Style Selector="^ /template/ Border#ProgressBarRoot">
|
|
<Setter Property="MinWidth" Value="4" />
|
|
<Setter Property="HorizontalAlignment" Value="Center" />
|
|
</Style>
|
|
</Style>
|
|
<Style Selector="^.Right,^.Bottom">
|
|
<Style Selector="^ /template/ LayoutTransformControl#PART_LayoutTransformControl">
|
|
<Setter Property="Grid.Column" Value="1" />
|
|
<Setter Property="Grid.Row" Value="2" />
|
|
<Setter Property="Margin" Value="0 16 0 0" />
|
|
<Setter Property="MinHeight" Value="45" />
|
|
</Style>
|
|
<Style Selector="^ /template/ Border#ProgressBarRoot">
|
|
<Setter Property="MinWidth" Value="4" />
|
|
<Setter Property="HorizontalAlignment" Value="Center" />
|
|
</Style>
|
|
</Style>
|
|
</Style>
|
|
|
|
<Style Selector="^:indeterminate">
|
|
<Style Selector="^ /template/ Panel#DeterminateRoot">
|
|
<Setter Property="Opacity" Value="0" />
|
|
</Style>
|
|
<Style Selector="^ /template/ Panel#IndeterminateRoot">
|
|
<Setter Property="Opacity" Value="1" />
|
|
</Style>
|
|
<Style Selector="^:horizontal /template/ Border#IndeterminateProgressBarIndicator">
|
|
<Style.Animations>
|
|
<Animation IterationCount="Infinite" Duration="0:0:2">
|
|
<KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:0">
|
|
<Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].TemplateSettings.ContainerAnimationStartPosition}" />
|
|
</KeyFrame>
|
|
<KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:1.5">
|
|
<Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].TemplateSettings.ContainerAnimationEndPosition}" />
|
|
</KeyFrame>
|
|
<KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:2">
|
|
<Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].TemplateSettings.ContainerAnimationEndPosition}" />
|
|
</KeyFrame>
|
|
</Animation>
|
|
</Style.Animations>
|
|
</Style>
|
|
<Style Selector="^:horizontal /template/ Border#IndeterminateProgressBarIndicator2">
|
|
<Style.Animations>
|
|
<Animation IterationCount="Infinite" Duration="0:0:2">
|
|
<KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:0">
|
|
<Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].TemplateSettings.Container2AnimationStartPosition}" />
|
|
</KeyFrame>
|
|
<KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:0.75">
|
|
<Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].TemplateSettings.Container2AnimationStartPosition}" />
|
|
</KeyFrame>
|
|
<KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:2">
|
|
<Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].TemplateSettings.Container2AnimationEndPosition}" />
|
|
</KeyFrame>
|
|
</Animation>
|
|
</Style.Animations>
|
|
</Style>
|
|
<Style Selector="^:vertical /template/ Border#IndeterminateProgressBarIndicator">
|
|
<Style.Animations>
|
|
<Animation IterationCount="Infinite" Duration="0:0:2">
|
|
<KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:0">
|
|
<Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].TemplateSettings.ContainerAnimationStartPosition}" />
|
|
</KeyFrame>
|
|
<KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:1.5">
|
|
<Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].TemplateSettings.ContainerAnimationEndPosition}" />
|
|
</KeyFrame>
|
|
<KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:2">
|
|
<Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].TemplateSettings.ContainerAnimationEndPosition}" />
|
|
</KeyFrame>
|
|
</Animation>
|
|
</Style.Animations>
|
|
</Style>
|
|
<Style Selector="^:vertical /template/ Border#IndeterminateProgressBarIndicator2">
|
|
<Style.Animations>
|
|
<Animation IterationCount="Infinite" Duration="0:0:2">
|
|
<KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:0">
|
|
<Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].TemplateSettings.Container2AnimationStartPosition}" />
|
|
</KeyFrame>
|
|
<KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:0.75">
|
|
<Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].TemplateSettings.Container2AnimationStartPosition}" />
|
|
</KeyFrame>
|
|
<KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:2">
|
|
<Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].TemplateSettings.Container2AnimationEndPosition}" />
|
|
</KeyFrame>
|
|
</Animation>
|
|
</Style.Animations>
|
|
</Style>
|
|
</Style>
|
|
</ControlTheme>
|
|
|
|
<ControlTheme x:Key="ProgressRing" TargetType="ProgressBar">
|
|
<Setter Property="Foreground" Value="{DynamicResource ProgressBarIndicatorBrush}" />
|
|
<Setter Property="Background" Value="{DynamicResource ProgressBarBackground}" />
|
|
<Setter Property="BorderThickness" Value="6" />
|
|
<Setter Property="Template">
|
|
<ControlTemplate TargetType="ProgressBar">
|
|
<Panel>
|
|
<Border Name="PART_Indicator" />
|
|
<Arc
|
|
Name="Background"
|
|
RenderOptions.EdgeMode="Antialias"
|
|
StartAngle="-90"
|
|
Stroke="{TemplateBinding Background}"
|
|
StrokeJoin="Round"
|
|
StrokeLineCap="Round"
|
|
StrokeThickness="{Binding BorderThickness.Left, RelativeSource={RelativeSource TemplatedParent}}"
|
|
SweepAngle="360" />
|
|
<Arc
|
|
Name="Indicator"
|
|
RenderOptions.EdgeMode="Antialias"
|
|
StartAngle="-90"
|
|
Stroke="{TemplateBinding Foreground}"
|
|
StrokeJoin="Round"
|
|
StrokeLineCap="Round"
|
|
StrokeThickness="{Binding BorderThickness.Left, RelativeSource={RelativeSource TemplatedParent}}"
|
|
SweepAngle="{TemplateBinding Percentage,Converter={semi:PositionToAngleConverter}}" />
|
|
<Arc
|
|
Name="IndeterminateIndicator"
|
|
Opacity="0"
|
|
RenderOptions.EdgeMode="Antialias"
|
|
StartAngle="-90"
|
|
Stroke="{TemplateBinding Foreground}"
|
|
StrokeJoin="Round"
|
|
StrokeLineCap="Round"
|
|
StrokeThickness="{Binding BorderThickness.Left, RelativeSource={RelativeSource TemplatedParent}}"
|
|
SweepAngle="{TemplateBinding Percentage,Converter={semi:PositionToAngleConverter}}" />
|
|
<TextBlock
|
|
Name="PART_ProgressText"
|
|
HorizontalAlignment="Center"
|
|
VerticalAlignment="Center"
|
|
FontWeight="{DynamicResource ProgressBarTextFontWeight}"
|
|
Foreground="{DynamicResource ProgressBarTextForeground}"
|
|
IsVisible="{TemplateBinding ShowProgressText}">
|
|
<TextBlock.Text>
|
|
<MultiBinding Converter="{StaticResource StringFormatConverter}">
|
|
<TemplateBinding Property="ProgressTextFormat" />
|
|
<TemplateBinding Property="Value" />
|
|
<TemplateBinding Property="Percentage" />
|
|
<TemplateBinding Property="Minimum" />
|
|
<TemplateBinding Property="Maximum" />
|
|
</MultiBinding>
|
|
</TextBlock.Text>
|
|
</TextBlock>
|
|
</Panel>
|
|
</ControlTemplate>
|
|
</Setter>
|
|
<Style Selector="^.Primary">
|
|
<Setter Property="Foreground" Value="{DynamicResource ProgressBarPrimaryForeground}" />
|
|
</Style>
|
|
<Style Selector="^.Secondary">
|
|
<Setter Property="Foreground" Value="{DynamicResource ProgressBarSecondaryForeground}" />
|
|
</Style>
|
|
<Style Selector="^.Tertiary">
|
|
<Setter Property="Foreground" Value="{DynamicResource ProgressBarTertiaryForeground}" />
|
|
</Style>
|
|
<Style Selector="^.Success">
|
|
<Setter Property="Foreground" Value="{DynamicResource ProgressBarSuccessForeground}" />
|
|
</Style>
|
|
<Style Selector="^.Warning">
|
|
<Setter Property="Foreground" Value="{DynamicResource ProgressBarWarningForeground}" />
|
|
</Style>
|
|
<Style Selector="^.Danger">
|
|
<Setter Property="Foreground" Value="{DynamicResource ProgressBarDangerForeground}" />
|
|
</Style>
|
|
<!-- Error style is obsolete, use Danger instead -->
|
|
<Style Selector="^.Error">
|
|
<Setter Property="Foreground" Value="{DynamicResource ProgressBarErrorForeground}" />
|
|
</Style>
|
|
<Style Selector="^:indeterminate /template/ Arc#Indicator">
|
|
<Setter Property="Opacity" Value="0" />
|
|
</Style>
|
|
<Style Selector="^:indeterminate /template/ Arc#IndeterminateIndicator">
|
|
<Setter Property="Opacity" Value="1" />
|
|
<Style.Animations>
|
|
<Animation IterationCount="Infinite" Duration="0:0:2">
|
|
<KeyFrame KeyTime="0:0:0">
|
|
<Setter Property="StartAngle" Value="-90" />
|
|
<Setter Property="SweepAngle" Value="20" />
|
|
</KeyFrame>
|
|
<KeyFrame KeyTime="0:0:1.5">
|
|
<Setter Property="StartAngle" Value="90" />
|
|
<Setter Property="SweepAngle" Value="160" />
|
|
</KeyFrame>
|
|
<KeyFrame KeyTime="0:0:2">
|
|
<Setter Property="StartAngle" Value="270" />
|
|
<Setter Property="SweepAngle" Value="20" />
|
|
</KeyFrame>
|
|
</Animation>
|
|
</Style.Animations>
|
|
</Style>
|
|
</ControlTheme>
|
|
</ResourceDictionary> |
