WPF入门学习笔记——布局

布局：

StackPanel布局:

StackPanel将控件按照行或列来顺序排列，但不会换行。通过设置面板的Orientation属性设置了两种排列方式：横排（Horizontal默认的）和竖排（Vertical）。

<Window x:Class="WPF_Layout.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="WPF-Layout" Height="350" Width="525">
<Grid>
<StackPanel Name="stackpanel1" Orientation="Horizontal">
<Button Content="Button1"></Button>
<Button Content="Button2"></Button>
<Button Content="Button3"></Button>
</StackPanel>
<StackPanel Name="stackpanel2" Orientation="Vertical">
<Button Content="Button4"></Button>
<Button Content="Button5"></Button>
<Button Content="Button6"></Button>
</StackPanel>
<StackPanel Name="stackpanel3" Orientation="Horizontal" FlowDirection="RightToLeft">
<Button Content="Button7"></Button>
<Button Content="Button8"></Button>
<Button Content="Button9"></Button>
</StackPanel>
</Grid>
</Window>

WrapPanel布局：

WrapPanel布局面板将各个控件按照一定方向罗列，当长度或高度不够时自动调整进行换行换列。

Orientation="Horizontal"时各控件从左至右罗列，当面板长度不够时，子控件就会自动换行，继续按照从左至右的顺序排列。

Orientation="Vertical"时各控件从上至下罗列，当面板高度不够时，子控件就会自动换列，继续按照从上至下的顺序排列。

<Window x:Class="WPF_Layout.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="WPF-Layout" Height="350" Width="525">
    <Grid>
        <WrapPanel Orientation="Horizontal">
            <Button Content="Button 150" Width="150"></Button>
            <Button Content="Button 200" Width="200"></Button>
            <Button Content="Button 150" Width="150"></Button>
            <Button Content="Button 200" Width="200"></Button>
            <Button Content="Button 150" Width="150"></Button>
            <Button Content="Button 200" Width="200"></Button>
            <Button Content="Button 150" Width="150"></Button>
        </WrapPanel>
    </Grid>
</Window>

Grid布局：

Grid允许我们通过自定义行列来进行布局,这类似于表格.通过定义Grid的RowDifinitions和ColumnDifinitions来实现对于表格行和列的定义，元素根据附加属性Grid.Row和Grid.Column确定自己的位置。

<Window x:Class="WPF_Layout.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="WPF-Layout" Height="350" Width="525">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="40"></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="2*"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>
        <Button Grid.Row="0" Content="Button 1"></Button>
        <Button Grid.Row="1" Content="Button 2"></Button>
        <Button Grid.Row="2" Content="Button 3"></Button>
        <Button Grid.Row="3" Content="Button 4"></Button>
    </Grid>
</Window>

ScrollViewer布局：

ScrollViewer是带有滚动条的面板。在ScrollViewer中只能有一个子控件，若要显示多个子控件，需要将一个附加的 Panel控件放置在父 ScrollViewer中。然后可以将子控件放置在该控件中。
HorizontalScrollBarVisibility水平滚动条是否显示默认为Hidden
VerticalScrollBarVisibility垂直滚动条是否显示 默认为Visible。
一般我们都会设置 HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto"
意思是：当内容超出可视范围时，才显示横向/纵向滚动条

<Window x:Class="WPF_Layout.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="WPF-Layout" Height="350" Width="525">
    <Grid>
        <ScrollViewer HorizontalScrollBarVisibility="Auto"  VerticalScrollBarVisibility="Auto">
            <Button Content="Button" Width="800" Height="800"></Button>
        </ScrollViewer>
    </Grid>
</Window>

Canvas布局（不常用）：

Canvas是一个类似于坐标系的面板，所有的元素通过设置坐标来决定其在坐标系中的位置。具体表现为使用Left、Top、Right、 Bottom附加属性在Canvas中定位控件。

<Window x:Class="WPF_Layout.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="WPF-Layout" Height="400" Width="825">
<Grid>
<Canvas>
<Button Canvas.Left="50" Canvas.Top="50" Content="Button 1"></Button>
<Button Canvas.Right="50" Canvas.Top="50" Content="Button 2"></Button>
<Button Canvas.Left="50" Canvas.Bottom="50" Content="Button 3"></Button>
<Button Canvas.Right="50" Canvas.Bottom="50" Content="Button 4"></Button>
</Canvas>
</Grid>
</Window>