WPF之布局

     此文目的旨在让人快速了解，没有什么深度，如需深入了解布局，请参考msdn。

     如果你要把WPF当winform使用，拖拖控件也无不可，不过建议还是不要拖的好。

     本文将那些用的比较多的几个布局控件（Grid、UniformGrid、StackPanel、WrapPanel、DockPanel以及Canvas）综合起来，布局那个伟大的乌龟。

     话不多说，贴运行图和代码。

 

       下面是XAML代码。 

<Window x:Class="LayoutPractice.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="640" Width="640">
        <Grid ShowGridLines="True">
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <Grid.Resources>
                <Style TargetType="Button">
                    <Setter Property="Width" Value="60"/>
                    <Setter  Property="Height" Value="60"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate>
                            <Border Background="#ff909090" BorderBrush="#ff707070" BorderThickness="1">
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
            </Grid.Resources>
            <StackPanel Orientation="Horizontal"  VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Column="3">
                <Button/>
                <Button/>
            </StackPanel>
            <DockPanel Width="120" Height="120">
                <Button DockPanel.Dock="Top" Width="Auto" Height="30"/>
                <Button DockPanel.Dock="Bottom" Width="Auto" Height="30"/>
                <Button DockPanel.Dock="Left"/>
                <Button DockPanel.Dock="Right"/>
            </DockPanel>
            <Grid Grid.Row="2" VerticalAlignment="Center" HorizontalAlignment="Center">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition />
                    <RowDefinition />
                    <RowDefinition />
                </Grid.RowDefinitions>
                <StackPanel Grid.RowSpan="2" VerticalAlignment="Center">
                    <Button/>
                    <Button/>
                </StackPanel>
                <StackPanel Grid.ColumnSpan="2" Grid.Row="0"  Grid.Column="1" Orientation="Horizontal">
                    <Button/>
                    <Button/>
                </StackPanel>
                <StackPanel Grid.RowSpan="2" Grid.Column="2" Grid.Row="1">
                    <Button/>
                    <Button/>
                </StackPanel>
                <StackPanel Grid.ColumnSpan="2" Grid.Column="0" Grid.Row="2"  Orientation="Horizontal">
                    <Button/>
                    <Button/>
                </StackPanel>
            </Grid>
            <Grid Grid.Row="2" Grid.Column="2" VerticalAlignment="Center" HorizontalAlignment="Center">
                <Grid.RowDefinitions>
                    <RowDefinition/>
                    <RowDefinition/>
                    <RowDefinition/>
                </Grid.RowDefinitions>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                    <Button/>
                </StackPanel>
                <StackPanel Grid.Row="1"  Orientation="Horizontal" HorizontalAlignment="Center">
                    <Button/>
                    <Button/>
                </StackPanel>
                <StackPanel Grid.Row="2"  Orientation="Horizontal" HorizontalAlignment="Center">
                    <Button/>
                    <Button/>
                    <Button/>
                </StackPanel>
            </Grid>
            <StackPanel Grid.Row="1" Orientation="Horizontal"  VerticalAlignment="Center" HorizontalAlignment="Center">
                <Button VerticalAlignment="Bottom"/>
                <Button RenderTransformOrigin="0.5 0.5" Margin="0 0 0 42">
                    <Button.RenderTransform>
                        <RotateTransform Angle="45"/>
                    </Button.RenderTransform>
                </Button>
                <Button VerticalAlignment="Bottom"/>
            </StackPanel>
            <WrapPanel Grid.Row="1" Grid.Column="2"  VerticalAlignment="Center" HorizontalAlignment="Center">
                <StackPanel Orientation="Horizontal">
                    <Button/>
                    <Button/>
                    <Button/>
                </StackPanel>
                <StackPanel Orientation="Horizontal" Margin="60 0 0 0">
                    <Button HorizontalAlignment="Center"/>
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <Button/>
                    <Button/>
                    <Button/>
                </StackPanel>
            </WrapPanel>
            <UniformGrid Grid.Column="1" Rows="3" Columns="3"  VerticalAlignment="Center" HorizontalAlignment="Center">
                <Button/>
                <Button/>
                <Button/>
                <Button/>
                <Button/>
                <Button/>
                <Button/>
                <Button/>
                <Button/>
            </UniformGrid>
            <Button Grid.Row="2" Grid.Column="1"/>
            <Canvas Grid.Row="1" Grid.Column="1" Width="180" Height="180">
                <Button Canvas.Left="0" Canvas.Top="0"/>
                <Button Canvas.Right="0" Canvas.Top="0"/>
                <Button Canvas.Left="0" Canvas.Bottom="0"/>
                <Button Canvas.Right="0" Canvas.Bottom="0"/>
                <Button Margin="60"/>
            </Canvas>
        </Grid>
</Window>