|
在前一篇文章中，簡述了Avalonia UI中樣式和主題的簡單用法，今天繼續(xù)深入講解樣式的選擇器語法以及內(nèi)置主題等相關內(nèi)容，僅供學習分享使用，如有不足之處，還請指正。 樣式選擇器語法樣式選擇器定義樣式將作用于哪些控件。選擇器使用多種格式，接下來將分別介紹。 1. 按控件類型選擇Avalonia UI中的樣式可以按照控件類進行定義，在選擇器中輸入控件類型即可，示例如下所示： <Style Selector="Button"> <Setter Property="Background" Value="Red"></Setter> <Setter Property="Margin" Value="10"></Setter></Style>
在上述代碼中，定義的樣式將應用于所有的Button，如果在選擇器中需要加入命名空間，則將類型和命名空間以豎線隔開即可，如下所示： <UserControl 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./markup-compatibility/2006" xmlns:vm="clr-namespace:FirstAvalonia.ViewModels" mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450" x:Class="FirstAvalonia.Views.MainView" xmlns:xx="clr-namespace:Avalonia.Controls;assembly=Avalonia.Controls" x:DataType="vm:MainViewModel"> <UserControl.Styles> <Style Selector="xx|Button"> <Setter Property="Background" Value="Red"></Setter> <Setter Property="Margin" Value="10"></Setter> </Style> </UserControl.Styles></UserControl>
其中 命名空間必須先以xmlns:xx="clr-namespace:命名控件;assembly=程序集"的方式聲明，才能在選擇器進行引用，而不能直接引用。選擇器不會匹配派送類型，若要匹配派送類型，需要使用:is選擇器。對象的類型，是通過查看器StyleKey屬性來來確定的，通常它返回當前實例的類型，所以，如果希望Button的派生類也被視為Button樣式，則需要重寫StyleKeyOverride屬性以返回typeof(Button)。關于StyleKeyOverride說明如下所示：此方法為virtual修飾的虛，重寫示例如下所示：namespace FirstAvalonia.OkControls{ public class OkButton:Button { protected override Type StyleKeyOverride => base.StyleKeyOverride;
}}
2. 按名稱選擇如果定義的樣式只需要應用于特定的控件，則可以按名稱進行定義選擇器。在定義選擇器時，以Selector="類型#控件名稱"的格式進行定義，如下所示：<Style Selector="Button#btnOk"> <Setter Property="Background" Value="Red"></Setter> <Setter Property="Margin" Value="10"></Setter></Style>
在上述示例中，樣式將應用于x:Name="btnOk"的按鈕。如下所示：<Button x:Name="btnOk" Content="Ok"></Button>
注意，按名稱選擇中，必須在#前加上控件類型前綴才可以，否則無法識別要應用的控件類型。3. 按樣式類選擇樣式類是按照在選擇器中定義類別，并在控件中通過Classes屬性進行引用。樣式類以“控件類型.樣式類名1.樣式類名2”的形式進行命名，格式如下所示： <UserControl 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./markup-compatibility/2006" xmlns:vm="clr-namespace:FirstAvalonia.ViewModels" mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450" x:Class="FirstAvalonia.Views.MainView" x:DataType="vm:MainViewModel"> <UserControl.Styles> <Style Selector="Button.h1"> <Setter Property="FontSize" Value="24"></Setter> </Style> <Style Selector="Button.blue"> <Setter Property="Background" Value="Blue"></Setter> </Style> </UserControl.Styles> <StackPanel Orientation="Horizontal"> <Button Classes="h1 blue" Width="100" Height="100" Content="按鈕" Theme="{StaticResource EllipseButton}"></Button> </StackPanel></UserControl>
在上述示例中，定義了h1，blue兩個樣式類，分別定義控件字體大小，和背景色。通過Classes="h1 blue"的方式進行引用，多個樣式類用空格隔開。且選擇器可以定義多個樣式類，多個類用點號分隔(如：Selector="Button.large.red")，如果選擇器中指定了多個類，則控件必須同時擁有所有請求的類定義才能匹配。 4. 按偽類選擇使用當前偽類選擇控件進行匹配樣式，偽類在選擇器中以英文冒號為標識符，且選擇器中只能定義一個偽類，與其他樣式類一起使用時，偽類必須在選擇器定義的最后一個。偽類定義格式為“控件類型:偽類名稱”或“控件類型.樣式類:偽類名稱”示例為： <UserControl 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./markup-compatibility/2006" xmlns:vm="clr-namespace:FirstAvalonia.ViewModels" mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450" x:Class="FirstAvalonia.Views.MainView" x:DataType="vm:MainViewModel"> <UserControl.Styles> <Style Selector="Button#btnOk"> <Setter Property="Background" Value="Red"></Setter> <Setter Property="Margin" Value="10"></Setter> </Style> <Style Selector="Button:pointerover"> <Setter Property="FontWeight" Value="Bold"> </Setter> </Style> </UserControl.Styles> <StackPanel Orientation="Horizontal"> <Button x:Name="btnOk" Content="Ok"></Button> <Button Width="100" Height="100" Content="按鈕" ></Button> </StackPanel></UserControl>
在上述示例中，Selector="Button:pointerover"表示當鼠標放在按鈕上時應用樣式。- :focus-within 控件處于獲取焦點狀態(tài)，或者其子控件中存在處于獲取焦點狀態(tài)的控件。
- :focus-visible 該控件已獲得焦點，應當顯示一個視覺指示器。
5. 子操作符如果想讓樣式應用于某些控件內(nèi)的子控件，則可以使用子操作符。子選擇符使用大于號（>）來表示。如Selector="StackPanel > Button" 表示StackPanel直接包含的Button才會匹配樣式。子操作符定義的選擇器僅匹配邏輯控件樹的中的直接子項。 <StackPanel> <Button>Save</Button> <DockPanel Width="300" Height="300"> <Button DockPanel.Dock="Top">Top</Button> <TextBlock>Some text</TextBlock> </DockPanel></StackPanel>
該選擇器將匹配第一個按鈕，但不會匹配第二個按鈕。這是因為第二個按鈕不是堆棧面板的直接子項（它在?？棵姘逯校?。 6. 任意后代操作符子操作符僅匹配邏輯樹中的直接子項，而如果想匹配邏輯樹中的所有子項，則可以使用任意后代操作符。任意后代操作符為空格，當兩個選擇器由空格分隔時，選擇器將匹配邏輯樹中的任意后代，父級在左邊，后代在右邊。示例如下所示： <UserControl 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./markup-compatibility/2006" xmlns:vm="clr-namespace:FirstAvalonia.ViewModels" mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450" x:Class="FirstAvalonia.Views.MainView" x:DataType="vm:MainViewModel"> <UserControl.Styles> <Style Selector="StackPanel Button"> <Setter Property="BorderThickness" Value="2"></Setter> <Setter Property="BorderBrush" Value="Yellow"></Setter> </Style> </UserControl.Styles> <StackPanel Orientation="Horizontal"> <Button x:Name="btnOk" Content="Ok"></Button> <Button Width="100" Height="100" Content="按鈕" ></Button> </StackPanel></UserControl>
上述示例中，StackPanel下的Button都將匹配樣式，具備“2像素的黃色邊框”。 7. 按屬性匹配在Avalonia UI中，可以根據(jù)控件包含某些屬性來應用樣式，這就可以細化選擇器，在選擇器中包含屬性的值，格式為“控件類型[屬性=值]”，這將匹配具有指定屬性設置為指定值的控件。如下所示： <UserControl 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./markup-compatibility/2006" xmlns:vm="clr-namespace:FirstAvalonia.ViewModels" mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450" x:Class="FirstAvalonia.Views.MainView" x:DataType="vm:MainViewModel"> <UserControl.Styles> <Style Selector="Button[IsDefault=true]"> <Setter Property="FontStyle" Value="Italic"></Setter> </Style> </UserControl.Styles> <StackPanel Orientation="Horizontal"> <Button Width="100" Height="100" Content="按鈕" IsDefault="True"></Button> <Button Width="100" Height="100" Content="按鈕" ></Button> </StackPanel></UserControl>
在上面的XAML中，第一個按鈕將被選擇，但第二個按鈕不會被選擇，因為第二個按鈕沒有設置IsDefault="True"屬性。注意，如果要將附加屬性用作屬性匹配，則屬性名必須用括號括起來。如：Selector="TextBlock[(Grid.Row)=0]"。8. Not函數(shù)如果選擇器中想要不包含某些條件來定義，則可以使用Not函數(shù)，即否定選擇器。示例代碼如下所示：<UserControl 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./markup-compatibility/2006" xmlns:vm="clr-namespace:FirstAvalonia.ViewModels" mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450" x:Class="FirstAvalonia.Views.MainView" x:DataType="vm:MainViewModel"> <UserControl.Styles> <Style Selector="TextBlock.h1"> <Setter Property="FontSize" Value="24"/> <Setter Property="FontWeight" Value="Bold"/> <Style Selector="^:pointerover"> <Setter Property="Foreground" Value="Red"/> </Style> </Style> <Style Selector="TextBlock:not(.h1)"> <Setter Property="FontStyle" Value="Italic"></Setter> </Style> </UserControl.Styles>
<StackPanel> <TextBlock Classes="h1" Text="字號24,加粗，鼠標放上變紅色"></TextBlock> <TextBlock Text="普通文本，斜體"></TextBlock> </StackPanel></UserControl>
在上述示例中，h1的樣式將匹配第一個TextBlock，不包含h1樣式的TextBlock將匹配第二個樣式。以上只是列舉了一些常用的樣式，關于更多內(nèi)容，請參考官網(wǎng)：https://docs./zh-Hans/docs/reference/styles/style-selector-syntax內(nèi)置主題在Avalonia UI中，官方提供了兩個內(nèi)置主題：- Fluent主題，F(xiàn)luent主題是受Microsoft的Fluent Design System啟發(fā)的現(xiàn)代主題。
- Simple主題，是一個簡約且輕量的主題，具有有限的內(nèi)置樣式。
1. Fluent主題Fluent主題受到微軟的Fluent Design System啟發(fā)，該系統(tǒng)是一組用于創(chuàng)建視覺吸引力和交互式用戶界面的設計指南和組件。Fluent Design System強調現(xiàn)代，清晰的美學，平滑的動畫和直觀的交互。它在不同平臺上提供了一致而精致的外觀和感覺，同時為開發(fā)人員提供了樣式系統(tǒng)的靈活性。默認創(chuàng)建的Avalonia項目，已經(jīng)通過Nuget包管理器安裝了Fluent組件庫，當前版本號為11.2.4，如下圖所示：且默認情況下，已經(jīng)在App.xaml中包含了Fluent主題，如下所示：<Application xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="FirstAvalonia.App" RequestedThemeVariant="Default"> <Application.Styles> <FluentTheme /> </Application.Styles> <Application.Resources> <ControlTheme x:Key="EllipseButton" TargetType="Button"> <Setter Property="Background" Value="Blue"/> <Setter Property="Foreground" Value="Yellow"/> <Setter Property="Padding" Value="8"/> </ControlTheme> </Application.Resources></Application>
雖然 FluentTheme 有內(nèi)置的暗色和淺色變體資源，但仍然可以重寫這些變體的基礎調色板。 這在開發(fā)人員想要使用相同的基本主題但具有不同顏色時非常有用。<Application xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="AvaloniaApplication.App"> <Application.Styles> <FluentTheme> <FluentTheme.Palettes> <!-- 適用于淺色主題變體的調色板 --> <ColorPaletteResources x:Key="Light" Accent="Green" RegionColor="White" ErrorText="Red" /> <!-- 適用于暗色主題變體的調色板 --> <ColorPaletteResources x:Key="Dark" Accent="DarkGreen" RegionColor="Black" ErrorText="Yellow" /> </FluentTheme.Palettes> </FluentTheme> </Application.Styles></Application>
2. Simple主題Avalonia Simple 主題專門設計為簡約且輕量，具有有限的內(nèi)置樣式。它為構建自定義樣式提供了簡單干凈的基礎。低視覺和結構復雜性使其成為在嵌入式設備上運行的應用程序的理想選擇。若要使用Simple主題，首先需要安裝 Avalonia.Themes.Simple NuGet 包。如下圖所示：<Application xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="AvaloniaApplication.App"> <Application.Styles> <SimpleTheme /> </Application.Styles></Application>
關于主題的更多內(nèi)容，請參考官網(wǎng)：https://docs./zh-Hans/docs/basics/user-interface/styling/themes/以上就是《Avalonia系列文章之樣式與主題2》的全部內(nèi)容，關于更多詳細內(nèi)容，可參考官方文檔。希望能夠一起學習，共同進步。學習編程，從關注【老碼識途】開始，為大家分享更多文章?。?！
|
