wpf-基础-xaml-初识控件

控件Control：展示数据、响应用户操作的UI元素。控件所展示的数据称为控件的【数据内容】，控件在响应用户的操作后会执行自己的一些方法或以事件Event的形式通知应用程序（程序员可以决定如何处理这些事件），这个称之为控件的【行为】/【算法内容】。

常见控件分类

1.布局控件

容纳其他控件，排列和组织。如Grid/StackPanel/DockPanel等，父类是Panel。

2.内容控件

只能容纳一个其他控件或布局控件作为它的内容。如Window/Button等，共同父类是ContentControl。

内容属性都是Content。

3.带标题的内容控件

相当于一个内容控件，但可以加一个标题Header，标题也可以容纳一个控件或布局，如GroupBox/TabItem等，共同父类是HeaderedContentControl。内容属性为Content和Header，包含的控件有：Expander GroupBox HeaderedContentControl TabItem

举例

    <Grid>
        <GroupBox Margin="10" BorderBrush="Gray">
            <GroupBox.Header>
                <Image Source="C:\Users\Dell\source\repos\pxy\huaji.jpg" Width="40" Height="40"/>
            GroupBox.Header>
            <TextBlock TextWrapping="WrapWithOverflow" Margin="10" Text="你看我滑稽吗？好玩吗？谢谢，有被笑到哈哈哈哈哈哈哈哈哈"/>
        GroupBox>
    Grid>

4.条目控件

可以显示一列数据（通常类型相同），如ListBox/ComboBox等。共同父类是ItemsControl。
Menu MenuBase ContextMenu ComboBox
ItemsControl ListBox ListView TabControl
TreeView Selector StatusBar

举例

前台

    <Grid>
        <ListBox Margin="5">
            <CheckBox x:Name="checkBoxTim" Content="Tim"/>
            <CheckBox x:Name="checkBoxTom" Content="Tom"/>
            <CheckBox x:Name="checkBoxBruce" Content="Bruce"/>
            <Button x:Name="buttonMess" Content="Mess"/>
            <Button x:Name="buttonOwen" Content="Owen"/>
            <Button x:Name="buttonVictor" Content="Victor" Click="buttonVictor_Click"/>
        ListBox>
    Grid>

后台

        private void buttonVictor_Click(object sender, RoutedEventArgs e)
        {
            Button btn = sender as Button;
            DependencyObject level1 = VisualTreeHelper.GetParent(btn);
            DependencyObject level2 = VisualTreeHelper.GetParent(level1);
            DependencyObject level3 = VisualTreeHelper.GetParent(level2);
            MessageBox.Show(level3.GetType().ToString()); // System.Windows.Controls.ListBoxItem
        }

说明：当集合内容提交到ItemsControl时，它会把每个条目包装成XXXItem

示例2

namespace pxy
{
    /// 

    /// MainWindow.xaml 的交互逻辑
    /// 
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            List empList = new List() 
            { new Employee(){Id=2, Name="Tim", Age=30 },
            new Employee() {Id=1, Name="Tom", Age=26 },
            };
            InitializeComponent();
            this.listBoxEmplyee.DisplayMemberPath = "Name"; //需要展示的属性
            this.listBoxEmplyee.SelectedValuePath = "Id"; // 查询的属性。其实与顺序无关，仍然是Tim/Tom这样，依次向下
            this.listBoxEmplyee.ItemsSource = empList; // 指定数据源
        }
    }
    public class Employee
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public int Age { get; set; }
    }

前台

    <Grid>
        <ListBox Name="listBoxEmplyee" Margin="5">            
        ListBox>
    Grid>

5.带标题的条目控件

类似3，只有MenuItem/TreeViewItem/ToolBar，常用于显示表示层级关系的数据，根结点显示在Header区域，子节点在条目控件区域。共同父类是HeaderedItemsControl。内容属性是Items、ItemsSource、Header。

6.特殊内容控件

如TextBox可以容纳字符串/文本，Image容纳图片等。

WPF的UI元素类型

Decorator

UI装饰作用，内容属性为Child，只能由单一元素充当内容。如果需要组织在一起的内容可以自由缩放，可使用ViewBox。

TextBlock和TextBox

TextBlock是静态文本，不可编辑，内容属性是Inlines，也有Text，可以带印刷级的格式控制标记；TextBox则允许用户编辑，内容属性是Text。

Shape

可以用Stroke属性设置边线；绘制2D图形；没有内容属性，使用Fill属性设置填充。

Panel

内容属性为Children。

Grid：类似html中的table，可以自定义行列
StackPanel：可以水平或竖直排列，移除一个后能自动调整
Canvas：内部元素可以使用以像素为单位的绝对坐标进行定位
DockPanel：内部元素可以选择泊靠方向
WrapPanel：内部元素在排满一行后会自动换行，类似html的流式布局

详解和例子见下一篇。