zhaoyushun1999/Semi.Avalonia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: redesign HyperlinkButton.

Browse Source 
add OnlyIcon & Underline Classes to HyperlinkButton.
This commit is contained in:
Zhang Dian 2024-11-08 17:42:34 +08:00
parent 450fd5edbb
commit 5451495c5c
6 changed files with 84 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
demo/Semi.Avalonia.Demo/Pages/HyperlinkButtonDemo.axaml
View File

@ -8,36 +8,22 @@
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<StackPanel HorizontalAlignment="Left" Spacing="20">
<HyperlinkButton
NavigateUri="https://www.irihi.tech/"
Content="IRIHI Homepage" />
<HyperlinkButton
Classes="Underline"
IsEnabled="False"
NavigateUri="https://www.irihi.tech/"
Content="Not Enabled" />
<HyperlinkButton
Classes="WithIcon Underline"
Height="20"
NavigateUri="https://www.irihi.tech/"
Content="带下划线的网页链接" />
<StackPanel Orientation="Horizontal">
<HyperlinkButton Height="20" NavigateUri="http://www.irihi.tech/">
<TextBlock
HorizontalAlignment="Center"
Text="iRihi Homepage"
TextDecorations="Underline"
VerticalAlignment="Center" />
</HyperlinkButton>
</StackPanel>
<StackPanel Orientation="Horizontal">
<HyperlinkButton Height="20" IsEnabled="False">
<TextBlock
HorizontalAlignment="Center"
Text="Not Enabled"
TextDecorations="Underline"
VerticalAlignment="Center" />
</HyperlinkButton>
</StackPanel>
<StackPanel Orientation="Horizontal">
<HyperlinkButton
BorderThickness="1"
Classes="WithIcon"
Height="20"
NavigateUri="http://www.irihi.tech/">
<TextBlock
HorizontalAlignment="Center"
Text="Link with Icon"
TextDecorations="Underline"
VerticalAlignment="Center" />
</HyperlinkButton>
<HyperlinkButton Classes="OnlyIcon" NavigateUri="https://www.irihi.tech/" />
<HyperlinkButton Classes="OnlyIcon" NavigateUri="https://www.irihi.tech/" />
</StackPanel>
</StackPanel>
</UserControl>
</UserControl>

122
src/Semi.Avalonia/Controls/HyperlinkButton.axaml
View File

@ -1,118 +1,100 @@
<ResourceDictionary
x:CompileBindings="True"
xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:CompileBindings="True">
<Design.PreviewWith>
<StackPanel>
<HyperlinkButton NavigateUri="http://www.irihi.tech/">
链接文本
</HyperlinkButton>
<HyperlinkButton NavigateUri="http://www.irihi.tech/" Classes="WithIcon Underline">
网页链接
</HyperlinkButton>
<HyperlinkButton NavigateUri="http://www.irihi.tech/" Classes="OnlyIcon">
OnlyIcon
</HyperlinkButton>
</StackPanel>
</Design.PreviewWith>
<ControlTheme TargetType="HyperlinkButton" x:Key="{x:Type HyperlinkButton}">
<Setter Property="Padding" Value="0,0,0,0" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="FontSize" Value="{DynamicResource HyperlinkButtonFontSize}" />
<Setter Property="MinHeight" Value="32" />
<Setter Property="FontWeight" Value="{DynamicResource HyperlinkButtonFontWeight}" />
<Setter Property="Foreground" Value="{DynamicResource HyperlinkButtonForeground}" />
<Setter Property="Background" Value="{DynamicResource HyperlinkButtonDefaultBackground}" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="Template">
<ControlTemplate TargetType="HyperlinkButton">
<Grid ColumnDefinitions="Auto,*" Name="RootGrid">
<Grid
Grid.Column="0"
<DockPanel>
<PathIcon
Name="PART_LinkGlyph"
Margin="{DynamicResource HyperlinkButtonLinkGlyphMargin}"
IsVisible="False"
Margin="0,0,8,0"
VerticalAlignment="Center"
Name="IconGrid">
<Border
Background="{DynamicResource HyperlinkButtonDefaultBackground}"
Height="{DynamicResource HyperlinkButtonIconHeight}"
Opacity="0"
UseLayoutRounding="False"
Width="{DynamicResource HyperlinkButtonIconWidth}"
Name="BackgroundRectangle" />
<PathIcon
Data="{DynamicResource HyperlinkButtonLinkGlyph}"
Foreground="{DynamicResource HyperlinkButtonForeground}"
Height="{DynamicResource HyperlinkButtonLinkGlyphHeight}"
Name="LinkGlyph"
VerticalAlignment="Center"
Width="{DynamicResource HyperlinkButtonLinkGlyphWidth}" />
</Grid>
Data="{DynamicResource HyperlinkButtonLinkGlyph}"
Foreground="{TemplateBinding Foreground}"
Width="{DynamicResource HyperlinkButtonLinkGlyphWidth}"
Height="{DynamicResource HyperlinkButtonLinkGlyphHeight}" />
<ContentPresenter
Name="PART_ContentPresenter"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Cursor="{TemplateBinding Cursor}"
Grid.Column="1"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Padding="0,0,0,0"
RecognizesAccessKey="True"
VerticalAlignment="Center"
Name="ContentPresenter" />
</Grid>
RecognizesAccessKey="True" />
</DockPanel>
</ControlTemplate>
</Setter>
<Style Selector="^:pointerover">
<Style Selector="^ /template/ PathIcon#LinkGlyph">
<Setter Property="Foreground" Value="{DynamicResource HyperlinkButtonOverForeground}" />
</Style>
<Style Selector="^ /template/ ContentPresenter#ContentPresenter">
<Setter Property="Foreground" Value="{DynamicResource HyperlinkButtonOverForeground}" />
</Style>
<Setter Property="Foreground" Value="{DynamicResource HyperlinkButtonPointeroverForeground}" />
</Style>
<!-- Unvisited Pressed State -->
<Style Selector="^:pressed">
<Setter Property="Foreground" Value="{DynamicResource HyperlinkButtonPressedForeground}" />
<Setter Property="RenderTransform" Value="scale(0.98)" />
</Style>
<!-- Unvisited Disabled state -->
<Style Selector="^:disabled">
<Style Selector="^ /template/ PathIcon#LinkGlyph">
<Setter Property="Foreground" Value="{DynamicResource HyperlinkButtonDisabledForeground}" />
</Style>
<Style Selector="^ /template/ ContentPresenter#ContentPresenter">
<Setter Property="Foreground" Value="{DynamicResource HyperlinkButtonDisabledForeground}" />
</Style>
<Setter Property="Foreground" Value="{DynamicResource HyperlinkButtonDisabledForeground}" />
</Style>
<Style Selector="^:visited">
<Style Selector="^ /template/ PathIcon#LinkGlyph">
<Setter Property="Foreground" Value="{DynamicResource HyperlinkButtonVisitedForeground}" />
</Style>
<Style Selector="^ /template/ ContentPresenter#ContentPresenter">
<Setter Property="Foreground" Value="{DynamicResource HyperlinkButtonVisitedForeground}" />
</Style>
<Setter Property="Foreground" Value="{DynamicResource HyperlinkButtonVisitedForeground}" />
<!-- Visited Pointerover State -->
<Style Selector="^:pointerover">
<Style Selector="^ /template/ PathIcon#LinkGlyph">
<Setter Property="Foreground" Value="{DynamicResource HyperlinkButtonOverForeground}" />
</Style>
<Style Selector="^ /template/ ContentPresenter#ContentPresenter">
<Setter Property="Foreground" Value="{DynamicResource HyperlinkButtonOverForeground}" />
</Style>
<Setter Property="Foreground" Value="{DynamicResource HyperlinkButtonPointeroverForeground}" />
</Style>
<!-- Visited Pressed State -->
<Style Selector="^:pressed">
<Setter Property="Foreground" Value="{DynamicResource HyperlinkButtonPressedForeground}" />
<Setter Property="RenderTransform" Value="scale(0.98)" />
</Style>
<!-- Visited Disabled State -->
<Style Selector="^:disabled">
<Style Selector="^ /template/ PathIcon#LinkGlyph">
<Setter Property="Foreground" Value="{DynamicResource HyperlinkButtonDisabledForeground}" />
</Style>
<Style Selector="^ /template/ ContentPresenter#ContentPresenter">
<Setter Property="Foreground" Value="{DynamicResource HyperlinkButtonDisabledForeground}" />
</Style>
<Setter Property="Foreground" Value="{DynamicResource HyperlinkButtonDisabledForeground}" />
</Style>
</Style>
<Style Selector="^.WithIcon">
<Style Selector="^ /template/ Grid#IconGrid">
<Style Selector="^ /template/ PathIcon#PART_LinkGlyph">
<Setter Property="IsVisible" Value="True" />
</Style>
</Style>
<Style Selector="^.Underline">
<Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="TextBlock.TextDecorations" Value="Underline" />
</Style>
</Style>
<Style Selector="^.OnlyIcon">
<Style Selector="^ /template/ PathIcon#PART_LinkGlyph">
<Setter Property="Margin" Value="0" />
<Setter Property="IsVisible" Value="True" />
</Style>
<Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="IsVisible" Value="False" />
</Style>
</Style>
</ControlTheme>
</ResourceDictionary>

10
src/Semi.Avalonia/Themes/Dark/HyperlinkButton.axaml
View File

@ -1,7 +1,7 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<SolidColorBrush x:Key="HyperlinkButtonForeground" Color="#F9F9F9" />
<SolidColorBrush x:Key="HyperlinkButtonDefaultBackground" Color="Transparent" />
<SolidColorBrush x:Key="HyperlinkButtonOverForeground" Color="#54A9FF" />
<SolidColorBrush x:Key="HyperlinkButtonDisabledForeground" Opacity="0.35" Color="#F9F9F9" />
<SolidColorBrush x:Key="HyperlinkButtonVisitedForeground" Color="#681DA8" />
<SolidColorBrush x:Key="HyperlinkButtonForeground" Color="#54A9FF" />
<SolidColorBrush x:Key="HyperlinkButtonPointeroverForeground" Color="#7FC1FF" />
<SolidColorBrush x:Key="HyperlinkButtonPressedForeground" Color="#A9D7FF" />
<SolidColorBrush x:Key="HyperlinkButtonDisabledForeground" Opacity="0.35" Color="#F9F9F9" />
<SolidColorBrush x:Key="HyperlinkButtonVisitedForeground" Color="#B553C2" />
</ResourceDictionary>

4
src/Semi.Avalonia/Themes/HighContrast/HyperlinkButton.axaml
View File

@ -1,7 +1,7 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<SolidColorBrush x:Key="HyperlinkButtonForeground" Color="{StaticResource HotlightColor}" />
<SolidColorBrush x:Key="HyperlinkButtonDefaultBackground" Color="{StaticResource WindowColor}" />
<SolidColorBrush x:Key="HyperlinkButtonOverForeground" Color="{StaticResource WindowTextColor}" />
<SolidColorBrush x:Key="HyperlinkButtonPointeroverForeground" Color="{StaticResource WindowTextColor}" />
<SolidColorBrush x:Key="HyperlinkButtonPressedForeground" Color="{StaticResource WindowTextColor}" />
<SolidColorBrush x:Key="HyperlinkButtonDisabledForeground" Color="{StaticResource GrayTextColor}" />
<SolidColorBrush x:Key="HyperlinkButtonVisitedForeground" Color="{StaticResource HighlightColor}" />
</ResourceDictionary>

8
src/Semi.Avalonia/Themes/Light/HyperlinkButton.axaml
View File

@ -1,7 +1,7 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<SolidColorBrush x:Key="HyperlinkButtonForeground" Color="#1C1F23" />
<SolidColorBrush x:Key="HyperlinkButtonDefaultBackground" Color="Transparent" />
<SolidColorBrush x:Key="HyperlinkButtonOverForeground" Color="#0077FA" />
<SolidColorBrush x:Key="HyperlinkButtonForeground" Color="#0077FA" />
<SolidColorBrush x:Key="HyperlinkButtonPointeroverForeground" Color="#0062D6" />
<SolidColorBrush x:Key="HyperlinkButtonPressedForeground" Color="#004FB3" />
<SolidColorBrush x:Key="HyperlinkButtonDisabledForeground" Opacity="0.35" Color="#1C1F23" />
<SolidColorBrush x:Key="HyperlinkButtonVisitedForeground" Color="#681DA8" />
<SolidColorBrush x:Key="HyperlinkButtonVisitedForeground" Color="#9E28B3" />
</ResourceDictionary>

10
src/Semi.Avalonia/Themes/Shared/HyperlinkButton.axaml
View File

@ -1,9 +1,9 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<x:Double x:Key="HyperlinkButtonFontSize">14</x:Double>
<x:Double x:Key="HyperlinkButtonIconWidth">12</x:Double>
<x:Double x:Key="HyperlinkButtonIconHeight">12</x:Double>
<x:Double x:Key="HyperlinkButtonLinkGlyphWidth">12</x:Double>
<x:Double x:Key="HyperlinkButtonLinkGlyphHeight">12</x:Double>
<FontWeight x:Key="HyperlinkButtonFontWeight">600</FontWeight>
<x:Double x:Key="HyperlinkButtonLinkGlyphWidth">14</x:Double>
<x:Double x:Key="HyperlinkButtonLinkGlyphHeight">14</x:Double>
<Thickness x:Key="HyperlinkButtonLinkGlyphMargin">0 0 4 0</Thickness>
<StreamGeometry x:Key="HyperlinkButtonLinkGlyph">M 12.9393 2.9393 C 15.182 0.69666 18.818 0.696668 21.0606 2.93931 C 23.3033 5.18195 23.3033 8.81799 21.0606 11.0606 L 18.3925 13.7288 C 18.4631 13.3298 18.5 12.9192 18.5 12.5 C 18.5 11.5751 18.3206 10.6921 17.9947 9.88386 L 18.9393 8.93931 C 20.0104 7.86824 20.0104 6.13169 18.9393 5.06063 C 17.8682 3.98956 16.1317 3.98956 15.0606 5.06062 L 11.0606 9.06063 C 9.98956 10.1317 9.98956 11.8682 11.0606 12.9393 C 11.3265 13.2052 11.6335 13.4051 11.961 13.539 L 9.75848 15.7415 C 9.47 15.5439 9.19556 15.3169 8.9393 15.0606 C 6.69666 12.818 6.69666 9.18195 8.9393 6.93931 L 12.9393 2.9393 Z M 2.9393 12.9393 L 5.60751 10.2711 C 5.53685 10.6701 5.49999 11.0808 5.49999 11.5001 C 5.49999 12.4249 5.67935 13.3079 6.00519 14.1161 L 5.06062 15.0607 C 3.98956 16.1317 3.98956 17.8683 5.06063 18.9393 C 6.13169 20.0104 7.86824 20.0104 8.9393 18.9393 L 12.9393 14.9393 C 14.0104 13.8683 14.0104 12.1317 12.9393 11.0607 C 12.7664 10.8878 12.5762 10.7428 12.3743 10.6258 L 14.5302 8.46985 C 14.7141 8.61357 14.8914 8.77007 15.0606 8.93934 C 17.3033 11.182 17.3033 14.818 15.0606 17.0607 L 11.0606 21.0607 C 8.81798 23.3033 5.18194 23.3033 2.9393 21.0607 C 0.696665 18.818 0.696663 15.182 2.9393 12.9393 Z</StreamGeometry>
</ResourceDictionary>
</ResourceDictionary>