控件与布局(WPF)
這是本人對于學習WPF的筆記。
參考資料：《深入淺出WPF》、MSDN、some Blogs…
?
內(nèi)容大概：
1）6類控件介紹及派生關系
2）WPF的UI元素類型介紹
3）內(nèi)容模式的詳解
4）UI布局簡介
?
控件
控件無外乎6類：
1）布局控件：Grid、StackPanel、DockPanel等等這些可以容納其他控件或者說是嵌套其他控件，主要用于UI上的組織和排列。共同的父類是Panel。
2）內(nèi)容控件：Window、Button等屬于這類，只能容納一個控件作為其內(nèi)容。共同父類ContentPanel。
3）帶標題內(nèi)容控件：顧名思義，比內(nèi)容控件多個標題。典型代表：GroupBox、TabItem….共同父類HeaderedContent。
4）條目控件：ListBox、ComboBox等，可以顯示一列數(shù)據(jù)。共同父類ItemsControl。
5）帶標題條目控件：比條目控件多個Header。TreeVievItem、MenuItem等典型代表。基類為HeaderedItemsControl。
6）特殊內(nèi)容控件：這類控件相對是獨立的。有TextBox、TextBlock等等
派生關系：
?
WPF的UI元素的類型
?
各類內(nèi)容模型詳解
1)ContentControl家族
特點：
1.基類均為ContentControl
2.都是控件[Control]
3.內(nèi)容屬性名稱為Content
4.只能由單一元素充當其內(nèi)容
重點理解“只能由單一元素充當其內(nèi)容”。最好的解釋莫過于用Coding了。
以Button為例：第一個Button的內(nèi)容為一個靜態(tài)文本，第二個button的內(nèi)容為一張圖片
<Button Margin="5"> <TextBlock Text="Hello Li.Lin"></TextBlock> </Button> <Button Grid.Row="1" Margin="5"> <Image Source="img.jpg" Width="60" Height="60"></Image> </Button>?
run:
假如你想在同一個Button中既顯示TextBlock又要顯示image:
<Button Margin="5"> <TextBlock Text="Hello Li.Lin"></TextBlock> <Image Source="img.jpg" Width="60" Height="60"></Image> </Button>?
error:報錯說[屬性“Content”已設置多次]。
ContentControl家族的控件有：
?
2）HeaderedContentControl家族
?
特點：
1.都派生自HeaderedContentControl，HeaderedContentControl派生自ContenControl。
2.用于顯示帶標題的數(shù)據(jù)。
3.除了顯示主題內(nèi)容的區(qū)域外，還有一個顯示Header的區(qū)域。
4.內(nèi)容屬性分為Content和Header。
5.無論是Content還是Header都只能容納一個元素作為其內(nèi)容。
?
包含的控件有：Expander、GroupBox、headeredContentControl、TabItem。
?
做個GroupBox的Coding:
<GroupBox Margin="10" BorderBrush="SlateBlue"> <GroupBox.Header> <Image Source="img.jpg" Width="20" Height="20"></Image> </GroupBox.Header> <GroupBox.Content> <TextBlock TextWrapping="WrapWithOverflow" Margin="10" Text="Li.Lin is a programer learning wpf..."></TextBlock> </GroupBox.Content> </GroupBox>Run:
?
3）ItemsControl家族
特點：
1.都派生自ItemsControl。
2.都是控件，用于顯示列表化數(shù)據(jù)。
3.內(nèi)容屬性為Items或ItemsSource。
4.每種ItemsControl都對應有自己的條目容器(Item Container)。
?
ItemsControl家族包含控件有：
?
ListBox是ItemsControl的典型代表，下面以它為例：
<ListBox Margin="5"> <ListBoxItem> Li.Lin </ListBoxItem> wpf <ListBoxItem> <CheckBox x:Name="checkBoxName" Content="LiLin"></CheckBox> </ListBoxItem> <ListBoxItem> <Button x:Name="BtnWpf" Content="WPF"></Button> </ListBoxItem> /ListBox>?
Run:
注意！其中的 wpf 沒有包含在<ListBoxItem>…</ListBoxItem>中，是因為這對標簽是可以省略的。也就是說，無論你把什么數(shù)據(jù)或數(shù)據(jù)集合丟給ListBox，它都會以<ListBoxItem>…</ListBoxItem>包裝，因此我們完全可以不寫。
不過，大多數(shù)情況下，ListBox是用來動態(tài)顯示后臺的數(shù)據(jù)，而非控件。
接著Coding：
程序中定義一個Employee類：
public class Emplayee { public int Id { get; set; } public string Name { get; set; } public int Age { get; set; } }再定義一個Employee類型的集合：
List<Emplayee> employeeList = new List<Emplayee>() { new Emplayee(){Id=1,Name="LiLin",Age=23}, new Emplayee(){Id=2,Name="Tom",Age=26}, new Emplayee(){Id=3,Name="Guo",Age=29}, new Emplayee(){Id=4,Name="Yan",Age=20}, new Emplayee(){Id=5,Name="Tom",Age=30}, };在程序的主界面上定義一個名為listBoxEmployee的ListBox。接下來我們寫：
this.listBoxEmployee.DisplayMemberPath = "Name"; this.listBoxEmployee.SelectedValuePath = "Id"; this.listBoxEmployee.ItemsSource = employeeList;?
Run:
DisplayMemberPath這個屬性的value是只ListBox顯示數(shù)據(jù)的屬性。也就是說，ListBox會去調(diào)用這個屬相的ToString()方法，把得到的字符串放入一個TextBlock(文本控件)，then再Textblock放入ListBoxItem中。這是簡單的顯示，需要復雜的顯示就需要用到DataTemplate。
SelectedValuePath屬性與SelectValue屬性配合使用。
以下列出ItemsControl對應的Item Container：
?
HeaderedItemsControl家族
該家族控件除了具有ItemsControl的特性外，還具有顯示Header 的能力。
特點：
1.均派生自HeaderedItemsControl類。
2.都是控件，用于顯示列表化數(shù)據(jù)，同事顯示一個標題。
3.內(nèi)容屬性有：Items、ItemsSource、Header。
本家族控件有MenuItem、TreeViewItem、ToolBar。
Decorator家族
該家族在UI上期裝飾效果。如Border元素把一些內(nèi)容加邊框；在ViewBox元素里的內(nèi)容可以自由縮放。
特點：
1.均派生自Decorator類。
2.起UI裝飾作用。
3.內(nèi)容屬性為Child。
4.只能由單一元素充當內(nèi)容。
家族元素：
TextBox和TextBlock
這兩個都是用來顯示文本。區(qū)別是TextBlock只能顯示不能編輯；TextBox允許編輯文本。除了這個區(qū)別，它們的內(nèi)容屬性也不一樣。TextBlock由于需要操縱格式，其內(nèi)容屬性為InLines(行)，同時保留Text屬性。而TextBox得內(nèi)容屬性為Text。
Sharp家族
Sharp家族元素是視覺元素，而非控件，內(nèi)容自己的內(nèi)容。不過可以用Fill屬性填充效果，Stroke屬性設置邊線。
特點：
1.均派生自Sharp。
2.用于2D圖形繪制。
3.無內(nèi)容屬性。
4.使用Fill屬性設置填充，使用Stroke屬性設置邊線。
Panel家族
這是一個用于UI布局的家族。該家族特點:
1.均派生自Panel抽象類。
2.控制UI布局。
3.內(nèi)容屬性為Children。
4.內(nèi)容可以為多個元素，并控制它們的布局。
本家族元素：
UI布局(Layout)簡介
WPF是專門的用戶界面技術，因此布局功能是它的核心功能之一。在WPF的布局元素中，既有像傳統(tǒng)的Windows Form和APS.NET的絕對坐標定位元素，也有像HTML頁面那樣用行列定位的。
WPF多了一個Content的概念——包含。以窗體為根，整個WPF的UI形成樹形結構，叫做可視化樹。
WPF的布局元素屬于Pane家族。
WPF中的布局元素：
1.Grid：網(wǎng)格。類似HTML中的Table。
2.StackPanel：棧式面板。豎直或水平排成一條直線。
3.Canvas：畫布。絕對坐標定位，類似于Windows Form的布局。
4.DockPanel：泊靠式面板。
5.WrapPanel：自動折行面板。排滿一行自動折行，類似HTML中的流式布局。
?
BTW
鄙人初涉WPF，望多多指導。
轉(zhuǎn)載于:https://www.cnblogs.com/lnetmor/archive/2011/11/20/2256251.html
總結
以上是生活随笔為你收集整理的控件与布局(WPF)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： air 提示问题
- 下一篇： Java实现的简单的WebService