WPF(C#)学习日志1：样式与布局

挖石油的问天

已于 2023-06-18 19:25:25 修改

阅读量377

点赞数

分类专栏： WPF框架学习与实战文章标签： wpf c# 学习

于 2023-06-18 19:23:59 首次发布

本文链接：https://blog.csdn.net/m0_61262333/article/details/131274899

版权

WPF框架学习与实战专栏收录该内容

8 篇文章 6 订阅

订阅专栏

文章介绍了WPF中如何使用样式定义控件的外观和行为，以减少重复代码，并展示了通过样式设置TextBlock的字体和颜色。同时，文章讲解了布局的概念，特别是Grid布局的用法，包括行和列的定义以及如何放置控件。

摘要由CSDN通过智能技术生成

一.样式

在 WPF（Windows Presentation Foundation）中，样式（Style）是一种定义控件外观和行为的机制。通过样式，您可以定义控件的属性，如背景、前景、字体样式、边框等，并将这些属性应用于一个或多个控件。

如果不通过样式，我们在生命标签对时，需要在每个标签对中都声明大量的属性，比如说我们要声明四个文本，代码如下：

 <Grid>
        <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
            <TextBlock Text="Text1" FontFamily="宋体" FontSize="18" Foreground="Red" FontWeight="Bold"/>
            <TextBlock Text="Text2" FontFamily="宋体" FontSize="18" Foreground="Red" FontWeight="Bold"/>
            <TextBlock Text="Text3" FontFamily="宋体" FontSize="18" Foreground="Red" FontWeight="Bold"/>
            <TextBlock Text="Text4" FontFamily="宋体" FontSize="18" Foreground="Red" FontWeight="Bold"/>
         </StackPanel>

    </Grid>

运行结如下图所示，可以看到四个红色的文本。

为了避免在标签对中出现大量重复的内容我们重新定义样式，代码如下：

    <Window.Resources>
        
        <Style x:Key="text2" TargetType="{x:Type TextBlock}" >
            <!-- TargetType 说明属性应用的类型  -->
            <Setter Property="FontFamily" Value="宋体"/>
            <Setter Property="FontSize" Value="18"/>
            <Setter Property="Foreground" Value="Red"/>
            <Setter Property="FontWeight" Value="Bold"/>
        </Style>
               
    </Window.Resources>
        
    <Grid>
        <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
            <TextBlock Text="Text1" Foreground="BlueViolet"  Style="{StaticResource text2}"/>
            <TextBlock Text="Text2" Style="{StaticResource text2}"/>
            <TextBlock Text="Text3" Style="{StaticResource text2}"/>
            <TextBlock Text="Text4" Style="{StaticResource text2}"/>
        </StackPanel>
    </Grid>

样式定义在<Window.Resources>包裹的标签对当中，TargetType关键字定义该样式作用的组件类型，我们要定义文本的样式，这里便直接选择文本。同时，应用样式时支持就近原则，即重复定义的属性会有优先<Grid>当中的的属性为准，上段代码中的运行结果如下图所示：

因为我们在后面的标签对中定义了紫色，所以会覆盖样式之中的红色。

二.布局

布局是一种用于安排和组织控件在用户界面中位置和大小的机制。WPF提供了多种布局容器，每个容器都具有不同的布局方式和特性，以满足各种布局需求。

下是WPF中常用的布局容器及其简要介绍：

Grid（网格布局）：Grid 是最常用的布局容器之一，它将控件划分为行和列的网格，并可以在网格单元中放置控件。Grid 具有灵活的布局能力，可以使用行和列的定义来确定控件的位置和大小。

<Grid.RowDefinitions>和<Grid.ColumnDefinitions>定义每个Grid当中的行数和列数，测试代码如下：


    <Grid>
        <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <!-- 第一行，自动调整高度 -->
                <RowDefinition Height="*"/>
                <!-- 第二行，占据剩余空间 -->
                <RowDefinition Height="100"/>
                <!-- 第三行，固定高度为100 -->
            </Grid.RowDefinitions>
        
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <!-- 第一列，自动调整宽度 -->
                <ColumnDefinition Width="*"/>
                <!-- 第二列，占据剩余空间 -->
                <ColumnDefinition Width="200"/>
                <!-- 第三列，固定宽度为200 -->
            </Grid.ColumnDefinitions>

            <!-- 在 Grid 中放置控件 -->
            <Button Grid.Row="0" Grid.Column="0" Content="Button 1"/>
            <Button Grid.Row="1" Grid.Column="1" Content="Button 2"/>
        <Button Grid.Row="2" Grid.Column="2" Content="Button 3"/>
    </Grid>

输入的结果图如下：