码迷,mamicode.com
首页 > Windows程序 > 详细

WPF系列:基本布局

时间:2016-03-09 21:02:50      阅读:529      评论:0      收藏:0      [点我收藏+]

标签:

StackPanel

  StackPanel可以作为Window的一个子元素,并在其中包含多个元素,并逐个显示元素,可以是水平(Horizontal)排列或者垂直(Vertical)排列

    <StackPanel Orientation="Vertical">
        <Label>Lable</Label>
        <TextBox>TextBox</TextBox>
        <Button>Button</Button>
        <CheckBox>CheckBox</CheckBox>
        <CheckBox>CheckBox</CheckBox>
        <ListBox>
            <ListBoxItem>ListBoxItem1</ListBoxItem>
            <ListBoxItem>ListBoxItem2</ListBoxItem>
            <ListBoxItem>ListBoxItem3</ListBoxItem>
        </ListBox>
    </StackPanel>

技术分享技术分享

WarpPanel

  WarpPanel和StackPanel类似,不同的是WapPanel内的元素会自动换行,在同一行或者同一列中,如果窗口不能够显示所有元素,会将多出的部分自动换行,并且能够随着窗口的变化自动适应;排列顺序是从左到右或者从上到下,取决于Orientation的值

   <WrapPanel Orientation="Horizontal">
       <Button Width="100" Margin="10">Button1</Button>
       <Button Width="100" Margin="10">Button2</Button>
       <Button Width="100" Margin="10">Button3</Button>
       <Button Width="100" Margin="10">Button4</Button>
       <Button Width="100" Margin="10">Button5</Button>
       <Button Width="100" Margin="10">Button6</Button>
       <Button Width="100" Margin="10">Button7</Button>
       <Button Width="100" Margin="10">Button8</Button>
       <Button Width="100" Margin="10">Button9</Button>
       <Button Width="100" Margin="10">Button10</Button>
   </WrapPanel>

技术分享技术分享

 Canvas

  Canvas是一个允许显示指定元素位置的面板。主要是通过附加属性Canvas.Top、Canvas.Left、Canvas.Right、Canvas.Bottom指定位置

        <Canvas Background="Beige">
            <Label Canvas.Left="30" Canvas.Top="50" Content="Account:" ></Label>
            <TextBox Canvas.Left="90" Canvas.Top="50" Width="100"></TextBox>
            <Button Canvas.Left="100" Canvas.Top="80" Content="sign in"></Button>
        </Canvas>

技术分享

 DockPanel

  DockPanel可以指定排列子控件的区域,用过WinForm的童鞋应该还记得控件的Dock属性吧,DockPanel就和Dock是一样的效果;DockPanel也是通过附加属性DockPanel.Top、DockPanel.Left、DockPanel.Right、DockPanel.Bottom指定内部元素区域。

   <DockPanel>
       <Border Height="30" Background="AliceBlue" DockPanel.Dock="Top">
           <TextBlock>North</TextBlock>
       </Border>
       <Border Height="30" Background="Aqua" DockPanel.Dock="Bottom">
           <TextBlock>South</TextBlock>
       </Border>
       <Border Width="80" Background="LightSteelBlue" DockPanel.Dock="Left">
           <TextBlock>West</TextBlock>
       </Border>
       <Border Width="30" Background="Beige" DockPanel.Dock="Right">
           <TextBlock>East</TextBlock>
       </Border>
       <Border  Background="HotPink" >
           <TextBlock>Center</TextBlock>
       </Border>
   </DockPanel>

技术分享

Grid

  Grid网格布局,可以通过ColumnDefinition指定列,通过RowDefinition指定行;通过Grid.Row、Grid.Column指定元素所在的行和列(索引从0开始);通过Grid.ColumnSpan和Grid.RowSpan指定元素所占的列数和行数;“*”符号可以表示元素的宽或者高

  (Grid的总高度(或宽)- 已经指定高度(或宽))/N * M(指”*“号表示的高(或者宽))       

    <Grid ShowGridLines="True">
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="100"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="2*"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>
        <Button Background="DarkCyan"></Button>
        <Button Grid.Row="1" Grid.Column="1" Background="DarkGreen"></Button>
        <Button Grid.Row="2" Grid.ColumnSpan="2"  Background="DarkBlue"></Button>
        <Button Grid.Row="3"  Grid.RowSpan="2"  Background="Purple"></Button>
    </Grid>

技术分享

  Grid的强大之处是它还支持拆分器(GridSplitter),允许用户调整各个单元格的大小

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="50"></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Label Grid.Column="0" Background="Cyan" Content="1"></Label>
        <GridSplitter Grid.Column="0" Width="10" Background="Gray"></GridSplitter>
        <Label Grid.Column="1" Background="BlanchedAlmond" Content="2"></Label>
    </Grid>

 技术分享技术分享

WPF系列:基本布局

标签:

原文地址:http://www.cnblogs.com/liunlls/p/WPF_Layout.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!