"Layman's language WPF" controls and layout of the summary of the study

First, the control is in the end what is

　　Control is essentially "Algorithms + Data" - a user input raw data, the raw data processing algorithm, and the result obtained data. The problem is how the program will show the resulting data to the user. The same set of data, you can use an array of LED displays, or by means of various command line is a control character (e.g. Tab) and its output, but these are not such as a graphical user interface (Graphics User Interface, GUI) to the friendly and convenient. GUI program is world winner, but the realization of the graphical interface on Windows has in many ways. Each method has its own set of development concepts and tools. Each GUI development with it's concepts and tools together constitute a methodology. Common are:

1. Windows API (Win API): calls the underlying Windows drawing functions, using the C language, the most original and most basic.
2. Microsoft Foundation Class (MFC): C ++ syntax to use raw Win32 API package to control class.
3. Visual Component Library (VCL): similar controls with MFC class library for Delphi and C ++ Builder uses
4. Vistal Basic + ActiveX controls (VB6): Thought the use of Win API component encapsulated UI controls, which have a common multilingual
5. Java Swing / AWT: Java SDK for developing cross-platform GUI library control program
6. Windows Form: be a powerhouse GUI development on the .NET platform, fully supports component-based but requires the .NET runtime.
7. Windows Presentation Foundation (WPF): a rising star, using new data-driven UI concept.

　　Our methodology can be divided into more than four generations:

1. Win API age: + Windows message handling function calls.
2. Package Age: using the Win API packaged as such object-oriented concept: the data processed by the message from the driver UI.
3. Component age: component-oriented concept of using a DLL module on the basis of the class; message is encapsulated into an event into an event driven.
4. WPF era: in component-based, based on the use of specialized UI design language and introduces the concept of data-driven UI.

　　WPF was able to say on the latest generation is two things: First, the methodology of previous generations can only use GUI programming language UI design, and has a dedicated WPF UI design XAML; second, in previous generations of UI and data the interactive aspect of the same strain of Windows messages to control events is always the UI controls in a dominant position and the data on the passive position, driven by UI to change the data, WPF introduced the concept of data-driven interface in an event-driven basis so that data back to the central position and let the UI regression expression data's location

Go from Winform WPF learning process, the mind must establish such a concept --WPF is data-driven UI, data is the core, is active. UI subordinate data and expression data, is passive. Also can be understood, when we want to change the display on the control, only you need to change the contents of the data source to the control binding.

　　UI allows the user to observe the functions and operation start data, in order to allow the user to observe data, we need to display UI elements data; to allow users to manipulate data, we need to respond to user manipulation UI elements. WPF those able to display data in response to a user operation UI elements called controls (Control). Controls the display of data, which we call "data content" controls, controls the operation in response to user performs some of his methods to notify the application in the form of events (Event) (the developers can decide how to deal with these events ), which we call the control's "behavior" or "algorithm" content. Visible, WPF controls in the dual role of actor, is a very abstract concept --Control is the carrier of data and behavior, without the need to have a fixed image. In other words, Button Button reason is not because it looks just like they display a string of text and can respond to user click, but would like to be upside down - all in line "can show some hints of text (can be text, can also be a picture, animation or even video) and can respond to user clicks "the abstract concept of UI elements can be Button, Button specific as to grow into what it was like (a square is round, is the display text or display animation) completely determined by its style (style) and templates (template).

In the daily development work we deal with controls roughly divided into six categories, namely:

1. 　　Layout controls: receiving a plurality of control or may be other layout controls nested, and arranged for tissue UI controls, Grid, StackPanel, DockPanel the like belong to such controls, they have a common parent Panel.
2. 　　Content Control: can accommodate only one other control or layout of the controls as his content. Window, Button and other controls fall into this category, because only accommodate a control as its content, so often need the help of the layout of the controls to plan its contents. Their common parent class is ContentControl.
3. 　　With the title content controls: the equivalent of a content control, but can be added header (Header), a header portion may also receive control or layout. GroupBox, TabItem such as is typical of this type of control. Their common parent class is HeaderedContentControl
4. 　　Entry Controls: may display a data type same as that at a column where data. Such controls include ListBox, Combobox and so on. Their common base class is ItemsControl. Such controls in terms of data collection type display is very powerful.
5. 　　With a title entry controls: control plus the equivalent of an entry in a title display area. TreeViewItem, MenuItem belong to such controls. Such control is often used to display the hierarchical relationship data, displayed thereon node Header area, child nodes is displayed in the control area of ​​its entries. Common base class for such controls is HeaderedItemsControl.
6. 　　Special content controls: TextBox accommodate such a string, Textblock can accommodate freely control the text format, Image accommodate the type of picture data such controls are relatively independent ....

Two, WPF content model

 　　WPF can be divided into the following categories

name	Note
ContentControl	Single content control
HeaderedContentControl	Titled single content control
ItemsControl	With a set of entries for the control content
HeaderedItemsControl	With a title collection to entry for content control
Decorator	Controls decorative elements
Panel	Panel earth elements
Adorner	Text elements embellishment
Flow Text	Streaming text elements
TextBox	Text entry box
TextBlock	Static text
Shape	Graphic elements

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Here we analyze the internal structure of these elements one by one, to understand the contents and content attributes.

　　We can imagine a control container, which they have in them is its content, content control can direct the data, it may also be control. When the content or control of controls on the formation of nested controls, so WPF's UI will form a tree structure. Excluding the internal structure of a control composition, was observed only by the control composition of the "tree", then the tree is called "logical tree (Logicol Tree)"; WPF controls are often more basic control configuration. That in itself is a tree control, even if the control itself is also taken into account the tree, the tree is more than the logic Fengyun "lush" tree called the visual element tree (Visual Tree).

　　When the control objects in memory, content controls are also objects in memory. Control reference the object as its own control by a property that is called content attribute (Content Property). "Content Properties" is a generic term specific to each kind of control, the exact content property has its own name - some directly called the Content, and some called the Child; content control can be a collection of some of its contents or property called Items Children of.

Third, a variety of models Detailed contents

　　We UI elements that conform to certain content model is called a family, each family with their common base class named

3.1、ContentControl族

Feature of the earth elements are as follows:

1. Derive from ContentControl class.
2. They are controls (Control).
3. Name of the content property is Content.
4. Its contents can only act as a single element.　　

How to understand "the contents of which can only act as a single element," the Bible? Look at an example.

Button controls ContentControl belong to the family, so the following two Button code is correct - the contents of the first Button is a static text, the contents of the second Button is a picture.

    <StackPanel>
        <Button>
            <TextBlock>Hello World</TextBlock>
        </Button>
        <Button>
            <Image Source=".\1.jpg" Height="30" Width="30"></Image>
        </Button>
    </StackPanel>

But if you want the Button text contains content that is in turn contains a picture is not enough:

    <StackPanel>
        <Button>
            <TextBlock>Hello World</TextBlock>
            <Image Source=".\1.jpg" Height="30" Width="30"></Image>
        </Button>
    </StackPanel>

The compiler will complain "Object" Button "already has children and can not add the" Image "." Button "can only accept a child." But how to do that if we really need a Button icon with it? We just need to control the layout of the first with a can contain multiple elements of the picture and text wrap up, then this layout as a Button control content like

Family contains the following control ContentControl

Button	ButtonBase	CheckBox	ComboboxItem
ContentControl	Frame	GridViewColumnHeader	GroupItem
Label	ListBoxItem	ListViewItem	NavigationWindow
RadioButton	RepeatButton	ScrollViewer	StatusBarItem
ToggleButton	ToolTip	UserControl	Window

 

 

 

 

 

3.2、HeaderedContentControl族

Feature of the elements are as follows:

1. They are derived from the HeaderedContentControl class, HeaderedContentControl is ContentControl derived class.
2. They are controls for displaying data with a title.
3. In addition to the main area for displaying the contents of control has a display area title (Header) of.
4. Content attributes Content and Header
5. Whether or Header Content can only accommodate one element as its content.

Family contains the following control HeaderedContentControl

Expander

GroupBox

HeaderedContentControl

TabItem

 

 

The following example is an icon for the Header, the main body of the text content GroupBox

    < The StackPanel > 
        < the GroupBox Margin = "10" > 
            < GroupBox.Header > 
                < Image the Source =. "\ 1.jpg" the Height = "30" > </ Image > 
            </ GroupBox.Header > 
            < the TextBlock the TextWrapping = "WrapWithOverflow" Margin = "10" > 
                May you grow, you would like to have good luck, if not, I hope you learn mercy in misfortune; May you be loved a lot of people, if not, I hope you learn to be tolerant in loneliness. 
            </ The TextBlock > 
        </ the GroupBox > 
    </ the StackPanel >

 3.3, ItemsControl family

This features the following elements:

1. Derive from ItemsControl class.
2. They are the controls, the list of data for display.
3. Content property Items or ItemsSource.
4. Each ItemsControl corresponds with its own entry container (Item Container).

This group comprises the controls shown below

Menu	menu Base	ContextMenu	Combobox
ItemsControl	ListBox	ListView	TabControl
TreeView	Selector	StatusBar

 

 

 

 

This distinctive family controls will automatically use the entry point is a container for content submitted to its packaging. Legal content must be a set of ItemsControl, when we put this collection as the content presented to the ItemsControl, ItemsControl this collection will not be directly used, but the use of their own container entries corresponding to the entries one by one set of packaging, then put packaged entry sequence as their own content. The benefits of this package is that it allows programmers to automatically submit a collection of various data types to ItemsControl, programmers in thinking will naturally feel ItemsControl control directly loaded with data, if you need to add, delete, update, or sort, then go directly to the operation of the data collection can be, UI will automatically change to show up, which is reflected in the development of WPF UI data directly drive then displayed.

ListBox is a typical ItemsControl, the following will be it, for example, look ItemsControl.

　　First, we take a look at the ListBox automatic packaging. The specific WPF ListBox ListBox Windows Form or ASP.NET on display much more powerful. The traditional ListBox entry can only be displayed as a string, and can be displayed in addition to the WPF ListBox string entries show more law-abiding, but also elements such as CheckBox, RadioButton, TextBox, etc., so that we can make a richer UI, the following code

 <ListBox>
            <CheckBox x:Name="ckBoxTim" Content="Tim"/>
            <CheckBox x:Name="ckBoxTom" Content="Tom"/>
            <CheckBox x:Name="ckBoxSimple" Content="Simple"/>
            <Button x:Name="Mess" Content="Mess"/>
            <Button x:Name="Ownen" Content="Ownen"/>
            <Button x:Name="Victor" Content="Victor"/>
        </ListBox>

The following operating results

 The surface appears to be a direct ListBox contains some CheckBox and Button, actually not the case. We add a Click event for the Ownen this button to see what its parent container Yes.

        private void Ownen_Click(object sender, RoutedEventArgs e)
        {
            var invoker = sender as Button;
            var parent = VisualTreeHelper.GetParent( VisualTreeHelper.GetParent(VisualTreeHelper.GetParent(invoker)));
            MessageBox.Show(parent.GetType().ToString());
        }

 VisualTreeHelper class is to help us navigate the helper class in the Fengyun tree composed of visual elements. We look up layer by layer along clicked Button, find the third layer found it to be a ListBoxItem. ListBoxItem is ListBox corresponding Container, that is to say, no matter what you put data sets to ListBox, he will be automatically packaged in this way.

 上面这个例子就是单纯的为了说明ItemsControl能够使用对应的Item Container自动包装数据。实际工作中，除非列表里的元素自始至终都是固定的我们才使用这种直接把UI元素作为ItemControl内容的方法，比如一年由十二个月、一周有七天等。大多数情况下，UI上的列表会用于显示动态的后台数据，这时候我们交给ItemsControl的就是程序逻辑中的数据而非控件了。

假设程序中定义有Person类：

    public class Person
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public int Age { get; set; }
        // ...
    }

并且有一个Person类型的集合：

var lstPerson = new List<Person>()
            {
                new Person() { Age = 20, Name = "Simple", ID = 1 },
                new Person() { Age = 22, Name = "Tim", ID = 2 },
                new Person() { Age = 22, Name = "Tom", ID = 3 },
                new Person() { Age = 22, Name = "jrrey", ID = 3 }
            };

在主程序中有一个名为lsbPerson的ListBox，我们只需要这样写：

            var lstPerson = new List<Person>()
            {
                new Person() { Age = 20, Name = "Simple", ID = 1 },
                new Person() { Age = 22, Name = "Tim", ID = 2 },
                new Person() { Age = 22, Name = "Tom", ID = 3 },
                new Person() { Age = 22, Name = "jrrey", ID = 3 }
            };
            lsbPerson.DisplayMemberPath = "Name";
            lsbPerson.SelectedValuePath = "ID";
            lsbPerson.ItemsSource = lstPerson;

　　 DisplayMemberPath这个属性告诉ListBox显示每条数据的哪个属性，换句话说，ListBox会去调用这个属性的ToString()方法，把得到的字符串放入一个TextBlock（最简单的文本控件），然后再按前面说的办法把TextBlock包装进一个ListBoxItem里。

　　ListBox的SelectedValuePath属性将与其SelectedValue属性配合使用。当你调用SelectedValue属性是，ListBox先找到选中的Item所对应的数据对象，然后把SelectedValuePath的值当作数据对象的属性名称并把这个属性的值取出来。

　　DisplayMemberPath和SelectedValuePath是两个相当简化的属性。DisplayMemberPath只能显示简单的字符串，想用更加复杂的形式显示数据需要使用DataTemplate。SelectedValuePath也只能返回单一的值，如果想进行一些复杂的操作，不妨直接使用ListBox的SelectedItem和SelectedItems属性，这两个属性返回的就是数据集中的对象，得到原始的数据对象后就任由程序员操作了。

　　理解了ListBox的自动包装机制，我把全部ItemsControl对应的Item Container列在下面

Items名称	对应的Item Container
ComboBox	ComboBoxItem
ContextMenu	MenuItem
ListBox	ListBoxItem
ListView	ListViewItem
Menu	MenuItem
StatusBar	StatusBarItem
TabControl	TabItem
TreeView	TreeViewItem

 

 

 

 

 

 

 

 

 

 

 

 3.4、HeaderedItemsControl族

顾名思义，本族控件除了具有ItemsControl的特性外，还具显示标题的能力。

本族元素的特点如下

1. 均派生自HeaderedItemsControl类
2. 它们都是控件，用于显示列表化的数据，同时可以显示一个标题。
3. 内容属性为Items、ItemsSource和Header
4. 因为它与ItemsControl非常相似，在这就不做演示了

 3.5、Decorator族

在本族中的元素，在UI上是其装饰作用的。如可以使用Border元素为一些组织在一起的内容加个边框。如果需要组织在一起的内容能够自由缩放，则可以使用ViewBox元素。

本元素的特点如下：

1. 均派生自Decorator类。
2. 起UI装饰作用。
3. 内容属性为Child。
4.  只能由单一元素充当内容。

本族元素如下

ButtonChrome	ClassicBorderDecorator	ListBoxChrome	SystemDropShadowChrome
Border	InkPresenter	BulletDecorator	ViewBox
AdornerDectorator

 

 

 

 

3.6、TextBlock和TextBox

　　这两个控件最主要的功能就是显示文本。TextBlock只能显示文本，不能编辑，所以又称静态文本。TextBox则允许用户编辑其中的内容。TextBlock虽然不能编辑内容，但可以使用丰富的印刷级的格式控制标记显示专业的排版效果。

　　TextBox不需要太多的显示格式，所以它的内容是简单的字符串，内容属性为Text。

　　TextBlock由于需要操纵格式，所以内容属性是InLines（印刷中的“行”），同时TextBlock也保留一个名为Text的属性，当简单的显示一个字符串时，可以使用这个属性。

3.7、Shape族元素

　　友好的界面离不开各种图形的搭配，Shape族元素（它们只是简单的视觉元素，不是控件）就是专门用来在UI上绘制图形的一类元素。这类元素没有自己的内容，我们可以使用Fill属性为它们设置填充效果，还可以使用Stroke属性为它们设置边线效果。

本族的元素特点如下：

1. 均派生自Shape类。
2. 用于2D图形绘制。
3. 无内容属性。
4.  使用Fill属性设置填充，使用Stroke属性设置边线。

3.8、Panel族元素

　　之所以把Panel元素放在最后是因为这一族控件实在是太重要了——所有用于UI布局的元素都属于这一族。

　　本族元素的特点如下：

1. 均派生自Panel抽象类
2. 主要功能是控制UI布局。
3. 内容属性为Children。
4. 内容可以是多个元素，Panel元素将控制它们的布局。

　　对比ItemsControl和Panel元素，虽然内容都可以是多个元素，但ItemsControl强调以列表的形式来展现数据而Panel则强调对包含元素进行布局。所以ItemsControl的内容属性是Items和ItemsSource而Panel的内容属性名为Children。

本族元素如下所示

Canvas	DockPanel	Grid	TabPanel
ToolBarOverflowPanel	StackPanel	ToolBarPanel	UniformGrid
VirtualizingPanel	VirtualizingStackPanel	WrapPanel