Grid

两行和三列

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

使用button填充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 button和Cancelbutton

<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 面板的每条边上都停靠一个button

<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 个button的简单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>

一系列具有不同对齐方式的button

<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个数字button进行布局,看起来像手机的按键

<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 button和Cancel button。而且在窗体的剩余部分是一块较大的内容区域

<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 个button填充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

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

  1. WPF 之 布局(一)

    WPF的布局控件都在 System.Windows.Controls.Panel 这个基类下面,使用 WPF提供的各种控件在WPF应用程序中界面进行布局,同时对各种子控件(如按钮.文本框,下拉框等)进 ...

  2. WPF简单布局 浅尝辄止

            WPF的窗口只能包含一个元素,为了在WPF窗口中放置多个元素并创建更实用的用户界面,需要在窗口上放置一个容器,然后在容器中放置其它元素. 注意:造成这一限制的原因是window类继承自 ...

  3. WPF UI布局之概述

    在线演示:http://v.youku.com/v_show/id_XNzA5NDk2Mjcy.html 清晰版视频+代码下载:http://115.com/lb/5lbeer0m9lad 一.简单介 ...

  4. WPF(布局)

      WPF编程学习——布局   本文目录 1.布局简介 2.面板(Panel) 3.视图框(Viewbox) 4.滚动视图控件(ScrollViewer) 5.公共布局属性 1.布局简介 应用程序界面 ...

  5. Wpf之布局

    Wpf之布局 上一章大家有了自己的一个Hello World的wpf程序,今天咱们就一起走进WPF,一起来看看wpF的前台xaml这门语言的魅力. 写过web 的人都知道布局这个概念,在web中布局和 ...

  6. WPF常用布局介绍

    概述:本文简要介绍了WPF中布局常用控件及布局相关的属性 1 Canvas Canvas是一个类似于坐标系的面板,所有的元素通过设置坐标来决定其在坐标系中的位置..具体表现为使用Left.Top.Ri ...

  7. wpf(布局与Canvas )

    WPF的布局有控件都在System.Windows.Controls.Panel这个基类下面,常见的布局控件: . canvas: Canvas是最基本的面板,它不会自动调整内部元素的排列及大小,它仅 ...

  8. 【WPF】 布局篇

    [WPF] 布局篇 一. 几个常用且至关重要的属性 1. Width,Height : 设置窗体,控件宽高. 这里注意,WPF是自适应的, 所以把这2个属性设置 Auto, 则控件宽高会自动改变. 2 ...

  9. Wpf的布局舍入属性(可以解决软件字体模糊的问题)

    原文:Wpf的布局舍入属性(可以解决软件字体模糊的问题) 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/HK_JY/article/details/ ...

随机推荐

  1. BZOJ.2527.[POI2011]MET-Meteors(整体二分)

    题目链接 BZOJ 洛谷 每个国家的答案可以二分+求前缀和,于是可以想到整体二分. 在每次Solve()中要更新所有国家得到的值,不同位置的空间站对应不同国家比较麻烦. 注意到每次Solve()其国家 ...

  2. 破解神器Hashcat使用简介

    0x00 背景 目前GPU的速度越来越快,使用GPU超强的运算速度进行暴力密码破解也大大提高了成功率,曾经看到老外用26块显卡组成的分布式破解神器让我羡慕不已.要说目前最好的GPU破解HASH的软件, ...

  3. lnmp环境一键搭建及卸载

    系统需求: CentOS/Debian/Ubuntu Linux系统 需要2GB以上硬盘剩余空间 128M以上内存,OpenVZ的建议192MB以上(小内存请勿使用64位系统) VPS或服务器必须已经 ...

  4. 火狐FoxyProxy配置教程

    原文:http://www.lvtao.net/tool/640.html 虽然autoproxy是火狐上最优秀的代理插件,但是好久不更新,也有一些bug,比如观看youtube视频7分钟左右会无法播 ...

  5. 批量将Java源代码文件的编码从GBK转为UTF-8

    主要参考: http://blog.csdn.net/liu_qiqi/article/details/38706497 使用common io批量将java编码从GBK转UTF-8 http://w ...

  6. bzoj 2844 子集异或和名次

    感谢: http://blog.sina.cn/dpool/blog/s/blog_76f6777d0101d0mr.html 的讲解(特别是2^(n-m)的说明). /*************** ...

  7. request.setAttribute()、session.setAttribute()和request.getParameter()的联系与区别(记录)

    1.session.setAttribute()和session.getAttribute()配对使用,作用域是整个会话期间,在所有的页面都使用这些数据的时候使用. 2.request.setAttr ...

  8. Ajax-验证码

    function validateCode(){ var code=document.getElementById("code").value; var spanObj=docum ...

  9. Spring Framework 4.0.0发布,首次支持Java 8

    Spring项目组今天发布了Spring 框架4.0.0版本.Spring是一个开源的轻量级Java SE和Java EE开发应用框架,其目的是用于简化企业级应用程序开发. Spring框架第一个版本 ...

  10. 转: gob编解码

    要让数据对象能在网络上传输或存储,我们需要进行编码和解码.现在比较流行的编码方式有JSON,XML等.然而,Go在gob包中为我们提供了另一种方式,该方式编解码效率高于JSON.gob是Golang包 ...