WPF开发快速入门【1】WPF的布局

WPF开发快速入门【1】WPF的布局已关闭评论
173 次浏览

A+

所属分类：.NET技术

摘要

概述本文描述几款WPF中常用的布局控件。 Grid Grid是WPF最常用的布局控件。它把面板分割为固定长和宽的网格，子控件就放置在网格内。

便宜好用的国外VPS推荐

概述

本文描述几款WPF中常用的布局控件。

Grid

Grid是WPF最常用的布局控件。它把面板分割为固定长和宽的网格，子控件就放置在网格内。

    <Grid>         <Grid.ColumnDefinitions>             <ColumnDefinition Width="100"/>             <ColumnDefinition Width="*"/>             <ColumnDefinition Width="2*"/>         </Grid.ColumnDefinitions>          <TextBlock Text="hello" Grid.Column="0" Grid.ColumnSpan="2" HorizontalAlignment="Center" Margin="10"/>     </Grid>

Grid控件有两个显著的特点：

1、行高和列宽可以设定为固定值，也可以按比例分配；

2、可以跨行或跨列。

StackPanel

StackPanel按顺序依次排列控件，通过Orientation="Horizontal"或Orientation="Vertical"来控制列表的方向。

    <StackPanel Orientation="Horizontal">         <TextBlock Text="Hello"/>     </StackPanel>

GridSplitter

通过GridSplitter可以调整两个网格的宽度或高度。

            <Grid>                 <Grid.ColumnDefinitions>                     <ColumnDefinition Width="*" MinWidth="150"/>                     <ColumnDefinition Width="3"/>                     <ColumnDefinition Width="2*" MinWidth="200"/>                 </Grid.ColumnDefinitions>                  <Grid Grid.Column="0" Background="WhiteSmoke"/>                 <GridSplitter Grid.Column="1" Background="CornflowerBlue"/>                 <Grid Grid.Column="2" Background="LightGray" />             </Grid>

GridSplitter的宽度和颜色都可以设置。

DockPanel

DockPanel控件可以在主要的显示面板周五显示可以停靠的面板。

            <DockPanel>                 <Grid Width="200" DockPanel.Dock="Left" Background="SeaGreen" Visibility="{Binding LeftVisibility}"/>                 <Grid Width="200" DockPanel.Dock="Right" Background="Orchid" Visibility="{Binding RightVisibility}"/>                 <Grid  Background="Silver">                     <Grid.ColumnDefinitions>                         <ColumnDefinition Width="100"/>                         <ColumnDefinition Width="*"/>                         <ColumnDefinition Width="100"/>                     </Grid.ColumnDefinitions>                      <Button Grid.Column="0" Content="Left" Width="80" Height="30" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="5"                             Command="{s:Action LeftClick}"/>                     <Button Grid.Column="2" Content="Right" Width="80" Height="30" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="5"                             Command="{s:Action RightClick}"/>                 </Grid>             </DockPanel>

需要注意的是，主面板一定要放在最后描述。通过下面代码可以显示或隐藏Dock面板：

    public class PageLayoutViewModel : Screen     {         public bool IsLeftShow { get; set; } = true;         public bool IsRightShow { get; set; } = true;          public Visibility LeftVisibility => IsLeftShow ? Visibility.Visible : Visibility.Collapsed;         public Visibility RightVisibility => IsRightShow ? Visibility.Visible : Visibility.Collapsed;          public void LeftClick()         {             IsLeftShow = !IsLeftShow;         }          public void RightClick()         {             IsRightShow = !IsRightShow;         }     }