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

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" />