布局控件

Grid：网格布局，RowDefinitions定义行，ColumnDefinitions定义列，ShowGridLines是否展示网格线。

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfApp1"
        Title="MainWindow">
    <Grid Name="MCGrid"
          Width="400"
          Background="LightSteelBlue"
          ShowGridLines="True">
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="45" />
            <RowDefinition Height="45" />
            <RowDefinition Height="45" />
        </Grid.RowDefinitions>
    </Grid>
</Window>
View Code

跟上面对比，把Width改为Auto、Height也改为Auto，同时HorizonalAlignment、VerticalAlignment改为Stretch。这样就能体现出Stretch的延展作用。

在Grid中，使用GridSpliter分隔行。

<Grid Name="DynamicGrid"
          Width="466"
          Background="LightSteelBlue"
          ShowGridLines="True"
          Canvas.Top="119"
          Canvas.Left="8"
          Height="200">
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="50*" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="50*" />
        </Grid.RowDefinitions>
        <GridSplitter ResizeDirection="Rows"
                      Grid.Column="0"
                      Grid.ColumnSpan="10"
                      Grid.Row="1"
                      Width="Auto"
                      Height="3"
                      HorizontalAlignment="Stretch"
                      VerticalAlignment="Center"
                      Margin="0"
                      Background="Green" />
    </Grid>
View Code

WrapPanel：水平方向或垂直方向分布子控件，设置Orientation，默认Horizonal。和StackPanel不同的是，当一行排满了，或一列排满了，会自动换行或者换列。

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfApp1"
        Title="MainWindow">
    <WrapPanel>
        <Ellipse Width="100"
                 Height="100"
                 Fill="Red" />
        <Ellipse Width="90"
                 Height="90"
                 Fill="Orange" />
        <Ellipse Width="80"
                 Height="80"
                 Fill="Yellow" />
        <Ellipse Width="70"
                 Height="70"
                 Fill="LightGreen" />
        <Ellipse Width="60"
                 Height="60"
                 Fill="Green" />
        <Ellipse Width="50"
                 Height="50"
                 Fill="LightBlue" />
        <Ellipse Width="40"
                 Height="40"
                 Fill="Blue" />
        <Ellipse Width="30"
                 Height="30"
                 Fill="Black" />
    </WrapPanel>
    <!--<StackPanel Orientation="Horizontal">
        <Ellipse Width="100"
                 Height="100"
                 Fill="Red" />
        <Ellipse Width="90"
                 Height="90"
                 Fill="Orange" />
        <Ellipse Width="80"
                 Height="80"
                 Fill="Yellow" />
        <Ellipse Width="70"
                 Height="70"
                 Fill="LightGreen" />
        <Ellipse Width="60"
                 Height="60"
                 Fill="Green" />
        <Ellipse Width="50"
                 Height="50"
                 Fill="LightBlue" />
        <Ellipse Width="40"
                 Height="40"
                 Fill="Blue" />
        <Ellipse Width="30"
                 Height="30"
                 Fill="Black" />
    </StackPanel>-->
</Window>
View Code

Border：只能有一个子集，如要在内容周围显示边框，必须放在父Border元素中。

属性BorderBrush设置边框颜色，BorderThickness设置边框宽度，CornerRadius设置圆角程度（90度就是直线，0度就是圆）。

 <Grid>
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Border Background="LightBlue"
                BorderBrush="Black"
                BorderThickness="20"
                CornerRadius="45"
                Padding="25" 
                Grid.Row="0">
        </Border>
        <Border Background="LightBlue"
                BorderBrush="Black"
                BorderThickness="20"
                CornerRadius="45"
                Padding="25"
                Grid.Row="1">
            <Button Content="999"></Button>
        </Border>
    </Grid>
View Code

BulletDecorator：将项目符号与另一个可是对象对齐。BulletDecorator有两个属性：bullet、child。

bullet放的是项目符号，bullet和child都只能有一个控件。如果 Child 对象是一个 TextBlock， Bullet 始终与第一行文本对齐。如果 Child 对象不是一个 TextBlock， Bullet 则与 Child 对象的中心对齐。（摘自https://lileltp.wordpress.com/2009/08/03/wpf%E4%B9%8B%E5%B8%83%E5%B1%80-bulletdecorator/）

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <BulletDecorator  Grid.Row="0"
                          Grid.Column="0"
                          Margin="0,5,0,0"
                          VerticalAlignment="Center"
                          Background="Yellow">
            <BulletDecorator.Bullet>
                <Label>备注：</Label>
            </BulletDecorator.Bullet>
            <!--TextBlock为Child元素-->
            <!--TextWrapping文本进行换行-->
            <TextBlock Width="100"
                       TextWrapping="Wrap"
                       HorizontalAlignment="Left"
                       Foreground="Purple">
     哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
            </TextBlock>
        </BulletDecorator>
        <BulletDecorator  Grid.Row="1"
                          Grid.Column="0"
                          Margin="0,5,0,0"
                          VerticalAlignment="Center"
                          Background="Yellow">
            <BulletDecorator.Bullet>
                <Label>备注：</Label>
            </BulletDecorator.Bullet>
            <TextBox Text="奇葩说"></TextBox>
        </BulletDecorator>
    </Grid>
View Code

Canvas:使用坐标绝对定位元素。子元素的大小需要设置。Canvas.Left指相对布局的左边偏离多少，Canvas.Left相对布局的上面偏离多少，同理Canvas.Bottem、Canvas.Right。

 <Canvas>
        <Canvas Height="100"
                Width="100"
                Top="0"
                Left="0"
                Background="Red"
                Cursor="Cross"
                >
            <TextBox Text="5555"></TextBox>
        </Canvas>
        <Canvas Height="100"
                Width="100"
                Top="100"                 
                Canvas.Left="100"
                Background="Green" />
        <Canvas Height="100"
                Width="100"
                Top="50"
                Left="50"
                Background="Blue" />
    </Canvas>
View Code

DockPanel:停靠面板，Dock="Left"停靠在左边,Dock="Right"停靠在右边。 LastChildFill为true，则最后一个元素填充剩下的空间。

 <DockPanel LastChildFill="False" HorizontalAlignment="Stretch" VerticalAlignment="Top">
        <Button DockPanel.Dock="Left"
                Content="ButtonLeft"></Button>
        <Button DockPanel.Dock="Top" 
                Content="ButtonTop"></Button>
        <Button DockPanel.Dock="Right"
                Content="ButtonRight"></Button>
        <Button DockPanel.Dock="Bottom"
                Content="ButtonBottom"></Button>
        <Button  Content="LastButton"></Button>
</DockPanel>
View Code

Expander：该控件显示具有可折叠内容，并可以显示标题。当ExpandDirection为Right或Left，则不应该设置Width。Header可以是图片、字符串等。

<!--IsExpanded表示初始状态是否叠起来-->
    <Expander Name="myExpander"
              Background="Tan"
              HorizontalAlignment="Right"
              Header="My Expander"
              ExpandDirection="Down"
              IsExpanded="False"
              Width="100">
        <TextBlock TextWrapping="Wrap">
    Lorem ipsum dolor sit amet, consectetur
    adipisicing elit, sed do eiusmod tempor incididunt ut
    labore et dolore magna aliqua
        </TextBlock>
    </Expander>
View Code

 

posted @ 2020-03-22 15:50  舒碧  阅读(385)  评论(0)  编辑  收藏  举报