tsai
/
Avalonia
mirror of https://github.com/AvaloniaUI/Avalonia.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

numericup down - add clear button style, fix text box style

pull/21771/head
Emmanuel Hansen 3 weeks ago
parent
4f1a0970cd
commit
2a500e5071
2 changed files with 197 additions and 17 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 213
      src/Avalonia.Themes.Fluent2/Controls/NumericUpDown.xaml
  2. 1
      src/Avalonia.Themes.Fluent2/Controls/TextBox.xaml

213
src/Avalonia.Themes.Fluent2/Controls/NumericUpDown.xaml
View File

@ -5,17 +5,17 @@
<Design.PreviewWith>
<Border Padding="20">
<StackPanel Spacing="20">
<NumericUpDown Minimum="0"
Maximum="10"
Increment="0.5"
PlaceholderText="Enter text" />
<NumericUpDown Minimum="0"
Maximum="10"
Increment="0.5"
VerticalContentAlignment="Center"
HorizontalContentAlignment="Center"
ButtonSpinnerLocation="Left"
PlaceholderText="Enter text" />
Maximum="10"
Increment="0.5"
PlaceholderText="Enter text" />
<NumericUpDown Minimum="0"
Maximum="10"
Increment="0.5"
VerticalContentAlignment="Center"
HorizontalContentAlignment="Center"
ButtonSpinnerLocation="Left"
PlaceholderText="Enter text" />
<NumericUpDown ButtonSpinnerLocation="Left">
<NumericUpDown.InnerLeftContent>
<TextBlock Text="m"
@ -50,10 +50,10 @@
</Design.PreviewWith>
<!-- WinUI reference: NumberBox.xaml, tag winui3/release/1.7.1.
The control composes a Fluent 2 ButtonSpinner (the TextBox-like field with inline spin
buttons) around a chromeless TextBox part. Padding follows TextControlThemePadding, and
the inner TextBox supplies the input-active fill and accent focus underline over the text
area while the ButtonSpinner mirrors them across the whole field via :focus-within. -->
The control composes a Fluent 2 ButtonSpinner (the TextBox-like field with inline spin
buttons) around a chromeless TextBox part. Padding follows TextControlThemePadding, and
the inner TextBox supplies the input-active fill and accent focus underline over the text
area while the ButtonSpinner mirrors them across the whole field via :focus-within. -->
<ControlTheme x:Key="{x:Type NumericUpDown}" TargetType="NumericUpDown">
<Setter Property="Foreground" Value="{DynamicResource TextControlForeground}" />
<Setter Property="Background" Value="{DynamicResource TextControlBackground}" />
@ -94,17 +94,18 @@
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
Text="{TemplateBinding Text}"
TextAlignment="{TemplateBinding TextAlignment}"
Theme="{DynamicResource FluentNumericUpDownTextBox}"
AcceptsReturn="False"
TextWrapping="NoWrap"
InnerLeftContent="{Binding InnerLeftContent, RelativeSource={RelativeSource TemplatedParent}}"
InnerRightContent="{Binding InnerRightContent, RelativeSource={RelativeSource TemplatedParent}}"/>
InnerLeftContent="{TemplateBinding InnerLeftContent}"
InnerRightContent="{TemplateBinding InnerRightContent}"/>
</ButtonSpinner>
</DataValidationErrors>
</ControlTemplate>
</Setter>
<!-- Square off the inner TextBox corners on the spinner side so its focus underline runs
straight into the spin-button strip instead of curling up at the rounded corner. -->
straight into the spin-button strip instead of curling up at the rounded corner. -->
<Style Selector="^ /template/ TextBox#PART_TextBox">
<Setter Property="CornerRadius" Value="{TemplateBinding CornerRadius, Converter={StaticResource LeftCornerRadiusFilterConverter}}" />
</Style>
@ -115,8 +116,186 @@
<Setter Property="CornerRadius" Value="{TemplateBinding CornerRadius}" />
</Style>
<Style Selector="^.clearButton:focus-within[IsReadOnly=False] /template/ TextBox#PART_TextBox:not(TextBox:empty)">
<Setter Property="InnerRightContent">
<Template>
<Button Theme="{StaticResource DeleteButtonStyle}"
Command="{Binding $parent[TextBox].Clear}"
BorderThickness="{Binding $parent[NumericUpDown].BorderThickness}"
CornerRadius="{Binding $parent[NumericUpDown].CornerRadius}"
HorizontalAlignment="Right"
MinWidth="40"
VerticalAlignment="Stretch"
ClipToBounds="True">
<PathIcon Data="{StaticResource TextBoxClearButtonData}"
Foreground="{DynamicResource TextControlButtonForeground}"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Width="{DynamicResource TextBoxIconSize}"
Height="{DynamicResource TextBoxIconSize}"/>
</Button>
</Template>
</Setter>
</Style>
<Style Selector="^:error /template/ ButtonSpinner#PART_Spinner">
<Setter Property="BorderBrush" Value="{DynamicResource SystemFillColorCriticalBrush}" />
</Style>
</ControlTheme>
<ControlTheme x:Key="DeleteButtonStyle" TargetType="Button">
<Setter Property="Template">
<ControlTemplate>
<ContentPresenter Name="ButtonLayoutBorder"
Margin="{DynamicResource TextBoxInnerButtonMargin}"
BorderBrush="{DynamicResource TextControlButtonBorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{DynamicResource TextControlButtonBackground}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
CornerRadius="{TemplateBinding CornerRadius}"/>
</ControlTemplate>
</Setter>
</ControlTheme>
<ControlTheme x:Key="FluentNumericUpDownTextBox" TargetType="TextBox">
<Setter Property="Foreground" Value="{DynamicResource TextControlForeground}" />
<Setter Property="Background" Value="{DynamicResource TextControlBackground}" />
<Setter Property="CaretBrush" Value="{DynamicResource TextControlForeground}" />
<Setter Property="BorderBrush" Value="{DynamicResource TextControlBorderBrush}" />
<Setter Property="SelectionBrush" Value="{DynamicResource TextControlSelectionHighlightColor}" />
<Setter Property="PlaceholderForeground" Value="{DynamicResource TextControlPlaceholderForeground}" />
<Setter Property="BorderThickness" Value="{DynamicResource TextControlBorderThemeThickness}" />
<Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
<Setter Property="MinHeight" Value="{DynamicResource TextControlThemeMinHeight}" />
<Setter Property="MinWidth" Value="{DynamicResource TextControlThemeMinWidth}" />
<Setter Property="Padding" Value="{DynamicResource TextControlThemePadding}" />
<Setter Property="FocusAdorner" Value="{x:Null}" />
<Setter Property="ScrollViewer.IsScrollChainingEnabled" Value="True" />
<Setter Property="ContextFlyout" Value="{OnFormFactor Desktop={StaticResource DefaultTextBoxContextFlyout}, Mobile={StaticResource HorizontalTextBoxContextFlyout}}" />
<Setter Property="Template">
<ControlTemplate>
<DataValidationErrors>
<Grid ColumnDefinitions="Auto,*,Auto" >
<ContentPresenter Grid.Column="0"
Grid.ColumnSpan="1"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding InnerLeftContent}"/>
<DockPanel x:Name="PART_InnerDockPanel"
Grid.Column="1"
Grid.ColumnSpan="1"
Margin="{TemplateBinding Padding}">
<TextBlock Name="PART_FloatingPlaceholder"
Foreground="{TemplateBinding PlaceholderForeground}"
IsVisible="False"
Text="{TemplateBinding PlaceholderText}"
DockPanel.Dock="Top" />
<ScrollViewer Name="PART_ScrollViewer"
HorizontalScrollBarVisibility="{TemplateBinding (ScrollViewer.HorizontalScrollBarVisibility)}"
VerticalScrollBarVisibility="{TemplateBinding (ScrollViewer.VerticalScrollBarVisibility)}"
IsScrollChainingEnabled="{TemplateBinding (ScrollViewer.IsScrollChainingEnabled)}"
AllowAutoHide="{TemplateBinding (ScrollViewer.AllowAutoHide)}"
BringIntoViewOnFocusChange="{TemplateBinding (ScrollViewer.BringIntoViewOnFocusChange)}">
<Panel>
<TextBlock Name="PART_Placeholder"
Foreground="{TemplateBinding PlaceholderForeground}"
Opacity="{DynamicResource TextControlPlaceholderOpacity}"
Text="{TemplateBinding PlaceholderText}"
TextAlignment="{TemplateBinding TextAlignment}"
TextWrapping="{TemplateBinding TextWrapping}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<TextBlock.IsVisible>
<MultiBinding Converter="{x:Static BoolConverters.And}">
<Binding ElementName="PART_TextPresenter" Path="PreeditText" Converter="{x:Static StringConverters.IsNullOrEmpty}"/>
<Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Text" Converter="{x:Static StringConverters.IsNullOrEmpty}"/>
</MultiBinding>
</TextBlock.IsVisible>
</TextBlock>
<TextPresenter Name="PART_TextPresenter"
Text="{TemplateBinding Text, Mode=TwoWay}"
CaretBlinkInterval="{TemplateBinding CaretBlinkInterval}"
CaretIndex="{TemplateBinding CaretIndex}"
SelectionStart="{TemplateBinding SelectionStart}"
SelectionEnd="{TemplateBinding SelectionEnd}"
TextAlignment="{TemplateBinding TextAlignment}"
TextWrapping="{TemplateBinding TextWrapping}"
LineHeight="{TemplateBinding LineHeight}"
LetterSpacing="{TemplateBinding LetterSpacing}"
PasswordChar="{TemplateBinding PasswordChar}"
RevealPassword="{TemplateBinding RevealPassword}"
SelectionBrush="{TemplateBinding SelectionBrush}"
SelectionForegroundBrush="{TemplateBinding SelectionForegroundBrush}"
CaretBrush="{TemplateBinding CaretBrush}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Panel>
<ScrollViewer.Styles>
<Style Selector="ScrollContentPresenter#PART_ContentPresenter">
<Setter Property="Cursor" Value="IBeam" />
</Style>
</ScrollViewer.Styles>
</ScrollViewer>
</DockPanel>
<ContentPresenter Grid.Column="2"
Grid.ColumnSpan="1"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding InnerRightContent}"/>
</Grid>
</DataValidationErrors>
</ControlTemplate>
</Setter>
<Style Selector="^:touch-mode">
<Setter Property="ContextFlyout" Value="{StaticResource HorizontalTextBoxContextFlyout}" />
</Style>
<!-- Disabled State -->
<Style Selector="^:disabled">
<Setter Property="Foreground" Value="{DynamicResource TextControlForegroundDisabled}" />
<Style Selector="^ /template/ Border#PART_BorderElement">
<Setter Property="Background" Value="{DynamicResource TextControlBackgroundDisabled}" />
<Setter Property="BorderBrush" Value="{DynamicResource TextControlBorderBrushDisabled}" />
</Style>
</Style>
<!-- PointerOver State-->
<Style Selector="^:pointerover">
<Setter Property="Foreground" Value="{DynamicResource TextControlForegroundPointerOver}" />
<Style Selector="^ /template/ Border#PART_BorderElement">
<Setter Property="BorderBrush" Value="{DynamicResource TextControlBorderBrushPointerOver}"/>
<Setter Property="Background" Value="{DynamicResource TextControlBackgroundPointerOver}" />
</Style>
</Style>
<!-- Focused State -->
<Style Selector="^:focus">
<Setter Property="Foreground" Value="{DynamicResource TextControlForegroundFocused}" />
<Style Selector="^ /template/ Border#PART_BorderElement">
<Setter Property="Background" Value="{DynamicResource TextControlBackgroundFocused}"/>
<Setter Property="BorderBrush" Value="{DynamicResource TextControlBorderBrushFocused}"/>
<Setter Property="BorderThickness" Value="{DynamicResource TextControlBorderThemeThicknessFocused}" />
</Style>
</Style>
<Style Selector="^:error /template/ Border#PART_BorderElement">
<Setter Property="BorderBrush" Value="{DynamicResource SystemControlErrorTextForegroundBrush}"/>
</Style>
<Style Selector="^ /template/ TextBlock#PART_FloatingPlaceholder">
<Setter Property="Cursor" Value="IBeam"/>
</Style>
<Style Selector="^[UseFloatingPlaceholder=true]:not(:empty) /template/ TextBlock#PART_FloatingPlaceholder">
<Setter Property="IsVisible" Value="True" />
</Style>
</ControlTheme>
</ResourceDictionary>

1
src/Avalonia.Themes.Fluent2/Controls/TextBox.xaml
View File

@ -17,6 +17,7 @@
</Design.PreviewWith>
<Thickness x:Key="TextBoxTopHeaderMargin">0,0,0,4</Thickness>
<x:Double x:Key="TextBoxIconSize">12</x:Double>
<StreamGeometry x:Key="TextBoxClearButtonData">M 11.416016,10 20,1.4160156 18.583984,0 10,8.5839846 1.4160156,0 0,1.4160156 8.5839844,10 0,18.583985 1.4160156,20 10,11.416015 18.583984,20 20,18.583985 Z</StreamGeometry>
<StreamGeometry x:Key="PasswordBoxRevealButtonData">m10.051 7.0032c2.215 0 4.0105 1.7901 4.0105 3.9984s-1.7956 3.9984-4.0105 3.9984c-2.215 0-4.0105-1.7901-4.0105-3.9984s1.7956-3.9984 4.0105-3.9984zm0 1.4994c-1.3844 0-2.5066 1.1188-2.5066 2.499s1.1222 2.499 2.5066 2.499 2.5066-1.1188 2.5066-2.499-1.1222-2.499-2.5066-2.499zm0-5.0026c4.6257 0 8.6188 3.1487 9.7267 7.5613 0.10085 0.40165-0.14399 0.80877-0.54686 0.90931-0.40288 0.10054-0.81122-0.14355-0.91208-0.54521-0.94136-3.7492-4.3361-6.4261-8.2678-6.4261-3.9334 0-7.3292 2.6792-8.2689 6.4306-0.10063 0.40171-0.50884 0.64603-0.91177 0.54571s-0.648-0.5073-0.54737-0.90901c1.106-4.4152 5.1003-7.5667 9.728-7.5667z</StreamGeometry>
<StreamGeometry x:Key="PasswordBoxHideButtonData">m0.21967 0.21965c-0.26627 0.26627-0.29047 0.68293-0.07262 0.97654l0.07262 0.08412 4.0346 4.0346c-1.922 1.3495-3.3585 3.365-3.9554 5.7495-0.10058 0.4018 0.14362 0.8091 0.54543 0.9097 0.40182 0.1005 0.80909-0.1436 0.90968-0.5455 0.52947-2.1151 1.8371-3.8891 3.5802-5.0341l1.8096 1.8098c-0.70751 0.7215-1.1438 1.71-1.1438 2.8003 0 2.2092 1.7909 4 4 4 1.0904 0 2.0788-0.4363 2.8004-1.1438l5.9193 5.9195c0.2929 0.2929 0.7677 0.2929 1.0606 0 0.2663-0.2662 0.2905-0.6829 0.0726-0.9765l-0.0726-0.0841-6.1135-6.1142 0.0012-0.0015-1.2001-1.1979-2.8699-2.8693 2e-3 -8e-4 -2.8812-2.8782 0.0012-0.0018-1.1333-1.1305-4.3064-4.3058c-0.29289-0.29289-0.76777-0.29289-1.0607 0zm7.9844 9.0458 3.5351 3.5351c-0.45 0.4358-1.0633 0.704-1.7392 0.704-1.3807 0-2.5-1.1193-2.5-2.5 0-0.6759 0.26824-1.2892 0.7041-1.7391zm1.7959-5.7655c-1.0003 0-1.9709 0.14807-2.8889 0.425l1.237 1.2362c0.5358-0.10587 1.0883-0.16119 1.6519-0.16119 3.9231 0 7.3099 2.6803 8.2471 6.4332 0.1004 0.4018 0.5075 0.6462 0.9094 0.5459 0.4019-0.1004 0.6463-0.5075 0.5459-0.9094-1.103-4.417-5.0869-7.5697-9.7024-7.5697zm0.1947 3.5093 3.8013 3.8007c-0.1018-2.0569-1.7488-3.7024-3.8013-3.8007z</StreamGeometry>

Write Preview
Loading…
Cancel
Save