WPF开发快速入门【1】WPF的布局
概述
本文描述几款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面板:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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;
}
}
DockPanelSplitter
有没有既可以停靠又可以调整宽度的面板呢?官方没有提供,但git上有。
下载地址:JVimes/DockPanelSplitter: Like WPF's GridSplitter, but for DockPanel instead of Grid. (github.com)
资源
系列目录:WPF开发快速入门【0】前言与目录
签名区:
如果您觉得这篇博客对您有帮助或启发,请点击右侧【推荐】支持,谢谢!