WPF 笔记 二 面板

目录

• 面板知识
  • 介绍
  • Canvas
  • WrapPanel
  •  StackPanel
  • DockPanel
  •  ViewBox
  • Grid
  • Grid行和列
  • Grid单位
  •  Grid跨越
  • Grid分割
• 用户控件

 

---

回到顶部

面板知识

介绍

Canvas
该面板可以设置每个子控件的坐标
WrapPanel
每个子控件按照水平（默认方式）或者竖直的方式满布一行或一列，让后再布置下一行或者下一列。基于最大的项目调整宽度或高度。当你需要水平或者竖直排列子控件且能自动滚动进入下一行（列）时采用他。
StackPanel
与 WrapPanel 很相似，但不会换行，尽量延长自己。但每个项目拉伸占满全宽或全高，而不是基于最大的项目调整宽度或高度
DockPanel
将子控件停靠在顶部、底部、左侧或右侧，最后一个子控件如果不指定，占满剩余空间
特别说明：如果DockPanel里面的元素不指定停靠位置，默认使用left，对于多个相同停靠位置的元素，按照先后顺序依次排列，可以使用margin调整其位置关系。
Grid
多行多列
以像素的绝对数量、可用空间的百分比或自动方式，其中行或列将根据内容自动调整其大小
UniformGrid
所有网格具有相同大小

 

Canvas

    <Canvas>
        <Ellipse Panel.ZIndex="2" Fill="Gainsboro" Canvas.Left="25" Canvas.Top="25" Width="200" Height="200" />
        <Rectangle Panel.ZIndex="3" Fill="LightBlue" Canvas.Left="25" Canvas.Top="25" Width="50" Height="50" />
        <Rectangle Panel.ZIndex="2" Fill="LightCoral" Canvas.Left="50" Canvas.Top="50" Width="50" Height="50" />
        <Rectangle Panel.ZIndex="4" Fill="LightCyan" Canvas.Left="75" Canvas.Top="75" Width="50" Height="50" />
    </Canvas>

 

 

 

WrapPanel

    <WrapPanel>
        <Button>Test button 1</Button>
        <Button>Test button 2</Button>
        <Button>Test button 3</Button>
        <Button Height="40">Test button 4</Button>
        <Button>Test button 5</Button>
        <Button>Test button 6</Button>
    </WrapPanel>

 

 StackPanel

垂直堆叠

 

    <StackPanel>
        <Button>Button 1</Button>
        <Button>Button 2</Button>
        <Button>Button 3</Button>
        <Button>Button 4</Button>
        <Button>Button 5</Button>
        <Button>Button 6</Button>
    </StackPanel>

 

 水平堆叠

 

只需要加上

 <StackPanel Orientation="Horizontal">

 

 

    <StackPanel Orientation="Horizontal">
        <Button VerticalAlignment="Top">Button 1</Button>
        <Button VerticalAlignment="Center">Button 2</Button>
        <Button VerticalAlignment="Bottom">Button 3</Button>
        <Button VerticalAlignment="Bottom">Button 4</Button>
        <Button VerticalAlignment="Center">Button 5</Button>
        <Button VerticalAlignment="Top">Button 6</Button>
    </StackPanel>

 

DockPanel

 

 

    <DockPanel>
        <Button DockPanel.Dock="Left">Left</Button>
        <Button DockPanel.Dock="Top">Top</Button>
        <Button DockPanel.Dock="Right">Right</Button>
        <Button DockPanel.Dock="Bottom">Bottom</Button>
        <Button>Center</Button>
    </DockPanel>

可以为各个控件指定宽高

    <DockPanel>
        <Button DockPanel.Dock="Top" Height="50">Top</Button>
        <Button DockPanel.Dock="Bottom" Height="50">Bottom</Button>
        <Button DockPanel.Dock="Left" Width="50">Left</Button>
        <Button DockPanel.Dock="Right" Width="50">Right</Button>    
        <Button>Center</Button>
    </DockPanel>

<DockPanel LastChildFill="False">

用此属性关闭最后一个控件铺满剩余空间。

 ViewBox

定义一个内容容器。ViewBox组件的作用是拉伸或延展位于其中的组件，以填满可用空间，使之有更好的布局及视觉效果。

一个 Viewbox中只能放一个控件。

常用属性 Stretch

成员名称	说明
None	内容保持其原始大小。
Fill	调整内容的大小以填充目标尺寸。 不保留纵横比。
Uniform	在保留内容原有纵横比的同时调整内容的大小，以适合目标尺寸。
UniformToFill	在保留内容原有纵横比的同时调整内容的大小，以填充目标尺寸。 如果目标矩形的纵横比不同于源矩形的纵横比，则对源内容进行剪裁以适合目标尺寸。

 

Grid

 引子

    <Grid>
错误用法
        <Button>Button 1</Button>
        <Button>Button 2</Button>
    </Grid>

像这样使用，第二个控件会覆盖第一个。

 

列划分简单例子

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Button>Button 1</Button>
        <Button Grid.Column="1">Button 2</Button>
    </Grid>

默认的Grid.Column 为0

 

 在各个列中，不让button铺满，使用对齐

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>        
        <Button VerticalAlignment="Top" HorizontalAlignment="Center">Button 1</Button>
        <Button Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Right">Button 2</Button>
    </Grid>

 

Grid行和列

ColumnDefinition RowDefinition 使用数字*指定比例关系

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="2*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="2*" />
            <RowDefinition Height="1*" />
            <RowDefinition Height="1*" />
        </Grid.RowDefinitions>
        <Button>Button 1</Button>
        <Button Grid.Column="1">Button 2</Button>
        <Button Grid.Column="2">Button 3</Button>
        <Button Grid.Row="1">Button 4</Button>
        <Button Grid.Column="1" Grid.Row="1">Button 5</Button>
        <Button Grid.Column="2" Grid.Row="1">Button 6</Button>
        <Button Grid.Row="2">Button 7</Button>
        <Button Grid.Column="1" Grid.Row="2">Button 8</Button>
        <Button Grid.Column="2" Grid.Row="2">Button 9</Button>
    </Grid>

 

 

Grid单位

ColumnDefinition RowDefinition除了*，

还有auto 和数字，分别表示占用控件text长度和绝对像素。

 Grid跨越

    <Grid>
        <Grid.ColumnDefinitions>            
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Button>Button 1</Button>
        <Button Grid.Column="1">Button 2</Button>
        <Button Grid.Row="1" Grid.ColumnSpan="2">Button 3</Button>
    </Grid>

指定第二行跨越两列

 

 

Grid分割

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="5" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <TextBlock FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Left side</TextBlock>
        <GridSplitter Grid.Column="1" Width="5" HorizontalAlignment="Stretch" />
        <TextBlock Grid.Column="2" FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Right side</TextBlock>
    </Grid>

 

回到顶部

用户控件

新建WPF用户控件，名称LimitedInput

.xaml文件内容

<UserControl x:Class="WpfControlLibrary1.LimitedInput"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:WpfControlLibrary1"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <Label Content="{Binding Title}" />
        <Label Grid.Column="1">
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding ElementName=txtLimitedInput, Path=Text.Length}" />
                <TextBlock Text="/" />
                <TextBlock Text="{Binding MaxLength}" />
            </StackPanel>
        </Label>
        <TextBox MaxLength="{Binding MaxLength}" Grid.Row="1" Grid.ColumnSpan="2" Name="txtLimitedInput" ScrollViewer.VerticalScrollBarVisibility="Auto" TextWrapping="Wrap" />
    </Grid>
</UserControl>

 

对应cs文件

namespace WpfControlLibrary1
{
    /// <summary>
    /// UserControl1.xaml 的交互逻辑
    /// </summary>
    public partial class LimitedInput : UserControl
    {
        public LimitedInput()
        {
            InitializeComponent();
            this.DataContext = this;
        }
        public string Title { get; set; }
        public int MaxLength { get; set; }
    }
}

 

 

使用

从工具栏拖入LimitedInput控件

 

 

 或者引用相应dll，

在相应Window的xaml文件中

        xmlns:uc="clr-namespace:WpfControlLibrary1;assembly=WpfControlLibrary1"

    <Grid>

        <uc:LimitedInput Title="Enter Title" MaxLength="100" Margin="40,25,418.6,295"/>

    </Grid>