Controls and Layout (WPF)

Content is probably:

1) Category 6 Controls Introduction and derivation relationship

2) WPF UI elements Type Description

Detailed 3) content model

4) UI layout Introduction

 

Controls

Control is nothing less than six categories:

1) layout controls: Grid, StackPanel, DockPanel etc. These controls can contain other nested or other controls, mainly for the organization and arrangement of the UI. Common parent class is Panel.

2) The control: Window, Button, etc. belong to this type, only a receiving control as its content. Common parent ContentPanel.

3) content controls with the title: As the name suggests, the content controls more than the title. Typical representatives: GroupBox, TabItem ... common parent HeaderedContent..

4) the entry controls: ListBox, ComboBox the like, can display a list of data. Common parent class ItemsControl.

5) with the title entry controls: control more than the entry Header. Typical TreeVievItem, MenuItem and so on. Base class HeaderedItemsControl.

6) Special Content Controls: These controls are relatively independent. There TextBox, TextBlock, etc.

Derived relations:

Inheritance

 

WPF UI elements of type

WPF's UI type

 

Detailed models of various types of content

1) ContentControl family

Features:

1. The base class are ContentControl

2. Controls are [Control]

3. Content attribute name Content

4. can only act as a single element of its content

Focus on understanding "can only act as a single element of its content." The best explanation than with the Coding.

Button with an example: the contents of the first Button is a static text, the contents of the second button is a picture

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

image

假如你想在同一个Button中既显示TextBlock又要显示image:

<Button Margin="5">
      <TextBlock Text="Hello Li.Lin"></TextBlock>
      <Image Source="img.jpg" Width="60" Height="60"></Image>
</Button>

 

error:报错说[属性“Content”已设置多次]。

error

ContentControl家族的控件有:

ContentControl_Children

 

2)HeaderedContentControl家族

 

特点:

1.都派生自HeaderedContentControl,HeaderedContentControl派生自ContenControl。

2.用于显示带标题的数据。

3.除了显示主题内容的区域外,还有一个显示Header的区域。

4.内容属性分为Content和Header。

5.无论是Content还是Header都只能容纳一个元素作为其内容。

 

包含的控件有: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:

image

 

3)ItemsControl家族

特点:

1.都派生自ItemsControl。

2.都是控件,用于显示列表化数据。

3.内容属性为Items或ItemsSource。

4.每种ItemsControl都对应有自己的条目容器(Item Container)。

 

ItemsControl家族包含控件有:

ItemsControl_Children

 

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:

image

注意!其中的 wpf 没有包含在<ListBoxItem>…</ListBoxItem>中,是因为这对标签是可以省略的。也就是说,无论你把什么数据或数据集合丢给ListBox,它都会以<ListBoxItem>…</ListBoxItem>包装,因此我们完全可以不写。

不过,大多数情况下,ListBox是用来动态显示后台的数据,而非控件。

接着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:

image

DisplayMemberPath这个属性的value是只ListBox显示数据的属性。也就是说,ListBox会去调用这个属相的ToString()方法,把得到的字符串放入一个TextBlock(文本控件),then再Textblock放入ListBoxItem中。这是简单的显示,需要复杂的显示就需要用到DataTemplate。

SelectedValuePath属性与SelectValue属性配合使用。

以下列出ItemsControl对应的Item Container:

Item Container

 

HeaderedItemsControl家族

该家族控件除了具有ItemsControl的特性外,还具有显示Header 的能力。

特点:

1.均派生自HeaderedItemsControl类。

2.都是控件,用于显示列表化数据,同事显示一个标题。

3.内容属性有:Items、ItemsSource、Header。

本家族控件有MenuItem、TreeViewItem、ToolBar。

Decorator家族

该家族在UI上期装饰效果。如Border元素把一些内容加边框;在ViewBox元素里的内容可以自由缩放。

特点:

1.均派生自Decorator类。

2.起UI装饰作用。

3.内容属性为Child。

4.只能由单一元素充当内容。

家族元素:

Decorator

TextBox和TextBlock

这两个都是用来显示文本。区别是TextBlock只能显示不能编辑;TextBox允许编辑文本。除了这个区别,它们的内容属性也不一样。TextBlock由于需要操纵格式,其内容属性为InLines(行),同时保留Text属性。而TextBox得内容属性为Text。

Sharp家族

Sharp家族元素是视觉元素,而非控件,内容自己的内容。不过可以用Fill属性填充效果,Stroke属性设置边线。

特点:

1.均派生自Sharp。

2.用于2D图形绘制。

3.无内容属性。

4. Fill the filling property, property set using Stroke edges.

Panel family

This is a family for UI layout. The family features:

1. Panel were derived from the abstract class.

2. Control UI layout.

3. Content property to Children.

4 may be a plurality of content elements, and controlling their layout.

This family of elements:

Panel

UI Layout (Layout) Introduction

WPF is a special user interface technology, layout features is one of its core functions. In WPF layout elements, both as absolute coordinate positioning elements of the traditional Windows Form and APS.NET, but also as an HTML page that ranks with the location.

Content WPF more than a concept - contain. To form the root, the whole forming a UI WPF tree structure, called the visual tree.

WPF layout elements belonging to the Pane family.

The WPF layout elements:

1.Grid: Grid. Similar in HTML Table.

2.StackPanel: Stack panel. Vertically or horizontally in a straight line.

3.Canvas: canvas. Absolute coordinate positioning, similar to the Windows Form layout.

4.DockPanel: Park by the panel.

5.WrapPanel: automatically wrap panel. Automatic folding lines lined line, similar to HTML in flow layout.

 

Transfer: https://www.cnblogs.com/lnetmor/archive/2011/11/20/2256251.html

Guess you like

Origin www.cnblogs.com/turnip/p/12014610.html