feat: add TextBox Demo, fix RadioButton demo. Add Borderless Theme.

This commit is contained in:
rabbitism 2022-12-16 12:31:52 +08:00
parent 96d10f33e5
commit e16c7408f1
7 changed files with 71 additions and 15 deletions

View File

@ -3,7 +3,7 @@
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 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" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" d:DesignHeight="450"
d:DesignWidth="800" mc:Ignorable="d"> d:DesignWidth="800" mc:Ignorable="d">
<ScrollViewer> <ScrollViewer HorizontalScrollBarVisibility="Auto">
<StackPanel Margin="10" Spacing="5"> <StackPanel Margin="10" Spacing="5">
<TextBlock <TextBlock
HorizontalAlignment="Center" Classes="H4" HorizontalAlignment="Center" Classes="H4"
@ -102,6 +102,12 @@
<TextBlock>Shadow</TextBlock> <TextBlock>Shadow</TextBlock>
</Border> </Border>
</Grid> </Grid>
<StackPanel Spacing="20">
<TextBox InnerLeftContent="http://" InnerRightContent=".com" />
<TextBox
Classes="revealPasswordButton" PasswordChar="*"
Text="Avalonia" />
</StackPanel>
</StackPanel> </StackPanel>
</ScrollViewer> </ScrollViewer>
</UserControl> </UserControl>

View File

@ -14,8 +14,8 @@
<TextBlock Text="Radio Button as Button" /> <TextBlock Text="Radio Button as Button" />
<Border HorizontalAlignment="Left" Theme="{StaticResource RadioButtonGroupBorder}"> <Border HorizontalAlignment="Left" Theme="{StaticResource RadioButtonGroupBorder}">
<StackPanel Orientation="Horizontal"> <StackPanel Orientation="Horizontal">
<RadioButton Classes="Small" >小1</RadioButton> <RadioButton Classes="Small" Theme="{DynamicResource ButtonRadioButton}">小1</RadioButton>
<RadioButton Classes="Small" >小2</RadioButton> <RadioButton Classes="Small" Theme="{DynamicResource ButtonRadioButton}">小2</RadioButton>
</StackPanel> </StackPanel>
</Border> </Border>
<Border HorizontalAlignment="Left" Theme="{StaticResource RadioButtonGroupBorder}"> <Border HorizontalAlignment="Left" Theme="{StaticResource RadioButtonGroupBorder}">

View File

@ -17,6 +17,10 @@
<TextBox <TextBox
Width="300" Classes="revealPasswordButton" Width="300" Classes="revealPasswordButton"
PasswordChar="*" /> PasswordChar="*" />
<TextBox
Width="500" InnerLeftContent="http://"
InnerRightContent=".com"
Theme="{StaticResource BorderlessTextBox}" />
</StackPanel> </StackPanel>
</ScrollViewer> </ScrollViewer>
</UserControl> </UserControl>

View File

@ -1,5 +1,6 @@
using Avalonia; using Avalonia;
using System; using System;
using Avalonia.Media;
namespace Semi.Avalonia.Demo namespace Semi.Avalonia.Demo
{ {
@ -10,6 +11,16 @@ namespace Semi.Avalonia.Demo
// yet and stuff might break. // yet and stuff might break.
[STAThread] [STAThread]
public static void Main(string[] args) => BuildAvaloniaApp() public static void Main(string[] args) => BuildAvaloniaApp()
.With(new FontManagerOptions
{
FontFallbacks = new[]
{
new FontFallback
{
FontFamily = new FontFamily("Microsoft YaHei")
}
}
})
.StartWithClassicDesktopLifetime(args); .StartWithClassicDesktopLifetime(args);
// Avalonia configuration, don't remove; also used by visual designer. // Avalonia configuration, don't remove; also used by visual designer.

View File

@ -1,7 +1,17 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Design.PreviewWith> <Design.PreviewWith>
<StackPanel Margin="20" Spacing="20"> <StackPanel
<TextBox Classes="clearButton" Text="Hello" /> Width="200" Margin="20"
Spacing="20">
<TextBox
Classes="clearButton" Text="Hello"
Theme="{StaticResource BorderlessTextBox}" />
<TextBox
Classes="Large" Text="Hello"
Theme="{StaticResource BorderlessTextBox}" />
<TextBox
Classes="Small" Text="Hello"
Theme="{StaticResource BorderlessTextBox}" />
</StackPanel> </StackPanel>
</Design.PreviewWith> </Design.PreviewWith>
<ControlTheme x:Key="{x:Type TextBox}" TargetType="TextBox"> <ControlTheme x:Key="{x:Type TextBox}" TargetType="TextBox">
@ -51,7 +61,7 @@
<Setter Property="TextBox.BorderBrush" Value="{DynamicResource TextBoxDefaultBorderBrush}" /> <Setter Property="TextBox.BorderBrush" Value="{DynamicResource TextBoxDefaultBorderBrush}" />
<Setter Property="TextBox.SelectionBrush" Value="{DynamicResource TextBoxSelectionBackground}" /> <Setter Property="TextBox.SelectionBrush" Value="{DynamicResource TextBoxSelectionBackground}" />
<Setter Property="TextBox.SelectionForegroundBrush" Value="{DynamicResource TextBoxSelectionForeground}" /> <Setter Property="TextBox.SelectionForegroundBrush" Value="{DynamicResource TextBoxSelectionForeground}" />
<Setter Property="TextBox.BorderThickness" Value="1" /> <Setter Property="TextBox.BorderThickness" Value="{DynamicResource TextBoxBorderThickness}" />
<Setter Property="TextBox.CornerRadius" Value="{DynamicResource TextBoxDefaultCornerRadius}" /> <Setter Property="TextBox.CornerRadius" Value="{DynamicResource TextBoxDefaultCornerRadius}" />
<Setter Property="TextBox.FontSize" Value="14" /> <Setter Property="TextBox.FontSize" Value="14" />
<Setter Property="TextBox.Cursor" Value="IBeam" /> <Setter Property="TextBox.Cursor" Value="IBeam" />
@ -64,6 +74,7 @@
<ControlTemplate TargetType="TextBox"> <ControlTemplate TargetType="TextBox">
<Border <Border
Name="PART_ContentPresenterBorder" Name="PART_ContentPresenterBorder"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}" BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}" BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{DynamicResource TextBoxDefaultCornerRadius}"> CornerRadius="{DynamicResource TextBoxDefaultCornerRadius}">
@ -135,15 +146,13 @@
<Style Selector="^:disabled"> <Style Selector="^:disabled">
<Setter Property="TextBox.Foreground" Value="{DynamicResource TextBoxDisabledForeground}" /> <Setter Property="TextBox.Foreground" Value="{DynamicResource TextBoxDisabledForeground}" />
<Setter Property="TextBox.BorderBrush" Value="{DynamicResource TextBoxDisabledBorderBrush}" /> <Setter Property="TextBox.BorderBrush" Value="{DynamicResource TextBoxDisabledBorderBrush}" />
<Style Selector="^/template/ Border#PART_ContentPresenterBorder"> <Setter Property="TextBox.Background" Value="{DynamicResource TextBoxDisabledBackground}" />
<Setter Property="Border.Background" Value="{DynamicResource TextBoxDisabledBackground}" />
</Style>
</Style> </Style>
<Style Selector="^:pointerover /template/ Border#PART_ContentPresenterBorder"> <Style Selector="^:pointerover">
<Setter Property="Border.BorderBrush" Value="{DynamicResource TextBoxPointerOverBorderBrush}" /> <Setter Property="TextBox.BorderBrush" Value="{DynamicResource TextBoxPointerOverBorderBrush}" />
</Style> </Style>
<Style Selector="^:focus /template/ Border#PART_ContentPresenterBorder"> <Style Selector="^:focus">
<Setter Property="Border.BorderBrush" Value="{DynamicResource TextBoxFocusBorderBrush}" /> <Setter Property="TextBox.BorderBrush" Value="{DynamicResource TextBoxFocusBorderBrush}" />
</Style> </Style>
<Style Selector="^.clearButton"> <Style Selector="^.clearButton">
<Style Selector="^[AcceptsReturn=False][IsReadOnly=False]:focus:not(:empty) /template/ Button#PART_ClearButton"> <Style Selector="^[AcceptsReturn=False][IsReadOnly=False]:focus:not(:empty) /template/ Button#PART_ClearButton">
@ -158,5 +167,26 @@
<Setter Property="ToggleButton.IsVisible" Value="True" /> <Setter Property="ToggleButton.IsVisible" Value="True" />
</Style> </Style>
</Style> </Style>
<Style Selector="^.Large">
<Setter Property="TextBox.MinHeight" Value="{DynamicResource TextBoxLargeHeight}" />
</Style>
<Style Selector="^.Small">
<Setter Property="TextBox.MinHeight" Value="{DynamicResource TextBoxSmallHeight}" />
</Style>
</ControlTheme>
<ControlTheme
x:Key="BorderlessTextBox"
BasedOn="{StaticResource {x:Type TextBox}}"
TargetType="TextBox">
<Setter Property="TextBox.Background" Value="{DynamicResource TextBoxBorderlessDefaultBackground}" />
<Setter Property="TextBox.BorderBrush" Value="{DynamicResource TextBoxBorderlessDefaultBorderBrush}" />
<Style Selector="^:pointerover">
<Setter Property="TextBox.Background" Value="{DynamicResource TextBoxBorderlessPointeroverBackground}" />
</Style>
<Style Selector="^:focus">
<Setter Property="TextBox.Background" Value="{DynamicResource TextBoxBorderlessPointeroverBackground}" />
<Setter Property="TextBox.BorderBrush" Value="{DynamicResource TextBoxFocusBorderBrush}" />
</Style>
</ControlTheme> </ControlTheme>
</ResourceDictionary> </ResourceDictionary>

View File

@ -3,6 +3,6 @@
xmlns:sys="clr-namespace:System;assembly=System.Runtime"> xmlns:sys="clr-namespace:System;assembly=System.Runtime">
<!-- Add Resources Here --> <!-- Add Resources Here -->
<sys:Double x:Key="DefaultFontSize">14</sys:Double> <sys:Double x:Key="DefaultFontSize">14</sys:Double>
<FontFamily x:Key="DefaultFontFamily">Inter,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif</FontFamily> <FontFamily x:Key="DefaultFontFamily">Inter, -apple-system,BlinkMacSystemFont,PingFang SC, Microsoft YaHei, Segoe UI, Hiragino Sans GB, Helvetica Neue,Helvetica,Arial,sans-serif</FontFamily>
<FontFamily x:Key="CodeFontFamily">Cascadia Code, Consolas, Inconsolata, monospace</FontFamily> <FontFamily x:Key="CodeFontFamily">Cascadia Code, Consolas, Inconsolata, monospace</FontFamily>
</ResourceDictionary> </ResourceDictionary>

View File

@ -2,7 +2,7 @@
xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sys="clr-namespace:System;assembly=System.Runtime"> xmlns:sys="clr-namespace:System;assembly=System.Runtime">
<SolidColorBrush x:Key="TextBoxDefaultBorderBrush" Color="#C6CACD" /> <SolidColorBrush x:Key="TextBoxDefaultBorderBrush" Color="#C6CACD" />
<SolidColorBrush x:Key="TextBoxDefaultBackground" Color="#E6E8EA" /> <SolidColorBrush x:Key="TextBoxDefaultBackground" Color="Transparent" />
<SolidColorBrush x:Key="TextBoxFocusBackground" Opacity="0.05" Color="#E6E8EA" /> <SolidColorBrush x:Key="TextBoxFocusBackground" Opacity="0.05" Color="#E6E8EA" />
<SolidColorBrush x:Key="TextBoxPointerOverBorderBrush" Color="#0062D6" /> <SolidColorBrush x:Key="TextBoxPointerOverBorderBrush" Color="#0062D6" />
<SolidColorBrush x:Key="TextBoxFocusBorderBrush" Color="#004FB3" /> <SolidColorBrush x:Key="TextBoxFocusBorderBrush" Color="#004FB3" />
@ -17,6 +17,10 @@
<SolidColorBrush x:Key="TextBoxDisabledForeground" Opacity="0.35" Color="#1C1F23" /> <SolidColorBrush x:Key="TextBoxDisabledForeground" Opacity="0.35" Color="#1C1F23" />
<SolidColorBrush x:Key="TextBoxDisabledBorderBrush" Color="#E6E8EA" /> <SolidColorBrush x:Key="TextBoxDisabledBorderBrush" Color="#E6E8EA" />
<SolidColorBrush x:Key="TextBoxBorderlessDefaultBackground" Opacity="0.05" Color="#2E3238" />
<SolidColorBrush x:Key="TextBoxBorderlessDefaultBorderBrush" Color="Transparent" />
<SolidColorBrush x:Key="TextBoxBorderlessPointeroverBackground" Opacity="0.09" Color="#2E3238" />
<sys:Double x:Key="TextBoxDefaultHeight">30</sys:Double> <sys:Double x:Key="TextBoxDefaultHeight">30</sys:Double>
<sys:Double x:Key="TextBoxSmallHeight">22</sys:Double> <sys:Double x:Key="TextBoxSmallHeight">22</sys:Double>
<sys:Double x:Key="TextBoxLargeHeight">38</sys:Double> <sys:Double x:Key="TextBoxLargeHeight">38</sys:Double>
@ -34,6 +38,7 @@
<Thickness x:Key="TextBoxInnerContentPadding">8 0</Thickness> <Thickness x:Key="TextBoxInnerContentPadding">8 0</Thickness>
<Thickness x:Key="TextBoxContentPadding">8 0</Thickness> <Thickness x:Key="TextBoxContentPadding">8 0</Thickness>
<Thickness x:Key="TextBoxBorderThickness">1</Thickness>
<SolidColorBrush x:Key="TextBoxSelectionBackground" Color="#0059D6" /> <SolidColorBrush x:Key="TextBoxSelectionBackground" Color="#0059D6" />
<SolidColorBrush x:Key="TextBoxSelectionForeground" Color="White" /> <SolidColorBrush x:Key="TextBoxSelectionForeground" Color="White" />