一.布局控件
1.网格布局(Grid、UniformGrid)
Grid布局控件:
<!--Grid布局控件:网格布局-->
<Grid>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="2*"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition Width="2*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Button
Width="100"
Height="50"
Content="按钮"
Background="DarkGray"
Foreground="DarkGreen"
></Button>
<TextBox
Grid.Column="1"
Text="你好"
FontSize="30"
Width="100"
Height="50"
Background="Azure"
Foreground="Blue"
></TextBox>
<!--Span站2几行(列)-->
<Button
Grid.Row="1"
Grid.RowSpan="2"
Height="200"
Width="100"
></Button>
</Grid>
效果图:
UniformGrid布局控件(自动伸缩):
<!--UniformGrid自动伸缩-->
<UniformGrid>
<Button Width="200" Height="50" Content="按钮" />
<Button Width="200" Height="50" Content="按钮" FontSize="20"/>
<Button Width="200" Height="50" Content="按钮" FontSize="20"/>
<Button Width="200" Height="50" Content="按钮" />
<Button Width="200" Height="50" Content="按钮" FontSize="20"/>
<Button Width="200" Height="50" Content="按钮" FontSize="20"/>
<Button Width="200" Height="50" Content="按钮" FontSize="20"/>
<Button Width="200" Height="50" Content="按钮" FontSize="20"/>
<Button Width="200" Height="50" Content="按钮" FontSize="20"/>
</UniformGrid>
效果图:
2.堆叠面板(StackPanel)
<!--StackPanel堆叠面板,垂直方向排列,不换列,放不下溢出部分裁剪-->
<StackPanel Orientation="Horizontal" Background="Aqua">
<Button Width="200" Height="50" Content="按钮" />
<Button Width="200" Height="50" Content="按钮" FontSize="20"/>
<Button Width="200" Height="50" Content="按钮" FontSize="20"/>
<Button Width="200" Height="50" Content="按钮" />
<Button Width="200" Height="50" Content="按钮" FontSize="20"/>
<Button Width="200" Height="50" Content="按钮" FontSize="20"/>
<Button Width="200" Height="50" Content="按钮" FontSize="20"/>
<Button Width="200" Height="50" Content="按钮" FontSize="20"/>
<Button Width="200" Height="50" Content="按钮" FontSize="20"/>
</StackPanel>
效果图:
3.换行面板(WrapPanel)
<!--WrapPanel换行面板,水平方向排列-->
<WrapPanel>
<Button Width="200" Height="50" Content="按钮" />
<Button Width="200" Height="50" Content="按钮" FontSize="20"/>
<Button Width="200" Height="50" Content="按钮" FontSize="20"/>
<Button Width="200" Height="50" Content="按钮" />
<Button Width="200" Height="50" Content="按钮" FontSize="20"/>
</WrapPanel>
效果图:
4. 锚面板(DockPanel)
<!--DockPanel锚面板-->
<DockPanel LastChildFill="True">
<Button DockPanel.Dock="Bottom" Width="200" Height="50" Content="按钮1" FontSize="20"/>
<Button DockPanel.Dock="Top" Width="200" Height="50" Content="按钮2" FontSize="20"/>
<Button DockPanel.Dock="Left" Width="200" Height="50" Content="按钮3" FontSize="20"/>
<Button DockPanel.Dock="Right" Width="200" Height="50" Content="按钮4" FontSize="20"/>
<Button Content="按钮5" FontSize="20"/>
</DockPanel>
效果图:
5. 精确布局面板(Canvas)
<!--Canvas通过绝对定位来安排子元素-->
<Canvas>
<Rectangle Width="100" Height="100" Fill="Red"/>
<Ellipse Width="100" Height="100" Fill="Blue" Canvas.Left="150"/>
<Button Width="100" Height="40" Content="按钮" Background="DarkCyan" Canvas.Top="200" Canvas.Left="300"/>
</Canvas>
效果图:
6.滚动面板(ScrollViewer)
<!--ScrollViewer滚动条-->
<ScrollViewer HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible">
<Rectangle Width="1000" Height="500"/>
</ScrollViewer>
效果图:
二.样式
1.样式的种类:
全局样式:App.xaml
<Application.Resources>
<!--全局样式-->
<Style TargetType="TextBlock">
<Setter Property="FontStyle" Value="Italic"/>
</Style>
</Application.Resources>
局部样式:<X.Resources></X.Resources>
X表示:Window,Page,UserControl,NavugationWindow等,或控件的开始标签
<Window.Resources>
<!--此样式没key,相当于元素选择器:同类型的元素使用此样式(如:所有的TextBlock)-->
<Style TargetType="TextBlock">
<Setter Property="FontStyle" Value="Oblique"/>
</Style>
</Window.Resources>
2.样式的优先级:
权重值越大,优先级越高
行内样式 > 局部样式 > 全局样式 > 控件默认样式
3.样式的继承:
继承性:在WPF中有一些样式属性默认是有继承性,父标签中有设置,子标签没有设置样式,也 能继承父标签的样式;BaseOn让一个样式继承另一个样式。
规律:WPF中具有继承性的属性一般是和字体相关,前景色相关的属性。
继承链:一个控件先使用自身样式,若行内样式没有设置,会向上查询它的父控件
注意;布局控件一般没有字体相关的样式
简单案例:
<StackPanel>
<Label FontSize="30">
<TextBlock Text="中国"/>
</Label>
<TextBlock Text="中国" />
</StackPanel>
三.触发器
WPF提供了多种类型的触发器,包括属性触发器(Property Trigger)、数据触发器(Data Trigger)、事件触发器(Event Trigger)、多条件触发器(MultiTrigger)和多数据触发器(MultiDataTrigger)。
1.属性触发器(Property Trigger)
<iframe allowfullscreen="true" data-mediaembed="bilibili" frameborder="0" id="ujKongsH-1730720024186" src="https://player.bilibili.com/player.html?aid=113424449212391"></iframe>C# WPF 属性触发器
<Window.Resources>
<Style x:Key="EllipseStyle" TargetType="Ellipse">
<Setter Property="Fill" Value="Blue"/>
<Setter Property="Width" Value="100"/>
<Setter Property="Height" Value="100"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Fill" Value="Red"/>
<Setter Property="Width" Value="200"/>
<Setter Property="Height" Value="200"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="False">
<Setter Property="Fill" Value="Blue" />
<Setter Property="Width" Value="100" />
<Setter Property="Height" Value="100" />
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid>
<Ellipse Style="{DynamicResource EllipseStyle}"/>
</Grid>
2.多条件触发器(MultiTrigger)
<iframe allowfullscreen="true" data-mediaembed="bilibili" frameborder="0" id="HZC33UTl-1730722041061" src="https://player.bilibili.com/player.html?aid=113424583561167"></iframe>c# wpf 多条件触发器
<Window.Resources>
<ControlTemplate x:Key="ButtonTemplate1" TargetType="{x:Type ButtonBase}">
<Border
x:Name="border"
Background="{TemplateBinding Background}">
<!--内容呈现者-->
<ContentPresenter
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Border>
</ControlTemplate>
</Window.Resources>
<StackPanel>
<!-- 需求:按钮必须启用,且悬浮时,背景为Red,其他情况还原默认值。 -->
<Button Template="{DynamicResource ButtonTemplate1}">
<Button.Resources>
<Style TargetType="Button">
<Setter Property="Width" Value="100" />
<Setter Property="Height" Value="50" />
<Setter Property="Content" Value="按钮" />
<Style.Triggers>
<!-- 多条件触发器 -->
<MultiTrigger>
<MultiTrigger.Conditions>
<!-- 触发器执行满足的两个条件 -->
<Condition Property="IsEnabled" Value="True" />
<Condition Property="IsMouseOver" Value="True" />
</MultiTrigger.Conditions>
<!-- 满足条件时,执行的样式 -->
<MultiTrigger.Setters>
<Setter Property="Background" Value="Red" />
</MultiTrigger.Setters>
</MultiTrigger>
</Style.Triggers>
</Style>
</Button.Resources>
</Button>
</StackPanel>
3.事件触发器(Event Trigger)
<iframe allowfullscreen="true" data-mediaembed="bilibili" frameborder="0" id="SmSLtajY-1730723139135" src="https://player.bilibili.com/player.html?aid=113424650535396"></iframe>c# wpf 事件触发器
<Window.Resources>
<ControlTemplate x:Key="ButtonTemplate1" TargetType="{x:Type ButtonBase}">
<Border
x:Name="border"
Background="{TemplateBinding Background}">
<ContentPresenter
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Border>
</ControlTemplate>
</Window.Resources>
<StackPanel>
<StackPanel.Resources>
<Style x:Key="ButtonStyle" TargetType="Button">
<Setter Property="Width" Value="100" />
<Setter Property="Height" Value="50" />
<Setter Property="Foreground" Value="Black" />
<Setter Property="Background" Value="Blue" />
<Style.Triggers>
<!-- 事件触发器 RoutedEvent路由事件:事件触发器执行的时机 -->
<EventTrigger RoutedEvent="MouseEnter">
<!-- 事件触发器的行为,某个事件执行时,让触发器做何动作。如:执行一个动画 -->
<EventTrigger.Actions>
<!-- 动画 -->
<BeginStoryboard>
<Storyboard>
<!-- Duration动画持续的时间,格式是:时分秒 -->
<DoubleAnimation
Storyboard.TargetProperty="Width"
To="200"
Duration="0:0:2" />
<DoubleAnimation
Storyboard.TargetProperty="FontSize"
To="18"
Duration="0:0:2" />
<ColorAnimation
Storyboard.TargetProperty="Foreground.Color"
From="Black"
To="White"
Duration="0:0:2" />
<ColorAnimation
Storyboard.TargetProperty="Background.Color"
From="Blue"
To="Red"
Duration="0:0:2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<EventTrigger.Actions>
<!-- 动画 -->
<BeginStoryboard>
<Storyboard>
<!-- Duration动画持续的时间,格式是:时分秒 -->
<DoubleAnimation
Storyboard.TargetProperty="Width"
To="100"
Duration="0:0:2" />
<DoubleAnimation
Storyboard.TargetProperty="FontSize"
To="12"
Duration="0:0:2" />
<ColorAnimation
Storyboard.TargetProperty="Foreground.Color"
From="White"
To="Black"
Duration="0:0:2" />
<ColorAnimation
Storyboard.TargetProperty="Background.Color"
From="Red"
To="Blue"
Duration="0:0:2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
</StackPanel.Resources>
<!-- Template="{DynamicResource ButtonTemplate1}" 使用模板 -->
<Button
Style="{StaticResource ButtonStyle}"
Template="{DynamicResource ButtonTemplate1}"
ToolTip="20">
按钮
</Button>
</StackPanel>
标签:控件,触发器,c#,效果图,Trigger,WPF,样式 From: https://blog.csdn.net/hcyily/article/details/143226279