此文目的旨在让人快速了解,没有什么深度,如需深入了解布局,请参考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>