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>

調(diào)整行和列

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

布局容器中的所有內(nèi)容對(duì)齊到最近的像素邊界

<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 面板將窗口分割成三列，展開文本框使其占據(jù)所有的三列，并使用最后兩列對(duì)齊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>

使用頂級(jí)的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列四個(gè)位置上放置4個(gè)背景色不同的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（可以省略，省略時(shí)默認(rèn)為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個(gè)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>

最小尺寸、最大尺寸以及顯式地設(shè)置尺寸

<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完成畫面控件的布局操作，在畫面中完成古詩“相思”的顯示，其中標(biāo)題與作者水平排列顯示，而古詩內(nèi)容橫向排列顯示

<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="春來發(fā)幾枝" 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 面板的每條邊上都停靠一個(gè)按鈕

<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 部分，其中頂部顯示古詩標(biāo)題和作者，下部左半部分顯示古詩內(nèi)容，右半部分顯示古詩解析

<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="紅豆生南國 春來發(fā)幾枝 愿君多采擷 此物最相思" TextWrapping="Wrap" DockPanel.Dock="Left" Width="80" Background="SeaShell" /><TextBox Text="《相思》是唐代詩人王維的作品，是一首借詠物而寄相思的詩作。此詩寫相思之情，卻全篇不離紅豆，正用其相思子之名以關(guān)合相思之情。首句寫紅豆產(chǎn)地；次句以'發(fā)幾枝'一問，語極樸實(shí)，而又極富形象性，設(shè)問自然，則暗逗情懷；三句寄意友人'多采擷'，言在此而意在彼；末句點(diǎn)明其相思屬性，且用一'最'字推達(dá)極致，則'多采擷'的理由自見，而自身所寄之意亦深含其中。全詩極為明快，卻又委婉含蓄，語淺而情深，相傳當(dāng)時(shí)即為人譜曲傳唱，流行江南。" TextWrapping="Wrap" Background="LawnGreen" /></DockPanel></Grid> </Window>

Canvas

包含4 個(gè)按鈕的簡(jiǎn)單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="春來發(fā)幾枝" 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>

一系列具有不同對(duì)齊方式的按鈕

<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對(duì)畫面中的10個(gè)數(shù)字按鈕進(jìn)行布局，看起來像手機(jī)的按鍵

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

嵌套布局容器

創(chuàng)建一個(gè)標(biāo)準(zhǔn)對(duì)話框，在其右下角具有OK 按鈕和Cancel 按鈕，并且在窗口的剩余部分是一塊較大的內(nèi)容區(qū)域

<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 個(gè)按鈕填充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 面板是用于創(chuàng)建簡(jiǎn)單乃至復(fù)雜窗口布局的通用工具。UniformGrid 面板是一種更特殊的布局容器，主要用于在刻板的網(wǎng)格中快速地布局元素(例如，為特定游戲構(gòu)建播放面板)。許多WPF 開發(fā)人員可能永遠(yuǎn)不會(huì)使用UniformGrid 面板。

視圖框Viewbox

基本

<Viewbox> <Canvas Width="18" Height="18" Background="YellowGreen"> </Canvas> </Viewbox>
　　視圖框可以自動(dòng)縮放其內(nèi)容，以填充可用的空間。它只能有一個(gè)子元素。比如，Viewbox中放置一個(gè)Canvas，默認(rèn)將按比例縮放Canvas，填充區(qū)域，而此時(shí)Canvas指定的長寬已不起作用，僅保留比例。
　　如果想禁用Viewbox的自動(dòng)縮放功能，將其拉伸屬性Stretch設(shè)置為None即可；如果想縮放并且不保留子元素比例，將Viewbox的Stretch屬性（默認(rèn)為Uniform）改為Fill（完全填充）；如果想保留比例并完全填充空白區(qū)域，Stretch設(shè)置為UniformToFill。

滾動(dòng)視圖控件ScrollViewer

基本

<ScrollViewer HorizontalScrollBarVisibility="Auto"> <Ellipse Fill="YellowGreen" Width="800" Height="600"></Ellipse> </ScrollViewer>
　　ScollViewer，滾動(dòng)視圖控件可以將過多的內(nèi)容放入一個(gè)可滾動(dòng)的區(qū)域來顯示。比如一個(gè)很大的橢圓，通過滾動(dòng)就可以顯示全部內(nèi)容。
但是ScollViewer只能放一個(gè)元素，這個(gè)元素是任意的。倘若想布局多個(gè)元素，可以將多個(gè)元素放到一個(gè)面板中，再嵌入到ScollViewer中。
　　滾動(dòng)條的可見性，默認(rèn)垂直滾動(dòng)條是可見的（Visiable），而水平滾動(dòng)條是不可用的（Disable），此處改為Auto（需要時(shí)顯示）或者Visiable（可見，不論需不需要都顯示）。

公共布局屬性

　　Width、Height與MinWidth、MaxWidth、MinHeight、MaxHeight
　　Width、Height表示元素寬度和高度，設(shè)置該屬性可以是元素具有精確的寬高。MinWidth、MaxWidth、MinHeight、MaxHeight 可以指定元素大小的界限，分別表示元素的最小寬度、最大寬度、最小高度和最大高度。
　　當(dāng)你指定一個(gè)元素的寬度和高度時(shí)，WPF會(huì)盡可能遵循你的設(shè)置。比如元素寬度>屏幕寬度，元素將被剪裁以適應(yīng)可用空間。

　　Margin與Padding
　　Margin（外邊距），指的是元素周圍的距離，決定了元素周圍留下的空白大小；Padding（內(nèi)邊距），指的是元素邊界與其內(nèi)容之間的距離。做過網(wǎng)頁設(shè)計(jì)、用過CSS的同學(xué)對(duì)margin和padding屬性肯定不陌生，但也有所區(qū)別。WPF中的Margin值可以為一個(gè)數(shù)字、一對(duì)數(shù)字和四個(gè)數(shù)字。
　　一個(gè)數(shù)字代表四周距離相同，為指定值。一對(duì)數(shù)字時(shí)，第一個(gè)數(shù)字表示左側(cè)和右側(cè)距離相同，為指定值；第二個(gè)數(shù)字表示頂部和底部距離相同，為指定值。（與CSS中順序不同）。四個(gè)數(shù)字，分別表示左側(cè)、頂部、右側(cè)、底部距離，該順序與CSS不同。
　　CSS中margin和padding屬性順序是：兩個(gè)數(shù)字對(duì)應(yīng)左右、上下；四個(gè)數(shù)字對(duì)應(yīng)上、右、下、左；

　　HorizontalAlignment與VerticalAlignment
　　在父元素中，當(dāng)剩余空間很大時(shí)（超過子元素需要），這兩個(gè)屬性可以控制字元素的位置。比如，在垂直排列的StackPanel中，面板寬度默認(rèn)和最寬的元素寬度相同，其他控件的寬度默認(rèn)將會(huì)被拉伸。這時(shí)，可以使用HorizontalAlignment屬性來控制，默認(rèn)值為Stretch（拉伸），還有Left、Center、Right。VerticalAlignment則有Stretch、Top、Center和Bottom四個(gè)枚舉值。

? 　Visibility
　　可見度，決定元素是否可見。枚舉值有兩個(gè)：Collapsed和Hidden。Collapsed元素不可見，并且首選尺寸變?yōu)?，不再影響布局。Hidden元素雖然不可見，但尺寸不變，布局系統(tǒng)仍按可見的處理。

　　FlowDirection
　　文本方向，默認(rèn)情況下基于系統(tǒng)的本地設(shè)置。比如英語、中文都是從左往右排列，LeftToRight；希伯來文從右往左排列，RightToLeft。如果為面板指定該屬性，則面板的所有子元素都按此方向排列。

　　Panel.ZIndex
　　Panel定義的一個(gè)附加屬性ZIndex，用于多個(gè)元素重疊時(shí)，指定顯示的上下層關(guān)系。ZIndex值大的將出現(xiàn)在值小的元素上方。元素顯示順序?qū)⒉皇芪臋n定義順序控制。如果不使用ZIndex，重疊元素將根據(jù)文檔定義的順序顯示，后定義的元素出現(xiàn)在上方。

? ? LayoutTransform 與 RenderTransform
　　在縮放或者旋轉(zhuǎn)的變化中，LayoutTransform 引起的變化將被納入布局的計(jì)算范圍。也就是說，該變化會(huì)影響布局的改變。RenderTransform 引起的變化將被忽略。該變化不會(huì)影響布局。


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

簡(jiǎn)單計(jì)算器

<!--ContentPanel - 在此處放置其他內(nèi)容--><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><!--取消注釋，以顯示對(duì)齊網(wǎng)格，從而幫助確保控件在公用邊界上對(duì)齊。圖像在系統(tǒng)欄中顯示時(shí)的上邊距為 -32px。如果隱藏了系統(tǒng)欄，則將此值設(shè)為 0(或完全刪除邊距)。在發(fā)送之前刪除此 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>

計(jì)算器2

<Window x:Class="OACt_WPFClient.布局的練習(xí)" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="計(jì)算器" 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>

地址簿應(yīng)用程序的基本框架

主框架

<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有兩個(gè)：File和Edit，每個(gè)菜單項(xiàng)都會(huì)包含若干子MenuItems

<!—Menu Bar--> <DockPanelName="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>

工具欄，有兩個(gè)Buttons，添加和刪除聯(lián)系人

<!-- Tool Bar --> <DockPanelName="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>

為聯(lián)系人列表定義一個(gè)上下文菜單

<!-- Left Pane for contact list view --> <DockPanelName="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>

狀態(tài)欄，在StatusBar元素里放置一個(gè)TextBlock

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

右手邊的窗口框，在左邊ListItems顯示之后，選擇一條聯(lián)系人，就會(huì)在右手邊的這個(gè)Frame_RightPane里顯示這個(gè)聯(lián)系人的詳細(xì)信息

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

總結(jié)

以上是生活随笔為你收集整理的WPF代码模板-布局部分的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。