WPF代码模板-布局部分

Grid

两行和三列

<Grid ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
...
</Grid>

使用按钮填充Grid 面板的部分单元格

<Grid ShowGridLines="True">
...
<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>

调整行和列

<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="2*"></RowDefinition>

布局容器中的所有内容对齐到最近的像素边界

<Grid UseLayoutRounding="True">

跨越行和列

<Button Grid.Row="0" Grid.Column="0" Grid.RowSpan="2">Span Button</Button>
<Button Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" Grid.ColumnSpan="2"> Span Button</Button>

Grid 面板将窗口分割成三列，展开文本框使其占据所有的三列，并使用最后两列对齐OK 按钮和Cancel按钮

<Grid ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBox Margin="10" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3">
This is a test.</TextBox>
<Button Margin="10,10,2,10" Padding="3"
Grid.Row="1" Grid.Column="1">OK</Button>
<Button Margin="2,10,10,10" Padding="3"
Grid.Row="1" Grid.Column="2">Cancel</Button>
</Grid>

使用顶级的Grid 容器将窗口分成两行

<Grid ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<TextBox Margin="10" Grid.Row="0">This is a test.</TextBox>
<StackPanel Grid.Row="1" HorizontalAlignment="Right" Orientation="Horizontal">
<Button Margin="10,10,2,10" Padding="3">OK</Button>
<Button Margin="2,10,10,10" Padding="3">Cancel</Button>
</StackPanel>
</Grid>

使用Grid将画面分割成5行5列，并在1行1列、3行2列、3行3列及5行1列四个位置上放置4个背景色不同的TextBox控件，且5行1列的TextBox控件横跨4列

<Window x:Class="WpfPanelExp.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">
  <Grid IsManipulationEnabled="True">
    <Grid.RowDefinitions>
      <RowDefinition Height="3*"></RowDefinition>
      <RowDefinition Height="2*"></RowDefinition>
      <RowDefinition Height="2*"></RowDefinition>
      <RowDefinition Height="2*"></RowDefinition>
      <RowDefinition Height="2*"></RowDefinition>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="110"></ColumnDefinition>
      <ColumnDefinition Width="100"></ColumnDefinition>
      <ColumnDefinition Width="100"></ColumnDefinition>
      <ColumnDefinition Width="100"></ColumnDefinition>
      <ColumnDefinition Width="Auto"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <TextBox Text="1行1列 Grid.Row=0 Grid.Column=0（可以省略，省略时默认为1行1列）" Grid.Row="0" Grid.Column="0" Background="Violet" TextWrapping="Wrap" />
    <TextBox Text="3行2列 Grid.Row=2 Grid.Column=1" Grid.Row="2" Grid.Column="1" Background="Beige" TextWrapping="Wrap" />
    <TextBox Text="3行3列 Grid.Row=2 Grid.Column=2" Grid.Row="2" Grid.Column="2" Background="AliceBlue" TextWrapping="Wrap" />
    <TextBox Text="5行1列 Grid.Row=4 Grid.Column=0 跨4列 Grid.ColumnSpan=4" Grid.Row="4" Grid.Column="0" Background="WhiteSmoke" Grid.ColumnSpan="4" />
  </Grid>
</Window>

分割窗口

<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 面板和在右边嵌套的Grid 面板

<!-- This is the Grid for the entire window. -->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<!-- This is the nested Grid on the left.
It isn't subdivided further with a splitter. -->
<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>
<!-- This is the vertical splitter that sits between the two nested
(left and right) grids. -->
<GridSplitter Grid.Column="1"
Width="3" HorizontalAlignment="Center" VerticalAlignment="Stretch"
ShowsPreview="False"></GridSplitter>
<!-- This is the nested Grid on the right. -->
<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>
<!-- This is the horizontal splitter that subdivides it into
a top and bottom region.. -->
<GridSplitter Grid.Row="1"
Height="3" VerticalAlignment="Center" HorizontalAlignment="Stretch"
ShowsPreview="False"></GridSplitter>
</Grid>
</Grid>

共享尺寸组

<Grid Margin="3" Background="LightYellow" ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="TextLabel"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label Margin="5">A very long bit of text</Label>
<Label Grid.Column="1" Margin="5">More text</Label>
<TextBox Grid.Column="2" Margin="5">A text box</TextBox>
</Grid>
...
<Grid Margin="3" Background="LightYellow" ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="TextLabel"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label Margin="5">Short</Label>
<TextBox Grid.Column="1" Margin="5">A text box</TextBox>
</Grid>

StackPanel

在一列中放置4个Button

<Window x:Class="Layout.SimpleStack"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Layout" Height="223" Width="354"
>
<StackPanel>
<Label>A Button Stack</Label>
<Button>Button 1</Button>
<Button>Button 2</Button>
<Button>Button 3</Button>
<Button>Button 4</Button>
</StackPanel>
</Window>

横向排列元素

<StackPanel Orientation="Horizontal">

使用HorizontalAlignment 属性

<StackPanel>

<Label HorizontalAlignment="Center">A Button Stack</Label>

<Button HorizontalAlignment="Left">Button 1</Button>

<Button HorizontalAlignment="Right">Button 2</Button>

<Button>Button 3</Button>

<Button>Button 4</Button>

</StackPanel>

使用Margin属性

<Button Margin="5">Button 3</Button>
<Button Margin="5,10,5,10">Button 3</Button>
cmd.Margin = new Thickness(5);
......
<StackPanel Margin="3">
<Label Margin="3" HorizontalAlignment="Center">
A Button Stack</Label>
<Button Margin="3" HorizontalAlignment="Left">Button 1</Button>
<Button Margin="3" HorizontalAlignment="Right">Button 2</Button>
<Button Margin="3">Button 3</Button>
<Button Margin="3">Button 4</Button>
</StackPanel>

最小尺寸、最大尺寸以及显式地设置尺寸

<StackPanel Margin="3">
<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>
</StackPanel>

使用StackPanel完成画面控件的布局操作，在画面中完成古诗“相思”的显示，其中标题与作者水平排列显示，而古诗内容横向排列显示

<Window x:Class="WpfPanelExp.StackPanelExp"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="StackPanelExp" Height="300" Width="300">
  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition Height="4*"></RowDefinition>
      <RowDefinition Height="6*"></RowDefinition>
    </Grid.RowDefinitions>
    <StackPanel Grid.Row="0" Orientation="Horizontal" HorizontalAlignment="Center">
      <TextBlock Text="相思" FontSize="24" FontFamily="MS UI Gothic" Margin="10,5,0,10" Background="Fuchsia" />
      <TextBlock Text="	[作者]王维" FontSize="24" FontFamily="MS UI Gothic" Margin="10,5,0,10" Background="Aqua" />
    </StackPanel>
    <StackPanel Grid.Row="1" Orientation="Vertical" HorizontalAlignment="Center">
      <TextBlock Text="红豆生南国" FontSize="24" FontFamily="MS UI Gothic" Margin="10,5,0,10" />
      <TextBlock Text="春来发几枝" FontSize="24" FontFamily="MS UI Gothic" Margin="10,5,0,10" />
      <TextBlock Text="愿君多采撷" FontSize="24" FontFamily="MS UI Gothic" Margin="10,5,0,10" />
      <TextBlock Text="此物最相思" FontSize="24" FontFamily="MS UI Gothic" Margin="10,5,0,10" />
    </StackPanel>
  </Grid>
</Window>

DockPanel

在DockPanel 面板的每条边上都停靠一个按钮

<DockPanel LastChildFill="True">
<Button DockPanel.Dock="Top">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>

Margin 属性、HorizontalAlignment 属性以及VerticalAlignment 属性

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

使用 DockPanel 控件将画面分割成顶部、下左、下右 3 部分，其中顶部显示古诗标题和作者，下部左半部分显示古诗内容，右半部分显示古诗解析

<Window x:Class="WpfPanelExp.DockPanelExp"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="DockPanelExp" Height="300" Width="300">
  <Grid>
    <DockPanel>
      <TextBox  Text="相思  [作者]王维" DockPanel.Dock="Top" Height="25" Background="Aqua" />
      <TextBox Text="红豆生南国  春来发几枝  愿君多采撷  此物最相思" TextWrapping="Wrap" DockPanel.Dock="Left" Width="80" Background="SeaShell" />
      <TextBox Text="《相思》是唐代诗人王维的作品，是一首借咏物而寄相思的诗作。此诗写相思之情，却全篇不离红豆，正用其相思子之名以关合相思之情。首句写红豆产地；次句以'发几枝'一问，语极朴实，而又极富形象性，设问自然，则暗逗情怀；三句寄意友人'多采撷'，言在此而意在彼；末句点明其相思属性，且用一'最'字推达极致，则'多采撷'的理由自见，而自身所寄之意亦深含其中。全诗极为明快，却又委婉含蓄，语浅而情深，相传当时即为人谱曲传唱，流行江南。" TextWrapping="Wrap" Background="LawnGreen" />
    </DockPanel>
  </Grid>
</Window>

Canvas

包含4 个按钮的简单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>

使用Canvas完成布局，显示古诗“相思”

<Window x:Class="WpfPanelExp.CanvasExp"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="CanvasExp" Height="300" Width="300">
  <Grid>
    <Canvas>
      <TextBlock Text="相思" FontSize="24" FontFamily="MS UI Gothic" Margin="0,5,0,5" Background="Fuchsia" Canvas.Left="100"  Canvas.Top="10"/>
      <TextBlock Text="[作者]王维" FontSize="24" FontFamily="MS UI Gothic" Margin="0,5,0,5" Background="Aqua" Canvas.Left="90"  Canvas.Top="45" />
      <TextBlock Text="红豆生南国" FontSize="24" FontFamily="MS UI Gothic" Margin="0,5,0,5" Canvas.Left="85"  Canvas.Top="75"/>
      <TextBlock Text="春来发几枝" FontSize="24" FontFamily="MS UI Gothic" Margin="0,5,0,5" Canvas.Left="85"  Canvas.Top="105"/>
      <TextBlock Text="愿君多采撷" FontSize="24" FontFamily="MS UI Gothic" Margin="0,5,0,5" Canvas.Left="85"  Canvas.Top="135"/>
      <TextBlock Text="此物最相思" FontSize="24" FontFamily="MS UI Gothic" Margin="0,5,0,5" Canvas.Left="85"  Canvas.Top="165"/>
    </Canvas>
  </Grid>
</Window>

WrapPanel

基本

<WrapPanel>
        <Button>Button1</Button>
        <Button>Button2</Button>
        <Button>Button3</Button>
        <Button>Button4</Button>
        <Button>Button5</Button>
        <Button>Button6</Button>
</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>

使用WrapPanel对画面中的10个数字按钮进行布局，看起来像手机的按键

<Window x:Class="WpfPanelExp.WrapPanelExp"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="WrapPanelExp" Height="300" Width="300">
  <Grid>
    <WrapPanel Orientation="Vertical">
      <Button Width="60" Height="60" Content="1"/>
      <Button Width="60" Height="60" Content="2"/>
      <Button Width="60" Height="60" Content="3"/>
      <Button Width="60" Height="60" Content="4"/>
      <Button Width="60" Height="60" Content="5"/>
      <Button Width="60" Height="60" Content="6"/>
      <Button Width="60" Height="60" Content="7"/>
      <Button Width="60" Height="60" Content="8"/>
      <Button Width="60" Height="60" Content="9"/>
      <Button Width="60" Height="60" Content="0"/>
    </WrapPanel>
  </Grid>
</Window>

Border

<Border Margin="5" Padding="5" Background="LightYellow"
BorderBrush="SteelBlue" BorderThickness="3,5,3,5" CornerRadius="3"
VerticalAlignment="Top">
<StackPanel>
<Button Margin="3">One</Button>
<Button Margin="3">Two</Button>
<Button Margin="3">Three</Button>
</StackPanel>
</Border>

嵌套布局容器

创建一个标准对话框，在其右下角具有OK 按钮和Cancel 按钮，并且在窗口的剩余部分是一块较大的内容区域

<DockPanel LastChildFill="True">
<StackPanel DockPanel.Dock="Bottom" HorizontalAlignment="Right"
Orientation="Horizontal">
<Button Margin="10,10,2,10" Padding="3">OK</Button>
<Button Margin="2,10,10,10" Padding="3">Cancel</Button>
</StackPanel>
<TextBox DockPanel.Dock="Top" Margin="10">This is a test.</TextBox>
</DockPanel>

UniformGrid

使用4 个按钮填充UniformGrid 面板

<UniformGrid Rows="2" Columns="2">
<Button>Top Left</Button>
<Button>Top Right</Button>
<Button>Bottom Left</Button>
<Button>Bottom Right</Button>
</UniformGrid>

UniformGrid 面板很少使用。Grid 面板是用于创建简单乃至复杂窗口布局的通用工具。UniformGrid 面板是一种更特殊的布局容器，主要用于在刻板的网格中快速地布局元素(例如，为特定游戏构建播放面板)。许多WPF 开发人员可能永远不会使用UniformGrid 面板。

视图框Viewbox

基本

<Viewbox>
    <Canvas Width="18" Height="18" Background="YellowGreen">
    </Canvas>
</Viewbox>

　　视图框可以自动缩放其内容，以填充可用的空间。它只能有一个子元素。比如，Viewbox中放置一个Canvas，默认将按比例缩放Canvas，填充区域，而此时Canvas指定的长宽已不起作用，仅保留比例。

　　如果想禁用Viewbox的自动缩放功能，将其拉伸属性Stretch设置为None即可；如果想缩放并且不保留子元素比例，将Viewbox的Stretch属性（默认为Uniform）改为Fill（完全填充）；如果想保留比例并完全填充空白区域，Stretch设置为UniformToFill。

滚动视图控件ScrollViewer

基本

<ScrollViewer HorizontalScrollBarVisibility="Auto">
        <Ellipse Fill="YellowGreen" Width="800" Height="600"></Ellipse>
</ScrollViewer>

　　ScollViewer，滚动视图控件可以将过多的内容放入一个可滚动的区域来显示。比如一个很大的椭圆，通过滚动就可以显示全部内容。

但是ScollViewer只能放一个元素，这个元素是任意的。倘若想布局多个元素，可以将多个元素放到一个面板中，再嵌入到ScollViewer中。

　　滚动条的可见性，默认垂直滚动条是可见的（Visiable），而水平滚动条是不可用的（Disable），此处改为Auto（需要时显示）或者Visiable（可见，不论需不需要都显示）。

公共布局属性

　　Width、Height与MinWidth、MaxWidth、MinHeight、MaxHeight

　　Width、Height表示元素宽度和高度，设置该属性可以是元素具有精确的宽高。MinWidth、MaxWidth、MinHeight、MaxHeight 可以指定元素大小的界限，分别表示元素的最小宽度、最大宽度、最小高度和最大高度。

　　当你指定一个元素的宽度和高度时，WPF会尽可能遵循你的设置。比如元素宽度>屏幕宽度，元素将被剪裁以适应可用空间。

　　Margin与Padding

　　Margin（外边距），指的是元素周围的距离，决定了元素周围留下的空白大小；Padding（内边距），指的是元素边界与其内容之间的距离。做过网页设计、用过CSS的同学对margin和padding属性肯定不陌生，但也有所区别。WPF中的Margin值可以为一个数字、一对数字和四个数字。

　　一个数字代表四周距离相同，为指定值。一对数字时，第一个数字表示左侧和右侧距离相同，为指定值；第二个数字表示顶部和底部距离相同，为指定值。（与CSS中顺序不同）。四个数字，分别表示左侧、顶部、右侧、底部距离，该顺序与CSS不同。

　　CSS中margin和padding属性顺序是：两个数字对应左右、上下；四个数字对应上、右、下、左；

　　HorizontalAlignment与VerticalAlignment

　　在父元素中，当剩余空间很大时（超过子元素需要），这两个属性可以控制字元素的位置。比如，在垂直排列的StackPanel中，面板宽度默认和最宽的元素宽度相同，其他控件的宽度默认将会被拉伸。这时，可以使用HorizontalAlignment属性来控制，默认值为Stretch（拉伸），还有Left、Center、Right。VerticalAlignment则有Stretch、Top、Center和Bottom四个枚举值。

　Visibility

　　可见度，决定元素是否可见。枚举值有两个：Collapsed和Hidden。Collapsed元素不可见，并且首选尺寸变为0，不再影响布局。Hidden元素虽然不可见，但尺寸不变，布局系统仍按可见的处理。

　　FlowDirection

　　文本方向，默认情况下基于系统的本地设置。比如英语、中文都是从左往右排列，LeftToRight；希伯来文从右往左排列，RightToLeft。如果为面板指定该属性，则面板的所有子元素都按此方向排列。

　　Panel.ZIndex

　　Panel定义的一个附加属性ZIndex，用于多个元素重叠时，指定显示的上下层关系。ZIndex值大的将出现在值小的元素上方。元素显示顺序将不受文档定义顺序控制。如果不使用ZIndex，重叠元素将根据文档定义的顺序显示，后定义的元素出现在上方。

LayoutTransform 与 RenderTransform

　　在缩放或者旋转的变化中，LayoutTransform 引起的变化将被纳入布局的计算范围。也就是说，该变化会影响布局的改变。RenderTransform 引起的变化将被忽略。该变化不会影响布局。

<StackPanel>
        <Button>Button1</Button>
        <Button HorizontalAlignment="Left">Button2</Button>
        <Button HorizontalAlignment="Center">Button3</Button>
</StackPanel>

<StackPanel Orientation="Horizontal">
        <Button>Button1</Button>
        <Button VerticalAlignment="Top">Button2</Button>
        <Button VerticalAlignment="Center">Button3</Button>
</StackPanel>

<WrapPanel Orientation="Horizontal" FlowDirection="RightToLeft">
        <Button FlowDirection="RightToLeft">Button1</Button>
        <Button>Button2</Button>
        <Button>Button3</Button>
        <Button>Button4</Button>
        <Button FlowDirection="RightToLeft">This is Button5</Button>
</WrapPanel>　　

<Canvas>
        <Button Canvas.Left="10" Canvas.Top="10">Button1</Button>
        <Button Canvas.Left="25" Canvas.Top="25">Button2</Button>
        <Button Canvas.Left="40" Canvas.Top="40">Button3</Button>
</Canvas>

<Canvas>
        <Button Canvas.Left="10" Canvas.Top="10" Panel.ZIndex="1">Button1</Button>
        <Button Canvas.Left="25" Canvas.Top="25" Panel.ZIndex="3">Button2</Button>
        <Button Canvas.Left="40" Canvas.Top="40" Panel.ZIndex="2">Button3</Button>
</Canvas>

    <Canvas>
        <Button Canvas.Left="50" Canvas.Top="40">
            <TextBlock>
                <TextBlock.LayoutTransform>
                    <ScaleTransform ScaleX="1" ScaleY="1"></ScaleTransform>
                </TextBlock.LayoutTransform>
                This is a Button!
            </TextBlock>
        </Button>
        <Button Canvas.Left="50" Canvas.Top="120">
            <TextBlock>
                <TextBlock.RenderTransform>
                    <ScaleTransform ScaleX="1" ScaleY="1"></ScaleTransform>
                </TextBlock.RenderTransform>
                This is a Button!
            </TextBlock>
        </Button>
    </Canvas>

简单计算器

<!--ContentPanel - 在此处放置其他内容-->
        <Grid x:Name="ContentPanel" Margin="8,9,4,3" Grid.Row="1">
            <Grid.ColumnDefinitions >
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="25*"/>
                <RowDefinition Height="84*"/>
                <RowDefinition Height="59*"/>
                <RowDefinition Height="56*"/>
                <RowDefinition Height="66*"/>
                <RowDefinition Height="52*"/>
            </Grid.RowDefinitions>
            <Button Content="7" Grid.Row="2" Grid.Column="0" Click="DigitBtn_Click"/>
            <Button Content="8" Grid.Row="2" Grid.Column="1" Click="DigitBtn_Click"/>
            <Button Content="9" Grid.Row="2" Grid.Column="2" Click="DigitBtn_Click"/>
            <Button Content="4" Grid.Row="3" Grid.Column="0" Click="DigitBtn_Click"/>
            <Button Content="5" Grid.Row="3" Grid.Column="1" Click="DigitBtn_Click"/>
            <Button Content="6" Grid.Row="3" Grid.Column="2" Click="DigitBtn_Click"/>
            <Button Content="3" Grid.Row="4" Grid.Column="2" Click="DigitBtn_Click"/>
            <Button Content="2" Grid.Row="4" Grid.Column="1" Click="DigitBtn_Click"/>
            <Button Content="1" Grid.Row="4" Grid.Column="0" Click="DigitBtn_Click"/>
            <Button Content="0" Grid.Row="5" Grid.Column="0" Click="DigitBtn_Click"/>
            <Button Content="+" Grid.Row="2" Grid.Column="3" Click="Operation_Click"/>
            <Button Content="-"  Grid.Row="3" Grid.Column="3" Click="Operation_Click"/>
            <Button Content="*" Grid.Row="4" Grid.Column="3"  Click="Operation_Click"/>
            <Button Content="/" Grid.Row="5" Grid.Column="3"  Click="Operation_Click"/>
            <Button Content="DEL" Grid.Row="5" Grid.Column="2" Click="Del_Click"/>
            <Button Content="=" Grid.Row="5" Grid.Column="1"  Click="Result_Click"/>
            <TextBlock Name="OperationResult" FontSize="100" Grid.Row="1" Margin="6,17,10,17" Grid.ColumnSpan="4" HorizontalAlignment="Right"></TextBlock>
            <TextBlock Name="InputInformation" Grid.Row="0" Margin="6,12,10,11" Grid.ColumnSpan="4" HorizontalAlignment="Right"></TextBlock>
        </Grid>
        <!--取消注释，以显示对齐网格，从而帮助确保
            控件在公用边界上对齐。图像在系统栏中显示时的
            上边距为 -32px。如果隐藏了系统栏，则将此值设为 0
            (或完全删除边距)。
            在发送之前删除此 XAML 和图像本身。-->
        <!--<Image Source="/Assets/AlignmentGrid.png" VerticalAlignment="Top" Height="800" Width="480" Margin="0,-32,0,0" Grid.Row="0" Grid.RowSpan="2" IsHitTestVisible="False" />-->
    </Grid>

计算器2

<Window x:Class="OACt_WPFClient.布局的练习"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="计算器" Icon="IMG/App.ico"  Height="350" Width="270">
    <Grid>
        <Grid>
            <Menu   HorizontalAlignment="Stretch" VerticalAlignment="Top" FontSize="13">
                <MenuItem Header="查看(V)"></MenuItem>
                <MenuItem Header="编辑(E)"></MenuItem>
                <MenuItem Header="帮助(H)"></MenuItem>
            </Menu>
            <TextBox VerticalAlignment="Top" HorizontalAlignment="Stretch"  Margin="10,30,10,10" Height="45" BorderBrush="GreenYellow"  ></TextBox>
            <Grid Margin="10,80,10,10" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition></ColumnDefinition>
                    <ColumnDefinition></ColumnDefinition>
                    <ColumnDefinition></ColumnDefinition>
                    <ColumnDefinition></ColumnDefinition>
                    <ColumnDefinition></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition></RowDefinition>
                    <RowDefinition></RowDefinition>
                    <RowDefinition></RowDefinition>
                    <RowDefinition></RowDefinition>
                    <RowDefinition></RowDefinition>
                    <RowDefinition></RowDefinition>
                </Grid.RowDefinitions>  

                <Button Content="MC" Margin="4" Grid.Column="0" Grid.Row="0"></Button>
                <Button Content="MR" Margin="4" Grid.Column="1" Grid.Row="0"></Button>
                <Button Content="MS" Margin="4" Grid.Column="2" Grid.Row="0"></Button>
                <Button Content="M+" Margin="4" Grid.Column="3" Grid.Row="0"></Button>
                <Button Content="M-" Margin="4" Grid.Column="4" Grid.Row="0"></Button>
                <Button Content="-" Margin="4" Grid.Column="0" Grid.Row="1"></Button>
                <Button Content="CE" Margin="4" Grid.Column="1" Grid.Row="1"></Button>
                <Button Content="C" Margin="4" Grid.Column="2" Grid.Row="1"></Button>
                <Grid Margin="4" Grid.Column="3" Grid.Row="1">
                <Button >
                        <Button.Content>
                            <StackPanel>
                                <Label Content="-"   Margin="2,2,0,0"  Height="20" ></Label>
                                <Label Content="+" Margin="0,-28,0,0"  Height="20"></Label>  

                                </StackPanel>
                        </Button.Content>
                    </Button>  

                </Grid>
                <Button Content="V" Margin="4" Grid.Column="4" Grid.Row="1"></Button>
                <Button Content="7" Margin="4" Grid.Column="0" Grid.Row="2"></Button>
                <Button Content="8" Margin="4" Grid.Column="1" Grid.Row="2"></Button>
                <Button Content="9" Margin="4" Grid.Column="2" Grid.Row="2"></Button>
                <Button Content="/" Margin="4" Grid.Column="3" Grid.Row="2"></Button>
                <Button Content="%" Margin="4" Grid.Column="4" Grid.Row="2"></Button>
                  <Button Content="4" Margin="4" Grid.Column="0" Grid.Row="3"></Button>
                <Button Content="5" Margin="4" Grid.Column="1" Grid.Row="3"></Button>
                <Button Content="6" Margin="4" Grid.Column="2" Grid.Row="3"></Button>
                <Button Content="*" Margin="4" Grid.Column="3" Grid.Row="3"></Button>
                <Button Content="1/X" Margin="4" Grid.Column="4" Grid.Row="3"></Button>
                  <Button Content="1" Margin="4" Grid.Column="0" Grid.Row="4"></Button>
                <Button Content="2" Margin="4" Grid.Column="1" Grid.Row="4"></Button>
                <Button Content="3" Margin="4" Grid.Column="2" Grid.Row="4"></Button>
                <Button Content="-" Margin="4" Grid.Column="3" Grid.Row="4"></Button>
                <Button Content="=" Margin="4" Grid.Column="4" Grid.Row="4" Grid.RowSpan="2"></Button>
                <Button Content="0" Margin="4" Grid.Column="0" Grid.Row="5" Grid.ColumnSpan="2"></Button>
                <Button Content="." Margin="4" Grid.Column="2" Grid.Row="5"></Button>
                <Button Content="+" Margin="4" Grid.Column="3" Grid.Row="5"></Button>
            </Grid>
        </Grid>
    </Grid>
</Window>

地址簿应用程序的基本框架

主框架

<Window x:Class="AddressBook.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="AddressBook"
    Loaded="WindowLoaded"
    SizeToContent="WidthAndHeight"
    MinWidth="640"
    MinHeight="480">

  <Grid Background="White" Name="DocumentRoot">
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="200"/>
      <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto"/>
      <!-- Menu -->
      <RowDefinition Height="Auto"/>
      <!-- Tool Bar -->
      <RowDefinition Height="*"/>
      <!-- Content Area -->
      <RowDefinition Height="Auto"/>
      <!-- Status Bar -->
    </Grid.RowDefinitions>
  </Grid>
</Window>

菜单栏，顶层MenuItems有两个：File和Edit，每个菜单项都会包含若干子MenuItems

<!—Menu Bar-->
<DockPanel
  Name="DockPanel_Menu"
  Grid.Column="0"
  Grid.ColumnSpan="2"
  Grid.Row="0">
  <Menu Background="White">
    <MenuItem Header="File">
      <MenuItem Header="New Contact" Click="LaunchNewContactWizard"/>
      <MenuItem Header="New Group" Click="NotImplementedMsg"/>
      <Separator />
      <MenuItem Header="Properties" Click="NotImplementedMsg"/>
      <MenuItem Header="Delete" Click="NotImplementedMsg"/>
      <MenuItem Header="Import">
        <MenuItem Header="Address book (WAB)..."
                  Click="NotImplementedMsg"/>
        <MenuItem Header="Business card vCard)..."
                  Click="NotImplementedMsg"/>
      </MenuItem>
      <Separator />
      <MenuItem Header="Exit" InputGestureText="Alt-F4"
        Click="ExitApplication">
        <MenuItem.ToolTip>
          <ToolTip>
            Click here to exit
          </ToolTip>
        </MenuItem.ToolTip>
      </MenuItem>
    </MenuItem>
  </Menu>
  <Menu Background="White">
    <MenuItem Header="Edit">
      <MenuItem Command="ApplicationCommands.Copy"/>
      <MenuItem Command="ApplicationCommands.Paste"/>
    </MenuItem>
  </Menu>
</DockPanel>

工具栏，有两个Buttons，添加和删除联系人

<!-- Tool Bar -->
<DockPanel
  Name="DockPanel_Toolbar"
  Grid.Column="0"
  Grid.ColumnSpan="2"
  Grid.Row="1">
  <ToolBar>
    <Button Click="LaunchNewContactWizard" ToolTip="Add Contact">
      +
    </Button>
    <Button Click="NotImplementedMsg" ToolTip="Delete Contact">
      -
    </Button>
  </ToolBar>
</DockPanel>

为联系人列表定义一个上下文菜单

<!-- Left Pane for contact list view -->
<DockPanel
  Name="DockPanel_LeftPane"
  Grid.Column="0"
  Grid.Row="2">
  <ListBox Name="allContacts" SelectionChanged="ListItemSelected">
    <ListBox.ContextMenu>
      <ContextMenu>
        <MenuItem Header="Add a Contact" Click="LaunchNewContactWizard"/>
        <MenuItem Header="Add a Group" Click="NotImplementedMsg"/>
      </ContextMenu>
    </ListBox.ContextMenu>
  </ListBox>
</DockPanel>

状态栏，在StatusBar元素里放置一个TextBlock

<!-- Status Bar -->
<DockPanel
  Name="DockPanel_Statusbar"
  Grid.Column="0"
  Grid.ColumnSpan="2"
  Grid.Row="3">
  <StatusBar
    BorderBrush="Black"
    BorderThickness="1">
    <TextBlock Name="tb" Foreground="Black">
      Status bar
    </TextBlock>
  </StatusBar>
</DockPanel>

右手边的窗口框，在左边ListItems显示之后，选择一条联系人，就会在右手边的这个Frame_RightPane里显示这个联系人的详细信息

<!-- RightPanel -->
<Frame Name="Frame_RightPane" Grid.Column="1" Grid.Row="2"/>

WPF 教程和资源链接

http://www.cnblogs.com/chillsrc/category/684419.html

http://www.cnblogs.com/hegezhou_hot/category/260429.html

http://www.tuicool.com/topics/11250011

http://www.cnblogs.com/libaoheng/archive/2011/11/18/2253751.html

http://tech.it168.com/a2009/1203/819/000000819385.shtml

http://blog.csdn.net/bcbobo21cn/article/details/19676649

时间： 2024-10-10 18:30:43

WPF代码模板-布局部分的相关文章

WPF 动态布局Grid

1 //开启线程加载 2 Action a = () => 3 { 4 var row = 7; 5 var column = 9; 6 7 var path = "../../face_img/"; 8 var files = Directory.GetFiles(path); 9 for (var i = 0; i < row; i++) 10 { 11 faceGrid.RowDefinitions.Add(new RowDefinition()); 12 } 13

Wpf之布局

上一章大家有了自己的一个Hello World的wpf程序,今天咱们就一起走进WPF,一起来看看wpF的前台xaml这门语言的魅力. 写过web 的人都知道布局这个概念,在web中布局和样式是靠div+CSS来完成的,而在wpf中布局是靠容器来完成的,大家可以把wpf中的容器和web里面的div做对比,刚入门的同学也不要着急,没学过web一点不影响大家学习容器布局的概念的概念. 大家先来看个设计图吧 因为偷懒我直接切了个百度的图来看,更贴近大家的生活,哈哈. 咱们来分析一下,这张图片由4行2列来

WPF简单布局 浅尝辄止

WPF的窗口只能包含一个元素,为了在WPF窗口中放置多个元素并创建更实用的用户界面,需要在窗口上放置一个容器,然后在容器中放置其它元素. 注意:造成这一限制的原因是window类继承自contentcontrol类, 说道简单布局不得不说下wpf的布局原则: 理想窗口要遵循的布局原则: 1,不应显示的设定元素的尺寸. 2,不应使用屏幕坐标指定元素的位置. 3,布局容器和他们的子元素“共享”可以使用的空间. 4,可以嵌套布局容器. 布局过程包括:测量阶段和排列阶段.所有的wpf布局容器都是派生自s

WPF 之 布局（一）

WPF的布局控件都在 System.Windows.Controls.Panel 这个基类下面,使用 WPF提供的各种控件在WPF应用程序中界面进行布局,同时对各种子控件(如按钮.文本框,下拉框等)进行排列组合. Pane类的公共属性太多了.就简单介绍几个常见的属性如下表. 名称 说明 Cursor 获取或设置在鼠标指针位于此元素上时显示的光标. DataContext 获取或设置元素参与数据绑定时的数据上下文. Dispatcher 获取与此 DispatcherObject 关联的 Disp

WPF UI布局（Layout）

WPF是专门用户界面技术,布局是核心功能之一. 每个布局元素都有自己的特点,要灵活使用. WPF中布局元素有如下: Grid:网格 可以自行定义行和列并通过行列的数量.行高和列宽来调整布局.类似Table. Grid具有ColumnDefinitions和RowDefinitions属性,它们分别是ColumnDefinition和RowDefinition的集合, 表示Grid定义了多少行多少列. StackPanel:栈式面板 可以将包含的元素在垂直或水平方向上排成一条直线,移除前一个元素后

WPF UI布局之概述

在线演示:http://v.youku.com/v_show/id_XNzA5NDk2Mjcy.html 清晰版视频+代码下载:http://115.com/lb/5lbeer0m9lad 一.简单介绍 本篇对WPF的布局控件做一个初步的概览,并分别演示Grid.StackPanel.Canvas.DockPanel和WrapPanel五个布局控件.. 主要内容包含: 1.UI布局的方式和关系. 2.WPF的布局理念. 3.五种布局控件的概述和演示. 4.小结. 二.UI布局的方式和关系 1.三

二，WPF的布局

布局过程 WPF布局包含两个阶段:一个测量(measure)阶段和一个排列(arrange)阶段.在测量阶段,窗口遍历所有子元素,并询问子元素它们所期望的尺寸.在排列阶段,窗口在合适的位置放置子元素. ActualHeight属性和ActualWidth属性:在某些情况下,可能希望使用代码检查窗口中某个元素的尺寸,这时使用Height和Width是没有用的,因为这两个属性是所期望的尺寸设置,可能和实际的渲染尺寸不同,在理想情况下,应当让元素的尺寸适应它们的内容,所以不要设置Height和Widt

WPF Grid布局 实现DataGrid控件宽充满布局

1.充满布局 显示设置DataGridTextColumn的属性Width="*" 实现DataGrid控件宽充满布局,代码与效果图片如下所示: 2.Header居中显示 WPF DataGrid属性中无DataGrid的Header居中显示属性,可在xaml代码中添加 设置风格代码 设置,代码如下: <!-- 设置Header居中 --> <DataGrid.ColumnHeaderStyle> <Style TargetType="DataG

【WPF学习】第五章 理解WPF的布局

在Windows开发人员设计用户界面的方式上,WPF布局模型是一个重大改进.在WPF问世之前,Windows开发人员使用刻板的基于坐标的布局将控件放到正确位置.在WPF中,这种方式虽然可行,但已经极少使用.大多数应用程序将使用类似Web的流(flow)布局:在使用流布局模型时,控件可以扩大,并将其他控件挤到其他位置.开发人员能创建与现实分辨率和窗口大小无关的.在不同的显示器上正确缩放的用户界面:当窗口内容发生变化时,界面可调整自身,并且可以自如地处理语言的切换.要利用该系统的优势,首先需要进一步