WPF之布局控件

来源：互联网发布：mac os sierra beta4 编辑：程序博客网时间：2024/04/27 09:40

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