Merge pull request #562 from irihitech/iconbutton

using IconButton in ThemeSelector Template & fix Loading Direction
This commit is contained in:
Dong Bin
2025-02-07 23:13:42 +08:00
committed by GitHub
3 changed files with 35 additions and 41 deletions

View File

@@ -6,17 +6,11 @@
mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450" mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
x:Class="Ursa.Demo.Views.TitleBarRightContent"> x:Class="Ursa.Demo.Views.TitleBarRightContent">
<StackPanel Orientation="Horizontal"> <StackPanel Orientation="Horizontal">
<Button <u:IconButton
Padding="8" Theme="{StaticResource BorderlessIconButton}"
Width="32" Classes="Tertiary"
Height="32" Icon="{StaticResource SemiIconGithubLogo}"
Theme="{DynamicResource BorderlessButton}" Click="OpenRepository" />
Click="OpenRepository">
<PathIcon
Theme="{StaticResource InnerPathIcon}"
Data="{StaticResource SemiIconGithubLogo}"
Foreground="{DynamicResource SemiColorText1}" />
</Button>
<u:ThemeToggleButton <u:ThemeToggleButton
IsThreeState="True" IsThreeState="True"
Mode="Controller" /> Mode="Controller" />

View File

@@ -2,9 +2,14 @@
xmlns="https://github.com/avaloniaui" xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:converters="clr-namespace:Ursa.Themes.Semi.Converters" xmlns:converters="clr-namespace:Ursa.Themes.Semi.Converters"
xmlns:u="clr-namespace:Ursa.Controls;assembly=Ursa" xmlns:iri="https://irihi.tech/shared"
xmlns:iri="https://irihi.tech/shared"> xmlns:u="clr-namespace:Ursa.Controls;assembly=Ursa">
<!-- Add Resources Here --> <!-- Add Resources Here -->
<Design.PreviewWith>
<StackPanel Margin="20">
<u:LoadingIcon Classes="Large"/>
</StackPanel>
</Design.PreviewWith>
<converters:BrushToColorConverter x:Key="BrushToColorConverter" /> <converters:BrushToColorConverter x:Key="BrushToColorConverter" />
<ControlTheme x:Key="{x:Type u:LoadingIcon}" TargetType="u:LoadingIcon"> <ControlTheme x:Key="{x:Type u:LoadingIcon}" TargetType="u:LoadingIcon">
<Setter Property="IsLoading" Value="True" /> <Setter Property="IsLoading" Value="True" />
@@ -14,19 +19,19 @@
<Arc <Arc
Name="PART_Arc" Name="PART_Arc"
Width="20" Width="20"
IsVisible="{TemplateBinding IsVisible}"
Height="20" Height="20"
IsVisible="{TemplateBinding IsVisible}"
StartAngle="0" StartAngle="0"
StrokeJoin="Round" StrokeJoin="Round"
StrokeLineCap="Round" StrokeLineCap="Round"
StrokeThickness="3" StrokeThickness="3"
SweepAngle="300"> SweepAngle="300">
<Arc.Stroke> <Arc.Stroke>
<ConicGradientBrush Angle="70"> <ConicGradientBrush Angle="50">
<GradientStops> <GradientStops>
<GradientStop Offset="0" Color="{Binding Foreground, Converter={StaticResource BrushToColorConverter}, RelativeSource={RelativeSource TemplatedParent}}" /> <GradientStop Offset="0.4" Color="Transparent" />
<GradientStop Offset="0.2" Color="{Binding Foreground, Converter={StaticResource BrushToColorConverter}, RelativeSource={RelativeSource TemplatedParent}}" /> <GradientStop Offset="0.8" Color="{Binding Foreground, Converter={StaticResource BrushToColorConverter}, RelativeSource={RelativeSource TemplatedParent}}" />
<GradientStop Offset="0.6" Color="Transparent" /> <GradientStop Offset="1.0" Color="{Binding Foreground, Converter={StaticResource BrushToColorConverter}, RelativeSource={RelativeSource TemplatedParent}}" />
</GradientStops> </GradientStops>
</ConicGradientBrush> </ConicGradientBrush>
</Arc.Stroke> </Arc.Stroke>
@@ -45,12 +50,12 @@
</Style> </Style>
<Style Selector="^[IsLoading=True] /template/ Arc#PART_Arc"> <Style Selector="^[IsLoading=True] /template/ Arc#PART_Arc">
<Style.Animations> <Style.Animations>
<Animation IterationCount="Infinite" Duration="0:0:0.5"> <Animation IterationCount="Infinite" Duration="0:0:0.6">
<KeyFrame Cue="0%"> <KeyFrame Cue="0%">
<Setter Property="RotateTransform.Angle" Value="0.0" /> <Setter Property="RotateTransform.Angle" Value="0.0" />
</KeyFrame> </KeyFrame>
<KeyFrame Cue="100%"> <KeyFrame Cue="100%">
<Setter Property="RotateTransform.Angle" Value="-360.0" /> <Setter Property="RotateTransform.Angle" Value="360.0" />
</KeyFrame> </KeyFrame>
</Animation> </Animation>
</Style.Animations> </Style.Animations>
@@ -70,8 +75,8 @@
<iri:PureRectangle <iri:PureRectangle
HorizontalAlignment="Stretch" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" VerticalAlignment="Stretch"
IsHitTestVisible="True" Background="{TemplateBinding Background}"
Background="{TemplateBinding Background}" /> IsHitTestVisible="True" />
<Grid <Grid
HorizontalAlignment="Center" HorizontalAlignment="Center"
VerticalAlignment="Center" VerticalAlignment="Center"
@@ -92,7 +97,7 @@
<ControlTheme x:Key="{x:Type u:LoadingContainer}" TargetType="u:LoadingContainer"> <ControlTheme x:Key="{x:Type u:LoadingContainer}" TargetType="u:LoadingContainer">
<Setter Property="HorizontalContentAlignment" Value="Center" /> <Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="MessageForeground" Value="{DynamicResource TextBlockDefaultForeground}"/> <Setter Property="MessageForeground" Value="{DynamicResource TextBlockDefaultForeground}" />
<Setter Property="Background" Value="{DynamicResource LoadingMaskBackground}" /> <Setter Property="Background" Value="{DynamicResource LoadingMaskBackground}" />
<Setter Property="VerticalContentAlignment" Value="Center" /> <Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Indicator"> <Setter Property="Indicator">
@@ -111,9 +116,9 @@
ContentTemplate="{TemplateBinding ContentTemplate}" /> ContentTemplate="{TemplateBinding ContentTemplate}" />
<u:Loading <u:Loading
Background="{TemplateBinding Background}" Background="{TemplateBinding Background}"
Foreground="{TemplateBinding MessageForeground}"
Content="{TemplateBinding LoadingMessage}" Content="{TemplateBinding LoadingMessage}"
ContentTemplate="{TemplateBinding LoadingMessageTemplate}" ContentTemplate="{TemplateBinding LoadingMessageTemplate}"
Foreground="{TemplateBinding MessageForeground}"
Indicator="{TemplateBinding Indicator}" Indicator="{TemplateBinding Indicator}"
IsLoading="{TemplateBinding IsLoading}" /> IsLoading="{TemplateBinding IsLoading}" />
</Panel> </Panel>

View File

@@ -2,32 +2,27 @@
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:u="https://irihi.tech/ursa"> xmlns:u="https://irihi.tech/ursa">
<ControlTheme TargetType="u:ThemeToggleButton" x:Key="{x:Type u:ThemeToggleButton}"> <ControlTheme TargetType="u:ThemeToggleButton" x:Key="{x:Type u:ThemeToggleButton}">
<Setter Property="Padding" Value="8" />
<Setter Property="Width" Value="32" />
<Setter Property="Height" Value="32" />
<Setter Property="Template"> <Setter Property="Template">
<ControlTemplate TargetType="u:ThemeToggleButton"> <ControlTemplate TargetType="u:ThemeToggleButton">
<Button <u:IconButton
Name="{x:Static u:ThemeToggleButton.PART_ThemeButton}" Name="{x:Static u:ThemeToggleButton.PART_ThemeButton}"
Theme="{DynamicResource BorderlessButton}" Theme="{StaticResource BorderlessIconButton}"
Padding="{TemplateBinding Padding}"> Classes="Tertiary"
<PathIcon Padding="{TemplateBinding Padding}"
Name="PART_Icon" Width="{TemplateBinding Width}"
Theme="{StaticResource InnerPathIcon}" Height="{TemplateBinding Height}" />
Foreground="{DynamicResource ButtonDefaultTertiaryForeground}" />
</Button>
</ControlTemplate> </ControlTemplate>
</Setter> </Setter>
<Style Selector="^:dark /template/ PathIcon#PART_Icon"> <Style Selector="^:dark /template/ u|IconButton#PART_ThemeButton">
<Setter Property="Data" Value="{DynamicResource ThemeSelectorButtonDarkGlyph}" /> <Setter Property="Icon" Value="{StaticResource ThemeSelectorButtonDarkGlyph}" />
<Setter Property="ToolTip.Tip" Value="{DynamicResource STRING_THEME_TOGGLE_DARK}" /> <Setter Property="ToolTip.Tip" Value="{DynamicResource STRING_THEME_TOGGLE_DARK}" />
</Style> </Style>
<Style Selector="^:light /template/ PathIcon#PART_Icon"> <Style Selector="^:light /template/ u|IconButton#PART_ThemeButton">
<Setter Property="Data" Value="{DynamicResource ThemeSelectorButtonLightGlyph}" /> <Setter Property="Icon" Value="{StaticResource ThemeSelectorButtonLightGlyph}" />
<Setter Property="ToolTip.Tip" Value="{DynamicResource STRING_THEME_TOGGLE_LIGHT}" /> <Setter Property="ToolTip.Tip" Value="{DynamicResource STRING_THEME_TOGGLE_LIGHT}" />
</Style> </Style>
<Style Selector="^ /template/ PathIcon#PART_Icon"> <Style Selector="^ /template/ u|IconButton#PART_ThemeButton">
<Setter Property="Data" Value="{DynamicResource ThemeSelectorButtonDefaultGlyph}" /> <Setter Property="Icon" Value="{StaticResource ThemeSelectorButtonDefaultGlyph}" />
<Setter Property="ToolTip.Tip" Value="{DynamicResource STRING_THEME_TOGGLE_SYSTEM}" /> <Setter Property="ToolTip.Tip" Value="{DynamicResource STRING_THEME_TOGGLE_SYSTEM}" />
</Style> </Style>
</ControlTheme> </ControlTheme>