UI布局实例(WPF)

内容简要

• Panel及其家族成员
• Grid
• StackPanel
• Canvas
• DockPanel
• WrapPanel

 

Panel及其家族成员

WPF的布局元素属于Panel家族，掌握WPF布局前，需要灵活应用Panel家族的成员。Panel继承自FrameworkElement，即可以使用在FrameworkElement中定义的大小调整和定位属性，主要有Height、Width、HorizontalAlignment、VerticalAlignment、Margin和LayoutTransform这些用于精确定位子元素。Coding个Example(Margin,HorizontalAlignment,VerticalAlignment)更多详细见msdn 点这里:

<Border Background="AliceBlue" Margin="5" BorderBrush="Black" Padding="15" HorizontalAlignment="Center" VerticalAlignment="Top">
    <StackPanel Background="White" HorizontalAlignment="Center" VerticalAlignment="Top">
        <TextBlock Margin="5" FontSize="18" Text="Padding,Alignment and Margin Example" HorizontalAlignment="Center"></TextBlock>
        <Button HorizontalAlignment="Left" Content="Left_Button" Margin="10"></Button>
        <Button HorizontalAlignment="Right" Content="Right_Button" Margin="20,0,20,0"></Button>
        <Button Content="Default_Button" Margin="0,10,0,10"></Button>
    </StackPanel>
</Border>

Run:

Panel中有个重要特性是——附加属性。在以后的笔记中会详细说明。

派生的Panel元素在控件与布局中详细介绍了。用于wpfUI布局的有Canvas、DockPanel、StackPanel、Grid、Wrappanel。

 

Grid

继承自Controls.Panel。类似于HTML中的Table，网格布局。布局属性是Grid.RowDefinution、Grid.ColumnDefinition和附加属性Grid.Row、Grid.Column。

Coding一个：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="30"></RowDefinition>
        <RowDefinition Height="4"></RowDefinition>
        <RowDefinition Height="4*"></RowDefinition>
        <RowDefinition Height="4"></RowDefinition>
        <RowDefinition Height=" 4*"></RowDefinition>
        <RowDefinition Height="4"></RowDefinition>
        <RowDefinition Height="3*"></RowDefinition>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="4*"></ColumnDefinition>
        <ColumnDefinition Width="6*"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <TextBlock FontSize="20" Foreground="Blue" Text="Log On" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="10,0,10,0" Grid.Column="1"></TextBlock>
    <TextBlock FontSize="14" Text="User Name: " HorizontalAlignment="Right" VerticalAlignment="Center" Margin="5" Grid.Row="2"></TextBlock>
    <TextBox Margin="5" VerticalAlignment="Center" HorizontalAlignment="Left" Grid.Column="1" Grid.Row="2" Width="100"></TextBox>
    <TextBlock FontSize="14" Text="Password: " HorizontalAlignment="Right" VerticalAlignment="Center" Margin="5" Grid.Row="4"></TextBlock>
    <TextBox Margin="5" VerticalAlignment="Center" HorizontalAlignment="Left" Grid.Column="1" Grid.Row="4" Width="100"></TextBox>
    <Button Margin="0,0,5,0" VerticalAlignment="Center" HorizontalAlignment="Left" Grid.Column="1" Grid.Row="6" Content="Submit" Width="60"></Button>
    <Button Margin="20,0,60,0" VerticalAlignment="Center" HorizontalAlignment="Right" Grid.Column="1" Grid.Row="6" Content="Cancel" Width="60"></Button>
</Grid>

 

Run:

StackPanel

可将元素排列成一行(水平OR垂直)。水平OR垂直是由Orientation设置。

Coding一个：

<StackPanel Orientation="Horizontal">
    <Button Content="BuntonOne" Height="30" Width="80" ></Button>
    <Button Content="ButtonTwo"  Height="30" Width="80" ></Button>
    <Button Content="ButtonTwo"  Height="30" Width="80" ></Button>
    <Button Content="ButtonTwo"  Height="30" Width="80" ></Button>
    <Button Content="ButtonTwo"  Height="30" Width="80" ></Button>
</StackPanel>

 

Run:

DockPanel

可以相对于彼此水平或者垂直排列子元素。

主要了解属性：Dock、LastChildFill。Dock为附加属性，指定子元素在Dockpanel中的位置。LastChildFill为bool型，指示DockPanel中的最后一个元素是否拉伸填满可用控件。

Coding：

<DockPanel LastChildFill="True">
    <Button Content="BuntonOne" DockPanel.Dock="Top"></Button>
    <Button Content="ButtonTwo" DockPanel.Dock="Left"></Button>
    <Button Content="ButtonTwo"   DockPanel.Dock="Bottom"></Button>
    <Button Content="ButtonTwo" DockPanel.Dock="Right"></Button>
    <Button Content="ButtonTwo"  ></Button>
</DockPanel>

 

Run:

 

 

 

 

Canvas

类似于在Windows Form与Asp.NET的布局方式，使用坐标显式定位子元素。主要用到四个附加属性：Bottom、Left、Right、Top。

Coding:

<Canvas>
    <TextBlock Text="User Name:" Canvas.Left="20" Canvas.Top="30" FontSize="15"></TextBlock>
    <TextBox Canvas.Left="120" Canvas.Top="30" Width="100"></TextBox>
    <TextBlock Text="Password:" Canvas.Left="20" Canvas.Top="70" FontSize="15"></TextBlock>
    <TextBox Canvas.Left="120" Canvas.Top="70" Width="100"></TextBox>
    <Button Canvas.Left="90" Canvas.Top="110" Content="Submit" FontSize="13" Width="70"></Button>
    <Button Canvas.Left="200" Canvas.Top="110" Content="Cancel" FontSize="13" Width="70"></Button>
</Canvas>

 

Run:

 

 

WrapPanel

特点自动折行，类似于HTML中的流式布局。重要属性：orientation，指定子内容的排列方向。

Coding:

<WrapPanel Orientation="Horizontal">
    <Button Width="200" Content="Button"></Button>
    <Button Width="100" Content="Button"></Button>
    <Button Width="100" Content="Button"></Button>
    <Button Width="100" Content="Button"></Button>
    <Button Width="100" Content="Button"></Button>
    <Button Width="100" Content="Button"></Button>
</WrapPanel>

 

Run:

 

WPF的UI布局笔记就这样了……Any Question please Contact me….