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

Merge pull request #4487 from maxkatz6/feature/fluent-update-textbox-buttons-style 

Feature/fluent update textbox buttons style
pull/4422/head
Jumar Macato 6 years ago
committed by GitHub
parent
3c1e18fa76 a887e3e50e
commit
6b13653ba3
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 159 additions and 45 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. 2
      samples/ControlCatalog/Pages/TextBoxPage.xaml
  2. 17
      src/Avalonia.Controls/TextBox.cs
  3. 185
      src/Avalonia.Themes.Fluent/TextBox.xaml

2
samples/ControlCatalog/Pages/TextBoxPage.xaml
View File

@ -39,7 +39,7 @@
<TextBox AcceptsReturn="True" Width="200" Height="125"
Text="Multiline TextBox with no TextWrapping.&#xD;&#xD;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est." />
<TextBox Classes="clearButton" Text="Clear Content" Width="200" FontWeight="Normal" FontStyle="Normal" FontFamily="avares://ControlCatalog/Assets/Fonts#Source Sans Pro"/>
<TextBox Classes="clearButton" Text="Clear Content" Width="200" FontWeight="Normal" FontStyle="Normal" Watermark="Watermark" FontFamily="avares://ControlCatalog/Assets/Fonts#Source Sans Pro"/>
</StackPanel>
<StackPanel Orientation="Vertical" Spacing="8">
<TextBlock Classes="h2">resm fonts</TextBlock>

17
src/Avalonia.Controls/TextBox.cs
View File

@ -157,6 +157,8 @@ namespace Avalonia.Controls
horizontalScrollBarVisibility,
BindingPriority.Style);
_undoRedoHelper = new UndoRedoHelper<UndoRedoState>(this);
UpdatePseudoclasses();
}
public bool AcceptsReturn
@ -378,6 +380,16 @@ namespace Avalonia.Controls
}
}
protected override void OnPropertyChanged<T>(AvaloniaPropertyChangedEventArgs<T> change)
{
base.OnPropertyChanged(change);
if (change.Property == TextProperty)
{
UpdatePseudoclasses();
}
}
protected override void OnGotFocus(GotFocusEventArgs e)
{
base.OnGotFocus(e);
@ -1100,6 +1112,11 @@ namespace Avalonia.Controls
SelectionEnd = CaretIndex;
}
private void UpdatePseudoclasses()
{
PseudoClasses.Set(":empty", string.IsNullOrWhiteSpace(Text));
}
private bool IsPasswordBox => PasswordChar != default(char);
UndoRedoState UndoRedoHelper<UndoRedoState>.IUndoRedoHost.UndoRedoState

185
src/Avalonia.Themes.Fluent/TextBox.xaml
View File

@ -4,21 +4,18 @@
<TextBox Text="Sample"
FontSize="20"
Width="100"
Classes="clearButton"
TextAlignment="Center"/>
</Border>
</Design.PreviewWith>
<Styles.Resources>
<Thickness x:Key="TextBoxTopHeaderMargin">0,0,0,4</Thickness>
<DrawingGroup x:Key="EyeShowRegular">
<GeometryDrawing Brush="Transparent" Geometry="M0,0 24,0 24,24 0,24" />
<GeometryDrawing Brush="White" Geometry="M12,9.0046246 C14.209139,9.0046246 16,10.7954856 16,13.0046246 C16,15.2137636 14.209139,17.0046246 12,17.0046246 C9.790861,17.0046246 8,15.2137636 8,13.0046246 C8,10.7954856 9.790861,9.0046246 12,9.0046246 Z M12,10.5046246 C10.6192881,10.5046246 9.5,11.6239127 9.5,13.0046246 C9.5,14.3853365 10.6192881,15.5046246 12,15.5046246 C13.3807119,15.5046246 14.5,14.3853365 14.5,13.0046246 C14.5,11.6239127 13.3807119,10.5046246 12,10.5046246 Z M12,5.5 C16.613512,5.5 20.5960869,8.65000641 21.7011157,13.0643865 C21.8017,13.4662019 21.557504,13.8734775 21.1556885,13.9740618 C20.7538731,14.0746462 20.3465976,13.8304502 20.2460132,13.4286347 C19.3071259,9.67795854 15.9213644,7 12,7 C8.07693257,7 4.69009765,9.68026417 3.75285786,13.4331499 C3.65249525,13.8350208 3.24535455,14.0794416 2.84348365,13.979079 C2.44161275,13.8787164 2.19719198,13.4715757 2.29755459,13.0697048 C3.4006459,8.65271806 7.38448293,5.5 12,5.5 Z" />
</DrawingGroup>
<DrawingGroup x:Key="EyeHideRegular">
<GeometryDrawing Brush="Transparent" Geometry="M0,0 24,0 24,24 0,24" />
<GeometryDrawing Brush="White" Geometry="M2.21967 2.21967C1.9534 2.48594 1.9292 2.9026 2.14705 3.19621L2.21967 3.28033L6.25424 7.3149C4.33225 8.66437 2.89577 10.6799 2.29888 13.0644C2.1983 13.4662 2.4425 13.8735 2.84431 13.9741C3.24613 14.0746 3.6534 13.8305 3.75399 13.4286C4.28346 11.3135 5.59112 9.53947 7.33416 8.39452L9.14379 10.2043C8.43628 10.9258 8 11.9143 8 13.0046C8 15.2138 9.79086 17.0046 12 17.0046C13.0904 17.0046 14.0788 16.5683 14.8004 15.8608L20.7197 21.7803C21.0126 22.0732 21.4874 22.0732 21.7803 21.7803C22.0466 21.5141 22.0708 21.0974 21.8529 20.8038L21.7803 20.7197L15.6668 14.6055L15.668 14.604L14.4679 13.4061L11.598 10.5368L11.6 10.536L8.71877 7.65782L8.72 7.656L7.58672 6.52549L3.28033 2.21967C2.98744 1.92678 2.51256 1.92678 2.21967 2.21967ZM10.2041 11.2655L13.7392 14.8006C13.2892 15.2364 12.6759 15.5046 12 15.5046C10.6193 15.5046 9.5 14.3853 9.5 13.0046C9.5 12.3287 9.76824 11.7154 10.2041 11.2655ZM12 5.5C10.9997 5.5 10.0291 5.64807 9.11109 5.925L10.3481 7.16119C10.8839 7.05532 11.4364 7 12 7C15.9231 7 19.3099 9.68026 20.2471 13.4332C20.3475 13.835 20.7546 14.0794 21.1565 13.9791C21.5584 13.8787 21.8028 13.4716 21.7024 13.0697C20.5994 8.65272 16.6155 5.5 12 5.5ZM12.1947 9.00928L15.996 12.81C15.8942 10.7531 14.2472 9.10764 12.1947 9.00928Z" />
</DrawingGroup>
<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>
</Styles.Resources>
<Style Selector="TextBox">
<Setter Property="Foreground" Value="{DynamicResource TextControlForeground}" />
<Setter Property="Background" Value="{DynamicResource TextControlBackground}" />
@ -30,12 +27,13 @@
<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="Template">
<ControlTemplate>
<DockPanel>
<!-- TODO bind Content -> Header and ContentTemplate -> HeaderTemplate -->
<ContentPresenter x:Name="HeaderContentPresenter"
<ContentPresenter x:Name="PART_HeaderContentPresenter"
DockPanel.Dock="Top"
TextBlock.FontWeight="Normal"
TextBlock.Foreground="{DynamicResource TextControlHeaderForeground}"
@ -44,7 +42,7 @@
<Panel>
<Border
Name="border"
Name="PART_BorderElement"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
@ -57,28 +55,18 @@
Margin="{TemplateBinding BorderThickness}">
<Grid ColumnDefinitions="Auto,*,Auto" >
<ContentPresenter Grid.Column="0" Grid.ColumnSpan="1" Content="{TemplateBinding InnerLeftContent}"/>
<DockPanel Grid.Column="1" Grid.ColumnSpan="1" Margin="{TemplateBinding Padding}">
<TextBlock Name="floatingWatermark"
Foreground="{DynamicResource SystemAccentColor}"
FontSize="{DynamicResource FontSizeSmall}"
Text="{TemplateBinding Watermark}"
DockPanel.Dock="Top">
<TextBlock.IsVisible>
<MultiBinding Converter="{x:Static BoolConverters.And}">
<Binding RelativeSource="{RelativeSource TemplatedParent}"
Path="UseFloatingWatermark"/>
<Binding RelativeSource="{RelativeSource TemplatedParent}"
Path="Text"
Converter="{x:Static StringConverters.IsNotNullOrEmpty}"/>
</MultiBinding>
</TextBlock.IsVisible>
</TextBlock>
<DockPanel x:Name="PART_InnerDockPanel" Grid.Column="1" Grid.ColumnSpan="1" Margin="{TemplateBinding Padding}">
<TextBlock Name="PART_FloatingWatermark"
Foreground="{DynamicResource SystemAccentColor}"
FontSize="{TemplateBinding FontSize}"
Text="{TemplateBinding Watermark}"
DockPanel.Dock="Top" />
<DataValidationErrors>
<ScrollViewer HorizontalScrollBarVisibility="{TemplateBinding (ScrollViewer.HorizontalScrollBarVisibility)}"
VerticalScrollBarVisibility="{TemplateBinding (ScrollViewer.VerticalScrollBarVisibility)}">
<Panel>
<TextBlock Name="watermark"
<TextBlock Name="PART_Watermark"
Opacity="0.5"
Text="{TemplateBinding Watermark}"
TextAlignment="{TemplateBinding TextAlignment}"
@ -120,12 +108,12 @@
<Setter Property="Foreground" Value="{DynamicResource TextControlForegroundDisabled}" />
</Style>
<Style Selector="TextBox:disabled /template/ Border#border">
<Style Selector="TextBox:disabled /template/ Border#PART_BorderElement">
<Setter Property="Background" Value="{DynamicResource TextControlBackgroundDisabled}" />
<Setter Property="BorderBrush" Value="{DynamicResource TextControlBorderBrushDisabled}" />
</Style>
<Style Selector="TextBox:disabled /template/ TextBlock#watermark, TextBox:disabled /template/ TextBlock#floatingWatermark">
<Style Selector="TextBox:disabled /template/ TextBlock#PART_Watermark, TextBox:disabled /template/ TextBlock#PART_FloatingWatermark">
<Setter Property="Foreground" Value="{DynamicResource TextControlPlaceholderForegroundDisabled}" />
</Style>
@ -134,12 +122,12 @@
<Setter Property="Foreground" Value="{DynamicResource TextControlForegroundPointerOver}" />
</Style>
<Style Selector="TextBox:pointerover /template/ Border#border">
<Style Selector="TextBox:pointerover /template/ Border#PART_BorderElement">
<Setter Property="BorderBrush" Value="{DynamicResource TextControlBorderBrushPointerOver}"/>
<Setter Property="Background" Value="{DynamicResource TextControlBackgroundPointerOver}" />
</Style>
<Style Selector="TextBox:pointerover /template/ TextBlock#watermark, TextBox:pointerover /template/ TextBlock#floatingWatermark">
<Style Selector="TextBox:pointerover /template/ TextBlock#PART_Watermark, TextBox:pointerover /template/ TextBlock#PART_FloatingWatermark">
<Setter Property="Foreground" Value="{DynamicResource TextControlPlaceholderForegroundPointerOver}" />
</Style>
@ -148,43 +136,152 @@
<Setter Property="Foreground" Value="{DynamicResource TextControlForegroundFocused}" />
</Style>
<Style Selector="TextBox:focus /template/ TextBlock#watermark, TextBox:focus /template/ TextBlock#floatingWatermark">
<Style Selector="TextBox:focus /template/ TextBlock#PART_Watermark, TextBox:focus /template/ TextBlock#PART_FloatingWatermark">
<Setter Property="Foreground" Value="{DynamicResource TextControlPlaceholderForegroundFocused}" />
</Style>
<Style Selector="TextBox:focus /template/ Border#border">
<Style Selector="TextBox:focus /template/ Border#PART_BorderElement">
<Setter Property="Background" Value="{DynamicResource TextControlBackgroundFocused}"/>
<Setter Property="BorderBrush" Value="{DynamicResource TextControlBorderBrushFocused}"/>
<Setter Property="BorderThickness" Value="{DynamicResource TextControlBorderThemeThicknessFocused}" />
</Style>
<Style Selector="TextBox:error /template/ Border#border">
<Style Selector="TextBox:error /template/ Border#PART_BorderElement">
<Setter Property="BorderBrush" Value="{DynamicResource SystemControlErrorTextForegroundBrush}"/>
</Style>
<Style Selector="TextBox /template/ DockPanel">
<Style Selector="TextBox /template/ DockPanel#PART_InnerDockPanel">
<Setter Property="Cursor" Value="IBeam" />
</Style>
<Style Selector="TextBox /template/ TextBlock#PART_FloatingWatermark">
<Setter Property="IsVisible" Value="False" />
</Style>
<Style Selector="TextBox[UseFloatingWatermark=true]:not(TextBox:empty) /template/ TextBlock#PART_FloatingWatermark">
<Setter Property="IsVisible" Value="True" />
</Style>
<Style Selector="TextBox.revealPasswordButton">
<Style Selector="TextBox.revealPasswordButton[AcceptsReturn=False][IsReadOnly=False]:not(TextBox:empty)">
<Setter Property="InnerRightContent">
<Template>
<ToggleButton IsChecked="{Binding $parent[TextBox].RevealPassword, Mode=TwoWay}">
<Panel Width="16" Height="16">
<DrawingPresenter Drawing="{DynamicResource EyeShowRegular}" IsVisible="{Binding $parent[TextBox].RevealPassword}"/>
<DrawingPresenter Drawing="{DynamicResource EyeHideRegular}" IsVisible="{Binding !$parent[TextBox].RevealPassword}"/>
</Panel>
</ToggleButton>
<ToggleButton Classes="PasswordBoxRevealButton"
IsChecked="{Binding $parent[TextBox].RevealPassword, Mode=TwoWay}" />
</Template>
</Setter>
</Style>
<Style Selector="TextBox.clearButton">
<Style Selector="TextBox.clearButton[AcceptsReturn=False][IsReadOnly=False]:focus:not(TextBox:empty)">
<Setter Property="InnerRightContent">
<Template>
<Button Content="Clear" Command="{Binding $parent[TextBox].Clear}" />
<Button Classes="TextBoxClearButton"
Command="{Binding $parent[TextBox].Clear}" />
</Template>
</Setter>
</Style>
<Style Selector="ToggleButton.PasswordBoxRevealButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Border x:Name="PART_ButtonLayoutBorder"
BorderThickness="{TemplateBinding BorderThickness}">
<Panel>
<Path x:Name="PART_GlyphElement_Reveal"
Data="{StaticResource PasswordBoxRevealButtonData}"
Height="8"
Width="12"
Stretch="Uniform"
VerticalAlignment="Center"
HorizontalAlignment="Center" />
<Path x:Name="PART_GlyphElement_Hide"
Data="{StaticResource PasswordBoxHideButtonData}"
Height="12"
Width="12"
Stretch="Uniform"
VerticalAlignment="Center"
HorizontalAlignment="Center" />
</Panel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style Selector="Button.TextBoxClearButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border x:Name="PART_ButtonLayoutBorder"
BorderThickness="{TemplateBinding BorderThickness}">
<Path x:Name="PART_GlyphElement"
Data="{StaticResource TextBoxClearButtonData}"
Height="10"
Width="10"
Stretch="Uniform"
VerticalAlignment="Center"
HorizontalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- TextBox.Button Normal State -->
<Style Selector="Button.TextBoxClearButton, ToggleButton.PasswordBoxRevealButton">
<Setter Property="MinWidth" Value="34" />
<Setter Property="Width" Value="{Binding $self.Bounds.Height}"/>
<Setter Property="Focusable" Value="False" />
<Setter Property="VerticalAlignment" Value="Stretch" />
</Style>
<Style Selector="Button.TextBoxClearButton /template/ Border#PART_ButtonLayoutBorder,
ToggleButton.PasswordBoxRevealButton /template/ Border#PART_ButtonLayoutBorder">
<Setter Property="Background" Value="{DynamicResource TextControlButtonBackground}" />
<Setter Property="BorderBrush" Value="{DynamicResource TextControlButtonBorderBrush}" />
</Style>
<Style Selector="Button.TextBoxClearButton /template/ Path#PART_GlyphElement,
ToggleButton.PasswordBoxRevealButton /template/ Path#PART_GlyphElement_Reveal,
ToggleButton.PasswordBoxRevealButton /template/ Path#PART_GlyphElement_Hide">
<Setter Property="Fill" Value="{DynamicResource TextControlButtonForeground}" />
</Style>
<!-- TextBox.Button PointerOver State -->
<Style Selector="Button.TextBoxClearButton:pointerover /template/ Border#PART_ButtonLayoutBorder,
ToggleButton.PasswordBoxRevealButton:pointerover /template/ Border#PART_ButtonLayoutBorder">
<Setter Property="Background" Value="{DynamicResource TextControlButtonBackgroundPointerOver}" />
<Setter Property="BorderBrush" Value="{DynamicResource TextControlButtonBorderBrushPointerOver}" />
</Style>
<Style Selector="Button.TextBoxClearButton:pointerover /template/ Path#PART_GlyphElement,
ToggleButton.PasswordBoxRevealButton:pointerover /template/ Path#PART_GlyphElement_Reveal,
ToggleButton.PasswordBoxRevealButton:pointerover /template/ Path#PART_GlyphElement_Hide">
<Setter Property="Fill" Value="{DynamicResource TextControlButtonForegroundPointerOver}" />
</Style>
<!-- TextBox.Button Pressed State -->
<Style Selector="Button.TextBoxClearButton:pressed /template/ Border#PART_ButtonLayoutBorder,
ToggleButton.PasswordBoxRevealButton:pressed /template/ Border#PART_ButtonLayoutBorder,
ToggleButton.PasswordBoxRevealButton:checked /template/ Border#PART_ButtonLayoutBorder,
ToggleButton.PasswordBoxRevealButton:indeterminate /template/ Border#PART_ButtonLayoutBorder">
<Setter Property="Background" Value="{DynamicResource TextControlButtonBackgroundPressed}" />
<Setter Property="BorderBrush" Value="{DynamicResource TextControlButtonBorderBrushPressed}" />
</Style>
<Style Selector="Button.TextBoxClearButton:pressed /template/ Path#PART_GlyphElement,
ToggleButton.PasswordBoxRevealButton:pressed /template/ Path#PART_GlyphElement_Reveal,
ToggleButton.PasswordBoxRevealButton:checked /template/ Path#PART_GlyphElement_Hide,
ToggleButton.PasswordBoxRevealButton:indeterminate /template/ Path#PART_GlyphElement_Reveal">
<Setter Property="Fill" Value="{DynamicResource TextControlButtonForegroundPressed}" />
</Style>
<!-- TextBox.Button Disabled State -->
<Style Selector="Button.TextBoxClearButton:disabled /template/ Border#PART_ButtonLayoutBorder,
ToggleButton.PasswordBoxRevealButton:disabled /template/ Border#PART_ButtonLayoutBorder">
<Setter Property="Opacity" Value="0" />
</Style>
<Style Selector="ToggleButton.PasswordBoxRevealButton:not(ToggleButton:checked) /template/ Path#PART_GlyphElement_Hide">
<Setter Property="IsVisible" Value="False" />
</Style>
<Style Selector="ToggleButton.PasswordBoxRevealButton:checked /template/ Path#PART_GlyphElement_Reveal">
<Setter Property="IsVisible" Value="False" />
</Style>
</Styles>

Write Preview
Loading…
Cancel
Save