WPF之布局控件

StackPanel:堆栈面板

<StackPanel Margin="3" Name="stackPanel1">
    <Label Margin="3" HorizontalAlignment="Center">
      A Button Stack
    </Label>
    <Button Margin="3" MaxWidth="200" MinWidth="100">Button 1</Button>
    <Button Margin="3" MaxWidth="200" MinWidth="100">Button 2</Button>
    <Button Margin="3" MaxWidth="200" MinWidth="100">Button 3</Button>
    <Button Margin="3" MaxWidth="200" MinWidth="100">Button 4</Button>

    <CheckBox Name="chkVertical" Margin="10" HorizontalAlignment="Center"
     Checked="chkVertical_Checked" Unchecked="chkVertical_Unchecked">
      Use Vertical Orientation</CheckBox>            
  </StackPanel>

WrapPanel:包装环绕面板

<WrapPanel Margin="3">
    <Button VerticalAlignment="Top">Top Button</Button>
    <Button MinHeight="60">Tall Button 2</Button>
    <Button VerticalAlignment="Bottom">Bottom Button</Button>
    <Button>Stretch Button</Button>
    <Button VerticalAlignment="Center">Centered Button</Button>   
  </WrapPanel>

Grid:   表格面板

 

<Grid>      
      <Grid.ColumnDefinitions>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition Width="Auto"></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
      </Grid.ColumnDefinitions>


      <Grid Grid.Column="0" VerticalAlignment="Stretch">
        <Grid.RowDefinitions>
          <RowDefinition></RowDefinition>          
          <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Button Margin="3" Grid.Row="0">Top Left</Button>
        <Button Margin="3" Grid.Row="1">Bottom Left</Button>
      </Grid>


      <GridSplitter Grid.Column="1" 
                  Width="3" VerticalAlignment="Stretch" HorizontalAlignment="Center" 
                  ShowsPreview="False"></GridSplitter>


      <Grid Grid.Column="2">
        <Grid.RowDefinitions>
          <RowDefinition></RowDefinition>
          <RowDefinition Height="Auto"></RowDefinition>
          <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>


        <Button Grid.Row="0" Margin="3">Top Right</Button>
        <Button Grid.Row="2" Margin="3">Bottom Right</Button>
        
         <GridSplitter Grid.Row="1" 
                  Height="3" VerticalAlignment="Center" 
                  HorizontalAlignment="Stretch" 
                  ShowsPreview="False"></GridSplitter>
      </Grid>
    <Grid ShowGridLines="True">
      <Grid.RowDefinitions>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
      </Grid.RowDefinitions>
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"></ColumnDefinition>
        <ColumnDefinition Width="100"></ColumnDefinition>
        <ColumnDefinition Width="Auto"></ColumnDefinition>
      </Grid.ColumnDefinitions>
    <Button Grid.Row="0" Grid.Column="0">Top Left</Button>
    <Button Grid.Row="0" Grid.Column="1">Middle Left</Button>
    <Button Grid.Row="1" Grid.Column="2">Bottom Right</Button>
    <Button Grid.Row="1" Grid.Column="1">Bottom Middle</Button>
    
  </Grid>

GridSplitter: 表格面板分隔器

    <Grid>
      <Grid.RowDefinitions>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
      </Grid.RowDefinitions>
      <Grid.ColumnDefinitions>
        <ColumnDefinition MinWidth="100"></ColumnDefinition>
        <ColumnDefinition Width="Auto"></ColumnDefinition>
        <ColumnDefinition MinWidth="50"></ColumnDefinition>
      </Grid.ColumnDefinitions>
      <Button Grid.Row="0" Grid.Column="0" Margin="3">Left</Button>
      <Button Grid.Row="0" Grid.Column="2" Margin="3">Right</Button>
      <Button Grid.Row="1" Grid.Column="0" Margin="3">Left</Button>
      <Button Grid.Row="1" Grid.Column="2" Margin="3">Right</Button>
      
      <GridSplitter Grid.Row="0" Grid.Column="1" Grid.RowSpan="2"                
                  Width="3" VerticalAlignment="Stretch" HorizontalAlignment="Center"
                  ShowsPreview="False"></GridSplitter>    
    </Grid>

    <Grid>      
      <Grid.ColumnDefinitions>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition Width="Auto"></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
      </Grid.ColumnDefinitions>

      <Grid Grid.Column="0" VerticalAlignment="Stretch">
        <Grid.RowDefinitions>
          <RowDefinition></RowDefinition>          
          <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Button Margin="3" Grid.Row="0">Top Left</Button>
        <Button Margin="3" Grid.Row="1">Bottom Left</Button>
      </Grid>

      <GridSplitter Grid.Column="1" 
                  Width="3" VerticalAlignment="Stretch" HorizontalAlignment="Center" 
                  ShowsPreview="False"></GridSplitter>

      <Grid Grid.Column="2">
        <Grid.RowDefinitions>
          <RowDefinition></RowDefinition>
          <RowDefinition Height="Auto"></RowDefinition>
          <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>

        <Button Grid.Row="0" Margin="3">Top Right</Button>
        <Button Grid.Row="2" Margin="3">Bottom Right</Button>
        
         <GridSplitter Grid.Row="1" 
                  Height="3" VerticalAlignment="Center" 
                  HorizontalAlignment="Stretch" 
                  ShowsPreview="False"></GridSplitter>
      </Grid>

DockPanel: 泊靠面板

    <DockPanel LastChildFill="True">
      <Button DockPanel.Dock="Top">A Stretched Top Button</Button>
      <Button DockPanel.Dock="Top" HorizontalAlignment="Center">A Centered Top Button</Button>
      <Button DockPanel.Dock="Top" HorizontalAlignment="Left">A Left-Aligned Top Button</Button>
      <Button DockPanel.Dock="Bottom">Bottom Button</Button>
      <Button DockPanel.Dock="Left">Left Button</Button>
      <Button DockPanel.Dock="Right">Right Button</Button>
      <Button >Remaining Space</Button>
    </DockPanel>

Canvas: 画布

    <Canvas>
      <Button Canvas.Left="10" Canvas.Top="10">(10,10)</Button>
      <Button Canvas.Left="120" Canvas.Top="30">(120,30)</Button>
      <Button Canvas.Left="60" Canvas.Top="80" Width="50" Height="50">(60,80)</Button>
      <Button Canvas.Left="70" Canvas.Top="120" Width="100" Height="50">(70,120)</Button>
    </Canvas>

UniformGrid: 统一表格面板

    <UniformGrid Rows="2" Columns="2">
      <Button>Top Left</Button>
      <Button>Top Right</Button>
      <Button>Bottom Left</Button>
      <Button>Bottom Right</Button>
    </UniformGrid>

InkCanvas: 油墨画布

    <Grid>
      <Grid.RowDefinitions>
        <RowDefinition Height="Auto"></RowDefinition>
        <RowDefinition></RowDefinition>
      </Grid.RowDefinitions>
      <StackPanel Margin="5" Orientation="Horizontal">
        <TextBlock Margin="5">EditingMode: </TextBlock>
        <ComboBox Name="lstEditingMode"  VerticalAlignment="Center">          
        </ComboBox>
      </StackPanel>
      
      <InkCanvas Name="inkCanvas" Grid.Row="1" Background="LightYellow" EditingMode="{Binding ElementName=lstEditingMode,Path=SelectedItem}">
        <Button InkCanvas.Top="10" InkCanvas.Left="10">Hello</Button>
        <!--<Image Source="office.jpg" InkCanvas.Top="10" InkCanvas.Left="10"
               Width="287" Height="319"></Image>-->
      </InkCanvas>
    </Grid>

        public SimpleInkCanvas()
        {
            InitializeComponent();

            
	    foreach (InkCanvasEditingMode mode in Enum.GetValues(typeof(InkCanvasEditingMode)))
	    {
                lstEditingMode.Items.Add(mode);
                lstEditingMode.SelectedItem = inkCanvas.EditingMode;
            }
        }