WPF布局容器综合展示

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

更多信息：http://msdn.microsoft.com/zh-cn/library/vstudio/system.windows.controls.border.aspx

<Border BorderBrush="#FFF1621E" BorderThickness="20,10" Margin="8" CornerRadius="20">
            <Border.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FFECFFDF" Offset="0.75"/>
                    <GradientStop Color="#FFC0FF96" Offset="1"/>
                </LinearGradientBrush>
            </Border.Background>
            <TextBlock Margin="6,7,8,7" TextWrapping="Wrap" Text=" Border 只能包含一个子元素，用于生成边框"/>
        </Border>

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

<Grid Grid.Column="1" 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="1"/>
                </LinearGradientBrush>
            </Grid.Background>
            <TextBlock TextWrapping="Wrap" Height="38.08" VerticalAlignment="Top"><Run Text="Grid 采用非常灵活的行和列（构成 网格 ）布局来排列子元素。"/></TextBlock>
            <Rectangle
                Fill="{DynamicResource StandardLinearGradientBrush}" Stroke="Black" Width="47" HorizontalAlignment="Left" Margin="8,63.08,0,42"/>
            <Rectangle Fill="{DynamicResource StandardLinearGradientBrush}" Height="36" Margin="31.192,0,0,18.92" Stroke="Black" VerticalAlignment="Bottom" HorizontalAlignment="Left" Width="59" 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="25" VerticalAlignment="Bottom"/>
        </Grid>

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

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

更多信息：http://msdn.microsoft.com/zh-cn/library/vstudio/system.windows.controls.grid.aspx

<Canvas Background="{DynamicResource {x:Static SystemColors.ActiveCaptionBrushKey}}" Grid.Column="2" Margin="8" >
            <TextBlock TextWrapping="Wrap" Text="Canvas 按照 X 和 Y 绝对坐标来排列子元素。  可用于固定元素在运行期间所在的屏幕位置，这与空白“画布” 类似。" Height="62" Width="190"/>
            <Rectangle Fill="{DynamicResource StandardLinearGradientBrush}" Height="27" Canvas.Left="8" Stroke="Black" Canvas.Top="81" Width="49.048"/>
            <Rectangle Fill="{DynamicResource StandardLinearGradientBrush}" Height="32" Canvas.Left="34.048" Stroke="Black" Canvas.Top="97" Width="49"/>
            <Rectangle Fill="{DynamicResource StandardLinearGradientBrush}" Height="36.08" Canvas.Left="62.048" Stroke="Black" Canvas.Top="112.92" Width="48"/>
        </Canvas>

 

stackpanel控件

<StackPanel Background="#FFCDE540" Margin="8,3.769,1.76,0" Grid.Row="1" >
            <TextBlock TextWrapping="Wrap" Text="StackPanel 将子元素沿水平或垂直方向排列（或 堆叠 ）成一行。" Height="46"/>
            <Rectangle Fill="{DynamicResource StandardLinearGradientBrush}" Height="27" Stroke="Black" Width="49.048" HorizontalAlignment="Left" Margin="8,0,0,0"/>
            <Rectangle Fill="{DynamicResource StandardLinearGradientBrush}" Height="32" Stroke="Black" Width="49" HorizontalAlignment="Left" Margin="34.048,0,0,0"/>
            <Rectangle Fill="{DynamicResource StandardLinearGradientBrush}" Height="29.08" Stroke="Black" Margin="71.048,0,69,0"/>
        </StackPanel>

更多的信息可以以下了解：

http://msdn.microsoft.com/zh-cn/library/system.windows.controls.stackpanel.aspx

dockpanel控件展示

    <DockPanel Background="#FF63A5EB" Grid.Column="1" Margin="8,3.769,0,0" Grid.Row="1" >
            <TextBlock TextWrapping="Wrap" Text="DockPanel 将子元素沿水平或垂直方向排列（或 堆叠 ）成一行。" Width="135.048"/>
            <Rectangle Fill="{DynamicResource StandardLinearGradientBrush}" Height="27" Stroke="Black" Width="49.048" Margin="0,0,0,10" VerticalAlignment="Bottom" DockPanel.Dock="Bottom"/>
            <Rectangle Fill="{DynamicResource StandardLinearGradientBrush}" Height="32" Stroke="Black" Width="49" Margin="0,0,0,10" VerticalAlignment="Bottom" DockPanel.Dock="Bottom"/>
            <Rectangle Fill="{DynamicResource StandardLinearGradientBrush}" Height="42.08" Stroke="Black" Width="48" Margin="0,0,0,10" VerticalAlignment="Bottom" DockPanel.Dock="Bottom"/>
        </DockPanel>

 

更多的信息可以以下了解：

http://msdn.microsoft.com/zh-cn/library/vstudio/system.windows.controls.dockpanel.aspx

ScrollViewer控件

    <ScrollViewer Background="#FF99D1AC" Grid.Column="2" Margin="8,0,8,3.769" Grid.Row="1" >
            <Grid>
                <TextBlock TextWrapping="Wrap" Text="ScrollViewer  一个允许您滚动其中所含的子元素的元素。该元素仅包含单个子元素。" Height="63" VerticalAlignment="Top"/>
                <Rectangle Fill="{DynamicResource StandardLinearGradientBrush}" Height="27" Stroke="Black" Width="49.048" HorizontalAlignment="Left" Margin="8,0,0,40.931" VerticalAlignment="Bottom"/>
                <Rectangle Fill="{DynamicResource StandardLinearGradientBrush}" Height="32" Stroke="Black" Width="49" 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>

效果展示：

展示当前的集中控件，更多详细信息http://msdn.microsoft.com/zh-cn/library/vstudio/system.windows.controls.aspx
当前demo下载：https://files.cnblogs.com/BABLOVE/WPF%E5%B8%83%E5%B1%80%E5%AE%B9%E5%99%A8%E7%BB%BC%E5%90%88%E6%BC%94%E7%A4%BA.rar