WPF之布局

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

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

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

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

 

       下面是XAML代码。 

View Code

<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>