目录
一、winUI3 基本概念及样式
1、边距
2、如何使用样式
1）、布局控件内定义样式
2）、APP.xmal定义全局样式
3）、单独的样式文件
3.1)、新增字典资源 xmal
3.2）、在里面设置样式
3.3）、引用样式
3、更多样式修改
1）、修改默认属性
2）、修改所有的默认颜色
3）、样式继承
4、示例
一、winUI3 基本概念及样式
1、边距
-
Margin 值可以是统一的，也可以是不同的。 在使用
Margin="20"时，将对元素的左侧、顶部、右侧和底部应用 20 像素的统一边距。 在使用Margin="0,10,5,25"时，将左侧、顶部、右侧和底部（按此顺序）分别应用不同的值。
<Grid BorderBrush="Blue" BorderThickness="4" Width="200">
<TextBox Text="This is text in a TextBox." Margin="20" Padding="16,24"/>
</Grid>
2、如何使用样式
1）、布局控件内定义样式
<?xml version="1.0" encoding="utf-8"?>
<Window
x:Class="App5.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App5"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
>
<Grid BorderBrush="Blue" BorderThickness="4" Width="400" Background="Black">
<Grid.Resources>
<Style x:Key="BtnSty1" TargetType="Button">
<Setter Property="Background" Value="LightCoral"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="Width" Value="110"/>
<Setter Property="Height" Value="35"/>
</Style>
<Style x:Key="BtnSty2" TargetType="Button">
<Setter Property="BorderThickness" Value="5" />
<Setter Property="Foreground" Value="Black" />
<Setter Property="BorderBrush" >
<Setter.Value>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="Yellow" Offset="0.0" />
<GradientStop Color="Red" Offset="0.25" />
<GradientStop Color="Blue" Offset="0.75" />
<GradientStop Color="LimeGreen" Offset="1.0" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="PurpleStyle" TargetType="Button">
<Setter Property="FontFamily" Value="Segoe UI"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="Foreground" Value="Purple"/>
</Style>
<Style TargetType="Button">
<Setter Property="FontFamily" Value="Segoe UI"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="RenderTransform">
<Setter.Value>
<RotateTransform Angle="25"/>
</Setter.Value>
</Setter>
<Setter Property="BorderBrush" Value="Green"/>
<Setter Property="BorderThickness" Value="2"/>
<Setter Property="Foreground" Value="Green"/>
</Style>
</Grid.Resources>2）、APP.xmal定义全局样式
<?xml version="1.0" encoding="utf-8"?>
<Application
x:Class="App5.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App5">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
<!-- Other merged dictionaries here -->
<ResourceDictionary Source="MyDictionary.xaml"/>
</ResourceDictionary.MergedDictionaries>
<!-- Other app resources here -->
<Style x:Key="BtnSty3" TargetType="Button">
<Setter Property="Background" Value="CornflowerBlue"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="FontSize" Value="16"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="Width" Value="120"/>
<Setter Property="Height" Value="40"/>
<Setter Property="CornerRadius" Value="10"/>
</Style>
</ResourceDictionary>
</Application.Resources>
</Application>3）、单独的样式文件
3.1)、新增字典资源 xmal
3.2）、在里面设置样式
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- 定义样式 -->
<Style x:Key="BtnSty4" TargetType="Button">
<Setter Property="Background" Value="DarkSlat
