WPF入门——XAML和布局容器

2022-02-28 22:55:35

WPF是微软推出的基于Windows Vista的用户界面框架；它提供了统一的编程模型、语言和框架，真正做到了分离界面设计人员与开发人员的工作。WPF和.NET中winForm是类似的。

XAML

1.XAML是对WPF程序的所用用户界面进行详细的定制。

2.它提供了一种便于扩展和定位的语法来定义和程序逻辑分离的用户界面，而这种实现方式和ASP.NET中的"代码后置"模型非常类似。

3.但是XAML并不是一种用于程序设计的语言，它的功能也不是为了执行应用程序逻辑。

4.说的通俗一点，WPF是一种框架，而在框架中布局元素的语言是XAML语言。

容器

1.主要是用于元素在窗体中的布局。

2.WPF中提供了许多的容器元素，wrappanel，dockpanel,stackpanel

warppanel

按行或者按列排序的。通过Orientation属性去设置它的排序顺序。

<Window x:Class="panelWPF.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window1" Height="300" Width="300">
    <WrapPanel Margin="24,51,23,41"  Orientation="Vertical">
        <Button Content="Button1" Width="75"/>
        <Button Content="Button2" Width="75"/>
        <Button Content="Button3" Width="75"/>
    </WrapPanel>
</Window>

WPF入门——XAML和布局容器

dockpanel

利用它的Dock属性设置控件的布局，置于顶部或者下部或者左部、右边。

<Window x:Class="panelWPF.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="348.507" Width="787.687">
    <DockPanel HorizontalAlignment="Left" Margin="94,73,0,0" VerticalAlignment="Top" Height="221" Width="588" LastChildFill="True">
        <Button Content="Button2" Name="button2" DockPanel.Dock="Top"/>
        <Button Content="Button3" Name="button3"  DockPanel.Dock="Bottom"/>
        <Button Content="Button1" DockPanel.Dock="Left" Name="button1" />
        <Button Content="Button4" Name="button4" DockPanel.Dock="Right"/>
        <Button Content="Button5" Name="button5" />
    </DockPanel>
</Window>

Grid

它可以将窗口分割成更小区域，能够将元素分割到不可见的网格中。有点类似于HTML中table

分割窗体：将窗体分割成两行三列。

<Window x:Class="gridWPF.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window1" Height="300" Width="300">
    <Grid ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
    </Grid>
</Window>

在方格中放入“按钮”元素：在第一行的第一列放一个，在第一行和第二行第三列各放一个。

</pre><pre name="code" class="plain" style="font-family: arial, sans-serif; font-size: 14px;"><Window x:Class="gridWPF.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window1" Height="300" Width="300">
    <Grid ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Button Content="left top" Grid.Row="0" Grid.Column="0" Margin="3"></Button>
        <Button Content="right top" Grid.Row="0" Grid.Column="2" Margin="3"></Button>
        <Button Content="right button" Grid.Row="1" Grid.Column="2" Margin="3"></Button>
    </Grid>
    
</Window>

调整grid分割格的宽度的尺寸，有三种方式：1.绝对的，直接设置with属性的数值。2.自动的，刚好满足需要，最灵活,比如设置width为auto。3.按比例数值尺寸，比如设置width的%比为‘4*’。

<Window x:Class="gridWPF.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window1" Height="300" Width="300">
    <Grid ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="2*"></ColumnDefinition>
            <ColumnDefinition  ></ColumnDefinition>
            <ColumnDefinition Width="auto"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Button Content="left top" Grid.Row="0" Grid.Column="0" Margin="3"></Button>
        <Button Content="right top" Grid.Row="0" Grid.Column="2" Margin="3"></Button>
        <Button Content="right button" Grid.Row="1" Grid.Column="2" Margin="3"></Button>
    </Grid>
    
</Window>

WPF入门——XAML和布局容器

设置分割格中的元素能跨越多个列或者多个行，分别使用grid属性ColumnSpan和RowSpan比如设置"left top"跨域一列。

设置可拖动分割窗口：使用GridSplitter控件。在第二列中添加一个GridSplitter分割器，拖动调节格子的大小。

<Window x:Class="gridWPF.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window1" Height="300" Width="300">
    <Grid ShowGridLines="False">
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="2*" MinWidth="40"></ColumnDefinition>
            <ColumnDefinition  Width="auto"></ColumnDefinition>
            <ColumnDefinition Width="auto"  MinWidth="40"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Button Content="left top"  Grid.Row="0" Grid.Column="0" Margin="3" ></Button>
        <Button Content="right top" Grid.Row="0" Grid.Column="2" Margin="3"></Button>
        <Button Content="right button" Grid.Row="1" Grid.Column="2" Margin="3" ></Button>
        <GridSplitter Grid.Column="1" Grid.RowSpan="2" Width="10" VerticalAlignment="Stretch"  HorizontalAlignment="Center" />
    </Grid>
    
</Window>

总结

对WPF以及XAML语言的一个初步的了解和学习；以及对布局容器的应用，它能使元素布局的调节起来更方便。以后的学习会在工作中深入。

WPF入门——XAML和布局容器

码农公寓

相关文章