feat: add TextBox theme.
This commit is contained in:
rabbitism
parent
31b94537ac
commit
96d10f33e5
@ -29,6 +29,9 @@
|
||||
<TabItem Header="TabControl">
|
||||
<pages:TabControlDemo />
|
||||
</TabItem>
|
||||
<TabItem Header="TextBox">
|
||||
<pages:TextBoxDemo />
|
||||
</TabItem>
|
||||
<TabItem Header="RepeatButton">
|
||||
<pages:RepeatButtonDemo />
|
||||
</TabItem>
|
||||
|
||||
22
src/Semi.Avalonia.Demo/Pages/TextBoxDemo.axaml
Normal file
22
src/Semi.Avalonia.Demo/Pages/TextBoxDemo.axaml
Normal file
@ -0,0 +1,22 @@
|
||||
<UserControl
|
||||
x:Class="Semi.Avalonia.Demo.Pages.TextBoxDemo" xmlns="https://github.com/avaloniaui"
|
||||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
|
||||
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" d:DesignHeight="450"
|
||||
d:DesignWidth="800" mc:Ignorable="d">
|
||||
<ScrollViewer>
|
||||
<StackPanel HorizontalAlignment="Left" Spacing="20">
|
||||
<TextBox Width="300" />
|
||||
<TextBox Width="300" Watermark="Please use this" />
|
||||
<TextBox Width="300" InnerLeftContent="http://" />
|
||||
<TextBox Width="300" InnerRightContent=".com" />
|
||||
<TextBox
|
||||
Width="500" InnerLeftContent="http://"
|
||||
InnerRightContent=".com" />
|
||||
<TextBox Width="300" Classes="clearButton" />
|
||||
<TextBox Width="300" PasswordChar="*" />
|
||||
<TextBox
|
||||
Width="300" Classes="revealPasswordButton"
|
||||
PasswordChar="*" />
|
||||
</StackPanel>
|
||||
</ScrollViewer>
|
||||
</UserControl>
|
||||
18
src/Semi.Avalonia.Demo/Pages/TextBoxDemo.axaml.cs
Normal file
18
src/Semi.Avalonia.Demo/Pages/TextBoxDemo.axaml.cs
Normal file
@ -0,0 +1,18 @@
|
||||
using Avalonia;
|
||||
using Avalonia.Controls;
|
||||
using Avalonia.Markup.Xaml;
|
||||
|
||||
namespace Semi.Avalonia.Demo.Pages;
|
||||
|
||||
public partial class TextBoxDemo : UserControl
|
||||
{
|
||||
public TextBoxDemo()
|
||||
{
|
||||
InitializeComponent();
|
||||
}
|
||||
|
||||
private void InitializeComponent()
|
||||
{
|
||||
AvaloniaXamlLoader.Load(this);
|
||||
}
|
||||
}
|
||||
@ -5,6 +5,7 @@
|
||||
<ResourceInclude Source="avares://Semi.Avalonia/Controls/Button.axaml" />
|
||||
<ResourceInclude Source="avares://Semi.Avalonia/Controls/CheckBox.axaml" />
|
||||
<ResourceInclude Source="avares://Semi.Avalonia/Controls/Label.axaml" />
|
||||
<ResourceInclude Source="avares://Semi.Avalonia/Controls/PathIcon.axaml" />
|
||||
<ResourceInclude Source="avares://Semi.Avalonia/Controls/RadioButton.axaml" />
|
||||
<ResourceInclude Source="avares://Semi.Avalonia/Controls/RepeatButton.axaml" />
|
||||
<ResourceInclude Source="avares://Semi.Avalonia/Controls/SelectableTextBlock.axaml" />
|
||||
@ -12,6 +13,7 @@
|
||||
<ResourceInclude Source="avares://Semi.Avalonia/Controls/TabControl.axaml" />
|
||||
<ResourceInclude Source="avares://Semi.Avalonia/Controls/TabItem.axaml" />
|
||||
<ResourceInclude Source="avares://Semi.Avalonia/Controls/TextBlock.axaml" />
|
||||
<ResourceInclude Source="avares://Semi.Avalonia/Controls/TextBox.axaml" />
|
||||
<ResourceInclude Source="avares://Semi.Avalonia/Controls/UserControl.axaml" />
|
||||
<ResourceInclude Source="avares://Semi.Avalonia/Controls/Window.axaml" />
|
||||
</ResourceDictionary.MergedDictionaries>
|
||||
|
||||
19
src/Semi.Avalonia/Controls/PathIcon.axaml
Normal file
19
src/Semi.Avalonia/Controls/PathIcon.axaml
Normal file
@ -0,0 +1,19 @@
|
||||
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
|
||||
<ControlTheme x:Key="{x:Type PathIcon}" TargetType="PathIcon">
|
||||
<Setter Property="PathIcon.Background" Value="Transparent" />
|
||||
<Setter Property="PathIcon.Height" Value="{DynamicResource IconElementThemeHeight}" />
|
||||
<Setter Property="PathIcon.Width" Value="{DynamicResource IconElementThemeWidth}" />
|
||||
<Setter Property="Template">
|
||||
<ControlTemplate TargetType="PathIcon">
|
||||
<Border Background="{TemplateBinding Background}">
|
||||
<Viewbox Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">
|
||||
<Path
|
||||
Data="{TemplateBinding Data}"
|
||||
Fill="{TemplateBinding Foreground}"
|
||||
Stretch="Uniform" />
|
||||
</Viewbox>
|
||||
</Border>
|
||||
</ControlTemplate>
|
||||
</Setter>
|
||||
</ControlTheme>
|
||||
</ResourceDictionary>
|
||||
162
src/Semi.Avalonia/Controls/TextBox.axaml
Normal file
162
src/Semi.Avalonia/Controls/TextBox.axaml
Normal file
@ -0,0 +1,162 @@
|
||||
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
|
||||
<Design.PreviewWith>
|
||||
<StackPanel Margin="20" Spacing="20">
|
||||
<TextBox Classes="clearButton" Text="Hello" />
|
||||
</StackPanel>
|
||||
</Design.PreviewWith>
|
||||
<ControlTheme x:Key="{x:Type TextBox}" TargetType="TextBox">
|
||||
<ControlTheme.Resources>
|
||||
<ControlTheme x:Key="InputClearButton" TargetType="Button">
|
||||
<Setter Property="Button.Foreground" Value="{DynamicResource TextBoxButtonDefaultForeground}" />
|
||||
<Setter Property="Button.Cursor" Value="Hand" />
|
||||
<Setter Property="Button.Template">
|
||||
<ControlTemplate TargetType="Button">
|
||||
<!-- Background must be transparent or hit test will fail -->
|
||||
<Label Background="Transparent">
|
||||
<Label.Content>
|
||||
<PathIcon
|
||||
Width="16" Height="16"
|
||||
Data="{DynamicResource TextBoxClearButtonData}"
|
||||
Foreground="{TemplateBinding Foreground}" />
|
||||
</Label.Content>
|
||||
</Label>
|
||||
</ControlTemplate>
|
||||
</Setter>
|
||||
<Style Selector="^:pointerover">
|
||||
<Setter Property="Button.Foreground" Value="{DynamicResource TextBoxButtonPointerOverForeground}" />
|
||||
</Style>
|
||||
</ControlTheme>
|
||||
<ControlTheme x:Key="InputToggleButton" TargetType="ToggleButton">
|
||||
<Setter Property="ToggleButton.Foreground" Value="{DynamicResource TextBoxButtonDefaultForeground}" />
|
||||
<Setter Property="ToggleButton.Cursor" Value="Hand" />
|
||||
<Setter Property="ToggleButton.Template">
|
||||
<ControlTemplate TargetType="ToggleButton">
|
||||
<!-- Background must be transparent or hit test will fail -->
|
||||
<Panel Background="Transparent">
|
||||
<PathIcon
|
||||
Width="16" Height="16"
|
||||
Data="{DynamicResource PasswordBoxRevealButtonData}"
|
||||
IsVisible="{Binding $parent[ToggleButton].IsChecked, Converter={x:Static BoolConverters.Not}}" />
|
||||
<PathIcon
|
||||
Width="16" Height="16"
|
||||
Data="{DynamicResource PasswordBoxHideButtonData}"
|
||||
IsVisible="{Binding $parent[ToggleButton].IsChecked}" />
|
||||
</Panel>
|
||||
</ControlTemplate>
|
||||
</Setter>
|
||||
</ControlTheme>
|
||||
</ControlTheme.Resources>
|
||||
<Setter Property="TextBox.Foreground" Value="{DynamicResource TextBoxForeground}" />
|
||||
<Setter Property="TextBox.Background" Value="{DynamicResource TextBoxDefaultBackground}" />
|
||||
<Setter Property="TextBox.BorderBrush" Value="{DynamicResource TextBoxDefaultBorderBrush}" />
|
||||
<Setter Property="TextBox.SelectionBrush" Value="{DynamicResource TextBoxSelectionBackground}" />
|
||||
<Setter Property="TextBox.SelectionForegroundBrush" Value="{DynamicResource TextBoxSelectionForeground}" />
|
||||
<Setter Property="TextBox.BorderThickness" Value="1" />
|
||||
<Setter Property="TextBox.CornerRadius" Value="{DynamicResource TextBoxDefaultCornerRadius}" />
|
||||
<Setter Property="TextBox.FontSize" Value="14" />
|
||||
<Setter Property="TextBox.Cursor" Value="IBeam" />
|
||||
<Setter Property="TextBox.MinHeight" Value="{DynamicResource TextBoxDefaultHeight}" />
|
||||
<Setter Property="TextBox.Padding" Value="{DynamicResource TextBoxContentPadding}" />
|
||||
<Setter Property="TextBox.VerticalContentAlignment" Value="Center" />
|
||||
<Setter Property="TextBox.FocusAdorner" Value="{x:Null}" />
|
||||
<Setter Property="ScrollViewer.IsScrollChainingEnabled" Value="True" />
|
||||
<Setter Property="TextBox.Template">
|
||||
<ControlTemplate TargetType="TextBox">
|
||||
<Border
|
||||
Name="PART_ContentPresenterBorder"
|
||||
BorderBrush="{TemplateBinding BorderBrush}"
|
||||
BorderThickness="{TemplateBinding BorderThickness}"
|
||||
CornerRadius="{DynamicResource TextBoxDefaultCornerRadius}">
|
||||
<Grid ColumnDefinitions="Auto,*,Auto, Auto, Auto">
|
||||
<ContentPresenter
|
||||
Grid.Column="0"
|
||||
Padding="{DynamicResource TextBoxInnerContentPadding}"
|
||||
VerticalAlignment="Center"
|
||||
Content="{TemplateBinding InnerLeftContent}"
|
||||
Foreground="{DynamicResource TextBoxInnerForeground}" />
|
||||
<ScrollViewer
|
||||
Grid.Column="1"
|
||||
AllowAutoHide="{TemplateBinding (ScrollViewer.AllowAutoHide)}"
|
||||
HorizontalScrollBarVisibility="{TemplateBinding (ScrollViewer.HorizontalScrollBarVisibility)}"
|
||||
IsScrollChainingEnabled="{TemplateBinding (ScrollViewer.IsScrollChainingEnabled)}"
|
||||
VerticalScrollBarVisibility="{TemplateBinding (ScrollViewer.VerticalScrollBarVisibility)}">
|
||||
<Panel>
|
||||
<TextBlock
|
||||
Name="PART_Watermark"
|
||||
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
|
||||
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
|
||||
IsVisible="{TemplateBinding Text,
|
||||
Converter={x:Static StringConverters.IsNullOrEmpty}}"
|
||||
Opacity="0.5"
|
||||
Text="{TemplateBinding Watermark}"
|
||||
TextAlignment="{TemplateBinding TextAlignment}"
|
||||
TextWrapping="{TemplateBinding TextWrapping}" />
|
||||
<TextPresenter
|
||||
Name="PART_TextPresenter"
|
||||
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
|
||||
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
|
||||
CaretBrush="{TemplateBinding CaretBrush}"
|
||||
CaretIndex="{TemplateBinding CaretIndex}"
|
||||
LineHeight="{TemplateBinding LineHeight}"
|
||||
PasswordChar="{TemplateBinding PasswordChar}"
|
||||
RevealPassword="{TemplateBinding RevealPassword}"
|
||||
SelectionBrush="{TemplateBinding SelectionBrush}"
|
||||
SelectionEnd="{TemplateBinding SelectionEnd}"
|
||||
SelectionForegroundBrush="{TemplateBinding SelectionForegroundBrush}"
|
||||
SelectionStart="{TemplateBinding SelectionStart}"
|
||||
Text="{TemplateBinding Text,
|
||||
Mode=TwoWay}"
|
||||
TextAlignment="{TemplateBinding TextAlignment}"
|
||||
TextWrapping="{TemplateBinding TextWrapping}" />
|
||||
</Panel>
|
||||
</ScrollViewer>
|
||||
<Button
|
||||
Name="PART_ClearButton" Grid.Column="2"
|
||||
Command="{Binding $parent[TextBox].Clear}"
|
||||
IsVisible="False"
|
||||
Theme="{StaticResource InputClearButton}" />
|
||||
<ToggleButton
|
||||
Name="PART_RevealButton" Grid.Column="3"
|
||||
Margin="4,0,0,0"
|
||||
IsChecked="{TemplateBinding RevealPassword,
|
||||
Mode=TwoWay}"
|
||||
IsVisible="False"
|
||||
Theme="{StaticResource InputToggleButton}" />
|
||||
<ContentPresenter
|
||||
Grid.Column="4"
|
||||
Padding="{DynamicResource TextBoxInnerContentPadding}"
|
||||
VerticalAlignment="Center"
|
||||
Content="{TemplateBinding InnerRightContent}"
|
||||
Foreground="{DynamicResource TextBoxInnerForeground}" />
|
||||
</Grid>
|
||||
</Border>
|
||||
</ControlTemplate>
|
||||
</Setter>
|
||||
<Style Selector="^:disabled">
|
||||
<Setter Property="TextBox.Foreground" Value="{DynamicResource TextBoxDisabledForeground}" />
|
||||
<Setter Property="TextBox.BorderBrush" Value="{DynamicResource TextBoxDisabledBorderBrush}" />
|
||||
<Style Selector="^/template/ Border#PART_ContentPresenterBorder">
|
||||
<Setter Property="Border.Background" Value="{DynamicResource TextBoxDisabledBackground}" />
|
||||
</Style>
|
||||
</Style>
|
||||
<Style Selector="^:pointerover /template/ Border#PART_ContentPresenterBorder">
|
||||
<Setter Property="Border.BorderBrush" Value="{DynamicResource TextBoxPointerOverBorderBrush}" />
|
||||
</Style>
|
||||
<Style Selector="^:focus /template/ Border#PART_ContentPresenterBorder">
|
||||
<Setter Property="Border.BorderBrush" Value="{DynamicResource TextBoxFocusBorderBrush}" />
|
||||
</Style>
|
||||
<Style Selector="^.clearButton">
|
||||
<Style Selector="^[AcceptsReturn=False][IsReadOnly=False]:focus:not(:empty) /template/ Button#PART_ClearButton">
|
||||
<Setter Property="Button.IsVisible" Value="True" />
|
||||
</Style>
|
||||
<Style Selector="^[AcceptsReturn=False][IsReadOnly=False]:pointerover:not(:empty) /template/ Button#PART_ClearButton">
|
||||
<Setter Property="Button.IsVisible" Value="True" />
|
||||
</Style>
|
||||
</Style>
|
||||
<Style Selector="^.revealPasswordButton">
|
||||
<Style Selector="^ /template/ ToggleButton#PART_RevealButton">
|
||||
<Setter Property="ToggleButton.IsVisible" Value="True" />
|
||||
</Style>
|
||||
</Style>
|
||||
</ControlTheme>
|
||||
</ResourceDictionary>
|
||||
@ -11,6 +11,7 @@
|
||||
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/TabControl.axaml" />
|
||||
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/TabItem.axaml" />
|
||||
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/TextBlock.axaml" />
|
||||
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/TextBox.axaml" />
|
||||
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Window.axaml" />
|
||||
</ResourceDictionary.MergedDictionaries>
|
||||
</ResourceDictionary>
|
||||
|
||||
45
src/Semi.Avalonia/Themes/Light/TextBox.axaml
Normal file
45
src/Semi.Avalonia/Themes/Light/TextBox.axaml
Normal file
@ -0,0 +1,45 @@
|
||||
<ResourceDictionary
|
||||
xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
||||
xmlns:sys="clr-namespace:System;assembly=System.Runtime">
|
||||
<SolidColorBrush x:Key="TextBoxDefaultBorderBrush" Color="#C6CACD" />
|
||||
<SolidColorBrush x:Key="TextBoxDefaultBackground" Color="#E6E8EA" />
|
||||
<SolidColorBrush x:Key="TextBoxFocusBackground" Opacity="0.05" Color="#E6E8EA" />
|
||||
<SolidColorBrush x:Key="TextBoxPointerOverBorderBrush" Color="#0062D6" />
|
||||
<SolidColorBrush x:Key="TextBoxFocusBorderBrush" Color="#004FB3" />
|
||||
<SolidColorBrush x:Key="TextBoxForeground" Color="#1C1F23" />
|
||||
<SolidColorBrush x:Key="TextBoxWatermarkForeground" Color="#1C1F23" />
|
||||
<SolidColorBrush x:Key="TextBoxInnerForeground" Opacity="0.62" Color="#1C1F23" />
|
||||
|
||||
<SolidColorBrush x:Key="TextBoxButtonDefaultForeground" Opacity="0.2" Color="#2E3238" />
|
||||
<SolidColorBrush x:Key="TextBoxButtonPointerOverForeground" Opacity="0.4" Color="#2E3238" />
|
||||
|
||||
<SolidColorBrush x:Key="TextBoxDisabledBackground" Opacity="0.04" Color="#403238" />
|
||||
<SolidColorBrush x:Key="TextBoxDisabledForeground" Opacity="0.35" Color="#1C1F23" />
|
||||
<SolidColorBrush x:Key="TextBoxDisabledBorderBrush" Color="#E6E8EA" />
|
||||
|
||||
<sys:Double x:Key="TextBoxDefaultHeight">30</sys:Double>
|
||||
<sys:Double x:Key="TextBoxSmallHeight">22</sys:Double>
|
||||
<sys:Double x:Key="TextBoxLargeHeight">38</sys:Double>
|
||||
<sys:Double x:Key="TextBoxWrapperDefaultHeight">32</sys:Double>
|
||||
<sys:Double x:Key="TextBoxWrapperSmallHeight">24</sys:Double>
|
||||
<sys:Double x:Key="TextBoxWrapperLargeHeight">40</sys:Double>
|
||||
|
||||
<CornerRadius x:Key="TextBoxDefaultCornerRadius">3</CornerRadius>
|
||||
|
||||
<CornerRadius x:Key="TextBoxPrefixCornerRadius">3 0 0 3</CornerRadius>
|
||||
<CornerRadius x:Key="TextBoxSuffixCornerRadius">0 3 3 0</CornerRadius>
|
||||
<CornerRadius x:Key="TextBoxSuffixContentCornerRadius">3 0 0 3</CornerRadius>
|
||||
<CornerRadius x:Key="TextBoxPrefixContentCornerRadius">0 3 3 0</CornerRadius>
|
||||
<CornerRadius x:Key="TextBoxBothContentCornerRadius">0 0 0 0</CornerRadius>
|
||||
|
||||
<Thickness x:Key="TextBoxInnerContentPadding">8 0</Thickness>
|
||||
<Thickness x:Key="TextBoxContentPadding">8 0</Thickness>
|
||||
|
||||
<SolidColorBrush x:Key="TextBoxSelectionBackground" Color="#0059D6" />
|
||||
<SolidColorBrush x:Key="TextBoxSelectionForeground" Color="White" />
|
||||
|
||||
<StreamGeometry x:Key="TextBoxClearButtonData">M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM17.0352 16.8626C16.4597 17.4585 15.5101 17.4751 14.9142 16.8996L12.0368 14.121L9.25822 16.9984C8.68274 17.5943 7.73314 17.6109 7.13722 17.0354C6.5413 16.4599 6.52472 15.5103 7.1002 14.9144L9.87883 12.037L7.00147 9.2584C6.40555 8.68293 6.38897 7.73332 6.96445 7.1374C7.53992 6.54148 8.48953 6.52491 9.08545 7.10038L11.9628 9.87901L14.7414 7.00165C15.3169 6.40573 16.2665 6.38916 16.8624 6.96463C17.4584 7.54011 17.4749 8.48971 16.8995 9.08563L14.1208 11.963L16.9982 14.7416C17.5941 15.3171 17.6107 16.2667 17.0352 16.8626Z</StreamGeometry>
|
||||
<StreamGeometry x:Key="PasswordBoxRevealButtonData">M12 4C5 4 1 10 1 12C1 14 5 20 12 20C19 20 23 14 23 12C23 10 19 4 12 4ZM17 12C17 14.7614 14.7614 17 12 17C9.23858 17 7 14.7614 7 12C7 9.23858 9.23858 7 12 7C14.7614 7 17 9.23858 17 12ZM12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z</StreamGeometry>
|
||||
<StreamGeometry x:Key="PasswordBoxHideButtonData">M2.02949 4.67856C2.7593 4.28654 3.66871 4.56038 4.06073 5.29018C6.21313 9.29726 8.83179 11.5 12.0001 11.5C15.1685 11.5 17.7871 9.29726 19.9395 5.29018C20.3315 4.56038 21.241 4.28655 21.9708 4.67856C22.7006 5.07058 22.9744 5.97999 22.5824 6.7098C21.9049 7.97104 21.1385 9.15419 20.2743 10.199L23.2001 14.1C23.6971 14.7627 23.5628 15.7029 22.9001 16.2C22.2373 16.697 21.2971 16.5627 20.8001 15.9L18.1186 12.3246C17.448 12.8501 16.7322 13.2957 15.9687 13.6441L17.4046 17.4733C17.6955 18.249 17.3025 19.1136 16.5268 19.4045C15.7511 19.6954 14.8865 19.3024 14.5956 18.5267L13.0956 14.5267C13.0852 14.4988 13.0756 14.4709 13.0669 14.4428C12.7193 14.4806 12.3638 14.5 12.0001 14.5C11.6365 14.5 11.281 14.4806 10.9333 14.4428C10.9246 14.4709 10.9151 14.4988 10.9046 14.5267L9.40463 18.5267C9.11375 19.3024 8.24913 19.6954 7.47345 19.4045C6.69777 19.1136 6.30476 18.249 6.59564 17.4733L8.03159 13.6441C7.26806 13.2957 6.55223 12.8501 5.88163 12.3246L3.20009 15.9C2.70303 16.5627 1.76283 16.697 1.10009 16.2C0.437347 15.7029 0.303032 14.7627 0.800088 14.1L3.72589 10.1989C2.86177 9.15415 2.09533 7.97101 1.41787 6.70979C1.02585 5.97999 1.29969 5.07057 2.02949 4.67856Z</StreamGeometry>
|
||||
|
||||
</ResourceDictionary>
|
||||
Loading…
x
Reference in New Issue
Block a user