您的位置: 首页  >  文章  >  wpf入门第一篇 基础布局与简单样式

wpf入门第一篇 基础布局与简单样式

分类: 文章 • 2022-10-10 21:30:17

前言

本文是wpf入门系列第一篇，面向有winform或者web前端基础的、并且也有C#基础的同学。

本文通过简单的例子，介绍了wpf的基础布局与简单样式的使用方法。

本文使用了 Visual Studio 2017 进行演示讲解。

wpf入门系列导航页面： https://blog.csdn.net/wf824284257/article/details/88757497

开始

打开VS2017,菜单栏点击【文件】->【新建】->【项目】，选择wpf项目，取名为WpfTest，选好路径后点击确认。

wpf入门第一篇 基础布局与简单样式

在项目新建完毕后,可以看到类似下图的界面：

wpf入门第一篇 基础布局与简单样式

这是vs为我们自动打开的MainWindow.xaml的界面。上方为设计面板，下面是代码面板。下面我们找到代码中的Grid标签，并将它替换为下面代码：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <TextBlock Name="t1" Grid.Row="0" Grid.Column="0" Text="t1"></TextBlock>
    <TextBlock Name="t2" Grid.Row="0" Grid.Column="1" Text="t2"></TextBlock>
    <Button Name="btn1" Grid.Row="1" Grid.Column="0" Content="btn1"></Button>
    <Button Name="btn2" Grid.Row="1" Grid.Column="1" Content="btn2"></Button>
</Grid>

替换完毕后按Ctrl+s保存。这是设计面板显示如下：

wpf入门第一篇 基础布局与简单样式

可以看到 MainWIndow被分成一个“田”字，上面两个格子的左上角分别显示t1和t2，下面两个格子颜色有变化，并且中间显示btn1和btn2。

对比代码可以看出，wpf中Grid是用来布局的，我们使用RowDefinition和ColumnDefinition来定义Grid有几行几列，之后再在Grid标签中定义了两个TextBlock和两个Button，它们的位置是通过Grid.Row和Grid.Column确定的。同时，这四个控件的默认大小是填充了整个格子，且TextBlock中文本的显示位于左上角，Button中文本的显示位于居中位置。

下面我们写样式代码来使btn2变成我们常见的按钮样式，并居中显示。

将btn2的代码替换为如下代码：

<Button Name="btn2" Grid.Row="1" Grid.Column="1" Content="btn2"
        Width="100" Height="40"></Button>

此时btn2达到我们的要求。

为了让btn1的样式跟btn2一样，且不想重复写相同的样式代码，我们可以将width=100，heigh=40单独拎出来，写成样式，并且给btn1和btn2引用该样式即可。

修改后的xaml代码如下：

<Window x:Class="WpfTest.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:WpfTest"
    mc:Ignorable="d"
    Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
        <Style TargetType="Button" x:Key="btn">
            <Setter Property="Width" Value="100"></Setter>
            <Setter Property="Height" Value="40"></Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <TextBlock Name="t1" Grid.Row="0" Grid.Column="0" Text="t1"></TextBlock>
        <TextBlock Name="t2" Grid.Row="0" Grid.Column="1" Text="t2"></TextBlock>
        <Button Name="btn1" Grid.Row="1" Grid.Column="0" Content="btn1" Style="{StaticResource btn}"></Button>
        <Button Name="btn2" Grid.Row="1" Grid.Column="1" Content="btn2" Style="{StaticResource btn}"></Button>
    </Grid>
</Window>

设计面板显示为：

wpf入门第一篇 基础布局与简单样式

可以看出，样式可以在Window.Resources中定义，通过TargetType属性来限制适用类型，通过x:key属性来被引用。

类似web前端的css文件，我们常常将style写在单独的文件中，并在页面中引用。在资源管理器中右键点击项目名，添加一个资源字典文件，命名为styles。

wpf入门第一篇 基础布局与简单样式

将styles.xaml代码替换为下面代码：

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:WpfTest">
    <Style TargetType="Button" x:Key="btn">
        <Setter Property="Width" Value="100"></Setter>
        <Setter Property="Height" Value="40"></Setter>
    </Style>
</ResourceDictionary>

可以看出，我们将mainWindow.xaml中定义的btn样式复制到了styles.xaml中。为了在mainWindow中使用该样式，我们需要做下面两步：

  1. 在app.xaml中引用styles.xaml ;
  2. 在mainWindow.xaml中引用styles.xaml;

下面我们来实现上面两个步骤：

首先，打开App.xaml，将代码替换为如下代码：

<Application x:Class="WpfTest.App"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:local="clr-namespace:WpfTest"
            StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary Source="styles.xaml"></ResourceDictionary>
    </Application.Resources>
</Application>

然后，在MainWindow.xaml中，将Window.Resources段代码改为如下代码：

<Window.Resources>
    <ResourceDictionary Source="styles.xaml"></ResourceDictionary>
</Window.Resources>

F5运行项目，两个按钮的样式符合预期，我们的styles.xaml中的样式成功的被引用到mainWIndow中。

若mainWindow需要引用两个及以上的样式文件，则需要将window.Resources段改为下面格式：

<Window.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="styles.xaml"></ResourceDictionary>
            <!-- 在这里添加更多的样式文件引用 -->
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Window.Resources>

常用的布局标签还有StackPanel,它支持横向或纵向布局。 我们可以将btn2的代码替换为如下代码：

<StackPanel Orientation="Horizontal" Grid.Row="1" Grid.Column="1">
    <Button Name="btn2"  Content="btn2" Style="{StaticResource btn}" Margin="5"></Button>
    <Button Name="btn3"  Content="btn2" Style="{StaticResource btn}"></Button>
</StackPanel>

此时显示效果如下图所示：

wpf入门第一篇 基础布局与简单样式

巧妙的运用Grid及StackPanel，以及简单的样式设置，即可设计出漂亮的wpf界面了。当然仅仅用这几个是不够的，本文仅仅是入门篇，更多的知识需要读者自行学习。

结束

本文讲了wpf的基础布局与简单样式，仅起入门作用，关于布局有更多的标签可以使用，样式设置也可以设置更多的属性，不过用起来都类似，所以关于布局与样式，更多知识还请读者自行学习。

下一步：

wpf入门第二篇 MVVM与binding：
https://blog.csdn.net/wf824284257/article/details/88758707

相关推荐