c# WPF 布局控件、样式、触发器

hcyily

1096人浏览 · 2024-11-04 20:27:32

hcyily · 2024-11-04 20:27:32 发布

一.布局控件

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）

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）

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）

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>

乐奇 Rokid 开放社区

更多推荐

灶边：让菜谱从「看」变成「做」——一个意图驱动的免手厨房智能体

灶边是一款基于Rokid Glasses的免手厨房智能体，通过语音与头部手势实现“意图驱动”的做饭指导。用户只需说出想吃的菜，系统即生成分步计划，烹饪中仅提示当前一步并自动计时，点头确认、摇头暂停，全程解放双手。采用四页闭环设计，分阶段承接“想做什么”“怎么做”“做到哪”三类意图，结合本地状态持久化与离线兜底菜谱，确保流畅体验。借助AIUI与轻量化交互，真正实现“抬头即知下一步”，让菜谱从“看”变