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,7 +7,20 @@
d:DesignHeight="800" d:DesignHeight="800"
d:DesignWidth="800" d:DesignWidth="800"
mc:Ignorable="d"> mc:Ignorable="d">
<ScrollViewer>
<StackPanel HorizontalAlignment="Left" Spacing="20"> <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 <ProgressBar
Width="100" Width="100"
Height="100" Height="100"
@ -15,7 +28,8 @@
Maximum="{Binding #slider.Maximum}" Maximum="{Binding #slider.Maximum}"
Minimum="{Binding #slider.Minimum}" Minimum="{Binding #slider.Minimum}"
Theme="{DynamicResource ProgressRing}" Theme="{DynamicResource ProgressRing}"
Value="{Binding #slider.Value}" /> ShowProgressText="True"/>
</StackPanel>
<Slider <Slider
Name="slider" Name="slider"
Width="300" Width="300"
@ -104,6 +118,27 @@
ShowProgressText="False" ShowProgressText="False"
Value="20" /> Value="20" />
</StackPanel> </StackPanel>
<ProgressBar
Width="200"
Classes="Primary"
Maximum="100"
Minimum="0"
ShowProgressText="True"
Value="60" />
<ProgressBar
Width="200"
Classes="Secondary"
Maximum="100"
Minimum="0"
ShowProgressText="True"
Value="60" />
<ProgressBar
Width="200"
Classes="Tertiary"
Maximum="100"
Minimum="0"
ShowProgressText="True"
Value="60" />
<ProgressBar <ProgressBar
Width="200" Width="200"
Classes="Success" Classes="Success"
@ -125,11 +160,6 @@
Minimum="0" Minimum="0"
ShowProgressText="True" ShowProgressText="True"
Value="60" /> Value="60" />
<ProgressBar
Width="200"
Maximum="100"
Minimum="0"
ShowProgressText="True"
Value="60" />
</StackPanel> </StackPanel>
</ScrollViewer>
</UserControl> </UserControl>

View File

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

View File

@ -7,6 +7,9 @@
<SolidColorBrush x:Key="ProgressBarOuterTextForeground" Color="#F9F9F9" /> <SolidColorBrush x:Key="ProgressBarOuterTextForeground" Color="#F9F9F9" />
<SolidColorBrush x:Key="ProgressBarRootBorderBrush" Color="Transparent" /> <SolidColorBrush x:Key="ProgressBarRootBorderBrush" Color="Transparent" />
<FontWeight x:Key="ProgressBarTextFontWeight">600</FontWeight> <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="ProgressBarSuccessForeground" Color="#5DC264" />
<SolidColorBrush x:Key="ProgressBarWarningForeground" Color="#FFAE43" /> <SolidColorBrush x:Key="ProgressBarWarningForeground" Color="#FFAE43" />
<SolidColorBrush x:Key="ProgressBarErrorForeground" Color="#FC725A" /> <SolidColorBrush x:Key="ProgressBarErrorForeground" Color="#FC725A" />

View File

@ -7,6 +7,9 @@
<SolidColorBrush x:Key="ProgressBarOuterTextForeground" Color="#1C1F23" /> <SolidColorBrush x:Key="ProgressBarOuterTextForeground" Color="#1C1F23" />
<SolidColorBrush x:Key="ProgressBarRootBorderBrush" Color="Transparent" /> <SolidColorBrush x:Key="ProgressBarRootBorderBrush" Color="Transparent" />
<FontWeight x:Key="ProgressBarTextFontWeight">600</FontWeight> <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="ProgressBarSuccessForeground" Color="#3BB346" />
<SolidColorBrush x:Key="ProgressBarWarningForeground" Color="#FC8800" /> <SolidColorBrush x:Key="ProgressBarWarningForeground" Color="#FC8800" />
<SolidColorBrush x:Key="ProgressBarErrorForeground" Color="#F93920" /> <SolidColorBrush x:Key="ProgressBarErrorForeground" Color="#F93920" />