首页 > 编程语言 >c# WPF 布局控件、样式、触发器

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

时间：2024-11-04 20:16:00浏览次数：5  
标签：控件 触发器 c# 效果图 Trigger WPF 样式

一.布局控件

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

相关文章

  • opencv 图像预处理（一） python笔记
    图像预处理​在计算机视觉和图像处理领域，图像预处理是一个重要的步骤，它能够提高后续处理（如特征提取、目标检测等）的准确性和效率。OpenCV提供了许多图像预处理的函数和方法，以下是一些常见的图像预处理操作：图像空间转换图像大小调整图像仿射变换图像翻转图像裁剪图像二值......
  • sicp每日一题[2.69]
    Exercise2.69Thefollowingproceduretakesasitsargumentalistofsymbol-frequencypairs(wherenosymbolappearsinmorethanonepair)andgeneratesaHuffmanencodingtreeaccordingtotheHuffmanalgorithm.(define(generate-huffman-treepairs)......
  • C++ 中类的三大特性是什么？
    封装：封装是将数据和操作数据的方法捆绑在一起，形成一个类。通过封装，类的内部实现细节被隐藏起来，只对外提供公共的接口。这样做有以下几个好处：数据安全性：封装可以防止外部代码直接访问和修改类的内部数据，只能通过类提供的方法进行操作。这样可以保证数据的安全性和完整性，避免因......
  • windows XP,ReactOS系统3.4 共享映射区(Section)---1
    系列文章目录文章目录系列文章目录3.4共享映射区(Section)NtCreateSection()MmCreateSection()MmCreateDataFileSection()NtMapViewOfSection()MmNotPresentFaultSectionView()3.4共享映射区(Section)对于用户空间的映射，一个物理页面通常只属于一个进程，即只被......
  • windows XP,ReactOS系统3.4 共享映射区(Section)---2
    系列文章目录文章目录系列文章目录在ReactOs内核中ROS_SECTION_OBJECT结构体MM_SECTION_SEGMENT结构体SECTION_PAGE_DIRECTORY结构体SECTION_PAGE_TABLE结构体在ReactOs内核中在ReactOs内核中,映射区的数据结构是ROS_SECTION_OBJECT,显然这与Windows中的“......
  • 解决pycharm中安装包之后却用不了的问题
    一起因    这几天，我接触了selenium,然后在pycharm当中下载了selenium,结果可想而知，报错了，然后我在网上查到解决的办法，想着会对大家有帮助，就分享给大家，其他的包也可以这样做二解决办法        首先输入pipshow(你的包名)，然后就可以看到location......
  • leetcode-hot100-两数之和
    两数之和给定一个整数数组nums和一个整数目标值target，请你在该数组中找出和为目标值target的那两个整数，并返回它们的数组下标。你可以假设每种输入只会对应一个答案，并且你不能使用两次相同的元素。示例输入：nums=[2,7,11,15],target=9输出：[0,1]解释：因为nums......
  • Windows-DHCP
    AppSrv、RouterSrv服务DHCP（AppSrv）安装和配置dhcp服务，为办公区域网络提供地址上网。创建地址池名为inside_pool，地址池范围：192.168.0.1-192.168.0.100。根据题目要求正确配置网关和dns信息。配置故障转移设置为“热备用服务器”模式。伙伴服务器“DC2”为“待机”状态。为......
  • Leecode热题100-78.子集
    给你一个整数数组 nums ，数组中的元素 互不相同 。返回该数组所有可能的子集（幂集）。解集 不能 包含重复的子集。你可以按 任意顺序 返回解集。示例1：输入：nums=[1,2,3]输出：[[],[1],[2],[1,2],[3],[1,3],[2,3],[1,2,3]]示例2：输入：nums=[0]输出：[[],[0]]提......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99