WPF基础常用控件学习

WPF基础常用控件

具体参考网址

WPF 的所有控件都是从 System.Windows.Controls.Control 类中派生出来，其命名空间是System.Windows.Controls 。

Control类继承出来的控件基本上可以分成几个类型：

内容控件 ContentControls
条目控件 ItemsControls
文本控件 TextControls
范围控件 RangeControls

内容控件

Frame 框架控件

框架控件的主要作用是把其中的内容和界面上其他部分分开，它里面可以含有任何东西，但只能有一个直接的子控件。

ButtonBase 通用按钮基类

WPF 中的按钮都是从 ButtonBase 抽象类中派生出来。

Button 普通按钮

点击状态触发事件

    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
        <Button Name="btn1" Background="LightCoral" Click="OnClick1" ClickMode="Hover"
                Height="50" Width="200">Hover 悬停鼠标</Button>
        <Button Name="btn2" Background="LightBlue"  Click="OnClick2" ClickMode="Press"
                Height="50" Width="200">Press 按下鼠标</Button>
        <Button Name="btn3" Background="LightGreen" Click="OnClick3" ClickMode="Release"
                Height="50" Width="200">Reset 释放鼠标</Button>
    </StackPanel>

鼠标状态触发事件

 <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
        <Button Background="LightGreen" Height="50" Width="200"
                MouseEnter="btn1_MouseEnter" 
                MouseLeave="btn1_MouseLeave" 
                MouseDown="btn1_MouseDown" 
                MouseUp="btn1_MouseUp" 
                MouseDoubleClick="btn1_MouseDoubleClick"
                >鼠标事件</Button>
        <Button Name="btn1" Background="LightYellow" Height="50" Width="200" Content="鼠标状态"/>
    </StackPanel>

ToggleButton 拨动按钮

拨动按钮的特性就像拨动开关，按一下拨动按钮，其 IsChecked 属性变为 True；再按一下拨动按钮，其 IsChecked 属性变为 False 。

注意一点：

一般并不直接创建 ToggleButton 实例，因为WPF没有提供现成的样式模版，所以通常使用其派生类：CheckBox 和RadioButton。

CheckBox 选择控件

    <StackPanel>
        <TextBlock Text="CheckBox" Margin="5,20,10,20" FontSize="18" 
                   FontWeight="Bold" Foreground="Orange"/>
        <CheckBox Margin="5,0,0,0" Content="Three-state CheckBox" Foreground="White" 
                  IsThreeState="True" FontSize="15" ToolTip="Tips"
                  Unchecked="HandleUnchecked" Checked="HandleCheck"
                  Indeterminate="HandleThirdState"/>
        <TextBlock x:Name="text1" Foreground="LightGreen"  Margin="5,5,0,0" FontSize="15"/>
    </StackPanel>

  public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
        private void HandleCheck(object sender, RoutedEventArgs e)
        {
            text1.Text = "The CheckBox is checked.";
        }
        private void HandleUnchecked(object sender, RoutedEventArgs e)
        {
            text1.Text = "The CheckBox is unchecked.";
        }
        private void HandleThirdState(object sender, RoutedEventArgs e)
        {
            text1.Text = "The CheckBox is in the indeterminate state";
        }
    }

CheckBox 控件用在可以有多个选项，而又可以同时选择两个或两个以上选项的情况下，CheckBox 没有增加任何属性，它为 ToggleButton 提供外观。

RadioButton 单选按钮

在一组选项里面，必须且只能选择一个选项时，使用 RadioButton。

RadioButton并不提供“不选”操作，要去掉某个选项的方法是选择另一个选项。

注意一点：

无分组的会默认分到一个组里

有分组的会进入一个组里

    <StackPanel>
        <RadioButton Checked="WriteText2" Foreground="White" Margin="55,5">Yes</RadioButton>
        <RadioButton Checked="WriteText2" Foreground="White" Margin="55,5">No</RadioButton>
        <RadioButton Checked="WriteText2" Foreground="White" Margin="55,5">opinion</RadioButton>
        <RadioButton Checked="WriteText2" GroupName="class" Foreground="White" Margin="55,5">一班</RadioButton>
        <RadioButton Checked="WriteText2" GroupName="class" Foreground="White" Margin="55,5">二班</RadioButton>
        <RadioButton Checked="WriteText2" GroupName="class" Foreground="White" Margin="55,5">三班</RadioButton>
        <TextBlock x:Name="txtb" Margin="5" Foreground="LightGreen"/>
    </StackPanel>

RepeatButton

重复按钮可以在按下鼠标左键至施放按钮期间，不停地发出单击 Click 事件。

这种特性在某些情况下很有用，比如视频的快进或快退键。

 <StackPanel>
        <RepeatButton Width="200" Height="50" Delay="500" Interval="100" 
                      Click="Increase" FontSize="30">增加</RepeatButton>
        
        <TextBlock Name="valueText" Width="100" TextAlignment="Center" 
                   FontSize="50" Foreground="LightGreen">0</TextBlock>

        <RepeatButton Width="200" Height="50" Delay="500" Interval="100" 
                      Click="Decrease"  FontSize="30">减少</RepeatButton>
    </StackPanel>

HeaderedContentControl

我们通常用它的派生类：分组框和伸展控件

GroupBox 分组框

   <TabControl Background="#FF3C3C3C">
        <TabItem Header="Table1" Background="Green" Foreground="Black">
            <GroupBox Header="我是标题1" BorderThickness="2" BorderBrush="Yellow"
                      Margin="5" Foreground="White">
                <GroupBox.Content>
                    <TextBlock Margin="10" Text="内容1" FontSize="15" Foreground="LightGreen"/>
                </GroupBox.Content>
            </GroupBox>
        </TabItem>
        <TabItem Header="Table2" Background="Yellow" Foreground="Green">
            <GroupBox Margin="5" BorderThickness="2" Foreground="White" Header="我是标题2">
                <StackPanel Margin="10">
                    <RadioButton Foreground="LightBlue" FontSize="15">一班</RadioButton>
                    <RadioButton Foreground="LightBlue" FontSize="15">二班</RadioButton>
                    <RadioButton Foreground="LightBlue" FontSize="15">三班</RadioButton>
                    <RadioButton Foreground="LightBlue" FontSize="15">四班</RadioButton>
                </StackPanel>
            </GroupBox>
        </TabItem>
    </TabControl>

Expander 伸展控件

伸展控件可以将内容压缩，在需要时，才展示内容，可以极大的节省页面空间

支持展开和压缩的控件

ExpandDirection	获取或设置伸缩方向
IsExpanded	获取或设置默认伸展方式

   <StackPanel>
        <Expander Header="年度最佳班级" Background="Tan" HorizontalAlignment="Left" 
                  ExpandDirection="Down" IsExpanded="True" Height="220" Width="495">
            <StackPanel Margin="10">
                <RadioButton Content="一班" FontSize="16"/>
                <RadioButton Content="二班" FontSize="16"/>
                <RadioButton Content="三班" FontSize="16"/>
                <RadioButton Content="四班" FontSize="16"/>
            </StackPanel>
        </Expander>
    </StackPanel>

Lable 标签控件

Lable控件特点：

默认是可读的
内置了AccessText控件，可以直接设定热键到目标控件

温馨提示，如果需要显示经常变更的文字内容，请使用 TextBlock 而不要使用 Label，这样性能会更好，因为 Label 由 Border、ContentPresenter、AccessText 和 TextBlock 等几个控件组成

使用TextBlock 控件，参与的控件会少一点

AccessText 热键设置

通过 AccessText 标记创建一个 AccessKey ，用下划线来指定用作访问键的字符。如果内容包含多个下划线字符，则只会将第一个下划线字符转换为 AccessKey 其他下划线将显示为普通文本。如果要转换为访问键的下划线不是第一个下划线，则使用两个连续的下划线。

    <StackPanel Orientation="Vertical">
        <Button Height="50" Width="200" HorizontalAlignment="Center">
            <AccessText Text="我有热键 _p"/>
        </Button>
        <TextBlock Height="50" Width="200" HorizontalAlignment="Center" Background="LightBlue">
            <AccessText  Text="我有热键 _t"/>
        </TextBlock>
        <CheckBox Width="200">
            <AccessText Text="我有热键 _c" Foreground="LightGreen"/>
        </CheckBox>
        <RadioButton Width="200">
            <AccessText Text="我有热键 _a" Foreground="LightGreen"/>
        </RadioButton>
    </StackPanel>

提示控件，该控件可创建一个弹出窗口，以便在界面中显示元素的信息。

常用属性	描述
IsOpen	获取或设置 ToolTip 是否可见
Placement	获取或设置 ToolTip 控件打开时的方向，并指定 ToolTip 控件在与屏幕边界重叠时的行为
PlacementRectangle	获取或设置 ToolTip 控件打开时所在位置与之相关的矩形区域
StaysOpen	获取或设置 ToolTip 是否一直保持打开状态，直到用户在鼠标不在 ToolTip 上时单击鼠标

   <StackPanel Orientation="Vertical">
        <TextBox HorizontalAlignment="Left" Height="30" Width="200">鼠标移动到此处会出现提示框
            <TextBox.ToolTip>
                <ToolTip >
                    <StackPanel Orientation="Vertical">
                        <Image Source="./Image/liulanqi.png"/>
                        <TextBlock>这是一个有意思的提示框</TextBlock>
                        <Button Content="我是Button" Background="LightBlue"/>
                    </StackPanel>
                </ToolTip>
            </TextBox.ToolTip>
        </TextBox>
    </StackPanel>

注意：

ToolTip 虽然是一个控件，但其本身不具备接收用户输入的功能。比如上面的例子中，在ToolTip 中使用了 Button，你就无法点击 Button。
ToolTip 虽然是一个控件，但它不能像其他控件那样作为其他控件的子控件，它必须和某个控件的 ToolTip 属性相连。

ScrollViewer 滚动条

在WPF中显示滚动条要用到ScrollViewer类，这是一个内容控件，和所有的内容控件一样，它只能含有一个子控件。

CanContentScroll	获取或设置窗口是否支持滚动
HorizontalScrollBarVisibility	获取或设置是否显示水平滚动条
VerticalScrollBarVisibility	获取或设置是否显示垂直滚动条
PanningDeceleration	获取或设置滚动条的滚动速率

   <ScrollViewer HorizontalScrollBarVisibility="Auto">
        <StackPanel>
            <Button Content="Start" HorizontalAlignment="Center" Background="LightGreen" 
                   Height="20" Width="550" Margin="5"/>
            <Rectangle Fill="LightBlue" Height="300" Width="550"/>
            <TextBlock Text="END" TextAlignment="Center" Background="LightCoral" 
                   Height="20" Width="550" Margin="5"/>
        </StackPanel>
    </ScrollViewer>

条目控件

ItemsControl 中含有 Items 属性，这个属性具有 ItemCollection 类型。

Items 属性中可以添加任何一个object类型的对象

ItemsControl 类中还有一个重要的属性 ItemsSource，这个属性是用来作数据绑定

注意：

当我们使用ItemsSource 属性，Items 属性就会被自动设置为 null。

条目类的控件基本上可以分为两类

条目包容器类	条目类
ComboBox	ComboBoxItem
ContextMenu	MenuItem
ListBox	ListBoxItem
ListView	ListViewItem
Menu	MenuItem
StatusBar	StatusBarItem
TabControl	TabItem
TreeView	TreeViewItem

其中含有菜单条目MenuItem。菜单级别下面还可以设置子菜单，子菜单的条目下面还会有下一层的子菜单

下拉式菜单

下拉菜单中的某一项条目，具有下一级子菜单条目

    <Canvas>
        <Menu Background="Gray" Height="200" Width="200" HorizontalAlignment="Left" VerticalAlignment="Top">
            <MenuItem Header="班级">
                <MenuItem.Icon>
                    <TextBlock Text="&#xf12b;" FontFamily="./Fonts/#iconfont" FontSize="15"/> //此处使用的是矢量图
                </MenuItem.Icon>
                <MenuItem Header="1班" Background="green" BorderBrush="LightGray">
                    <MenuItem.Icon>
                        <TextBlock Text="&#xe608;" FontFamily="./Fonts/#iconfont" FontSize="15"/>
                    </MenuItem.Icon>
                    <MenuItem Header="小杜" Background="LightGreen" BorderBrush="Green" 
                              IsCheckable="True"  IsChecked="True" InputGestureText="男"
                              StaysOpenOnClick="True"/>
                </MenuItem>
            </MenuItem>
        </Menu>
    </Canvas>

弹出菜单(区别：使用了一个TextBox控件进行外层包裹)

    <StackPanel>
        <TextBox Name="textBox1" TextWrapping="Wrap" Margin="10">
            点击右键弹出菜单......
            <TextBox.ContextMenu>
                <ContextMenu>
                    <MenuItem Header="字体加粗" IsCheckable="True" Checked="Bold_Checked" Unchecked="Bold_Unchecked" />
                    <MenuItem Header="字体倾斜" IsCheckable="True" Checked="Italic_Checked" Unchecked="Italic_Unchecked" />
                    <Separator/>
                    <MenuItem Header="字体增大" Click="IncreaseFont_Click" />
                    <MenuItem Header="字体减小" Click="DecreaseFont_Click" />
                </ContextMenu>
            </TextBox.ContextMenu>
        </TextBox>
    </StackPanel>

    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
        private void Bold_Checked(object sender, RoutedEventArgs e)
        {
            textBox1.FontWeight = FontWeights.Bold;
        }
        private void Bold_Unchecked(object sender, RoutedEventArgs e)
        {
            textBox1.FontWeight = FontWeights.Normal;
        }
        private void Italic_Checked(object sender, RoutedEventArgs e)
        {
            textBox1.FontStyle = FontStyles.Italic;
        }
        private void Italic_Unchecked(object sender, RoutedEventArgs e)
        {
            textBox1.FontStyle = FontStyles.Normal;
        }
        private void IncreaseFont_Click(object sender, RoutedEventArgs e)
        {
            if (textBox1.FontSize < 18)
            {
                textBox1.FontSize += 2;
            }
        }
        private void DecreaseFont_Click(object sender, RoutedEventArgs e)
        {
            if (textBox1.FontSize > 10)
            {
                textBox1.FontSize -= 2;
            }
        }
    }

使用工具条要涉及两个类：ToolBarTray 和 ToolBar。

ToolBarTray 含有一个或多个 ToolBar ，本质上是ToolBar 的外层容器。

ToolBar 中含有一个或多个WPF控件。这里的控件可以是button、checkbox等

常用属性	描述
IsOverflowOpen	获取或设置 ToolBar 溢出区当前是否可见
Band	获取或设置 ToolBar 所在行
BandIndex	获取或设置 ToolBar 所在列
Orientation	获取或设置 ToolBar 停靠方向（ToolBarTray）

    <StackPanel>
        <ToolBarTray Background="White">
            <ToolBar Band="0" BandIndex="0" Background="LightGray" Margin="0,0,10,0">
                <Button Content="Button" Margin="5,0" Background="LightBlue"/>
                <Button Content="Button" Margin="5,0" Background="LightBlue"/>
                <Button Content="Button" Margin="5,0" Background="LightBlue"/>
                <Button Content="Button" Margin="5,0" Background="LightBlue"/>
                <Button Content="Button" Margin="5,0" Background="LightBlue"/>
            </ToolBar>
            <ToolBar Band="0" BandIndex="1" Background="LightGray" Margin="10,0,0,0" 
                     IsOverflowOpen="False">   //设置False以后溢出部分不会在运行时展示
                <TextBlock Text="TextBlock" Margin="5,0" Background="LightCoral"/>
                <TextBlock Text="TextBlock" Margin="5,0" Background="LightCoral"/>
                <TextBlock Text="TextBlock" Margin="5,0" Background="LightCoral"/>
                <TextBlock Text="TextBlock" Margin="5,0" Background="LightCoral"/>
                <TextBlock Text="TextBlock" Margin="5,0" Background="LightCoral"/>
            </ToolBar>
            <ToolBar Band="1" BandIndex="0" Background="LightGray"
                     IsOverflowOpen="True" >  //设置True以后溢出部分运行时自动展示
                <TextBlock Text="TextBlock" Margin="5,0" Background="LightGoldenrodYellow"/>
                <TextBlock Text="TextBlock" Margin="5,0" Background="LightGoldenrodYellow"/>
                <TextBlock Text="TextBlock" Margin="5,0" Background="LightGoldenrodYellow"/>
                <TextBlock Text="TextBlock" Margin="5,0" Background="LightGoldenrodYellow"/>
                <Button Content="Button" Margin="5,0" Background="LightGreen"/>
                <Button Content="Button" Margin="5,0" Background="LightGreen"/>
                <Button Content="Button" Margin="5,0" Background="LightGreen"/>
                <Button Content="Button" Margin="5,0" Background="LightGreen"/>
                <Button Content="Button" Margin="5,0" Background="LightGreen"/>
                <Button Content="Button" Margin="5,0" Background="LightGreen"/>
            </ToolBar>
        </ToolBarTray>
    </StackPanel>

如果出现了溢出，并且能够展示，那么会在工具条的最右侧显示一个小三角，点击以后会把溢出的部分显示出来

ComboBox 组合框

组合框是一组带有下拉列表的选择控件，通过单击控件上的箭头可显示或隐藏下拉列表。

常用属性	描述
IsDropDownOpen	获取或设置组合框下拉列表是否展开
IsEditable	获取或设置启用或禁用编辑文本框中文本的 ComboBox
IsReadOnly	获取或设置所选内容只读不可编辑

<Window x:Class="WPFTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:src="clr-namespace:WPFTest.Case" 
        mc:Ignorable="d"
        Title="MainWindow" Height="250" Width="500" Background="#FF3C3C3C">
    <StackPanel>
        <StackPanel.Resources>
            <src:MyValues  x:Key="myValues"/> //这里引用了C#类，记得要在 Window 里引用命名空间
        </StackPanel.Resources>
        
        <ComboBox Name="ComboBox" 
                  Text="三年级" 
                  IsEditable="True" 
                  IsReadOnly="True" 
                  IsDropDownOpen="False" 
                  Margin="0,0,0,20">
            
            <ComboBoxItem Content="一班"/>
            <ComboBoxItem Content="二班"/>
            <ComboBoxItem Content="三班"/>
            <ComboBoxItem Content="四班"/>
            <ComboBoxItem Content="五班"/>
            <ComboBoxItem Content="六班"/>
        </ComboBox>
        
        <TextBlock Text="{Binding ElementName=ComboBox,Path=SelectedItem}" 
                   Foreground="LightGreen" 
                   FontSize="20"/>
        
        <ComboBox Name="ComboBox2" 
                  Text="课程" 
                  IsEditable="True" 
                  IsReadOnly="True" 
                  IsDropDownOpen="False" 
                  Margin="0,20"
                  ItemsSource="{StaticResource myValues}"/> //这里使用ItemsSource的方式做个演示
        
        <TextBlock Text="{Binding ElementName=ComboBox2,Path=SelectedItem}" 
                   Foreground="LightGreen" 
                   FontSize="20"/>
    </StackPanel>
</Window>

using System.Collections.ObjectModel;

namespace WPFTest.Case
{
    public class MyValues : ObservableCollection<string>
    {
        public MyValues ()
        {
            Add("语文");
            Add("数学");
            Add("物理");
            Add("化学");
            Add("体育");
        }
    }
}

TabControl

标签控件，该控件将多个控件包含在同一空间中，可以节省页面空间。

  <StackPanel>
        <TabControl>
            <TabItem Header="一年级">
                <TextBlock>
                    一班<LineBreak/> // LineBreak 可以为文本换行
                    二班<LineBreak/>
                    三班<LineBreak/>
                </TextBlock>
            </TabItem>
            <TabItem Header="二年级">
                <TextBlock Text="二年级" FontSize="20"/>
            </TabItem>
            <TabItem Header="三年级">
                <StackPanel>
                    <ComboBox Text="班级" IsEditable="True" IsReadOnly="False">
                        <ComboBoxItem Content="一班"/>
                        <ComboBoxItem Content="二班"/>
                        <ComboBoxItem Content="三班"/>
                    </ComboBox>
                    <TabControl>
                        <TabItem Header="主科">
                            <ComboBox Text="课程" IsEditable="True" IsReadOnly="False">
                                <ComboBoxItem Content="语文"/>
                                <ComboBoxItem Content="英语"/>
                                <ComboBoxItem Content="数学"/>
                            </ComboBox>
                        </TabItem>
                        <TabItem Header="副科">
                            <ComboBox Text="课程" IsEditable="True" IsReadOnly="False">
                                <ComboBoxItem Content="体育"/>
                                <ComboBoxItem Content="历史"/>
                                <ComboBoxItem Content="政治"/>
                            </ComboBox>
                        </TabItem>
                    </TabControl>
                </StackPanel>
            </TabItem>
        </TabControl>
    </StackPanel>

listBox

列表框，该控件包含一个或多个可选项列表，提供用户选择操作。

ListBox 中含有至少一个 ListBoxItem 。

ListBoxItem 从内容控件 (ContentControl) 中派生出来，因此具有内容控件的特征。

ListBox 中有一个 SelectionMode 属性，该属性为枚举类型。可以取 Single、Multiple 和 Extended 三个值。

Single：用户只能选择 ListBox 中一个条目；
Multiple ：用户可以选择 ListBox 中多个条目；
Extended：用户需要按下“SHIFT”键，才能选择ListBox中的多个条目；

由于 ListBox 允许用户选择多个 ListBoxItem，所以它有一个 SelectedItems 。这是一个集合，其中含有用户选择的多个条目。

    <StackPanel>
        <TextBox Name="textBox" Height="30" Margin="5"></TextBox>
        <TabControl Background="LightBlue" Margin="5">
            <TabItem Header="单选" Background="LightYellow">
                <ListBox Width="100" Height="100" SelectionChanged="PrintText" SelectionMode="Single">
                    <ListBoxItem>Item 1</ListBoxItem>
                    <ListBoxItem>Item 2</ListBoxItem>
                    <ListBoxItem>Item 3</ListBoxItem>
                    <ListBoxItem>Item 4</ListBoxItem>
                    <ListBoxItem>Item 5</ListBoxItem>
                </ListBox>
            </TabItem>
            <TabItem Header="多选" Background="LightGreen">
                <ListBox Width="100" Height="100" SelectionChanged="PrintText" SelectionMode="Multiple">
                    <ListBoxItem>Item 1</ListBoxItem>
                    <ListBoxItem>Item 2</ListBoxItem>
                    <ListBoxItem>Item 3</ListBoxItem>
                    <ListBoxItem>Item 4</ListBoxItem>
                    <ListBoxItem>Item 5</ListBoxItem>
                </ListBox>
            </TabItem>
            <TabItem Header="SHIFT多选" Background="LightGray">
                <ListBox Width="100" Height="100" SelectionChanged="PrintText" SelectionMode="Extended">
                    <ListBoxItem>Item 1</ListBoxItem>
                    <ListBoxItem>Item 2</ListBoxItem>
                    <ListBoxItem>Item 3</ListBoxItem>
                    <ListBoxItem>Item 4</ListBoxItem>
                    <ListBoxItem>Item 5</ListBoxItem>
                </ListBox>
            </TabItem>
        </TabControl>
    </StackPanel>

    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
        void PrintText(object sender, SelectionChangedEventArgs args)
        {
            ListBox _listBox = sender as ListBox;

            ListBoxItem _listBoxItem;

            StringBuilder builder = new StringBuilder();

            switch (_listBox.SelectionMode)
            {
                case SelectionMode.Single:
                    Str();
                    break;
                case SelectionMode.Multiple:
                    Str2();
                    break;
                case SelectionMode.Extended:
                    Str2();
                    break;
            }

            void Str()
            {
                _listBoxItem = (_listBox.SelectedItem as ListBoxItem);
                textBox.Text = "你选择了 " + _listBoxItem.Content.ToString();
            }

            void Str2()
            {
                var collection = _listBox.SelectedItems;
                for (int i = 0; i < collection.Count; i++)
                {
                    _listBoxItem = (collection[i] as ListBoxItem);
                    builder.Append(_listBoxItem.Content.ToString() + " ");
                }
                textBox.Text = "你选择了 " + builder.ToString();
                builder.Clear();
            }
            
        }
    }

ListView 列表控件

3 种常用方式：

前端界面绑定数据

DisplayMemberBinding 设置绑定对象的属性

    <StackPanel>
        <TextBlock Text="1.前端界面绑定数据" FontSize="16" Foreground="LightGreen" Margin="10,5" />
        <!--前端界面绑定数据-->
        <ListView x:Name="x_listView" Margin="5" Width="480" Height="170">
            <ListView.View>
                <GridView AllowsColumnReorder="False">
                    <GridViewColumn Header="姓名" Width="60" DisplayMemberBinding="{Binding Path=Name}"/>
                    <GridViewColumn Header="年龄" Width="60" DisplayMemberBinding="{Binding Path=Age}"/>
                    <GridViewColumn Header="性别" Width="60" DisplayMemberBinding="{Binding Path=Six}"/>
                    <GridViewColumn Header="职业" Width="60" DisplayMemberBinding="{Binding Path=Job}"/>
                </GridView>
            </ListView.View>
        </ListView>
    </StackPanel>

       /// <summary>
        /// 前端界面绑定数据
        /// </summary>
        void SetData()
        {
            //使用 ObservableCollection 动态数据集合来通知 ListView 数据变化
            ObservableCollection<Data> datas = new ObservableCollection<Data>();
            
            //为集合添加数据
            datas.Add(new Data("小李", "29", "男", "作家"));
            datas.Add(new Data("小王", "27", "女", "教师"));
            datas.Add(new Data("小吕", "36", "男", "警察"));
            datas.Add(new Data("小孙", "26", "女", "护士"));

            //为 ListView 绑定数据来源
            x_listView.ItemsSource = datas;
        }

        //创建 Data 类，储存数据，继承 INotifyPropertyChanged（作用是：当属性发生变化时，传递变化属性的值）
        class Data : INotifyPropertyChanged
        {
            public event PropertyChangedEventHandler PropertyChanged;

            private string name;
            public string Name
            {
                get { return name; }
                set { name = value;
                    if (PropertyChanged != null)
                    {
                        PropertyChanged(this, new PropertyChangedEventArgs("Name")); //传递变化属性的值
                    }
                }
            }
            private string age;
            public string Age
            {
                get { return age; }
                set
                {
                    age = value;
                    if (PropertyChanged != null)
                    {
                        PropertyChanged(this, new PropertyChangedEventArgs("Age"));
                    }
                }
            }
            private string six;
            public string Six
            {
                get { return six; }
                set
                {
                    six = value;
                    if (PropertyChanged != null)
                    {
                        PropertyChanged(this, new PropertyChangedEventArgs("Six"));
                    }
                }
            }
            private string job;
            public string Job
            {
                get { return job; }
                set
                {
                    job = value;
                    if (PropertyChanged != null)
                    {
                        PropertyChanged(this, new PropertyChangedEventArgs("Job"));
                    }
                }
            }
            public Data(string name,string age,string six,string job)
            {
                this.name = name;
                this.age = age;
                this.six = six;
                this.job = job;
            }
        }

后台动态绑定数据

listView 绑定 z_listView

       <StackPanel>
           <TextBlock Text="2.后台动态绑定数据" FontSize="16" Foreground="LightGreen" Margin="10,5" />
           <!--后台动态绑定数据-->
           <ListView x:Name="z_listView" Margin="5" Width="480" Height="170"/>
       </StackPanel>

        /// <summary>
        /// 后台动态绑定数据
        /// </summary>
        void SetData_2()
        {
            string[] c_headers = { "英雄", "等级", "性别", "位置" };

            //通过后台绑定时使用的属性字段名该数组里的字段名就是下面定义的 Data 类里面的字段名 
            string[] d_headers = { "Name", "Age", "Six", "Job" };

            //获取前端表格视图对象引用
            GridView gv = new GridView();

            //设置表头以及表格列数据
            for (int i = 0; i < c_headers.Length; i++)
            {
                //创建列数据对象，该对象用来设置每一列中的数据内容格式
                GridViewColumn gvc = new GridViewColumn();

                //设置列表头
                gvc.Header = c_headers[i];

                //使用 DisplayMemberBinding 属性来进行设置
                //设置的时候只要设置读取的字段名就行
                gvc.DisplayMemberBinding = new Binding(d_headers[i]);

                //添加每一列的列数据对象
                gv.Columns.Add(gvc);
            }

            //为 listView 设置视图展示对象
            z_listView.View = gv;

            //使用 ObservableCollection 动态数据集合来通知 ListView 数据变化
            ObservableCollection<Data> datas = new ObservableCollection<Data>();

            //为集合添加数据
            datas.Add(new Data("李白", "99", "男", "打野"));
            datas.Add(new Data("王昭君", "99", "女", "中单"));
            datas.Add(new Data("吕布", "99", "男", "坦克"));
            datas.Add(new Data("孙尚香", "99", "女", "射手"));

            //为 ListView 绑定数据来源
            z_listView.ItemsSource = datas;
        }

后台读取XML数据

    <StackPanel>
        <TextBlock Text="3.后台读取XML数据" FontSize="16" Foreground="LightGreen" Margin="10,5" />
        <!--后台读取XML数据-->
        <ListView x:Name="y_listView" Margin="5" Width="480" Height="170"/>
    </StackPanel>

        /// <summary>
        /// 后台读取XML数据
        /// </summary>
        void DT_SetData()
        {
            //XML 文件地址
            string path = @"C:\Users\Administrator\Desktop\pets.xml";

            //new 一个 XmlTextReader 对象
            XmlTextReader reader = new XmlTextReader(path);

            //使用 DataTable 读取 XML 需要先为 DataTable 定义好 XML 框架
            //框架内容即为表格头字段
            //1.设置 DataTable 的列表名，这个列表名必须和 XML 中的列表名一致（列表名不等于根元素）
            DataTable dataXml = new DataTable("pets");

            //2.设置 DataTable 表头，同样的，必须和 XML 里面的字段一致
            dataXml.Columns.Add("petId");
            dataXml.Columns.Add("petName");
            dataXml.Columns.Add("nextPetId");

            //3.设置好框架以后，才能读取 XML
            dataXml.ReadXml(reader);

            //下面开始设置 ListViwe

            //1.创建表格视图对象,该对象用来表示表格的显示内容格式
            GridView gv = new GridView();

            //2.创建表头以及绑定对应列的数据
            foreach (DataColumn _column in dataXml.Columns) 
            {
                //创建列数据对象，该对象用来设置每一列中的数据内容格式
                GridViewColumn gvc = new GridViewColumn();

                //设置列表表头
                gvc.Header = _column.ColumnName;

                //绑定列数据来源字段
                gvc.DisplayMemberBinding = new Binding(_column.ColumnName);
                
                //为 表格视图对象 添加设定好的 列数据对象
                gv.Columns.Add(gvc);
            }

            //3.为 listView 设置视图展示对象
            y_listView.View = gv;

            //4.为 listView 设置数据来源
            //前面都只是设定数据模版，数据来源由这里设定
            y_listView.ItemsSource = dataXml.DefaultView;
        }

xml文件内容

<?xml version="1.0" encoding="utf-8"?>
<list>
  <pets>
    <petId>001</petId>
	<nextPetId>002</nextPetId>
	<petName>皮丘</petName>
  </pets>
  <pets>
    <petId>002</petId>
    <nextPetId>003</nextPetId>
    <petName>皮卡丘</petName>
  </pets>
  <pets>
    <petId>003</petId>
    <nextPetId>0</nextPetId>
    <petName>雷丘</petName>
  </pets>	
</list>

StatusBar 状态条

可以用来当进度条使用

    <StackPanel>
        <StatusBar VerticalAlignment="Bottom" Background="Beige">
            <StatusBarItem>
                <TextBlock>下载进度</TextBlock>
            </StatusBarItem>

            <StatusBarItem>
                <ProgressBar Width="200" Height="20" Name="progressBar1">
                    <ProgressBar.Triggers>
                        <EventTrigger RoutedEvent="ProgressBar.Loaded">
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="progressBar1" 
                                                     Storyboard.TargetProperty="Value" 
                                                     From="0" To="100" Duration="0:0:5"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                    </ProgressBar.Triggers>
                </ProgressBar>
            </StatusBarItem>

            <Separator/>
            <TextBlock Text="耗时：5S  "/>
            <Separator/>
            <TextBlock Text="大小：5MB "/>
        </StatusBar>
    </StackPanel>

TreeView 树形控件

1）TreeView中的相关属性：

属性	描述
SelectedItem	获取表示当前选中条目
SelectedValue	获取当前节点上的值
SelectedValuePath	读写属性，用于绑定数据

TreeViewItem 这个无限层嵌套

2）TreeViewItem中的相关属性：

属性	描述
IsExpanded	获取或设置节点是否展开
IsSelected	获取或设置当前节点是否被选中
IsSelectionActive	获取当前节点是否具备输入焦点

    <StackPanel>
        <TreeView>
            <TreeViewItem Header="三年一班">
                <TreeViewItem Header="小章">
                    <TreeViewItem Header="男"/>
                </TreeViewItem>
                <TreeViewItem Header="小吕">
                    <TreeViewItem Header="男"/>
                </TreeViewItem>
                <TreeViewItem Header="小貂">
                    <TreeViewItem Header="女"/>
                </TreeViewItem>
            </TreeViewItem>
        </TreeView>
        <TreeView>
            <TreeViewItem Header="三年二班">
                <TreeViewItem Header="小李">
                    <TreeViewItem Header="男"/>
                </TreeViewItem>
                <TreeViewItem Header="小杜">
                    <TreeViewItem Header="男"/>
                </TreeViewItem>
                <TreeViewItem Header="小王">
                    <TreeViewItem Header="女"/>
                </TreeViewItem>
            </TreeViewItem>
        </TreeView>
    </StackPanel>

文本控件

PasswordBox 密码输入框

属性	描述
MaxLength	获取或设置密码的最大长度
PasswordChar	获取或设置密码的掩码字符
Password	获取或设置当前保留的密码

    <StackPanel Margin="10">
        <TextBlock Text="用户名" Foreground="LightGreen"/>
        <TextBox/>
        
        <Separator Margin="0,15"/>
        
        <TextBlock Text="请输入密码" Foreground="LightGreen"/>
        <PasswordBox x:Name="passwordBox" MaxLength="10" PasswordChar="*" 
                     PasswordChanged="passwordBox_PasswordChanged"/>
        
        <TextBlock x:Name="textBlock" Foreground="LightBlue" Margin="0,15"/>
    </StackPanel>

TextBox 文字输入框

textbox 和richTextbox都是以TextBoxBase 为基类的，他们大部分属性都相同

文字输入框，该控件可用于显示或编辑无格式文本。

属性	描述
AcceptsReturn	是否支持输入 Enter 键换行
AcceptsTab	是否支持插入tab控制符
AutoWordSelection	是否支持自动选择整个词
CanRedo	是否支持重做前一个动作
CanUndo	是否支持撤销前一个动作
ExtentHeight	获取可见的内容区域的垂直大小
ExtentWidth	获取可见的内容区域的水平大小
HorizontalOffset	获取或设置水平滚动条位置
HorizontalScrollBarVisibility	是否显示水平滚动条
VerticalOffset	获取或设置垂直滚动条的位置
VerticalScrollBarVisibility	是否显示垂直滚动条
IsReadOnly	是否只读
IsUndoEnabled	是否支持恢复操作
UndoLimit	获取或设置可以恢复的动作次数
SpellCheck	设置SpellCheck.IsEnabled属性，可自动检查输入框中单词是否拼写错误
ViewportWidth	设置视窗的宽度
ViewportHeight	设置视窗的高度

    <StackPanel Margin="10">
        <TextBox MinLines="1"
                 MaxLines="5"
                 MaxLength="100"
                 AcceptsTab="True"
                 AcceptsReturn="True"
                 TextWrapping="Wrap"
                 TextAlignment="Center"
                 CharacterCasing="Upper"/>
    </StackPanel>

RichTextBox 富文本框

可以比文本插入多个控件对象

    <StackPanel Margin="10">
        <RichTextBox Name="richTB">
            <FlowDocument>
                <Paragraph>
                    <TextBox Text="test test test test test"/>
                    <LineBreak/>
                    <Rectangle Width="100" Height="20" Fill="Green"/>
                    <LineBreak/>
                    <Image Source=".\Image\liulanqi.png" Width="50" Height="50"/>
                    <LineBreak/>
                    <Button Content="我是按钮" Width="100" Height="20" Foreground="Black"/>
                    <LineBreak/>
                    <sys:String>还能插入许多各种各样的控件，这里不一一例举了</sys:String>
                </Paragraph>
            </FlowDocument>
        </RichTextBox>
    </StackPanel>

范围控件

共同派生的基类RangeBase

属性	描述
Maximum	获取或设置最大取值范围
Minimum	获取或设置最小取值范围
LargeChange	获取或设置最大变化单位
SmallChange	获取或设置最小变化单位
Value	获取或设置当前值

ScrollBar 滚动条

滚动条（ScrollBar）为可滚动控件，该滚动条具有一个滑块，其位置对应于一个值。

属性	描述
Orientation	获取或设置滚动方向
ViewportSize	获取或设置当前可见的可滚动内容的数量

    <StackPanel Margin="10">
        <ScrollBar x:Name="scrollbar" Maximum="100" Minimum="0" Value="30" 
                   LargeChange="20" SmallChange="2" Height="20" Margin="10,20"
                   Orientation="Horizontal"/>
        <Grid Margin="10">
            
            <Label Foreground="White" FontSize="30" VerticalAlignment="Center">ScrollBar：</Label>

            <TextBlock HorizontalAlignment="Center" Foreground="LightGreen" FontSize="50"
                       Text="{Binding ElementName=scrollbar,Path=Value}"/>
        </Grid>
    </StackPanel>

ProgressBar 滑动条

滑动条（Slider）是一个边上带有刻度的范围控件

属性	描述
IsSnapToTickEnabled	获取或设置是否自动将滑块移动到最近的刻度线
AutoToolTipPrecision	获取或设置 Value 的小数点右侧显示的小数位数
Ticks	获取或设置刻度线的位置
TickPlacement	获取或设置与 Track 的 Slider 相关的刻度线的位置
IsSelectionRangeEnabled	获取或设置一个值，该值指示 Slider 是否沿 Slider 显示选择范围
IsMoveToPointEnabled	获取或设置一个值，该值指示是否立即将 Slider 的 Thumb 移动到在鼠标指针悬停在 Slider 轨道的上方时鼠标单击的位置
SelectionEnd	获取或设置 Slider 的指定选择内容的最大值

    <StackPanel Margin="10">
        <Slider Name="RectangleHeight" Margin="10" Width="450" Orientation="Horizontal"
                Value="20" Minimum="0" Maximum="500" SmallChange="2" LargeChange="20"
                TickPlacement="BottomRight" TickFrequency="10"/>

        <Rectangle Fill="LightBlue" HorizontalAlignment="Left" Margin="10" 
           Height="30" Width="{Binding ElementName=RectangleHeight,Path=Value}"/>
    </StackPanel>

SlideBar 进度条

<StackPanel>
        <TextBox Grid.Row="0" Name="textBox" Text="20" Height="50" Width="100" Margin="20,10,20,10" FontSize="40"/>
        <ProgressBar Grid.Row="1" Maximum="100" Minimum="0" Value="{Binding ElementName=textBox,Path=Text}" Height="50" 
                     Margin="20,0,20,0" Background="LightYellow" Foreground="LightGreen"/>
</StackPanel>

posted @ 2023-04-18 00:00 聆听微风阅读(1034) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

聆听微风

WPF基础常用控件学习

WPF基础常用控件

内容控件

Frame 框架控件

ButtonBase 通用按钮基类

Button 普通按钮

ToggleButton 拨动按钮

CheckBox 选择控件

RadioButton 单选按钮

RepeatButton

HeaderedContentControl

GroupBox 分组框

Expander 伸展控件

Lable 标签控件

AccessText 热键设置

ToolTip 提示控件

ScrollViewer 滚动条

条目控件

Menu 菜单控件

下拉式菜单

弹出菜单(区别：使用了一个TextBox控件进行外层包裹)

ComboBox 组合框

TabControl

listBox

ListView 列表控件

前端界面绑定数据

后台动态绑定数据

后台读取XML数据

StatusBar 状态条

TreeView 树形控件

文本控件

PasswordBox 密码输入框

TextBox 文字输入框

RichTextBox 富文本框

范围控件

ScrollBar 滚动条

ProgressBar 滑动条

SlideBar 进度条

聆听微风

WPF基础 常用控件学习

WPF基础 常用控件

内容控件

Frame 框架控件

ButtonBase 通用按钮基类

Button 普通按钮

ToggleButton 拨动按钮

CheckBox 选择控件

RadioButton 单选按钮

RepeatButton

HeaderedContentControl

GroupBox 分组框

Expander 伸展控件

Lable 标签控件

AccessText 热键设置

ToolTip 提示控件

ScrollViewer 滚动条

条目控件

Menu 菜单控件

下拉式菜单

弹出菜单(区别：使用了一个TextBox控件进行外层包裹)

ToolBar 工具条

ComboBox 组合框

TabControl

listBox

ListView 列表控件

前端界面绑定数据

后台动态绑定数据

后台读取XML数据

StatusBar 状态条

TreeView 树形控件

文本控件

PasswordBox 密码输入框

TextBox 文字输入框

RichTextBox 富文本框

范围控件

ScrollBar 滚动条

ProgressBar 滑动条

SlideBar 进度条

WPF基础常用控件学习

WPF基础常用控件