feat: add Primary, Secondary, Tertiary color.

This commit is contained in:
Zhang Dian 2023-07-03 16:28:29 +08:00
parent 7e1376f57e
commit 7a701a9c04
4 changed files with 164 additions and 110 deletions

View File

@ -7,129 +7,159 @@
d:DesignHeight="800"
d:DesignWidth="800"
mc:Ignorable="d">
<StackPanel HorizontalAlignment="Left" Spacing="20">
<ProgressBar
Width="100"
Height="100"
IsIndeterminate="True"
Maximum="{Binding #slider.Maximum}"
Minimum="{Binding #slider.Minimum}"
Theme="{DynamicResource ProgressRing}"
Value="{Binding #slider.Value}" />
<Slider
Name="slider"
Width="300"
IsSnapToTickEnabled="True"
Maximum="100"
Minimum="0"
TickFrequency="10" />
<ProgressBar
Width="200"
Maximum="100"
Minimum="0"
ShowProgressText="True"
Value="{Binding #slider.Value}" />
<ProgressBar
Width="200"
IsIndeterminate="True"
Maximum="100"
Minimum="0"
ShowProgressText="True"
Value="20" />
<ProgressBar
Width="200"
Classes="Left"
IsIndeterminate="True"
Maximum="100"
Minimum="0"
ShowProgressText="True"
Value="20" />
<ProgressBar
Width="200"
Classes="Left"
Maximum="100"
Minimum="0"
ShowProgressText="True"
Value="20" />
<ProgressBar
Width="200"
Classes="Right"
Maximum="100"
Minimum="0"
ShowProgressText="True"
Value="20" />
<StackPanel
HorizontalAlignment="Left"
Orientation="Horizontal"
Spacing="20">
<ProgressBar
Classes="Left"
<ScrollViewer>
<StackPanel HorizontalAlignment="Left" Spacing="20">
<StackPanel
HorizontalAlignment="Left"
Orientation="Horizontal"
Spacing="20">
<ProgressBar
Width="100"
Height="100"
Maximum="{Binding #slider.Maximum}"
Minimum="{Binding #slider.Minimum}"
Theme="{DynamicResource ProgressRing}"
Value="{Binding #slider.Value}"
ShowProgressText="True"/>
<ProgressBar
Width="100"
Height="100"
IsIndeterminate="True"
Maximum="{Binding #slider.Maximum}"
Minimum="{Binding #slider.Minimum}"
Theme="{DynamicResource ProgressRing}"
ShowProgressText="True"/>
</StackPanel>
<Slider
Name="slider"
Width="300"
IsSnapToTickEnabled="True"
Maximum="100"
Minimum="0"
TickFrequency="10" />
<ProgressBar
Width="200"
Maximum="100"
Minimum="0"
ShowProgressText="True"
Value="{Binding #slider.Value}" />
<ProgressBar
Width="200"
IsIndeterminate="True"
Maximum="100"
Minimum="0"
Orientation="Vertical"
ShowProgressText="True"
Value="20" />
<ProgressBar
Width="200"
Classes="Left"
IsIndeterminate="True"
Maximum="100"
Minimum="0"
ShowProgressText="True"
Value="20" />
<ProgressBar
Width="200"
Classes="Left"
Maximum="100"
Minimum="0"
ShowProgressText="True"
Value="20" />
<ProgressBar
Width="200"
Classes="Right"
Maximum="100"
Minimum="0"
Orientation="Vertical"
ShowProgressText="True"
Value="20" />
<StackPanel
HorizontalAlignment="Left"
Orientation="Horizontal"
Spacing="20">
<ProgressBar
Classes="Left"
Maximum="100"
Minimum="0"
Orientation="Vertical"
ShowProgressText="True"
Value="20" />
<ProgressBar
Classes="Right"
Maximum="100"
Minimum="0"
Orientation="Vertical"
ShowProgressText="True"
Value="20" />
<ProgressBar
Maximum="100"
Minimum="0"
Orientation="Vertical"
ShowProgressText="True"
Value="20" />
<ProgressBar
Classes="Left"
Maximum="100"
Minimum="0"
Orientation="Vertical"
ShowProgressText="False"
Value="20" />
<ProgressBar
IsIndeterminate="True"
Maximum="100"
Minimum="0"
Orientation="Vertical"
ShowProgressText="True"
Value="20" />
<ProgressBar
IsIndeterminate="True"
Maximum="100"
Minimum="0"
Orientation="Vertical"
ShowProgressText="False"
Value="20" />
</StackPanel>
<ProgressBar
Width="200"
Classes="Primary"
Maximum="100"
Minimum="0"
Orientation="Vertical"
ShowProgressText="True"
Value="20" />
Value="60" />
<ProgressBar
Classes="Left"
Width="200"
Classes="Secondary"
Maximum="100"
Minimum="0"
Orientation="Vertical"
ShowProgressText="False"
Value="20" />
<ProgressBar
IsIndeterminate="True"
Maximum="100"
Minimum="0"
Orientation="Vertical"
ShowProgressText="True"
Value="20" />
Value="60" />
<ProgressBar
IsIndeterminate="True"
Width="200"
Classes="Tertiary"
Maximum="100"
Minimum="0"
Orientation="Vertical"
ShowProgressText="False"
Value="20" />
ShowProgressText="True"
Value="60" />
<ProgressBar
Width="200"
Classes="Success"
Maximum="100"
Minimum="0"
ShowProgressText="True"
Value="60" />
<ProgressBar
Width="200"
Classes="Warning"
Maximum="100"
Minimum="0"
ShowProgressText="True"
Value="60" />
<ProgressBar
Width="200"
Classes="Error"
Maximum="100"
Minimum="0"
ShowProgressText="True"
Value="60" />
</StackPanel>
<ProgressBar
Width="200"
Classes="Success"
Maximum="100"
Minimum="0"
ShowProgressText="True"
Value="60" />
<ProgressBar
Width="200"
Classes="Warning"
Maximum="100"
Minimum="0"
ShowProgressText="True"
Value="60" />
<ProgressBar
Width="200"
Classes="Error"
Maximum="100"
Minimum="0"
ShowProgressText="True"
Value="60" />
<ProgressBar
Width="200"
Maximum="100"
Minimum="0"
ShowProgressText="True"
Value="60" />
</StackPanel>
</UserControl>
</ScrollViewer>
</UserControl>

View File

@ -170,15 +170,24 @@
</Grid>
</ControlTemplate>
</Setter>
<Style Selector="^.Primary">
<Setter Property="ProgressBar.Foreground" Value="{DynamicResource ProgressBarPrimaryForeground}" />
</Style>
<Style Selector="^.Secondary">
<Setter Property="ProgressBar.Foreground" Value="{DynamicResource ProgressBarSecondaryForeground}" />
</Style>
<Style Selector="^.Tertiary">
<Setter Property="ProgressBar.Foreground" Value="{DynamicResource ProgressBarTertiaryForeground}" />
</Style>
<Style Selector="^.Success">
<Setter Property="ProgressBar.Foreground" Value="{DynamicResource ProgressBarSuccessForeground}" />
</Style>
<Style Selector="^.Warning">
<Setter Property="ProgressBar.Foreground" Value="{DynamicResource ProgressBarWarningForeground}" />
</Style>
<Style Selector="^.Error">
<Setter Property="ProgressBar.Foreground" Value="{DynamicResource ProgressBarErrorForeground}" />
</Style>
<Style Selector="^.Success">
<Setter Property="ProgressBar.Foreground" Value="{DynamicResource ProgressBarSuccessForeground}" />
</Style>
<Style Selector="^:horizontal /template/ Border#PART_Indicator">
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Stretch" />
@ -387,15 +396,24 @@
</Panel>
</ControlTemplate>
</Setter>
<Style Selector="^.Primary">
<Setter Property="ProgressBar.Foreground" Value="{DynamicResource ProgressBarPrimaryForeground}" />
</Style>
<Style Selector="^.Secondary">
<Setter Property="ProgressBar.Foreground" Value="{DynamicResource ProgressBarSecondaryForeground}" />
</Style>
<Style Selector="^.Tertiary">
<Setter Property="ProgressBar.Foreground" Value="{DynamicResource ProgressBarTertiaryForeground}" />
</Style>
<Style Selector="^.Success">
<Setter Property="ProgressBar.Foreground" Value="{DynamicResource ProgressBarSuccessForeground}" />
</Style>
<Style Selector="^.Warning">
<Setter Property="ProgressBar.Foreground" Value="{DynamicResource ProgressBarWarningForeground}" />
</Style>
<Style Selector="^.Error">
<Setter Property="ProgressBar.Foreground" Value="{DynamicResource ProgressBarErrorForeground}" />
</Style>
<Style Selector="^.Success">
<Setter Property="ProgressBar.Foreground" Value="{DynamicResource ProgressBarSuccessForeground}" />
</Style>
<Style Selector="^:indeterminate /template/ Arc#Indicator">
<Setter Property="Opacity" Value="0" />
</Style>

View File

@ -7,6 +7,9 @@
<SolidColorBrush x:Key="ProgressBarOuterTextForeground" Color="#F9F9F9" />
<SolidColorBrush x:Key="ProgressBarRootBorderBrush" Color="Transparent" />
<FontWeight x:Key="ProgressBarTextFontWeight">600</FontWeight>
<SolidColorBrush x:Key="ProgressBarPrimaryForeground" Color="#54A9FF" />
<SolidColorBrush x:Key="ProgressBarSecondaryForeground" Color="#40B4F3" />
<SolidColorBrush x:Key="ProgressBarTertiaryForeground" Color="#888D92" />
<SolidColorBrush x:Key="ProgressBarSuccessForeground" Color="#5DC264" />
<SolidColorBrush x:Key="ProgressBarWarningForeground" Color="#FFAE43" />
<SolidColorBrush x:Key="ProgressBarErrorForeground" Color="#FC725A" />

View File

@ -7,6 +7,9 @@
<SolidColorBrush x:Key="ProgressBarOuterTextForeground" Color="#1C1F23" />
<SolidColorBrush x:Key="ProgressBarRootBorderBrush" Color="Transparent" />
<FontWeight x:Key="ProgressBarTextFontWeight">600</FontWeight>
<SolidColorBrush x:Key="ProgressBarPrimaryForeground" Color="#0077FA" />
<SolidColorBrush x:Key="ProgressBarSecondaryForeground" Color="#0095EE" />
<SolidColorBrush x:Key="ProgressBarTertiaryForeground" Color="#6B7075" />
<SolidColorBrush x:Key="ProgressBarSuccessForeground" Color="#3BB346" />
<SolidColorBrush x:Key="ProgressBarWarningForeground" Color="#FC8800" />
<SolidColorBrush x:Key="ProgressBarErrorForeground" Color="#F93920" />