zoukankan      html  css  js  c++  java
  • 控件与布局(WPF)

    内容大概:

    1)6类控件介绍及派生关系

    2)WPF的UI元素类型介绍

    3)内容模式的详解

    4)UI布局简介

    控件

    控件无外乎6类:

    1)布局控件:Grid、StackPanel、DockPanel等等这些可以容纳其他控件或者说是嵌套其他控件,主要用于UI上的组织和排列。共同的父类是Panel。

    2)内容控件:Window、Button等属于这类,只能容纳一个控件作为其内容。共同父类ContentPanel。

    3)带标题内容控件:顾名思义,比内容控件多个标题。典型代表:GroupBox、TabItem….共同父类HeaderedContent。

    4)条目控件:ListBox、ComboBox等,可以显示一列数据。共同父类ItemsControl。

    5)带标题条目控件:比条目控件多个Header。TreeVievItem、MenuItem等典型代表。基类为HeaderedItemsControl。

    6)特殊内容控件:这类控件相对是独立的。有TextBox、TextBlock等等

    派生关系:

    继承关系

     

    WPF的UI元素的类型

    WPF的UI类型

    各类内容模型详解

    1)ContentControl家族

    特点:

    1.基类均为ContentControl

    2.都是控件[Control]

    3.内容属性名称为Content

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

    重点理解“只能由单一元素充当其内容”。最好的解释莫过于用Coding了。

    以Button为例:第一个Button的内容为一个静态文本,第二个button的内容为一张图片

    <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属性设置填充,使用Stroke属性设置边线。

    Panel家族

    这是一个用于UI布局的家族。该家族特点:

    1.均派生自Panel抽象类。

    2.控制UI布局。

    3.内容属性为Children。

    4.内容可以为多个元素,并控制它们的布局。

    本家族元素:

    Panel

    UI布局(Layout)简介

    WPF是专门的用户界面技术,因此布局功能是它的核心功能之一。在WPF的布局元素中,既有像传统的Windows Form和APS.NET的绝对坐标定位元素,也有像HTML页面那样用行列定位的。

    WPF多了一个Content的概念——包含。以窗体为根,整个WPF的UI形成树形结构,叫做可视化树。

    WPF的布局元素属于Pane家族。

    WPF中的布局元素:

    1.Grid:网格。类似HTML中的Table。

    2.StackPanel:栈式面板。竖直或水平排成一条直线。

    3.Canvas:画布。绝对坐标定位,类似于Windows Form的布局。

    4.DockPanel:泊靠式面板。

    5.WrapPanel:自动折行面板。排满一行自动折行,类似HTML中的流式布局。

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

  • 相关阅读:
    python入门 类的继承和聚合(五)
    如何快速找到多个字典中的公共键(1.4)
    python输入输出(二)
    python入门 集合(四)
    LOJ 3093: 洛谷 P5323: 「BJOI2019」光线
    LOJ 3049: 洛谷 P5284: 「十二省联考 2019」字符串问题
    【比赛游记】FJOI2019瞎打记
    ICPC World Finals 2019 题解
    LOJ 3043: 洛谷 P5280: 「ZJOI2019」线段树
    LOJ 2483: 洛谷 P4655: 「CEOI2017」Building Bridges
  • 原文地址:https://www.cnblogs.com/turnip/p/12014610.html
Copyright © 2011-2022 走看看