WPF布局容器综合展示

2022-08-03 14:02:17

Border控件，以及几个重要要的属性：
Background:背景的 Brush 对象
BorderBrush:用来绘制边框
BorderThickness: Border 边框的宽度，设置边框每一边的线条的宽度
CornerRadius:Border 的每一个角圆的半径
Padding:内容与边框的之间的间隔

<Border BorderBrush="#FFF1621E" BorderThickness="20,10" Margin="" CornerRadius="">

            <Border.Background>

                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                    <GradientStop Color="#FFECFFDF" Offset="0.75"/>

                    <GradientStop Color="#FFC0FF96" Offset=""/>

                </LinearGradientBrush>

            </Border.Background>

            <TextBlock Margin="6,7,8,7" TextWrapping="Wrap" Text=" Border 只能包含一个子元素，用于生成边框"/>

        </Border>

Grid是一个重要的布局元素，也是最常用的一个布局元素

<Grid Grid.Column="" Margin="8,8,0,8">

            <Grid.Background>

                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                    <GradientStop Color="#FF95D241" Offset="0.806"/>

                    <GradientStop Color="#FFB9F764" Offset=""/>

                </LinearGradientBrush>

            </Grid.Background>

            <TextBlock TextWrapping="Wrap" Height="38.08" VerticalAlignment="Top"><Run Text="Grid 采用非常灵活的行和列（构成 网格 ）布局来排列子元素。"/></TextBlock>

            <Rectangle

                Fill="{DynamicResource StandardLinearGradientBrush}" Stroke="Black" Width="" HorizontalAlignment="Left" Margin="8,63.08,0,42"/>

            <Rectangle Fill="{DynamicResource StandardLinearGradientBrush}" Height="" Margin="31.192,0,0,18.92" Stroke="Black" VerticalAlignment="Bottom" HorizontalAlignment="Left" Width="" RadiusY="10.34" RadiusX="10.34"/>

            <Rectangle Fill="{DynamicResource {x:Static SystemColors.InactiveCaptionBrushKey}}" Margin="70.192,0,79.952,42" Stroke="Black" RadiusY="8.42" RadiusX="8.42" Height="" VerticalAlignment="Bottom"/>

        </Grid>

Canvas是一个画布容器,它本身不会调整内部元素的位置和大小.如果不指定内部元素的位置则默认显示在左上角

Canvas.Top 设置元素距Canvas顶部的距离，Canvas.Bottom 设置元素距Canvas底部的距离，Canvas.Left 设置元素距Canvas左边界的距离，Canvas.Right 设置元素距Canvas右边界的距离

<Canvas Background="{DynamicResource {x:Static SystemColors.ActiveCaptionBrushKey}}" Grid.Column="" Margin="" >

            <TextBlock TextWrapping="Wrap" Text="Canvas 按照 X 和 Y 绝对坐标来排列子元素。  可用于固定元素在运行期间所在的屏幕位置，这与空白“画布” 类似。" Height="" Width=""/>

            <Rectangle Fill="{DynamicResource StandardLinearGradientBrush}" Height="" Canvas.Left="" Stroke="Black" Canvas.Top="" Width="49.048"/>

            <Rectangle Fill="{DynamicResource StandardLinearGradientBrush}" Height="" Canvas.Left="34.048" Stroke="Black" Canvas.Top="" Width=""/>

            <Rectangle Fill="{DynamicResource StandardLinearGradientBrush}" Height="36.08" Canvas.Left="62.048" Stroke="Black" Canvas.Top="112.92" Width=""/>

        </Canvas>

stackpanel控件

<StackPanel Background="#FFCDE540" Margin="8,3.769,1.76,0" Grid.Row="" >

            <TextBlock TextWrapping="Wrap" Text="StackPanel 将子元素沿水平或垂直方向排列（或 堆叠 ）成一行。" Height=""/>

            <Rectangle Fill="{DynamicResource StandardLinearGradientBrush}" Height="" Stroke="Black" Width="49.048" HorizontalAlignment="Left" Margin="8,0,0,0"/>

            <Rectangle Fill="{DynamicResource StandardLinearGradientBrush}" Height="" Stroke="Black" Width="" HorizontalAlignment="Left" Margin="34.048,0,0,0"/>

            <Rectangle Fill="{DynamicResource StandardLinearGradientBrush}" Height="29.08" Stroke="Black" Margin="71.048,0,69,0"/>

        </StackPanel>

dockpanel控件展示

    <DockPanel Background="#FF63A5EB" Grid.Column="" Margin="8,3.769,0,0" Grid.Row="" >

            <TextBlock TextWrapping="Wrap" Text="DockPanel 将子元素沿水平或垂直方向排列（或 堆叠 ）成一行。" Width="135.048"/>

            <Rectangle Fill="{DynamicResource StandardLinearGradientBrush}" Height="" Stroke="Black" Width="49.048" Margin="0,0,0,10" VerticalAlignment="Bottom" DockPanel.Dock="Bottom"/>

            <Rectangle Fill="{DynamicResource StandardLinearGradientBrush}" Height="" Stroke="Black" Width="" Margin="0,0,0,10" VerticalAlignment="Bottom" DockPanel.Dock="Bottom"/>

            <Rectangle Fill="{DynamicResource StandardLinearGradientBrush}" Height="42.08" Stroke="Black" Width="" Margin="0,0,0,10" VerticalAlignment="Bottom" DockPanel.Dock="Bottom"/>

        </DockPanel>

ScrollViewer控件

    <ScrollViewer Background="#FF99D1AC" Grid.Column="" Margin="8,0,8,3.769" Grid.Row="" >

            <Grid>

                <TextBlock TextWrapping="Wrap" Text="ScrollViewer  一个允许您滚动其中所含的子元素的元素。该元素仅包含单个子元素。" Height="" VerticalAlignment="Top"/>

                <Rectangle Fill="{DynamicResource StandardLinearGradientBrush}" Height="" Stroke="Black" Width="49.048" HorizontalAlignment="Left" Margin="8,0,0,40.931" VerticalAlignment="Bottom"/>

                <Rectangle Fill="{DynamicResource StandardLinearGradientBrush}" Height="" Stroke="Black" Width="" HorizontalAlignment="Left" Margin="34.048,0,0,19.931" VerticalAlignment="Bottom"/>

                <Rectangle Fill="{DynamicResource StandardLinearGradientBrush}" Height="28.931" Stroke="Black" Margin="51.048,0,71.096,8" VerticalAlignment="Bottom"/>

            </Grid>

        </ScrollViewer>

效果展示：

码农公寓

相关文章