教程10:布局和面板教程

布局和面板教程

教程數(shù)據(jù)

本教程致力于顯示GUI元素如何相對于其容器定位和調(diào)整大小。布局是各種設(shè)備上應(yīng)用程序可用性的關(guān)鍵組成部分晚碾。我們還將發(fā)現(xiàn)NoesisGUI中可用的各種容器雄人。

元素定位

FrameworkElement的類公開了用于精確定位子元素的幾個屬性。本主題討論四個最重要的屬性:Horizo??ntalAlignment各墨,Margin茄猫,PaddingVerticalAlignment。了解這些屬性的影響很重要列牺,因為它們?yōu)榭刂圃卦贜oesisGUI中的位置提供了基礎(chǔ)整陌。

對準

對齊方式確定子元素如何放置在父元素的分配空間內(nèi)泌辫。換句話說震放,它確定了提供給元素的空間上的位置殿遂。有兩種類型的對齊方式:Horizo??ntalAlignmentVerticalAlignment

水平對齊

的Horizo??ntalAlignment屬性聲明的水平對齊特征應(yīng)用到子元素乙各。下表顯示了Horizo??ntalAlignment屬性的每個可能值墨礁。

<colgroup style="box-sizing: inherit;"><col width="13%" style="box-sizing: inherit;"><col width="87%" style="box-sizing: inherit;"></colgroup>

會員 描述
剩下 子元素對齊到父元素分配的布局空間的左側(cè)。
中央 子元素與父元素分配的布局空間的中心對齊觅丰。
子元素與父元素分配的布局空間的中心對齊饵溅。
拉伸(默認) 子元素被拉伸以填充父元素分配的布局空間。顯式的Width和Height值優(yōu)先妇萄。

<pre style="box-sizing: inherit; overflow: auto; font-family: Consolas, "Courier New", Courier, monospace; font-size: 0.9em; background: rgb(244, 244, 244); border: 1px solid rgb(230, 230, 230); color: rgb(0, 0, 0); margin: 0px; padding: 0.25em;"><StackPanel xmlns = “ http://schemas.microsoft.com/winfx/2006/xaml/presentation
方向= “ Horizo??ntal” Horizo??ntalAlignment = “ Center” VerticalAlignment = “” Center“ >
<Border Width = ” 100“ Height = ” 100 “ 保證金= ” 5“ BorderBrush = ”黑色“ BorderThickness = ” 1“ >
<按鈕 內(nèi)容= ”左“ Horizo??ntalAlignment = ”左“ VerticalAlignment = ”“居中” />
</ Border>
<邊框 寬度= “ 100” 高度= “ 100” 邊距= “ 5” BorderBrush = “黑色” BorderThickness = “ 1” >
<按鈕 內(nèi)容= “居中” Horizo??ntalAlignment = “居中” VerticalAlignment = “”居中“ />
</ Border>
<邊框 寬度= ” 100“ 高度= ” 100“頁 邊距= ” 5 “ BorderBrush = ”黑色“ BorderThickness = ” 1“ >
<按鈕 內(nèi)容= ”右“ Horizo??ntalAlignment = ”右“ VerticalAlignment = ”“居中” />
</ Border>
<Border 寬度= “ 100” 高度= “ 100” 保證金= “ 5” BorderBrush = “黑色” BorderThickness = “ 1” >
<Button Content = “ Stretch” Horizo??ntalAlignment = “ Stretch” VerticalAlignment = “” Center“ />
</ Border>
</ StackPanel>
</pre>

LayoutPanelTutorialImg1.png

垂直對齊

VerticalAlignment屬性描述適用于子元素的垂直對齊特征蜕企。下表顯示了VerticalAlignment屬性的每個可能值。

<colgroup style="box-sizing: inherit;"><col width="13%" style="box-sizing: inherit;"><col width="87%" style="box-sizing: inherit;"></colgroup>

會員 描述
最佳 子元素與父元素分配的布局空間的頂部對齊冠句。
中央 子元素與父元素分配的布局空間的中心對齊唇牧。
底部 子元素與父元素分配的布局空間的底部對齊杆查。
拉伸(默認) 子元素被拉伸以填充父元素分配的布局空間拾给。顯式的Width和Height值優(yōu)先草戈。

<pre style="box-sizing: inherit; overflow: auto; font-family: Consolas, "Courier New", Courier, monospace; font-size: 0.9em; background: rgb(244, 244, 244); border: 1px solid rgb(230, 230, 230); color: rgb(0, 0, 0); margin: 0px; padding: 0.25em;"><StackPanel xmlns = “ http://schemas.microsoft.com/winfx/2006/xaml/presentation
方向= “ Horizo??ntal” Horizo??ntalAlignment = “ Center” VerticalAlignment = “” Center“ >
<Border Width = ” 100“ Height = ” 100 “ 保證金= ” 5“ BorderBrush = ”黑色“ BorderThickness = ” 1“ >
<按鈕 內(nèi)容= ”頂部“ Horizo??ntalAlignment = ”居中“ VerticalAlignment = ”“頂部” />
</ Border>
<邊框 寬度= “ 100” 高度= “ 100” 邊距= “ 5” BorderBrush = “黑色” BorderThickness = “ 1” >
<按鈕 內(nèi)容= “居中” Horizo??ntalAlignment = “居中” VerticalAlignment = “”居中“ />
</ Border>
<邊框 寬度= ” 100“ 高度= ” 100“頁 邊距= ” 5 “ BorderBrush = ”黑色“ BorderThickness = ” 1“ >
<按鈕 內(nèi)容= ”底部“ Horizo??ntalAlignment = ”居中“ VerticalAlignment = ”“底部” />
</ Border>
<Border 寬度= “ 100” 高度= “ 100” 保證金= “ 5” BorderBrush = “黑色” BorderThickness = “ 1” >
<按鈕 內(nèi)容= “拉伸” Horizo??ntalAlignment = “中心” VerticalAlignment = “”拉伸“ />
</ Border>
</ StackPanel>
</pre>

LayoutPanelTutorialImg2.png

余量

邊距確定一個控件到放置該控件的單元格邊界之間的距離。它可以是統(tǒng)一的同欠,也可以指定其所有邊的值襟锐。例如莫杈,Margin =“ 20”意味著將屬性left,top,right和bottom都設(shè)置為20夫偶。Margin =“ 20,10,0,10”分配左邊界為20说铃,頂部邊界為10幼苛,a右邊距為0括荡,底邊為10。

<pre style="box-sizing: inherit; overflow: auto; font-family: Consolas, "Courier New", Courier, monospace; font-size: 0.9em; background: rgb(244, 244, 244); border: 1px solid rgb(230, 230, 230); color: rgb(0, 0, 0); margin: 0px; padding: 0.25em;"><StackPanel xmlns = “ http://schemas.microsoft.com/winfx/2006/xaml/presentation
方向= “ Horizo??ntal” Horizo??ntalAlignment = “ Center” VerticalAlignment = “” Center“ >
<Border Width = ” 150“ Height = ” 50 “ Margin = ” 5“ BorderBrush = ” Black“ BorderThickness = ” 1“ >
<Button Content = ” Margin =“ 0,0,0,0&quot;” 保證金= “ 0” />
</ Border>
<邊框 寬度= “ 150” BorderThickness = “ 1” >
<Button Content = “ Margin =” 20,5,10,5“ Margin = “ 20,5,10,5” />
</ Border>
</ StackPanel>
</pre>

LayoutPanelTutorialImg3.png

填充

填充是控件的邊框與其內(nèi)部內(nèi)容之間的空間。使用此屬性迄委,您可以更改任何控件的默認填充晃痴。

<pre style="box-sizing: inherit; overflow: auto; font-family: Consolas, "Courier New", Courier, monospace; font-size: 0.9em; background: rgb(244, 244, 244); border: 1px solid rgb(230, 230, 230); color: rgb(0, 0, 0); margin: 0px; padding: 0.25em;"><StackPanel xmlns = “ http://schemas.microsoft.com/winfx/2006/xaml/presentation
方向= “ Horizo??ntal” Horizo??ntalAlignment = “ Center” VerticalAlignment = “” Center“ >
<Border Width = ” 150“ Height = ” 50 ““ 保證金= ” 5“ BorderBrush = ”黑色“ BorderThickness = ” 1“ >
<按鈕 內(nèi)容= ”填充=“ 0,0,0,0&”;“ 填充= “ 0” />
</ Border>
<邊框 寬度= “ 150” BorderThickness = “ 1” >
<Button Content = “ Padding =” 5,20,5,10“ 填充= “ 5,20,5,10” />
</ Border>
</ StackPanel>
</pre>

LayoutPanelTutorialImg4.png

貨柜

在NoesisGUI中活尊,內(nèi)置了將容器和控件組合在一起的界面铜犬,這些控件和控件構(gòu)成了層次結(jié)構(gòu)的可視樹。容器有四種:內(nèi)容容器項目容器裝飾器面板枢步。

內(nèi)容容器

內(nèi)容控件

保留單個子Content的控件隘擎。內(nèi)容可以是字符串休傍,對象甚至其他UIElement。示例:ButtonLabelToolTip东臀。

<pre style="box-sizing: inherit; overflow: auto; font-family: Consolas, "Courier New", Courier, monospace; font-size: 0.9em; background: rgb(244, 244, 244); border: 1px solid rgb(230, 230, 230); color: rgb(0, 0, 0); margin: 0px; padding: 0.25em;"><StackPanel xmlns = “ http://schemas.microsoft.com/winfx/2006/xaml/presentation
方向= “ Horizo??ntal” Horizo??ntalAlignment = “ Center” VerticalAlignment = “” Center“ >
<Border Width = ” 150“ Height = ” 50 “ 保證金= ” 5“ >
<按鈕 內(nèi)容= ”按我“ />
</ Border>
<邊界 寬度= ” 150“ 高度= ” 50“ 保證金= ” 5“ >
<按鈕 Horizo??ntalContentAlignment = ”拉伸“ VerticalContentAlignment = ”拉伸“ 填充= ” 15“>
<矩形 填充= “紅色” />
</按鈕>
</ Border>
<邊框 寬度= “ 150” 高度= “ 50”頁 邊距= “ 5” >
<標(biāo)簽 內(nèi)容= “ A標(biāo)簽控件” Horizo??ntalAlignment = “”居中“ VerticalAlignment = “ Center” />
</ Border>
</ StackPanel>
</pre>

LayoutPanelTutorialImg5.png

HeaderedContentControl

HeaderedContentControl基本相同的ContentControl中但具有報頭轨奄,其用于呈現(xiàn)所述內(nèi)容的報頭部分球切。示例:GroupBoxExpanderTabItem

<pre style="box-sizing: inherit; overflow: auto; font-family: Consolas, "Courier New", Courier, monospace; font-size: 0.9em; background: rgb(244, 244, 244); border: 1px solid rgb(230, 230, 230); color: rgb(0, 0, 0); margin: 0px; padding: 0.25em;"><StackPanel xmlns = “ http://schemas.microsoft.com/winfx/2006/xaml/presentation
方向= “ Horizo??ntal” Horizo??ntalAlignment = “ Center” VerticalAlignment = “” Center“ >
<Border Width = ” 150“ Height = ” 90 “ 保證金= ” 5“ >
<GroupBox Header = ” Group“ Horizo??ntalContentAlignment = ” Stretch“ VerticalContentAlignment = ” Stretch“ >
<矩形 填充= ”紅色“ 保證金= ” 10“ />
</ GroupBox>
</ Border>
<Border Width = “ 150” 高度= “ 90” 保證金= “ 5” >
<Expander 標(biāo)頭= “ Expander” padding = “ 16” >
<矩形 填充= “紅色” Width = “ 100” 高度= “ 35” />
</ Expander>
</ Border >
<邊框 寬度= “ 150” 高度= “ 90” 邊距= “ 5” >
<TabControl Horizo??ntalContentAlignment = “拉伸” VerticalContentAlignment = “”拉伸“ >
<TabItem 標(biāo)頭= “制表符” >
<矩形 填充= “紅色” 邊距=“ 10” />
</ TabItem>
</ TabControl>
</ Border>
</ StackPanel>
</pre>

LayoutPanelTutorialImg6.png

物品容器

ItemsControl

包含多個Item的控件陌粹。示例:ListBoxListViewTreeView掏秩。

<pre style="box-sizing: inherit; overflow: auto; font-family: Consolas, "Courier New", Courier, monospace; font-size: 0.9em; background: rgb(244, 244, 244); border: 1px solid rgb(230, 230, 230); color: rgb(0, 0, 0); margin: 0px; padding: 0.25em;"><StackPanel
xmlns = “ http://schemas.microsoft.com/winfx/2006/xaml/presentation
xmlns:x = “ http://schemas.microsoft.com/winfx/2006/xaml
Orientation = “水平” Horizo??ntalAlignment = “居中” VerticalAlignment = “居中” >
<StackPanel.Resources>
<Style x:Key = “ CyanHeader” TargetType = “ GridViewColumnHeader” >
<Setter 屬性= “背景” 值= “ Cyan” />
<Setter 屬性= “前景“ 值= ”海軍“/>
</ Style>
<Da??taTemplate x:Key =“ CheckHeader” DataType = “ GridViewColumnHeader” >
<StackPanel Orientation = “ Horizo??ntal” >
<CheckBox />
<TextBlock Text = “ {Binding Header}” />
</ StackPanel>
</ DataTemplate>
<Da??taTemplate x:Key = “ RefText” >
<邊框 背景= “#8080FFFF” BorderBrush = “海軍” BorderThickness = “ 1” 填充= “ 6,2” CornerRadius = “ 2” >
<TextBlock Text = “{Binding Name}“ 前景= ”海軍“ FontWeight = ”“粗體” />
</ Border>
</ DataTemplate>
<Da??taTemplate x:Key = “ StockText” >
<Border x:Name = “ Bd” Background = “ LightBlue” 填充= “ 6,2” CornerRadius = “ 2” >
<TextBlock x:Name = “ Txt” 文本= “ {Binding IsEnabled}” 前景= “ SlateGray” />
</ Border>
<Da??taTemplate.Triggers>
<Trigger SourceName = “ Txt” 屬性= “ Text” 值= “ False” >
<設(shè)置器 TargetName = “ Bd” 屬性= “背景” Value =“ Pink” />
<Setter TargetName = “ Txt” 屬性= “ Foreground” Value = “紅色” />
</ Trigger>
</DataTemplate.Triggers>
</ DataTemplate>
</StackPanel.Resources>

<Border 寬度= “ 150” 高度= “ 200” 邊距= “ 5” >
<StackPanel>
<TextBlock 文本= “季節(jié):” />
<ListBox>
<TextBlock 文本= “ Spring” />
<TextBlock 文本= “ Summer” />
<TextBlock Text = “秋天” />
<TextBlock Text = “冬天” />
</ ListBox>
</ StackPanel>
</ Border>
<邊框 寬度= “ 400” 高度= “200“ 保證金= ” 5“ >
<ListView>
<ListView.View>
<GridView>
<GridViewColumn Header = “ #Ref”
CellTemplate = “ {StaticResource RefText}”
HeaderContainerStyle = “” {StaticResource CyanHeader}“ />
<GridViewColumn Header = ”產(chǎn)品“ Width = ” 140“ />
<GridViewColumn Header = ”價格€ “ Width = ” 60“
DisplayMemberBinding = ”“ {Binding ActualWidth或舞,StringFormat = F2}” />
<GridViewColumn Header = “ Available”
HeaderTemplate = “” StaticResource CheckHeader}“
CellTemplate = ”{StaticResource StockText}“ />
</ GridView>
</ListView.View>
<TextBlock x:Name = “ ID20041” Text = “紫花苜蓿粉” Margin = “ 5,0” />
<TextBlock x:Name = “ ID13494” Text = “鮮血” Margin = “ 5,0” />
<TextBlock x:Name = “ ID83471” 文字= “ Greensand mix” 邊距= “ 5,0” IsEnabled = “ False” />
<TextBlock x:Name = “ ID27856” 文字= “鈣石灰” Margin = “ 5,0” / >
<TextBlock x:名稱= “ ID74865” 文字= “硝酸智利” 保證金= “ 5,0” />
<TextBlock x:Name = “ ID47286” Text = “棉籽” Margin = “ 5,0” />
<TextBlock x:Name = “ ID27456” Text = “瀉鹽” Margin = “ 5,0” IsEnabled = “ False “ />
<TextBlock x:Name = ” ID24583“ Text = ”羽毛粉“ Margin = ” 5,0“ />
<TextBlock x:Name = ” ID24659“ Text = ” Humates“ Margin = ” 5,0“ />
</ ListView>
</ Border>
</ StackPanel>
</pre>

LayoutPanelTutorialImg7.png

HeaderedItemsControl

可以容納許多任意元素作為特定Header內(nèi)容的容器派桩。示例:MenuItemToolBarTreeViewItem熟妓。

<pre style="box-sizing: inherit; overflow: auto; font-family: Consolas, "Courier New", Courier, monospace; font-size: 0.9em; background: rgb(244, 244, 244); border: 1px solid rgb(230, 230, 230); color: rgb(0, 0, 0); margin: 0px; padding: 0.25em;"><StackPanel xmlns = “ http://schemas.microsoft.com/winfx/2006/xaml/presentation
方向= “ Horizo??ntal” Horizo??ntalAlignment = “ Center” VerticalAlignment = “” Center“ >
<Border Width = ” 150“ Height = ” 200 “ 保證金= ” 5“ >
<DockPanel 背景= ”灰色“ LastChildFill = ” False“ >
<Menu DockPanel.Dock = ”頂部“ >
<MenuItem Header = ”文件“ >
<MenuItem Header = “打開” />
<MenuItem Header = “保存”/>
<Separator />
<MenuItem Header = “ Exit” />
</ MenuItem>
</ Menu>
</ DockPanel>
</ Border>
<Border Width = “ 200” Height = “ 200” Margin = “ 5” >
< TreeView 寬度= “ 500” 高度= “ 400” >
<TreeViewItem>
<TreeViewItem.Header>
<StackPanel Orientation = “ Horizo??ntal” >
<Image Source = “ Images / monitor.png” Width = “ 24” 高度= “ 24” />
<TextBlock 文本= “計算機” VerticalAlignment = “居中”頁 邊距= “ 4,0,0,0” />
</ StackPanel>
</TreeViewItem.Header>
<TreeViewItem>
<TreeViewItem.Header>
<StackPanel Orientation = “ Horizo??ntal” >
<Image Source = “ Images /game_pad.png“ 寬度= ” 24“ 高度= ” 24“ />
<TextBlock 文本= ”游戲“ VerticalAlignment = ”中心“ 保證金= ” 4,0,0,0“ />
</ StackPanel>
</ TreeViewItem。標(biāo)頭>
<TreeViewItem>
<TreeViewItem.Header>
<StackPanel Orientation = “水平” >
<Image Source = “ Images / folder.png” 寬度= “ 24” 高度= “ 24” />
<TextBlock 文本= “ Duck Hunt” VerticalAlignment = “ Center” 邊距= “ 4,0,0,0” />
< / StackPanel>
</TreeViewItem.Header>
</ TreeViewItem>
<TreeViewItem>
<TreeViewItem.Header>
<StackPanel Orientation = “ Horizo??ntal” >
<Image Source = “ Images / folder.png” 寬度= “ 24” 高度= “ 24” />
<TextBlock Text = “彈跳球” VerticalAlignment = “居中” Margin = “ 4,0,0,0” />
</ StackPanel>
</TreeViewItem.Header>
</ TreeViewItem>
</ TreeViewItem>
<TreeViewItem>
<TreeViewItem.Header>
<StackPanel Orientation = “ Horizo??ntal” >
<圖像 源= “ Images / folder.png” 寬度= “ 24” 高度= “ 24” />
<TextBlock 文本= “程序文件” VerticalAlignment = “”居中“ 保證金= ” 4,0,0,0“ />
</ StackPanel>
</TreeViewItem.Header>
<TreeViewItem>
<TreeViewItem.Header>
<StackPanel Orientation = “水平”>
<圖像 源= “ Images / folder.png” 寬度= “ 24” 高度= “ 24” />
<TextBlock 文本= “認知” VerticalAlignment = “居中”頁 邊距= “ 4,0,0,0” />
< / StackPanel>
</TreeViewItem.Header>
</ TreeViewItem>
</ TreeViewItem>
<TreeViewItem>
<TreeViewItem.Header>
<StackPanel Orientation = “ Horizo??ntal” >
<Image Source = “ Images / recycle_bin.png” Width = “ 24” 高度= “ 24” />
<TextBlock 文本= “回收站” VerticalAlignment = “居中” 保證金= “ 4,0,0,0” />
</ StackPanel>
</TreeViewItem.Header>
</ TreeViewItem>
<TreeViewItem>
<TreeViewItem.Header>
<StackPanel Orientation = “ Horizo??ntal” >
<圖像 源= “ Images / folder.png” 寬度= “ 24” 高度= “ 24” />
<TextBlock 文本= “用戶” VerticalAlignment = “”居中“ 保證金= ” 4,0,0,0“ />
</ StackPanel>
</TreeViewItem.Header>
<TreeViewItem>
<TreeViewItem.Header>
<StackPanel 方向=“水平” >
<圖像 源= “ Images / folder.png” 寬度= “ 24” 高度= “ 24” />
<TextBlock 文本= “管理員” VerticalAlignment = “中心”頁 邊距= “ 4,0,0,0” />
</ StackPanel>
</TreeViewItem.Header>
</ TreeViewItem>
<TreeViewItem>
<TreeViewItem.Header>
<StackPanel Orientation = “ Horizo??ntal” >
<Image Source = “ Images / folder.png” 寬度= “ 24” 高度= “ 24” />
<TextBlock 文本= “ John Doe” VerticalAlignment = “居中” 保證金= “ 4,0,0,0” />
</ StackPanel>
</TreeViewItem.Header>
</ TreeViewItem>
</ TreeViewItem>
<TreeViewItem>
<TreeViewItem.Header>
<StackPanel Orientation = “ Horizo??ntal “ >
<圖像 源= ” Images / folder.png“ 寬度= ” 24“ 高度= ” 24“ />
<TextBlock 文本= ” Windows“ VerticalAlignment = ”“居中”頁 邊距= “ 4,0,0,0” />
</ StackPanel>
</TreeViewItem.Header>
<TreeViewItem>
<TreeViewItem.Header>
<StackPanel 方向= “水平” >
<圖像 源= “ Images / folder.png” 寬度= “ 24” 高度= “ 24” />
<TextBlock 文本= “字體” VerticalAlignment = “”中心“頁 邊距= ” 4,0,0躲履, 0“ />
</ StackPanel>
</TreeViewItem.Header>
</ TreeViewItem>
<TreeViewItem>
<TreeViewItem.Header>
<StackPanel Orientation = ” Horizo??ntal“ >
<Image Source = ” Images / folder.png“ Width = ” 24“ 高度= “ 24” />
<TextBlock 文本= “媒體” VerticalAlignment = “居中” 保證金= “ 4,0,0,0” />
</ StackPanel>
</TreeViewItem.Header>
</ TreeViewItem>
<TreeViewItem>
<TreeViewItem.Header>
<StackPanel Orientation = “ Horizo??ntal” >
<圖像 源= “ Images / folder.png” 寬度= “ 24” 高度= “ 24” />
<TextBlock 文本= “資源” VerticalAlignment = “”居中“ 保證金= ” 4,0,0,0“ />
</ StackPanel>
</TreeViewItem.Header>
<TreeViewItem>
<TreeViewItem.Header>
<StackPanel 方向=“水平” >
<圖像 源= “ Images / folder.png” 寬度= “ 24” 高度= “ 24” />
<TextBlock 文本= “主題” VerticalAlignment = “中心” 邊距= “ 4,0,0,0” />
</ StackPanel>
</TreeViewItem.Header>
</ TreeViewItem>
</ TreeViewItem>
<TreeViewItem>
<TreeViewItem.Header>
<StackPanel Orientation = “ Horizo??ntal” >
<Image Source = “ Images / folder.png” Width = “ 24“ 高度= “ 24” />
<TextBlock 文本= “ System32” VerticalAlignment = “ Center” 邊距= “ 4,0,0,0” />
</ StackPanel>
</TreeViewItem.Header>
</ TreeViewItem>
</ TreeViewItem>
</ TreeViewItem>
</ TreeView>
</ Border>
</ StackPanel>
</pre>

LayoutPanelTutorialImg8.png

裝飾工

裝飾器將效果應(yīng)用于單個Child元素上或周圍。示例:Border棘催,BulletDecoratorViewbox钓觉。

<pre style="box-sizing: inherit; overflow: auto; font-family: Consolas, "Courier New", Courier, monospace; font-size: 0.9em; background: rgb(244, 244, 244); border: 1px solid rgb(230, 230, 230); color: rgb(0, 0, 0); margin: 0px; padding: 0.25em;"><StackPanel xmlns = “ http://schemas.microsoft.com/winfx/2006/xaml/presentation
方向= “ Horizo??ntal” Horizo??ntalAlignment = “ Center” VerticalAlignment = “” Center“ >
<Border Width = ” 150“ Height = ” 100 “ 保證金= ” 5“ >
<邊框 背景= ”銀色“ BorderBrush = ”黑色“ BorderThickness = ” 2“ CornerRadius = ” 5“ 填充= ” 10“ 保證金= ” 10“ >
<矩形 填充= “紅色” 寬度= “ 60” 高度= “ 25”/>
</ Border>
</ Border>
<Border Width = “ 150” Height = “ 100” Margin = “ 5” >
<BulletDecorator Margin = “ 10” VerticalAlignment = “ Center” >
<BulletDecorator.Bullet>
<橢圓 寬度= “ 14” 高度= “ 14” 填充= “銀色” 描邊= “黑色” StrokeThickness = “ 3” />
</BulletDecorator.Bullet>
<TextBlock Text = “子彈裝飾器” Margin = “ 5,0,0,0” />
</ BulletDecorator>
</ Border>
<Border 寬度= “ 225” 高度= “ 100”頁 邊距= “ 5” >
<Viewbox 寬度= “ 200”頁 邊距= “ 10” >
<TextBlock 文本= “在視圖框內(nèi)” FontSize = “ 8” 背景= “ Pink” 填充= “ 5,2” />
</ Viewbox>
</ Border>
</ StackPanel>
</pre>

LayoutPanelTutorialImg9.png

視圖框

Viewbox提供了一種簡單的機制來縮放給定空間內(nèi)的任意內(nèi)容典徊。默認情況下附井,Viewbox會在兩個維度上拉伸以填充為其賦予的形狀(就像大多數(shù)控件一樣)。但它也具有Stretch屬性狭瞎,可以控制其單個子對象如何在其范圍內(nèi)縮放细移。的第二個特性Viewbox控件StretchDirection熊锭,控制您是否只是想用它來縮小內(nèi)容或擴大的內(nèi)容(而不是做要么)弧轧。

注意

Viewbox是使應(yīng)用程序獨立于分辨率的理想容器

<pre style="box-sizing: inherit; overflow: auto; font-family: Consolas, "Courier New", Courier, monospace; font-size: 0.9em; background: rgb(244, 244, 244); border: 1px solid rgb(230, 230, 230); color: rgb(0, 0, 0); margin: 0px; padding: 0.25em;"><頁面 xmlns = “ http://schemas.microsoft.com/winfx/2006/xaml/presentation” >
<網(wǎng)格 背景= “灰色” ShowGridLines = “真實” >
<Grid.RowDefinitions>
<RowDefinition Height = “ *” / >
<RowDefinition Height = “ 3 *” />
<RowDefinition Height = “ *” />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width = “ *” />
<ColumnDefinition Width = “ 3 *” />
<ColumnDefinition Width = “ *” />
</Grid.ColumnDefinitions>

<Viewbox  Grid.Column = “ 0”  Grid.Row = “ 0”  Stretch = “統(tǒng)一” > 
  <Grid> 
    <矩形 填充= “綠色”  /> 
    <Label  Content = “左上”  /> 
  </ Grid> 
</ Viewbox> 
<Viewbox  Grid.Column = “ 0”  Grid.Row = “ 2”  Stretch = “ Uniform” > 
  <網(wǎng)格 背景= “黃色” > 
    <標(biāo)簽 內(nèi)容= “左下” /> 
  </ Grid> 
</ Viewbox>
<Viewbox  Grid.Column = “ 2”  Grid.Row = “ 0”  Stretch =“統(tǒng)一” > 
  <網(wǎng)格 背景= “紅色” > 
    <標(biāo)簽 內(nèi)容= “右上” /> 
  </ Grid> 
</ Viewbox> 
<Viewbox  Grid.Column = “ 2”  Grid.Row = “ 2”  Stretch = “統(tǒng)一“ > 
  <網(wǎng)格 背景= ”藍色“ > 
    <標(biāo)簽 內(nèi)容= ”右下“ /> 
  </ Grid> 
</ Viewbox> 
<Viewbox  Grid.Column = ” 1“  Grid.Row = ” 1“  Stretch = ” Uniform“> 
  <網(wǎng)格 背景= “白色” > 
    <標(biāo)簽 Content = “ Center” /> 
  </ Grid> 
</ Viewbox> 

</ Grid>
</ Page>
</pre>

LayoutPanelTutorialImg15.png

面板

NoesisGUI包含六個主要的內(nèi)置面板,按復(fù)雜性和實用性的升序排列Canvas碗殷,StackPanel精绎,UniformGridWrapPanel锌妻,DockPanelGrid代乃。

帆布

畫布是一種特殊的布局面板,它使用絕對坐標(biāo)(即使用x和y坐標(biāo))分布元素仿粹。在畫布中使用時搁吓,元素不限于任何元素,它可以與其他控件重疊吭历。呈現(xiàn)順序取決于XAML中元素的聲明方式擎浴。可以使用Panel.ZIndex屬性更改此序列毒涧。

畫布不對其元素施加任何限制贮预。因此,必須指定單個元素的寬度高度契讲。您可以使用附加的屬性Canvas.LeftCanvas.RightCanvas.TopCanvas.Bottom來指定到父級所選邊的距離仿吞。

<pre style="box-sizing: inherit; overflow: auto; font-family: Consolas, "Courier New", Courier, monospace; font-size: 0.9em; background: rgb(244, 244, 244); border: 1px solid rgb(230, 230, 230); color: rgb(0, 0, 0); margin: 0px; padding: 0.25em;"><Grid
xmlns = “ http://schemas.microsoft.com/winfx/2006/xaml/presentation
xmlns:x = “ http://schemas.microsoft.com/winfx/2006/xaml
xmlns:d = “ http ://schemas.microsoft.com/expression/blend/2008“
xmlns:mc = ” http://schemas.openxmlformats.org/markup-compatibility/2006
mc:Ignorable = ” d“
Background = ” LightGray“
TextElement。前景= “黑色”
邊距= “ 10” Horizo??ntalAlignment = “中心” VerticalAlignment = “中心” >

<Grid.Resources>
<LinearGradientBrush x:Key = “ BgBrush” StartPoint = “ 0,0” EndPoint = “ 1,1” >
<GradientStop Offset = “ 0” Color = “#FF9BDEFF” />
<GradientStop Offset = “ 1 “ Color = ”#FF69B5FF“ />
</ LinearGradientBrush>
</Grid.Resources>

<Grid.RowDefinitions>
<RowDefinition Height = “ Auto” />
<RowDefinition />
</Grid.RowDefinitions>

<StackPanel Orientation = “ Horizo??ntal” Horizo??ntalAlignment = “ Center” Margin = “ 0,8,0,0” >
<TextBlock Text = “畫布大屑衿:” />
<TextBlock Text = “ {Binding ActualWidth唤冈,ElementName = Canvas}” / >
<TextBlock Text = “ x” />
<TextBlock Text = “ {Binding ActualHeight,ElementName = Canvas}” />
</ StackPanel>
<Canvas x:Name = “ Canvas” Width = “ 380” Height = “ 240” 網(wǎng)格.Row = “1“ 背景= ”白色“ 邊距= ” 8“ >
<Border BorderBrush = “黑色” BorderThickness = “ 1” 高度= “ 50” CornerRadius = “ 0,4,4,4” 背景= “ {DynamicResource BgBrush}” Canvas.Left = “ 20” Canvas.Top = “ 15” >
<Grid>
<StackPanel Orientation = “ Horizo??ntal” Margin = “ 2,0,10,0” Horizo??ntalAlignment = “ Left” VerticalAlignment = “” Top“ >
<TextBlock Text = ”“(left =” />
<TextBlock Text = “” {綁定(畫布银伟。左)你虹,RelativeSource = {RelativeSource AncestorType = {x:類型邊框}}}“” />
<TextBlock Text = “绘搞,top =” />
<TextBlock Text = “” {Binding(Canvas.Top),RelativeSource = {RelativeSource AncestorType = {x:Type Border}}}“” />
<TextBlock Text = “”)/>
</ StackPanel>
<Ellipse Fill = “ Black” Stroke = “#00000000” Width = “ 4” Height = “ 4” Horizo??ntalAlignment = “ Left” VerticalAlignment = “ Top” StrokeThickness = “ 0” Margin = “ -2傅物,-2 夯辖,0,0“ />
</ Grid>
</ Border>
<Border BorderBrush = “黑色” BorderThickness =“ 1” 高度= “ 50” CornerRadius = “ 4,0,4,4” 背景= “ {DynamicResource BgBrush}” Canvas.Right = “ 15” Canvas.Top = “ 35” >
<Grid>
<StackPanel Orientation = “ Horizo??ntal“ Margin = ” 10,0,2,0“ Horizo??ntalAlignment = ” Right“ VerticalAlignment = ”“頂部” >
<TextBlock Text = “”(right =“ />
<TextBlock Text = ”“ {Binding(Canvas.Right),RelativeSource = {RelativeSource AncestorType = {x:類型邊框}}}“” />
<TextBlock Text = “董饰,top =” />
<TextBlock Text = “ {Binding(Canvas.Top)蒿褂,RelativeSource = {RelativeSource AncestorType = {x:Type Border}}}”“ />
<TextBlock Text = ”“)/>
</ StackPanel>
<橢圓 填充= ”黑色“ 筆觸= “#00000000” 寬度= “ 4” 高度= “ 4” Horizo??ntalAlignment = “右” VerticalAlignment = “頂部” StrokeThickness = “ 0” 保證金= “ 0,-2卒暂,-2,0” />
</ Grid>
</
Grid> </ Grid> </ Grid> 邊框> <Border BorderBrush = “黑色” BorderThickness = “ 1” 高度= “ 50” CornerRadius = “ 4,4,4,0” 背景= “ {DynamicResource BgBrush}” Canvas.Left = “ 10” Canvas.Bottom = “ 35” >
<Grid>
<StackPanel Orientation = “ Horizo??ntal” 邊距= “ 2,0,10,0” Horizo??ntalAlignment = “ Left” VerticalAlignment = “底部” >
<TextBlock Text = “(left =” />
<TextBlock Text = “” {Binding(Canvas.Left)啄栓,RelativeSource = {RelativeSource AncestorType = {x:Type Border}}}“” />
<TextBlock Text = “,bottom =” />
<TextBlock Text =“ {Binding(Canvas.Bottom)也祠,RelativeSource = {RelativeSource AncestorType = {x:Type Border}}}” />
<TextBlock Text = “)” />
</ StackPanel>
<橢圓 填充= “黑色” 描邊= “# 00000000“ 寬度= ” 4“ 高度= ” 4“ Horizo??ntalAlignment = ”左“ VerticalAlignment = ”底部“ StrokeThickness = ” 0“頁 邊距= ” -2,0,0昙楚,-2“ />
</ Grid>
</ Border>
<Border BorderBrush = “黑色” BorderThickness = “ 1” 高度= “ 50” CornerRadius = “ 4,4,0,4” 背景=“ {DynamicResource LightBlueBackground }” Canvas.Right = “ 10” Canvas.Bottom = “ 5” >
<網(wǎng)格 背景= “ {DynamicResource BgBrush}” >
<StackPanel Orientation = “水平” Margin = “ 10,0,2,0” Horizo??ntalAlignment = “右側(cè)” VerticalAlignment = “底部” >
<TextBlock 文本= “(right =” />
<TextBlock 文本= “ {綁定(Canvas.Right),RelativeSource = {RelativeSource AncestorType = {x:類型邊框}}}}” />
<TextBlock Text = “诈嘿,bottom =” />
<TextBlock Text =“ {Binding(Canvas.Bottom)桂肌,RelativeSource = {RelativeSource AncestorType = {x:Type Border}}}” />
<TextBlock Text = “)” />
</ StackPanel>
<橢圓 填充= “黑色” 描邊= “# 00000000“ 寬度= ” 4“ 高度= ” 4“ Horizo??ntalAlignment = ”右“ VerticalAlignment = ”底部“ StrokeThickness = ” 0“頁 邊距= ” 0,0,-2永淌,-2“ />
</ Grid>
</ Border>
<Border BorderBrush = “黑色” BorderThickness = “ 1” 高度= “ 30” CornerRadius = “ 0,4,4,4” 背景=“ {DynamicResource BgBrush}” Canvas.Left = “ 160” Canvas.Top = “ 115” >
<Grid>
<StackPanel Orientation = “ Horizo??ntal” 保證金= “ 2,0,10,0” Horizo??ntalAlignment = “ Left” VerticalAlignment = “”頂部” >
<TextBlock Text = “(left =” />
<TextBlock Text = “” {Binding(Canvas.Left)崎场,RelativeSource = {RelativeSource AncestorType = {x:Type Border}}}}“ />
<TextBlock Text = ”, top =“ />
<TextBlock Text = ”{Binding(Canvas.Top)遂蛀,RelativeSource = {RelativeSource AncestorType = {x:Type Border}}}“” />
<TextBlock Text = “)” />
</ StackPanel>
<Ellipse Fill = “ Black” Stroke = “#00000000” Width = “ 4” Height = “ 4” Horizo??ntalAlignment = “ Left” VerticalAlignment = “” Top“ StrokeThickness = ” 0 “ Margin = ” -2谭跨,-2,0,0“ />
</ Grid>
</ Border>
</ Canvas>
</ Grid>
</pre>

LayoutPanelTutorialImg10.png

StackPanel

StackPanel是一個容器,其中子元素排列在水平或垂直方向上的一行中李滴。方向由屬性Orientation定義螃宙,該屬性可以采用兩個有效值:

  • 垂直:這是默認方向。子項從上到下垂直垂直放置所坯。
  • 水平:在這里谆扎,項目從左到右一個接一個地放置。

<pre style="box-sizing: inherit; overflow: auto; font-family: Consolas, "Courier New", Courier, monospace; font-size: 0.9em; background: rgb(244, 244, 244); border: 1px solid rgb(230, 230, 230); color: rgb(0, 0, 0); margin: 0px; padding: 0.25em;"><Grid
xmlns = “ http://schemas.microsoft.com/winfx/2006/xaml/presentation
xmlns:x = “ http://schemas.microsoft.com/winfx/2006/xaml
xmlns:d = “ http ://schemas.microsoft.com/expression/blend/2008“
xmlns:mc = ” http://schemas.openxmlformats.org/markup-compatibility/2006
mc:Ignorable = ” d“
Background = ” LightGray“
TextElement芹助。前景= “黑色”
邊距= “ 10” Horizo??ntalAlignment = “中心” VerticalAlignment = “中心” >

<Grid.Resources>
<LinearGradientBrush x:Key = “ HorBrush” StartPoint = “ 0,0” EndPoint = “ 1,0” >
<GradientStop Offset = “ 0” Color = “#FF9BDEFF” />
<GradientStop Offset = “ 1 “ Color = ”#FF69B5FF“ />
</ LinearGradientBrush>
<LinearGradientBrush x:Key = ” VerBrush“ StartPoint = ” 0,0“ EndPoint = ” 0,1“ >
<GradientStop Offset = ” 0“ Color = ”#FF9BDEFF“ />
<GradientStop Offset = ” 1“ 顏色=“#FF69B5FF” />
</ LinearGradientBrush>
</Grid.Resources>

<Grid.ColumnDefinitions>
<ColumnDefinition Width = “ *” />
<ColumnDefinition Width = “ 4” />
<ColumnDefinition Width = “ Auto” />
<ColumnDefinition Width = “ 200” />
</Grid.ColumnDefinitions>

<Grid.RowDefinitions>
<RowDefinition 高度= “自動” />
<RowDefinition 高度= “自動” />
<RowDefinition 高度= “*” />
</Grid.RowDefinitions>
<TextBlock的 文本= “水平StackPanels” 的Horizo??ntalAlignment = “中心“ Grid.ColumnSpan = ” 2“ 保證金= ” 0,8,0,0“ />
<StackPanel x:Name = ”“ StackPanel1” Background = “”白色“ 保證金= ” 8,8,8,0“ Grid.Row = “ 1” 方向= “水平” 水平對齊= “中心” d:LayoutOverrides = “ Height” >
<Border BorderBrush = “ Black” BorderThickness = “ 1” CornerRadius = “ 8” Background = “” {DynamicResource HorBrush}“ Margin = ” 4“ Padding = ” 0“ Width = ” 40“ Height = “ 80” />
<Border BorderBrush = “黑色” BorderThickness = “ 1” CornerRadius = “ 8” 背景= “ {DynamicResource HorBrush}” 利潤= “ 4” 填充= “ 0” 寬度= “ 40” 高度= “ 25” VerticalAlignment = “頂部”/>
<Border BorderBrush = “黑色” BorderThickness = “ 1” CornerRadius = “ 8” 背景= “ {DynamicResource HorBrush}” 裕度= “ 4” 填充= “ 0” 寬度= “ 40” 高度= “ 25” />
<邊框 BorderBrush = “黑色” BorderThickness = “ 1” CornerRadius = “ 8” 背景= “ {DynamicResource HorBrush}” 邊距= “ 4” 填充= “ 0” 寬度= “ 40” 高度= “ 25” 垂直對齊= “底部” />
<邊框 BorderBrush = “黑色” BorderThickness = “ 1” CornerRadius = “ 8” 背景= “ {DynamicResource HorBrush}” 利潤= “ 4” 填充= “ 0” 寬度= “ 80” />
</ StackPanel>
<StackPanel x:Name = “ StackPanel2” 背景= “白色” 邊距= “ 8” Grid.Row = “ 2” 方向= “ Horizo??ntal” Horizo??ntalAlignment = “ Center” >
<Border BorderBrush = “黑色 BorderThickness = “ 1” CornerRadius = “ 8” Background =“ {DynamicResource HorBrush}” 保證金= “ 4” 填充= “ 0” 寬度= “ 40” 高度= “ 80” />
<Border BorderBrush = “黑色” BorderThickness = “ 1” CornerRadius = “ 8” 背景= “ {DynamicResource HorBrush}“ 邊距= ” 4“ 填充= ” 0“ 寬度= ” 40“ 高度= ” 25“ VerticalAlignment = ”頂部“ />
<Border BorderBrush = ”黑色“ BorderThickness = ”1“ CornerRadius = ” 8“ 背景= ” {DynamicResource HorBrush}“ 保證金= “ 4” 填充= “ 0” 寬度= “ 40” 高度= “ 25” />
<Border BorderBrush = “黑色” BorderThickness = “ 1” CornerRadius = “ 8” 背景= “ {DynamicResource HorBrush}” Margin = “ 4“ 填充= ” 0“ 寬度= ” 40“ 高度= ” 25“ VerticalAlignment = ”底部“ />
<Border BorderBrush = ”黑色“ BorderThickness = ” 1“ CornerRadius = ”8“ 背景= ” {DynamicResource HorBrush}“ 利潤= ” 4“ 填充= “ 0” 寬度= “ 80” />
</ StackPanel>
<矩形 填充= “#80808080” Grid.RowSpan = “ 3” StrokeThickness = “ 0” Grid.Column = “ 1” />
<TextBlock Text = “垂直StackPanels“ Horizo??ntalAlignment = ” Center“ Grid.ColumnSpan = ” 2“ d:LayoutOverrides = ” GridBox“ Grid.Column = ” 2“頁 邊距= ” 0,8,0,0“ />
<StackPanel x:Name = ”“ StackPanel3 ” 背景= “白色” 邊距= “ 8” Grid.Row = “ 1” Horizo??ntalAlignment = “居中” VerticalAlignment = “居中” Grid.Column = “ 2” Grid.RowSpan = “ 2” >
<Border BorderBrush = “黑色” BorderThickness = “ 1” CornerRadius = “ 8” 背景= “ {DynamicResource VerBrush}” 邊距= “ 4” 填充= “ 0” 寬度= “ 80” 高度= “ 40” />
<Border BorderBrush = “ Black” BorderThickness = “ 1” CornerRadius = “ 8” 背景= “ {DynamicResource VerBrush}” 保證金= “ 4” 填充=“ 0” Horizo??ntalAlignment = “左” 寬度= “ 25” 高度= “ 40” />
<Border BorderBrush = “黑色” BorderThickness = “ 1” CornerRadius = “ 8” 背景= “ {DynamicResource VerBrush}” 利潤= “ 4” 填充= “ 0” Horizo??ntalAlignment = “ Center” 寬度= “ 25” 高度= “ 40” />
<Border BorderBrush = “黑色” BorderThickness = “ 1” CornerRadius = “8“ 背景= ” {DynamicResource VerBrush}“ 保證金= ” 4“ 填充= “ 0” Horizo??ntalAlignment = “右” 寬度= “ 25” 高度= “ 40” />
<Border BorderBrush = “黑色” BorderThickness = “ 1” CornerRadius = “ 8” 背景= “ {DynamicResource VerBrush}” Margin = “ 4“ 填充= ” 0“ 高度= ” 80“ />
</ StackPanel>
<StackPanel x:Name = ” StackPanel4“ 背景= ”白色“ 邊距= ” 0,8,8,8“ Grid.Row = ” 1 VerticalAlignment = “居中” Grid.Column = “ 3” d:LayoutOverrides = “ GridBox” Grid.RowSpan = “ 2” >
<Border BorderBrush = “黑色” BorderThickness = “ 1” CornerRadius = “ 8” 背景= “ {DynamicResource VerBrush}” 利潤= “ 4” 寬度= “ 80” 高度= “ 40” />
<邊框 BorderBrush = “黑色” BorderThickness = “ 1” CornerRadius = “ 8” 背景= “ {DynamicResource VerBrush}” 邊距= “ 4” Horizo??ntalAlignment = “左“ 寬度= ” 25“ 高度= ” 40“ />
<Border BorderBrush = “黑色” BorderThickness = “ 1” CornerRadius = “ 8” 背景= “ {DynamicResource VerBrush}” 邊距= “ 4” Horizo??ntalAlignment = “ Center” 寬度= “ 25” 高度= “ 40” />
<Border BorderBrush = “黑色” BorderThickness = “ 1” CornerRadius = “ 8” 背景= “ {DynamicResource VerBrush}” 邊距= “ 4” Horizo??ntalAlignment = “右” 寬度= “ 25” 高度= “ 40” />
<Border BorderBrush = “黑色” BorderThickness = “ 1” CornerRadius = “ 8” 背景= “ {DynamicResource VerBrush}” 邊距= “ 4” 高度= “ 80” />
</ StackPanel>
</ Grid>
</pre>

LayoutPanelTutorialImg11.png

統(tǒng)一網(wǎng)格

UniformGrid控件提供的布局與Grid布局控件提供的布局相似堂湖。它的子控件組織成行和列的表格結(jié)構(gòu)。與Grid控件不同状土,您沒有對布局的細粒度控制无蜂。列寬和行高不能修改。這些大小會自動設(shè)置蒙谓,以確保所有列具有相同的寬度斥季,所有行具有相同的高度。此外累驮,在Grid控件允許您為每個子項指定單元格位置的情況下酣倾,UniformGrid則不允許舵揭。

<pre style="box-sizing: inherit; overflow: auto; font-family: Consolas, "Courier New", Courier, monospace; font-size: 0.9em; background: rgb(244, 244, 244); border: 1px solid rgb(230, 230, 230); color: rgb(0, 0, 0); margin: 0px; padding: 0.25em;"><Grid xmlns = “ http://schemas.microsoft.com/winfx/2006/xaml/presentation
xmlns:x = “ http://schemas.microsoft.com/winfx/2006/xaml
高度= “ 200” 寬度= “ 250” >

<UniformGrid>
<按鈕 內(nèi)容= “按鈕1” />
<按鈕 內(nèi)容= “按鈕2” />
<按鈕 內(nèi)容= “按鈕3” />
<按鈕 內(nèi)容= “按鈕4” />
</ UniformGrid>

</ Grid>
</pre>

LayoutPanelTutorialImg110.png

包裝面板

WrapPanel幾乎類似于StackPanel,但是當(dāng)它到達面板的邊緣時會產(chǎn)生新的一行躁锡。因此午绳,如果您調(diào)整WrapPanel的大小,內(nèi)容將自動換行到新行稚铣。因此,WrapPanel具有額外的靈活性墅垮,可以在空間很重要時包裝元素惕医。

另一個區(qū)別是WrapPanel根據(jù)內(nèi)容的大小確定大小,而不是像StackPanel那樣將其視為無窮大算色。您還可以使用屬性ItemWidthItemHeight指定WrapPanel為每個子元素保留的布局分區(qū)的大小抬伺。這些屬性優(yōu)先于元素自身的寬度和高度。

<pre style="box-sizing: inherit; overflow: auto; font-family: Consolas, "Courier New", Courier, monospace; font-size: 0.9em; background: rgb(244, 244, 244); border: 1px solid rgb(230, 230, 230); color: rgb(0, 0, 0); margin: 0px; padding: 0.25em;"><Grid
xmlns = “ http://schemas.microsoft.com/winfx/2006/xaml/presentation
xmlns:x = “ http://schemas.microsoft.com/winfx/2006/xaml
xmlns:d = “ http ://schemas.microsoft.com/expression/blend/2008“
xmlns:mc = ” http://schemas.openxmlformats.org/markup-compatibility/2006
mc:Ignorable = ” d“
Background = ” LightGray“
TextElement灾梦。前景= “黑色”
邊距= “ 10” Horizo??ntalAlignment = “中心” VerticalAlignment = “中心” >

<Grid.Resources>
<LinearGradientBrush x:Key = “ HorBrush” StartPoint = “ 0,0” EndPoint = “ 1,0” >
<GradientStop Offset = “ 0” Color = “#FF9BDEFF” />
<GradientStop Offset = “ 1 “ Color = ”#FF69B5FF“ />
</ LinearGradientBrush>
<LinearGradientBrush x:Key = ” VerBrush“ StartPoint = ” 0,0“ EndPoint = ” 0,1“ >
<GradientStop Offset = ” 0“ Color = ”#FF9BDEFF“ />
<GradientStop Offset = ” 1“ 顏色=“#FF69B5FF” />
</ LinearGradientBrush>
</Grid.Resources>

<Grid.ColumnDefinitions>
<ColumnDefinition Width = “ 250” />
<ColumnDefinition Width = “ 4” />
<ColumnDefinition Width = “ Auto” />
<ColumnDefinition Width = “ 170” />
</Grid.ColumnDefinitions>

<Grid.RowDefinitions>
<RowDefinition Height = “ Auto” />
<RowDefinition Height = “ 75” />
<RowDefinition Height = “ 170” />
<RowDefinition Height = “ Auto” />
</Grid.RowDefinitions>

<TextBlock Text = “ Horizo??ntal WrapPanels” Horizo??ntalAlignment = “ Center” Grid.ColumnSpan = “ 2” Margin = “ 0,8,0,0” d:LayoutOverrides = “ GridBox” />
<WrapPanel x:Name = “ WrapPanel1” 背景= “”白色“ Horizo??ntalAlignment = ”居中“頁 邊距= ” 8,8,8,0“ 方向= ”水平“ Grid.Row = ” 1“ VerticalAlignment = ”頂部“ ItemWidth = ”“ {Binding SelectedItem.Content峡钓,ElementName = HorItemsWidth} ” ItemHeight = “ {Binding SelectedItem.Content,ElementName = HorItemsHeight}” >
<邊框 BorderBrush = “黑色” BorderThickness = “ 1” CornerRadius = “ 8” 背景= “ {DynamicResource HorBrush}” 邊距= “ 4” 填充= “ 0” 寬度= “ 40” 高度= “ 25” />
<Border BorderBrush = “黑色” BorderThickness = “ 1” CornerRadius = “ 8” 背景= “ {DynamicResource HorBrush}”頁 邊距= “ 4” 填充= “ 0” 寬度= “ 40” 高度= “ 25” VerticalAlignment = “頂部” />
<Border BorderBrush = “黑色” BorderThickness = “ 1” CornerRadius = “ 8” 背景= “ {DynamicResource HorBrush}” 裕度= “ 4” 填充= “ 0” 寬度= “ 40” 高度= “ 25” />
<Border BorderBrush = “黑色” BorderThickness = “ 1“ CornerRadius = ” 8“ 背景= ” {DynamicResource HorBrush}“ 邊距= ” 4“ 填充= ” 0“ 寬度= ” 40“ 高度= ” 25“ VerticalAlignment = ”底部“/>
<Border BorderBrush = “黑色” BorderThickness = “ 1” CornerRadius = “ 8” 背景= “ {DynamicResource HorBrush}” 利潤= “ 4” 填充= “ 0” 寬度= “ 40” 高度= “ 25” />
<Border BorderBrush = “黑色” BorderThickness = “ 1” CornerRadius = “ 8“ 背景= ” {DynamicResource HorBrush}“ 保證金= ” 4“ 填充= ” 0“ 寬度= ” 40“ 高度= ” 25“ />
</ WrapPanel>
<WrapPanel x:Name = ” WrapPanel2“ 背景= “白色” 邊距= “ 8” 方向=“水平” Grid.Row = “ 2” ItemWidth = “” {Binding SelectedItem.Content若河,ElementName = HorItemsWidth}“ ItemHeight = ”“ {Binding SelectedItem.Content能岩,ElementName = HorItemsHeight}” >
<Border BorderBrush = “黑色” BorderThickness = “ 1 “” CornerRadius = “ 8” 背景= “ {DynamicResource HorBrush}” 保證金= “ 4” 填充= “ 0” 寬度= “ 40” 高度= “ 25” />
<Border BorderBrush = “黑色” BorderThickness = “1“ CornerRadius = ” 8“ 背景=“ {DynamicResource HorBrush}” 保證金= “ 4” 填充= “ 0” 寬度= “ 50” 高度= “ 25” />
<Border BorderBrush = “黑色” BorderThickness = “ 1” CornerRadius = “ 8” 背景= “ {DynamicResource HorBrush}“ 保證金= ” 4“ 填充= ” 0“ 寬度= ” 60“ 高度= ” 25“ />
<Border BorderBrush = ” Black“ BorderThickness = ” 1“ CornerRadius = ” 8“ 背景= “ {DynamicResource HorBrush}” 利潤= “ 4” 填充=“ 0” 寬度= “ 70” 高度= “ 25” />
<Border BorderBrush = “黑色” BorderThickness = “ 1” CornerRadius = “ 8” 背景= “ {DynamicResource HorBrush}” 保證金= “ 4” 填充= “ 0” 寬度= “ 80” 高度= “ 25” />
<Border BorderBrush = “黑色” BorderThickness = “ 1” CornerRadius = “ 8” 背景= “ {DynamicResource HorBrush}” 保證金= “ 4” 填充= “ 0” 寬度= “ 90” 高度= “ 25” />
<Border BorderBrush = “黑色” BorderThickness = “ 1” CornerRadius = “ 8” 背景= “ {DynamicResource HorBrush}” 邊距= “ 4” 填充= “ 0” 寬度= “ 100” 高度= “ 25” />
<Border BorderBrush = “黑色” BorderThickness = “ 1” CornerRadius = “ 8” 背景= “ {DynamicResource HorBrush}” 邊距= “ 4” 填充= “ 0” 寬度= “ 140” 高度= “25“ />
</ WrapPanel>
<矩形 填充= ”#80808080“ Grid.RowSpan = “ 4” StrokeThickness = “ 0” Grid.Column = “ 1” />
<TextBlock Text = “ Vertical WrapPanels” Horizo??ntalAlignment = “ Center” Grid.ColumnSpan = “ 2” Grid.Column = “ 2” Margin = “ 0,8,0,0” d:LayoutOverrides = “ GridBox” />
<WrapPanel x:Name = “ WrapPanel3” Background = “ White”頁 邊距= “ 8” Grid.Row = “ 1” Grid.Column = “ 2 “ Grid.RowSpan = ” 2“ 方向= “垂直” VerticalAlignment = “中心” Horizo??ntalAlignment = “ Center” ItemWidth = “” {Binding SelectedItem.Content,ElementName = VerItemsWidth}“ ItemHeight = ”“ {Binding SelectedItem.Content萧福,ElementName = VerItemsHeight}” >
<Border BorderBrush = “黑色” BorderThickness = “ 1” CornerRadius = “ 8 “ 背景= ” {DynamicResource VerBrush}“ 邊距= ” 4“ 填充= ” 0“ 寬度= ” 25“ 高度= ” 40“ />
<Border BorderBrush = ”黑色“ BorderThickness = ” 1“ CornerRadius = “ 8” 背景= “ {DynamicResource VerBrush}” 保證金= “ 4” 填充= “ 0” Horizo??ntalAlignment = “左” 寬度= “ 25” 高度= “ 40” />
<Border BorderBrush = “黑色” BorderThickness = “ 1” CornerRadius = “ 8” 背景= “ {DynamicResource VerBrush }“ 保證金= ” 4“ 填充= ” 0“ Horizo??ntalAlignment = ”中心“ 寬度= ” 25“ 高度= ” 40“ />
<Border BorderBrush = ”黑色“ BorderThickness = “ 1” CornerRadius = “ 8” Background =“ {DynamicResource VerBrush}” 保證金= “ 4” 填充= “ 0” Horizo??ntalAlignment = “右” 寬度= “ 25” 高度= “ 40” />
<Border BorderBrush = “黑色” BorderThickness = “ 1” CornerRadius = “ 8” 背景= “ {DynamicResource VerBrush}” 保證金= “ 4” 填充= “ 0” 高度= “ 40” 寬度= “ 25” />
<Border BorderBrush = “黑色” BorderThickness = “1“ CornerRadius = ” 8“ 背景= ” {DynamicResource VerBrush}“ 保證金= “ 4” 填充= “ 0” 高度= “ 40” 寬度= “ 25” />
</ WrapPanel>
<WrapPanel x:Name = “” WrapPanel4“ 背景= ”白色“ 保證金= ” 0,8,8,8 “ Grid.Row = ” 1“ Grid.Column = ” 3“ Grid.RowSpan = ” 2“ 方向= ”垂直“ ItemWidth = ”“ {Binding SelectedItem.Content拉鹃,ElementName = VerItemsWidth}” ItemHeight = “” {Binding SelectedItem.Content, ElementName = VerItemsHeight}” >
<邊框 BorderBrush = “黑色” BorderThickness = “ 1” CornerRadius =“ 8” 背景= “ {DynamicResource VerBrush}” 保證金= “ 4” 寬度= “ 25” 高度= “ 40” />
<Border BorderBrush = “黑色” BorderThickness = “ 1” CornerRadius = “ 8” 背景= “ {DynamicResource VerBrush}“ 邊距= ” 4“ 寬度= ” 25“ 高度= ” 50“ />
<Border BorderBrush = ”黑色“ BorderThickness = ” 1“ CornerRadius = ” 8“ 背景= ”{DynamicResource VerBrush}“ 保證金= ” 4“ 寬度= ” 25“ 高度=“ 60” />
<Border BorderBrush = “黑色” BorderThickness = “ 1” CornerRadius = “ 8” 背景= “ {DynamicResource VerBrush}” 邊距= “ 4” 寬度= “ 25” 高度= “ 70” />
<Border BorderBrush = “黑色” BorderThickness = “ 1” CornerRadius = “ 8” 背景= “ {DynamicResource VerBrush}” 邊距= “ 4” 高度= “ 80” 寬度= “ 25” />
<邊框 BorderBrush = “黑色” BorderThickness = “ 1” CornerRadius =“ 8” 背景= “ {DynamicResource VerBrush}” 邊距= “ 4” 高度= “ 90” 寬度= “ 25” />
<Border BorderBrush = “黑色” BorderThickness = “ 1” CornerRadius = “ 8” 背景= “ {DynamicResource VerBrush}“ 保證金= ” 4“ 高度= ” 100“ 寬度= ” 25“ />
<Border BorderBrush = ”黑色“ BorderThickness = ” 1“ CornerRadius = ” 8“ 背景= ”{DynamicResource VerBrush}“ 保證金= ” 4“ 高度= ” 140“ 寬度=“ 25” />
</ WrapPanel>
<StackPanel Margin = “ 8,0,8,8” Grid.Row = “ 4” Orientation = “ Horizo??ntal” >
<TextBlock Text = “ Items:” VerticalAlignment = “” Center“ />
<TextBlock Text = “ Width” VerticalAlignment = “ Center” 邊距= “ 4,2,0,0” FontSize = “ 10” />
<ComboBox x:Name = “ HorItemsWidth” 邊距= “ 2,0,0,0” FontSize = “ 10” VerticalAlignment = “居中” >
<ComboBoxItem 內(nèi)容= “自動” IsSelected = “ True” />
<ComboBoxItem Content = “ 20” />
<ComboBoxItem Content = “ 80” />
</ ComboBox>
<TextBlock Text = “ Height” VerticalAlignment = “” Center“頁 邊距= ” 4,2,0鲫忍, 0“ FontSize = ” 10“ />
<ComboBox x:Name = ” HorItemsHeight“ 裕度= ” 2,0,0,0“ FontSize = ” 10“ VerticalAlignment = ” Center“ >
<ComboBoxItem Content = ” Auto“ IsSelected = “ True” />
<ComboBoxItem Content = “ 30”/>
<ComboBoxItem Content = “ 60” />
</ ComboBox>
</ StackPanel>
<StackPanel Margin = “ 8,0,8,8” Grid.Row = “ 4” Orientation = “ Horizo??ntal” Grid.Column = “ 2 “ Grid.ColumnSpan = ” 3“ >
<TextBlock 文本= ”項目:“ VerticalAlignment = ”居中“ />
<TextBlock 文本= ”寬度“ VerticalAlignment = ”居中“頁 邊距= ” 4,2,0,0“ FontSize = ” 10“ />
<ComboBox x:Name = “ VerItemsWidth” 邊距= “ 2,0,0,0” FontSize = “ 10” VerticalAlignment = “ Center” >
<ComboBoxItem Content = “ Auto” IsSelected = “ True” />
<ComboBoxItem Content = “ 20” />
<ComboBoxItem Content = “ 80” />
</ ComboBox>
<TextBlock 文本= “ Height” VerticalAlignment = “中心” 保證金= “ 4,2,0,0” FontSize = “ 10” />
<ComboBox x:Name = “ VerItemsHeight” 保證金= “ 2,0,0,0” FontSize = “ 10” VerticalAlignment = “ Center” >
<ComboBoxItem Content = “ Auto” IsSelected = “ True” />
<ComboBoxItem Content = “ 30” />
<ComboBoxItem Content = “ 60” />
</ ComboBox>
</ StackPanel>
</ Grid>
</pre>

LayoutPanelTutorialImg12.png

碼頭面板

DockPanel是用于確定應(yīng)用程序布局的最廣泛使用的控件膏燕。它使用附加的屬性DockPanel.Dock來確定每個包含的元素的位置。有效值為Top悟民,Bottom坝辫,LeftRight

如果未指定包含元素的高度或?qū)挾壬淇鳎鼘⒄加谜麄€可用區(qū)域近忙。

<pre style="box-sizing: inherit; overflow: auto; font-family: Consolas, "Courier New", Courier, monospace; font-size: 0.9em; background: rgb(244, 244, 244); border: 1px solid rgb(230, 230, 230); color: rgb(0, 0, 0); margin: 0px; padding: 0.25em;"><Grid
xmlns = “ http://schemas.microsoft.com/winfx/2006/xaml/presentation
xmlns:x = “ http://schemas.microsoft.com/winfx/2006/xaml
xmlns:d = “ http ://schemas.microsoft.com/expression/blend/2008“
xmlns:mc = ” http://schemas.openxmlformats.org/markup-compatibility/2006
mc:Ignorable = ” d“
Background = ” LightGray“
TextElement。前景= “黑色”
邊距= “ 10” Horizo??ntalAlignment = “中心” VerticalAlignment = “中心” >

<Grid.Resources>
<LinearGradientBrush x:Key = “ BgBrush” StartPoint = “ 0,0” EndPoint = “ 1,1” >
<GradientStop Offset = “ 0” Color = “#FF9BDEFF” />
<GradientStop Offset = “ 1 “ Color = ”#FF69B5FF“ />
</ LinearGradientBrush>
</Grid.Resources>

<Grid.RowDefinitions>
<RowDefinition Height = “ Auto” />
<RowDefinition />
<RowDefinition Height = “ Auto” />
</Grid.RowDefinitions>

<StackPanel Orientation = “ Horizo??ntal” Horizo??ntalAlignment = “ Center” Margin = “ 0,8,0,0” >
<TextBlock Text = “ DockPanel大兄侨蟆:” />
<TextBlock Text = “” {Binding ActualWidth银锻,ElementName = DockPanel}“ / >
<TextBlock Text = “ x” />
<TextBlock Text = “” {Binding ActualHeight,ElementName = DockPanel}“ />
</ StackPanel>
<DockPanel x:Name = ” DockPanel“ 背景= ” White“ 高度= ” 240“ 保證金= “ 8” Grid.Row = “ 1” 寬度= “ 380” LastChildFill = “ {綁定已檢查做鹰,ElementName = LastChildFills}” >
<邊框 BorderBrush = “黑色” BorderThickness = “ 1” CornerRadius = “ 8” 背景= “ {DynamicResource BgBrush}” DockPanel.Dock = “”頂部“ 保證金= ” 4“ 填充= “ 0” >
<網(wǎng)格>
<StackPanel Orientation = “ Horizo??ntal” Horizo??ntalAlignment = “ Center” VerticalAlignment = “” Center“ Margin = ” 8“ >
<TextBlock Text = ”dock =“ />
<TextBlock Text =“ {Binding(DockPanel.Dock)击纬,RelativeSource = {RelativeSource AncestorType = {x:類型邊框}}}” />
</ StackPanel>
</ Grid>
</ Border>
<Border BorderBrush = “ Black” BorderThickness = “ 1” CornerRadius = “ 8” 背景= “ {DynamicResource BgBrush}” DockPanel.Dock = “ Bottom” Margin = “ 4” Padding = “ 0” >
<Grid>
<StackPanel Orientation = “ Horizo??ntal” Horizo??ntalAlignment = “ Center” VerticalAlignment = “ Center ” Margin = “ 8” >
<TextBlock Text = “ dock =”/>
<TextBlock Text = “ {Binding(DockPanel.Dock),RelativeSource = {RelativeSource AncestorType = {x:Type Border}}}}” />
</ StackPanel>
</ Grid>
</ Border>
<Border BorderBrush = “黑色“ BorderThickness = ” 1“ CornerRadius = ” 8“ 背景= ” {DynamicResource BgBrush}“ 保證金= ” 4“ 填充= ” 0“ >
<Grid>
<StackPanel Orientation = ” Horizo??ntal“ Horizo??ntalAlignment = ” Center“ VerticalAlignment = ” Center“ Margin = “ 8” >
<TextBlock Text = “ dock =”/>
<TextBlock Text = “ {Binding(DockPanel.Dock)钾麸,RelativeSource = {RelativeSource AncestorType = {x:Type Border}}}}” />
</ StackPanel>
</ Grid>
</ Border>
<Border BorderBrush = “黑色“ BorderThickness = ” 1“ CornerRadius = ” 8“ 背景= ” {DynamicResource BgBrush}“ DockPanel.Dock = ”“右” 保證金= “ 4” 填充= “ 0” >
<Grid>
<StackPanel Orientation = “ Horizo??ntal” Horizo??ntalAlignment = “中央” VerticalAlignment = “居中” 利潤= “ 8” >
<TextBlock Text = “ dock =” />
<TextBlock Text = “” {Binding(DockPanel.Dock)更振,RelativeSource = {RelativeSource AncestorType = {x:Type Border}}}}“” />
</ StackPanel>
</ Grid>
</邊框>
<邊框 BorderBrush = “黑色” BorderThickness = “ 1” CornerRadius = “ 8” 背景= “ {DynamicResource BgBrush}” DockPanel.Dock = “頂部” 保證金= “ 4” 填充= “ 0” >
<網(wǎng)格>
<StackPanel 方向= “水平” Horizo??ntalAlignment = “中心” VerticalAlignment = “中心” Margin = “ 8” >
<TextBlock Text = “ dock =” />
<TextBlock Text = “” {Binding(DockPanel.Dock)炕桨,RelativeSource = {RelativeSource AncestorType = {x:Type Border}}}“ />
</ StackPanel>
</ Grid>
</ Border>
<Border BorderBrush = “黑色” BorderThickness = “ 1” CornerRadius = “ 8” 背景= “ {DynamicResource BgBrush}” DockPanel.Dock = “” {Binding SelectedItem.Content,ElementName = Positioning}“ 邊距= “ 4” 填充= “ 0” >
<Grid>
<StackPanel Horizo??ntalAlignment = “居中” VerticalAlignment = “居中”頁 邊距= “ 8” >
<TextBlock 文本= “最后一個孩子” FontWeight = “粗體” />
<StackPanel 方向= “水平” >
<TextBlock 文本= “ dock =” />
<TextBlock 文本= “ {綁定(DockPanel.Dock)肯腕,RelativeSource = {RelativeSource AncestorType = {x:類型邊框}}}“” />
</ StackPanel>
</ StackPanel>
</ Grid>
</ Border>
</ DockPanel>
<StackPanel Grid.Row = “ 2” 保證金= “ 8,0,8,8” 方向= “ Horizo??ntal” >
<TextBlock 文字= “上一個孩子:” 邊距= “ 0,0,16,0” VerticalAlignment = “中心” FontWeight = “粗體” />
<ComboBox x:Name = “定位” 邊距= “ 0,0,4,0” VerticalAlignment = “居中” >
<ComboBoxItem 內(nèi)容= “左” IsSelected = “真” />
<ComboBoxItem 內(nèi)容= “右” />
<ComboBoxItem 內(nèi)容= “頂部” />
<ComboBoxItem 內(nèi)容= “底部” />
</ ComboBox>
<TextBlock Text = “ Positioning” Margin =“ 0,0,16,0” VerticalAlignment = “居中” />
<CheckBox x:Name = “ LastChildFills” Content = “填充剩余空間” IsChecked = “ False” VerticalAlignment = “居中” Margin = “ 0,0,8 献宫,0“ Foreground = ” Black“ />
</ StackPanel>
</ Grid>
</pre>

LayoutPanelTutorialImg13.png

如圖所示,需要在每個單獨的元素上明確提及Dock屬性实撒。聲明順序也起著至關(guān)重要的作用姊途。如果將連續(xù)兩個元素的停靠設(shè)置為“頂部”知态,則意味著這些元素將垂直堆疊捷兰。

名為LastChildFill的屬性可將剩余空間填充到最后一個元素中。如果不需要负敏,可以將其設(shè)置為false贡茅。

格網(wǎng)

網(wǎng)格是功能最強大的面板之一。它可以用來形成一個填充可用空間的表其做。您可以使用屬性RowDefinitionsColumnDefinitions定義網(wǎng)格的行和列顶考。大小的小區(qū)的屬性高度寬度RowDefinitionColumnDefinition分別被使用。有效值為:

  • 自動:大小由放置在表格單元格中的元素確定妖泄。
  • 星號:使用星號時驹沿,表示將使用比率進行測量〉负“ 2 *”表示“ 1 *”的兩倍甚负。因此,如果要以2:1的比例制作兩列审残,則將寬度分別設(shè)置為“ 2 *”和“ 1 *”梭域。默認值為“ 1 *”。
  • 絕對:您還可以指定像素的高度和寬度的絕對值搅轿。

可以使用行的MinHeight / MaxHeight和列的MinWidth / MaxWidth來限制元大小病涨。這些屬性僅允許使用絕對值。

要將元素放在表格單元格中璧坟,請使用附加的屬性Grid.RowGrid.Column既穆。元素還可以分別使用附加的屬性Grid.RowSpanGrid.ColSpan跨越行和列的總數(shù)。

<pre style="box-sizing: inherit; overflow: auto; font-family: Consolas, "Courier New", Courier, monospace; font-size: 0.9em; background: rgb(244, 244, 244); border: 1px solid rgb(230, 230, 230); color: rgb(0, 0, 0); margin: 0px; padding: 0.25em;"><Grid
xmlns = “ http://schemas.microsoft.com/winfx/2006/xaml/presentation
xmlns:x = “ http://schemas.microsoft.com/winfx/2006/xaml
xmlns:d = “ http ://schemas.microsoft.com/expression/blend/2008“
xmlns:mc = ” http://schemas.openxmlformats.org/markup-compatibility/2006
mc:Ignorable = ” d“
Background = ” LightGray“
TextElement雀鹃。前景= “黑色”
邊距= “ 10” Horizo??ntalAlignment = “中心” VerticalAlignment = “中心” >

<Grid.Resources>
<LinearGradientBrush x:Key = “ BgBrush” StartPoint = “ 0,0” EndPoint = “ 1,1” >
<GradientStop Offset = “ 0” Color = “#FF9BDEFF” />
<GradientStop Offset = “ 1 “ Color = ”#FF69B5FF“ />
</ LinearGradientBrush>
</Grid.Resources>

<Grid.ColumnDefinitions>
<ColumnDefinition Width = “自動” />
<ColumnDefinition />
</Grid.ColumnDefinitions>

<Grid.RowDefinitions>
<RowDefinition Height = “ Auto” />
<RowDefinition Height = “ Auto” />
<RowDefinition />
</Grid.RowDefinitions>

<StackPanel Orientation = “ Horizo??ntal” Horizo??ntalAlignment = “ Center” 邊距= “ 0,8,0,0” Grid.ColumnSpan = “ 2” >
<TextBlock Text = “網(wǎng)格大谢霉ぁ:” />
<TextBlock Text = “” {Binding ActualWidth ,ElementName = Grid}“ />
<TextBlock Text = ” x“ />
<TextBlock Text = ”“ {Binding ActualHeight黎茎,ElementName = Grid}” />
</ StackPanel>
<Grid Grid.Column = “ 1” Grid.Row = “ 1” 保證金= “ 8囊颅,8,8,0“ >
<Grid.ColumnDefinitions>
<ColumnDefinition Width = “ 100” />
<ColumnDefinition Width = “ 87” />
<ColumnDefinition Width = “ *” />
<ColumnDefinition Width = “ 2 *” />
</Grid.ColumnDefinitions>
<TextBlock Text = “ 100” Horizo??ntalAlignment = “ Center” VerticalAlignment = “ Center” />
<TextBlock 文本= “ Auto” Horizo??ntalAlignment = “ Center” VerticalAlignment = “ Center” Grid.Column = “ 1” />
<TextBlock Text = “ *” Horizo??ntalAlignment = “ Center” VerticalAlignment = “ Center” Grid.Column = “ 2” />
<TextBlock Text = “ 2 *” Horizo??ntalAlignment = “ Center” VerticalAlignment = “” Center“ Grid.Column = ” 3“ />
</ Grid>
<Grid Grid.Column = “ 0” Grid.Row = “ 2” 保證金= “ 8,8,0,8” >
<Grid.RowDefinitions>
<RowDefinition Height = “ 140” />
<RowDefinition Height = “ 90” />
<RowDefinition Height = “” *“ />
<RowDefinition Height = ” 2 *“ />
</Grid.RowDefinitions>
<TextBlock Text = “ 140” Horizo??ntalAlignment = “ Center” VerticalAlignment = “ Center” />
<TextBlock Text = “ Auto” Horizo??ntalAlignment = “ Center” VerticalAlignment = “” Center“ Grid.Row = ” 1“ / >
<TextBlock Text = “ 0.333 *” Horizo??ntalAlignment = “ Center” VerticalAlignment = “” Center“ Grid.Row = ” 2“ />
<TextBlock Text = ” 0.667 *“ Horizo??ntalAlignment = “居中” VerticalAlignment = “居中” Grid.Row =“ 3” />
</ Grid>
<Grid x:Name = “ Grid” 寬度= “ 500” 高度= “ 400” Grid.Row = “ 2” 背景= “白色” 邊距= “ 8” Grid.Column = “ 1“ >
<Grid.ColumnDefinitions>
<ColumnDefinition Width = ” 100“ />
<ColumnDefinition Width = ” Auto“ />
<ColumnDefinition Width = ” *“ />
<ColumnDefinition Width = ” 2 *“ />
</ Grid。ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height = “ 140”/>
<RowDefinition Height = “ Auto” />
<RowDefinition Height = “ 0.3333 *” />
<RowDefinition Height = “ 0.6667 *” />
</Grid.RowDefinitions>
<Border BorderBrush = “ Black” BorderThickness = “ 1” CornerRadius = “ 8” 背景= “ {DynamicResource BgBrush}” 保證金= “ 4” 填充= “ 0” >
<StackPanel Horizo??ntalAlignment = “ Center” VerticalAlignment = “” Center“ Margin = “ 8” >
<StackPanel Orientation = “水平” 保證金= “ 0” Horizo??ntalAlignment = “ Left” VerticalAlignment = “” Center“ >
<TextBlock Text = ” row =“ />
<TextBlock Text = ”“ {Binding(Grid.Row),RelativeSource = {RelativeSource AncestorType = {x:Type Border }}}“ />
</ StackPanel>
<StackPanel Orientation = ” Horizo??ntal“ Margin = ” 0“ Horizo??ntalAlignment = ” Left“ VerticalAlignment = ”“ Center” >
<TextBlock Text = “ col =” />
<TextBlock Text = “{Binding(Grid.Column)踢代,RelativeSource = {RelativeSource AncestorType = {x:類型邊框}}}“/>
</ StackPanel>
<StackPanel Orientation = “ Horizo??ntal” Margin = “ 0” Horizo??ntalAlignment = “ Left” VerticalAlignment = “” Center“ >
<TextBlock Text = ” rowSpan =“ />
<TextBlock Text = ”“ {Binding(Grid.RowSpan )盲憎,RelativeSource = {RelativeSource AncestorType = {x:Type Border}}}“ /> />
</ StackPanel>
<StackPanel Orientation = ” Horizo??ntal“ Margin = ” 0“ Horizo??ntalAlignment = ” Left“ VerticalAlignment = ”“ Center” >
<TextBlock Text = “ colSpan =” />
<TextBlock Text = “ {Binding(Grid.ColumnSpan),RelativeSource = {RelativeSource AncestorType = {x:Type Border}}}”“ />
</ StackPanel>
</ StackPanel>
</ Border>
<Border BorderBrush = ” Black“ BorderThickness = “ 1” CornerRadius = “ 8” 背景= “ {DynamicResource BgBrush}” Grid.Column = “ 1” 保證金= “ 4” 填充= “ 0” >
<StackPanel Horizo??ntalAlignment = “ Center” VerticalAlignment = “” Center“ Margin = ” 8英寸>
<StackPanel 方向= “水平” 邊距=“ 0” Horizo??ntalAlignment = “左” VerticalAlignment = “” Center“ >
<TextBlock Text = ” row =“ />
<TextBlock Text = ”“ {Binding(Grid.Row)胳挎,RelativeSource = {RelativeSource AncestorType = {x:Type Border}}} }“ />
</ StackPanel>
<StackPanel Orientation = ” Horizo??ntal“ Margin = ” 0“ Horizo??ntalAlignment = ” Left“ VerticalAlignment = ”“ Center” >
<TextBlock Text = “ col =” />
<TextBlock Text = “” {綁定(網(wǎng)格饼疙。列),RelativeSource = {RelativeSource AncestorType = {x:類型邊框}}}“” />
</ StackPanel>
<StackPanel Orientation = “ Horizo??ntal” Margin = “ 0” Horizo??ntalAlignment = “ Left” VerticalAlignment = “” Center“ >
<TextBlock Text = ” rowSpan =“ />
<TextBlock Text = ”“ {Binding(Grid.RowSpan)慕爬, RelativeSource = {RelativeSource AncestorType = {x:類型邊框}}}“ />
</ StackPanel>
<StackPanel Orientation = ” Horizo??ntal“ Margin = ” 0“ Horizo??ntalAlignment = ” Left“ VerticalAlignment = ”“ Center” >
<TextBlock Text = “ colSpan =” />
<TextBlock Text = “ {Binding(Grid.ColumnSpan)窑眯,RelativeSource = {RelativeSource AncestorType = {x:Type Border}}}”“ />
</ StackPanel>
</ StackPanel>
</ Border>
<Border BorderBrush = ”黑色“ BorderThickness = ” 1“ CornerRadius = ” 8“ 背景= ” {DynamicResource BgBrush}“ Grid.Column = ” 2“ 保證金= ” 4“ 填充= ” 0“ >
<StackPanel Horizo??ntalAlignment = ” Center“ VerticalAlignment = ”“ Center” 利潤= “ 8” >
<StackPanel 方向= “水平” 邊距= “ 0” Horizo??ntalAlignment = “左” VerticalAlignment = “居中” >
<TextBlock Text = “ row =” />
<TextBlock Text = “” {Binding(Grid.Row),RelativeSource = {RelativeSource AncestorType = {x:Type Border}}}}“ / >
</ StackPanel>
<StackPanel Orientation = “ Horizo??ntal” Margin = “ 0” Horizo??ntalAlignment = “ Left” VerticalAlignment = “” Center“ >
<TextBlock Text = ” col =“ />
<TextBlock Text = ”“ {Binding(Grid.Column) 医窿,RelativeSource = {RelativeSource AncestorType = {x:類型邊框}}}“” />
</ StackPanel>
<StackPanel Orientation = “ Horizo??ntal” Margin = “ 0” Horizo??ntalAlignment = “ Left” VerticalAlignment = “ Center” >
<TextBlock Text = “ rowSpan =” />
<TextBlock Text = “” {Binding(Grid.RowSpan)挖垛,RelativeSource = {RelativeSource AncestorType = {x:類型邊框}}}“” />
</ StackPanel>
<StackPanel Orientation = “ Horizo??ntal” 保證金= “ 0” Horizo??ntalAlignment = “ Left” VerticalAlignment = “ Center” >
<TextBlock Text = “ colSpan =” />
<TextBlock Text =“ {Binding(Grid.ColumnSpan)害幅,RelativeSource = {RelativeSource AncestorType = {x:Type Border}}}” />
</ StackPanel>
</ StackPanel>
</ Border>
<Border BorderBrush = “黑色” BorderThickness = “ 1” CornerRadius = “ 8” 背景= “ {DynamicResource BgBrush}” Grid.Column = “ 3” 保證金= “ 4” 填充= “ 0” >
<StackPanel Horizo??ntalAlignment = “ Center” VerticalAlignment = “” Center“ 保證金= ” 8“ >
<StackPanel Orientation = “ Horizo??ntal” Margin = “ 0” Horizo??ntalAlignment =“左” VerticalAlignment = “中心” >
<TextBlock 文本= “” row =“ />
<TextBlock 文本= ”“ {Binding(Grid.Row)枉阵,RelativeSource = {RelativeSource AncestorType = {x:類型邊框}}}”“ />
< / StackPanel>
<StackPanel Orientation = “ Horizo??ntal” Margin = “ 0” Horizo??ntalAlignment = “ Left” VerticalAlignment = “” Center“ >
<TextBlock Text = ” col =“ />
<TextBlock Text = ”“ {Binding(Grid.Column)砂吞,RelativeSource = {RelativeSource AncestorType = {x:鍵入Border}}}“ />
</ StackPanel>
<StackPanel Orientation = “ Horizo??ntal” Margin = “ 0” Horizo??ntalAlignment = “ Left” VerticalAlignment = “ Center” >
<TextBlock Text = “ rowSpan =” />
<TextBlock Text = “” {Binding(Grid.RowSpan)铛铁,RelativeSource = {RelativeSource AncestorType = {x:Type Border}}}“ /> />
</ StackPanel>
<StackPanel Orientation = ” Horizo??ntal“ Margin = ” 0“ Horizo??ntalAlignment = ” Left“ VerticalAlignment = ” = “ Center” >
<TextBlock Text = “” colSpan =“/>
<TextBlock Text =“ {Binding(Grid.ColumnSpan)隔显,RelativeSource = {RelativeSource AncestorType = {x:Type Border}}}” />
</ StackPanel>
</ StackPanel>
</ Border>
<Border BorderBrush = “黑色” BorderThickness = “ 1” CornerRadius = “ 8” 背景= “ {DynamicResource BgBrush}” 保證金= “ 4” 填充= “ 0” Grid.Row = “ 1” Grid.ColumnSpan = “ 2” >
<StackPanel Horizo??ntalAlignment = “ Center” VerticalAlignment = “ Center” 保證金= “ 8”>
<StackPanel 方向= “水平” 邊距=“ 0” Horizo??ntalAlignment = “左” VerticalAlignment = “” Center“ >
<TextBlock Text = ” row =“ />
<TextBlock Text = ”“ {Binding(Grid.Row),RelativeSource = {RelativeSource AncestorType = {x:Type Border}}} }“ />
</ StackPanel>
<StackPanel Orientation = ” Horizo??ntal“ Margin = ” 0“ Horizo??ntalAlignment = ” Left“ VerticalAlignment = ”“ Center” >
<TextBlock Text = “ col =” />
<TextBlock Text = “” {綁定(網(wǎng)格饵逐。列)括眠,RelativeSource = {RelativeSource AncestorType = {x:類型邊框}}}“” />
</ StackPanel>
<StackPanel Orientation = “ Horizo??ntal” Margin = “ 0” Horizo??ntalAlignment = “ Left” VerticalAlignment = “” Center“ >
<TextBlock Text = ” rowSpan =“ />
<TextBlock Text = ”“ {Binding(Grid.RowSpan), RelativeSource = {RelativeSource AncestorType = {x:類型邊框}}}“ />
</ StackPanel>
<StackPanel Orientation = ” Horizo??ntal“ Margin = ” 0“ Horizo??ntalAlignment = ” Left“ VerticalAlignment = ”“ Center” >
<TextBlock Text = “ colSpan =” />
<TextBlock Text = “ {Binding(Grid.ColumnSpan)倍权,RelativeSource = {RelativeSource AncestorType = {x:Type Border}}}”“ />
</ StackPanel>
</ StackPanel>
</ Border>
<Border BorderBrush = ” Black“ BorderThickness = ” 1“ CornerRadius = ” 8“ 背景= ” {DynamicResource BgBrush}“ Grid.Column = ” 2“頁 邊距= ” 4“ 填充= ” 0“ Grid.Row = ” 1“ >
<StackPanel Horizo??ntalAlignment = ” Center“ VerticalAlignment = ”中心“ 保證金= ”8“ >
<StackPanel Orientation = ”水平“ 保證金= “ 0” Horizo??ntalAlignment = “ Left” VerticalAlignment = “” Center“ >
<TextBlock Text = ” row =“ />
<TextBlock Text = ”“ {Binding(Grid.Row)掷豺,RelativeSource = {RelativeSource AncestorType = {x:Type Border }}}“ />
</ StackPanel>
<StackPanel Orientation = ” Horizo??ntal“ Margin = ” 0“ Horizo??ntalAlignment = ” Left“ VerticalAlignment = ”“ Center” >
<TextBlock Text = “ col =” />
<TextBlock Text = “{Binding(Grid.Column),RelativeSource = {RelativeSource AncestorType = {x:類型邊框}}}“/>
</ StackPanel>
<StackPanel Orientation = “ Horizo??ntal” Margin = “ 0” Horizo??ntalAlignment = “ Left” VerticalAlignment = “” Center“ >
<TextBlock Text = ” rowSpan =“ />
<TextBlock Text = ”“ {Binding(Grid.RowSpan )薄声,RelativeSource = {RelativeSource AncestorType = {x:Type Border}}}“ /> />
</ StackPanel>
<StackPanel Orientation = ” Horizo??ntal“ Margin = ” 0“ Horizo??ntalAlignment = ” Left“ VerticalAlignment = ”“ Center” >
<TextBlock Text = “ colSpan =” />
<TextBlock Text = “ {Binding(Grid.ColumnSpan)当船,RelativeSource = {RelativeSource AncestorType = {x:Type Border}}}”“ />
</ StackPanel>
</ StackPanel>
</ Border>
<Border BorderBrush = ” Black“ BorderThickness = “ 1” CornerRadius = “ 8” 背景= “ {DynamicResource BgBrush}” Grid.Column = “ 3” 保證金= “ 4” 填充= “ 0” Grid.Row = “ 1” Grid.RowSpan = “ 2” >
< StackPanel Horizo??ntalAlignment = “居中” VerticalAlignment = “居中” 利潤= “ 8” >
<StackPanel Orientation = “ Horizo??ntal” Margin = “ 0” Horizo??ntalAlignment = “ Left” VerticalAlignment = “ Center” >
<TextBlock Text = “ row =” />
<TextBlock Text = “” {Binding(Grid.Row),RelativeSource = {RelativeSource AncestorType = {x:類型邊框}}}“” />
</ StackPanel>
<StackPanel Orientation = “ Horizo??ntal” Margin = “ 0” Horizo??ntalAlignment = “ Left” VerticalAlignment = “” Center“ >
<TextBlock Text = ”col =“ />
<TextBlock Text =“ {Binding(Grid.Column)默辨,RelativeSource = {RelativeSource AncestorType = {x:Type Border}}}” />
</ StackPanel>
<StackPanel Orientation = “ Horizo??ntal” Margin = “ 0” Horizo??ntalAlignment = “ Left” VerticalAlignment = “”中心” >
<TextBlock Text = “ rowSpan =” />
<TextBlock Text = “” {Binding(Grid.RowSpan)德频,RelativeSource = {RelativeSource AncestorType = {x:Type Border}}}“” />
</ StackPanel>
<StackPanel 方向= “水平” 保證金= “ 0” Horizo??ntalAlignment = “左” VerticalAlignment = “中心” >
<TextBlock Text = “ colSpan =” />
<TextBlock Text = “” {Binding(Grid.ColumnSpan),RelativeSource = {RelativeSource AncestorType = {x:Type Border}}}}“ />
</ StackPanel>
</ StackPanel>
</邊框>
<邊框 BorderBrush = “黑色” BorderThickness = “ 1” CornerRadius = “ 8” 背景= “ {DynamicResource BgBrush}” 保證金= “ 4” 填充= “ 0” Grid.Row = “ 2” Grid.ColumnSpan = “ 3 “ >
<StackPanel Horizo??ntalAlignment = “ Center” VerticalAlignment = “” Center“ 邊距=“ 8,4,8,3” 方向= “水平” >
<StackPanel 方向= “垂直” 保證金= “ 10,0,0,0” >
<StackPanel 方向= “水平” 保證金= “ 0” Horizo??ntalAlignment = “左“ VerticalAlignment = ” Center“ >
<TextBlock Text = ” row =“ />
<TextBlock Text = ”“ {Binding(Grid.Row)缩幸,RelativeSource = {RelativeSource AncestorType = {x:Type Border}}}”“ />
</ StackPanel >
<StackPanel 方向= “水平“ 保證金= ” 0“ Horizo??ntalAlignment = ”左“ VerticalAlignment = “居中” >
<TextBlock Text = “ col =” />
<TextBlock Text = “” {Binding(Grid.Column)壹置,RelativeSource = {RelativeSource AncestorType = {x:Type Border}}}}“ />
</ StackPanel>
</ StackPanel>
<StackPanel Orientation = “ Vertical” Margin = “ 10,0,0,0” >
<StackPanel Orientation = “ Horizo??ntal” Margin = “ 0” Horizo??ntalAlignment = “ Left” VerticalAlignment = “ Center” >
<TextBlock Text = ”rowSpan =“ />
<TextBlock Text =“ {Binding(Grid.RowSpan),RelativeSource = {RelativeSource AncestorType = {x:Type Border}}}” />
</ StackPanel>
<StackPanel Orientation = “ Horizo??ntal” Margin = “ 0” Horizo??ntalAlignment = “ Left” VerticalAlignment = “”中心” >
<TextBlock Text = “ colSpan =” />
<TextBlock Text = “” {Binding(Grid.ColumnSpan)表谊,RelativeSource = {RelativeSource AncestorType = {x:Type Border}}}}“ />
</ StackPanel>
</ StackPanel >
</ StackPanel>
</ Border>
<Border BorderBrush = “黑色“ BorderThickness = ” 1“ CornerRadius =“ 8” 背景= “ {DynamicResource BgBrush}” 保證金= “ 4” 填充= “ 0” Grid.Row = “ 3” Grid.ColumnSpan = “ 4” >
<StackPanel Horizo??ntalAlignment = “ Center” VerticalAlignment = “” Center“ 利潤= “ 8,4,8,3” 方向= “水平” >
<StackPanel 方向= “垂直” 保證金= “ 10,0,0,0” >
<StackPanel 方向= “水平” 保證金= “ 0” Horizo??ntalAlignment = “左” VerticalAlignment = “中心” >
<TextBlock Text = “ row =” />
<TextBlock Text = “” {Binding(Grid.Row)钞护,RelativeSource = {RelativeSource AncestorType = {x:Type Border}}}“” />
</ StackPanel>
<StackPanel Orientation = “水平“ 保證金= ” 0“ Horizo??ntalAlignment = ”左“ VerticalAlignment = ”“ Center” >
<TextBlock Text = “ col =” />
<TextBlock Text = “” {Binding(Grid.Column),RelativeSource = {RelativeSource AncestorType = {x:Type邊框}}}“ />
</ StackPanel>
</ StackPanel>
<StackPanel Orientation = “垂直”頁 邊距=“ 10,0,0,0” >
<StackPanel Orientation = “ Horizo??ntal” Margin = “ 0” Horizo??ntalAlignment = “ Left” VerticalAlignment = “” Center“ >
<TextBlock Text = ” rowSpan =“ />
<TextBlock Text = ”“ { (Grid.RowSpan)爆办,RelativeSource = {RelativeSource AncestorType = {x:Type Border}}}“ />
</ StackPanel>
<StackPanel Orientation = ” Horizo??ntal“ Margin = ” 0“ Horizo??ntalAlignment = ” Left“ VerticalAlignment = ” Center“ >
<TextBlock Text = “ colSpan =” />
<TextBlock Text = “ {Binding(Grid.ColumnSpan)难咕,RelativeSource = {RelativeSource AncestorType = {x:Type Border}}}”“ />
</ StackPanel>
</ StackPanel>
</ StackPanel>
</ Border>
</ Grid>
</網(wǎng)格>
</pre>

LayoutPanelTutorialImg14.png
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子步藕,更是在濱河造成了極大的恐慌惦界,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,590評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件咙冗,死亡現(xiàn)場離奇詭異沾歪,居然都是意外死亡,警方通過查閱死者的電腦和手機雾消,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,157評論 3 399
  • 文/潘曉璐 我一進店門灾搏,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人立润,你說我怎么就攤上這事狂窑。” “怎么了桑腮?”我有些...
    開封第一講書人閱讀 169,301評論 0 362
  • 文/不壞的土叔 我叫張陵泉哈,是天一觀的道長。 經(jīng)常有香客問我破讨,道長丛晦,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,078評論 1 300
  • 正文 為了忘掉前任提陶,我火速辦了婚禮烫沙,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘隙笆。我一直安慰自己锌蓄,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 69,082評論 6 398
  • 文/花漫 我一把揭開白布撑柔。 她就那樣靜靜地躺著瘸爽,像睡著了一般。 火紅的嫁衣襯著肌膚如雪铅忿。 梳的紋絲不亂的頭發(fā)上剪决,一...
    開封第一講書人閱讀 52,682評論 1 312
  • 那天,我揣著相機與錄音辆沦,去河邊找鬼昼捍。 笑死,一個胖子當(dāng)著我的面吹牛肢扯,可吹牛的內(nèi)容都是我干的妒茬。 我是一名探鬼主播,決...
    沈念sama閱讀 41,155評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼蔚晨,長吁一口氣:“原來是場噩夢啊……” “哼乍钻!你這毒婦竟也來了肛循?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,098評論 0 277
  • 序言:老撾萬榮一對情侶失蹤银择,失蹤者是張志新(化名)和其女友劉穎多糠,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體浩考,經(jīng)...
    沈念sama閱讀 46,638評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡夹孔,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,701評論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了析孽。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片搭伤。...
    茶點故事閱讀 40,852評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖袜瞬,靈堂內(nèi)的尸體忽然破棺而出怜俐,到底是詐尸還是另有隱情,我是刑警寧澤邓尤,帶...
    沈念sama閱讀 36,520評論 5 351
  • 正文 年R本政府宣布拍鲤,位于F島的核電站,受9級特大地震影響汞扎,放射性物質(zhì)發(fā)生泄漏季稳。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,181評論 3 335
  • 文/蒙蒙 一佩捞、第九天 我趴在偏房一處隱蔽的房頂上張望绞幌。 院中可真熱鬧蕾哟,春花似錦一忱、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,674評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至逐哈,卻和暖如春芬迄,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背昂秃。 一陣腳步聲響...
    開封第一講書人閱讀 33,788評論 1 274
  • 我被黑心中介騙來泰國打工禀梳, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人肠骆。 一個月前我還...
    沈念sama閱讀 49,279評論 3 379
  • 正文 我出身青樓算途,卻偏偏與公主長得像,于是被迫代替她去往敵國和親蚀腿。 傳聞我的和親對象是個殘疾皇子嘴瓤,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,851評論 2 361

推薦閱讀更多精彩內(nèi)容

  • 選擇qi:是表達式 標(biāo)簽選擇器 類選擇器 屬性選擇器 繼承屬性: color扫外,font,text-align廓脆,li...
    love2013閱讀 2,316評論 0 11
  • 第一章 F12: element.style 內(nèi)聯(lián)樣式(可以直接在上面寫代碼進行簡單調(diào)試) user agent...
    fastwe閱讀 1,505評論 0 0
  • 概述 在網(wǎng)易云課堂學(xué)習(xí)李南江老師的《從零玩轉(zhuǎn)HTML5前端+跨平臺開發(fā)》時筛谚,所整理的筆記。筆記內(nèi)容為根據(jù)個人需求所...
    墨荀閱讀 2,344評論 0 7
  • 瀏覽器與服務(wù)器的基本概念 瀏覽器(安裝在電腦里面的一個軟件) 作用: ①將網(wǎng)頁內(nèi)容渲染呈現(xiàn)給用戶查看停忿。 ②讓用戶通...
    云還灬閱讀 1,128評論 0 0
  • 1.塊級元素和行內(nèi)元素 塊級(block-level)元素驾讲;行內(nèi)(內(nèi)聯(lián)、inline-level)元素席赂。 塊元素的...
    饑人谷_小侯閱讀 2,014評論 1 4