AI 助理
备案控制台
开发者社区 云原生 文章 正文

8天入门wpf—— 第六天 细说控件

2016-04-13 3641
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

    

       这篇我们来大概的看一下WPF的各种神马控件，首先我们要知道所有的wpf控件都是继承自Control，从用途上可以分为四种

         1:内容控件(Content Controls)

         2:条目控件(Items Controls)

         3:文本控件(Text Controls)

         4:范围控件(Range Controls)

 

一：内容控件

    内容控件的最大的特征就是有一个Content属性，从前面的文章中，我们多多少少也知道Content接收的是一个Object类型，或许

我们会立即想到莫非Button就是一个内容控件，确实，Button算是一个内容控件，凡是内容控件都继承自ContentControl，因为

Content属性就是属于ContentControl。

 

1：ButonBase

     要说Button，我们需要从ButtonBase说起，首先看一下类图。

<1>Button

  从图中我们可以看出，Button是继承自ButtonBase的，Button有个很有趣的地方就是ButtonBase中存在一个ClickMode属性，

什么意思呢？也就是说Click事件是用什么方式触发？触发方式在ClickMode中以枚举的方式展现，Hover，Press和Release，默认

也就是Press。

那么下面我用Hover的形式来触发Click事件，蛮有意思的，嘿嘿。

<Window x:Class="ButtonDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Button Content="Button" Height="23" IsDefault="True" Margin="124,77,304,211" ClickMode="Hover" Name="button1"  Width="75" Click="button1_Click" />
    </Grid>
</Window>

 

<2>RepeatButton

    首先这玩意我们在webform或者winform中貌似都没有见过，在wpf中也是一个新增的控件，那么它的用途是什么呢？很简单，我们在

看video的时候都有“快进”，“快退”，你懂的，首先我们看下RepeatButton中的定义，我们发现有一个

Delay：作用就是按下时第一次触发Click的时间延迟，

Interval：每次click发生的时间间隔，如果大家玩转了Timer控件都应该很清楚。


<Window x:Class="RepeatButtonDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Canvas>
        <TextBox Canvas.Left="151" Canvas.Top="69" Height="33" Name="textBox1" Width="172" Text="0" />
        <RepeatButton x:Name="test" Delay="100" Click="test_Click" Width="172"
                      Content="确定" Height="61" Canvas.Left="151" Canvas.Top="121" />
    </Canvas>
</Window>


namespace RepeatButtonDemo
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void test_Click(object sender, RoutedEventArgs e)
        {
            var num = Convert.ToInt32(textBox1.Text);

            textBox1.Text = (++num).ToString();
        }
    }
}

 

<3>GridViewColumnHeader

   这个是与GridView控件一起搭配使用，放在后面一起讲。

 

<4>ToggleButton

     从图中我们看到ToggleButton是CheckBox和RadioButton的基类，大家一看，这玩意我们早就会了，是的，大家都会，这里我就说

点有新鲜味道的东西，首先我们看下ToggleButton的类定义。

嘿嘿，兴趣点来了，怎么IsChecked是可空类型？而且还存在王八IsThreeState属性，难道还有第三种状态？是的，这是在Html

中没有的，这里我们要知道，实际上我们最终的UI呈现的要么是CheckBox,要么是Radiobutton，要使第三种状态有效，我们只

需要设置IsThreeState属性和Indeterminate事件即可。


<Window x:Class="CheckBoxDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <CheckBox Content="CheckBox" Height="16" HorizontalAlignment="Left" Margin="96,137,0,0" Name="checkBox1" VerticalAlignment="Top" IsThreeState="True" Indeterminate="checkBox1_Checked" />
    </Grid>
</Window>



namespace CheckBoxDemo
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void checkBox1_Checked(object sender, RoutedEventArgs e)
        {
            MessageBox.Show("不错");
        }
    }
}

2: HeaderedContentControl

    顾名思义，这是一个带有标题的内容控件，或许大家第一个反应过来的估计就是GroupBox，是的，这玩意我们在Html中用的太多了，

老规矩，我们还是看看类图。

<1> Expander

     首先得要申明，Expander是wpf中新增的一个控件，在html中我们经常会看到一个伸缩控件，折叠起来只能看到标题，伸展开才能

看到内容，继续上代码说话。


<Window x:Class="ExpanderDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Expander Header="年龄组" Height="208" Margin="39,33,154,70" Name="expander1" Width="310">
            <StackPanel>
                <RadioButton Content="RadioButton1" Height="16" Name="radioButton1" />
                <RadioButton Content="RadioButton2" Height="16"  Name="radioButton2" />
            </StackPanel>
        </Expander>

    </Grid>
</Window>

<2> GroupBox

       关于GroupBox的使用，我想我也不用罗嗦了，太简单不过了。

<3>TabItem

       TabItem控件是与TabControl控件搭配使用，这个放到条目控件上说。

 

3：ToolTip

    首先我们要知道ToolTip也是继承自ContentControl，在使用ToolTip的时候我们要注意两点。

<1>: ToolTip有点特殊，它不能独立的作为一个控件使用，而是与其他具体控件的ToolTip联合使用。

<2>:ToolTip提供了一个ToolTipSerivce类，可用于设计Tooltip显示的相对位置，提示时间，嘿嘿，蛮有意思。


<Window x:Class="ToolTipDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="130,103,0,0" Name="button1" VerticalAlignment="Top" Width="75" 
                ToolTipService.HorizontalOffset="20"
                ToolTipService.VerticalOffset="20" >
            <Button.ToolTip>
                <StackPanel>
                    <GroupBox Header="XXX选择题，你懂得...">
                        <GroupBox.Content>
                            <StackPanel>
                                <TextBlock x:Name="A">A:XXXX</TextBlock>
                                <TextBlock x:Name="B">B:XX</TextBlock>
                                <TextBlock x:Name="C">C:OOOO</TextBlock>
                                <TextBlock x:Name="D">D:OO</TextBlock>
                            </StackPanel>
                        </GroupBox.Content>
                    </GroupBox>
                </StackPanel>
            </Button.ToolTip>
        </Button>
    </Grid>
</Window>

4：ScrollViewer

   在内容控件中很常用的一个莫过于ScrollViewer，因为我们在界面布局时，永远都是“内容”大于界面，那么内容超出了我们该怎么办呢？

我们知道Html中Div具有裁剪功能，当内容超出，自动就有滚动条，那么在wpf中的ScrollViewer也能够实现同样的功能。


<Window x:Class="ScrollViewerDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <ScrollViewer Height="108" HorizontalAlignment="Left" Margin="98,63,0,0"
                      Name="scrollViewer1" VerticalAlignment="Top" Width="224" 
                      VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
            <StackPanel x:Name="Test" Orientation="Horizontal">

            </StackPanel>
        </ScrollViewer>
    </Grid>
</Window>


namespace ScrollViewerDemo
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            for (int i = 0; i < 100; i++)
            {
                TextBox tbx = new TextBox();

                tbx.Text = i.ToString();

                Test.Children.Add(tbx);
            }
        }
    }
}

二：条目控件

   条目控件首先都是继承自ItemsControl，在ItemsControl中我们发现有两个比较有意思的属性，Items和ItemsSource。

 

Items：

从图中可以看出Items属于ItemCollection的集合类型，所以每一个Item里面都可以放入一个Object类型对象，这里有意思的地方就是，

如果我放入的是一个UI元素，那么很好，wpf会调用UI的OnRender方法将UI元素呈现，如果说是一个没有OnRender方法的元素，那该

怎么办呢？wpf很智能，它会创建一个TextBlock，然后调用该对象的ToString()将字符串呈现在TextBlock上。

 

ItemsSource:

从前面文章中我们也看到，ItemsSource常用于数据绑定，所以是一个非常实用的属性。

 

好，接下来我们看一下条目控件的类图

从图中，我们大致可以看出这些控件可以分为两大类。

第一类：就是“条目容器”，比如Menu。

第二类：就是“具体条目”，比如MenuItem，但是在MenuItem中又可以分为“带标题”和“不带标题”的两类具体条目”。

 

<1>MenuBase

    从图中我们可以看出MenuBase的子类有两个Menu和ContextMenu,在Winform中我想大家肯定玩烂了，这里我也不多说了。

 

<2>Selector

既然是选择性的控件，那么难免少不了SelectedIndex或者SelectedItem，可以我们反应就是Listbox，嘿嘿，关于ListBox

和ComboBox这里就不多说了，我们具体的还是看下TabControl和ListView,先还是看下Selector类中的定义。

 

TabControl:

  这个控件我们在Html中用的还是比较多的，顾名思义就是选项卡，因为我们知道用ListBox是很占用空间的，而TabControl是具有更小的

地方展现更多的内容，其实TabControl的每一个标签页都是一个TabItem。


<Window x:Class="TabControlDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <TabControl Height="100" HorizontalAlignment="Left" Margin="103,51,0,0"
                    Name="tabControl1" VerticalAlignment="Top" Width="200"
                     TabStripPlacement="Top" >
            <TabItem Header="星期一" Name="tabItem1">
                <TabItem.Content>
                    <TextBlock x:Name="test1" Text="你懂的"/>
                </TabItem.Content>
            </TabItem>
            <TabItem Header="星期一" Name="tabItem2">
                <TabItem.Content>
                    <TextBlock x:Name="test2" Text="你不懂的"/>
                </TabItem.Content>
            </TabItem>
        </TabControl>
    </Grid>
</Window>

ListView：

这个控件我们在实际开发中经常用于数据绑定，它是继承自ListBox，ListBox默认只能显示一列，而ListView则可以用于显示多列，

这里我提一个很有兴趣的玩意ObservableCollection<T>。它有什么用呢？其实ObservableCollection可以允许一个UI元素作为观察者

对它进行监视，也就是说如果ObservableCollection中的元素有变动，作为观察的UI元素也会相应的改变，下面举个例子。


<Window x:Class="ListViewDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        DataContext="{Binding RelativeSource={RelativeSource Self}}"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <ListView ItemsSource="{Binding PersonList}">
            <ListView.View>
                <GridView>
                    <GridViewColumn Header="姓名" DisplayMemberBinding="{Binding Path=Name}"/>
                    <GridViewColumn Header="年龄" DisplayMemberBinding="{Binding Path=Age}"/>
                </GridView>
            </ListView.View>
        </ListView>
        <Button Content="删除一行" Click="Button_Click" Margin="315,174,35,103" />
    </Grid>
</Window>


namespace ListViewDemo
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        private ObservableCollection<Person> personList = new ObservableCollection<Person>();

        public ObservableCollection<Person> PersonList
        {
            get { return personList; }
            set { personList = value; }
        }

        public MainWindow()
        {
            InitializeComponent();

            personList.Add(new Person() { Name = "一线码农", Age = 24 });

            personList.Add(new Person() { Name = "XXX", Age = 21 });
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            personList.RemoveAt(0);
        }
    }

    public class Person
    {
        public string Name { get; set; }

        public int Age { get; set; }
    }
}

                     <====  单击删除一行后  ====>

 

<3>StatusBar

关于状态栏控件，我想大家在WinForm中已经玩烂了，此处也就不多说了。

 

<4>TreeView

我们知道TreeView是一个树形控件，在Html中如果想展现一个树形结构，我们只要将数据结构“深度优先”一下就OK了，关于

TreeView的数据绑定，我的前一篇文章也说过，这里也就走马观花一下。

 

三：文本控件

在wpf中，文本控件有三个，分别是：TextBox,RichTextBox和PasswordBox，先不管怎么样，上类图

这几个控件，我想在winform中用的还是比较熟的，这里也就不罗嗦了。

 

四：范围控件

还是先上图：

下面我们看看RangeBase的类定义：

图中可以看出RangeBase是一个抽象类，定义了4个基本属性：LargeChange,SmallChange,Maximum,Minimum，有了这些东西

我们才能方便快捷的使用范围控件。

 

<1> ScrollBar

在先前的例子中，我们经常用一个控件来绑定ScrollBar的Value来形成联动，也就可以避免在后台的不必要代码，灵活方便。


<Window x:Class="ScrollBar.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <StackPanel Height="100" Margin="97,61,206,150" Name="stackPanel1" Width="200">
            <ScrollBar Name="test" Orientation="Horizontal" Maximum="100" Minimum="5" SmallChange="2" Height="17" Width="186" />
            <Label Content="滑动块值"/>
            <TextBox Name="txtScrollValue" Text="{Binding ElementName=test, Path=Value}"/>
        </StackPanel>
    </Grid>
</Window>

 

<2>ProgressBar

  这个控件我们在实际应用上使用的还是比较多的，因为我们在完成一个任务时，可能需要等待数十秒或者数分钟，所以为了不让用户认为

系统处于假死状态，就要用一个等待进度条，这里有意思的地方就是，如果我们不知道任务何时完成或者说不在乎任务何时结束，我们可以

设一个无限等待的进度条，也就是说进度条上有一个“小矩形”在不停的滚动，我们要做的也就是设置IsIndeterminate=true即可。


文章标签：
C#
容器
关键词：
wpf入门
wpf控件
入门wpf控件
一线码农
目录
相关文章
长梦
|
3月前
|
C# 开发者 Windows
WPF 应用程序开发：一分钟入门
本文介绍 Windows Presentation Foundation (WPF)，这是一种用于构建高质量、可缩放的 Windows 桌面应用程序的框架，支持 XAML 语言，方便 UI 设计与逻辑分离。文章涵盖 WPF 基础概念、代码示例，并深入探讨常见问题及解决方案，包括数据绑定、控件样式与模板、布局管理等方面，帮助开发者高效掌握 WPF 开发技巧。
长梦
170 65
广州爱奇迪-伍华聪
|
4月前
|
开发框架 缓存 前端开发
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(11) -- 下拉列表的数据绑定以及自定义系统字典列表控件
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(11) -- 下拉列表的数据绑定以及自定义系统字典列表控件
广州爱奇迪-伍华聪
138 15
追逐时光者
|
4月前
|
C# 开发者 Windows
一款基于Fluent设计风格、现代化的WPF UI控件库
一款基于Fluent设计风格、现代化的WPF UI控件库
追逐时光者
105 1
mingupup
|
4月前
|
C# Windows
WPF中如何使用HandyCotrol控件库
WPF中如何使用HandyCotrol控件库
mingupup
199 1
土木林森
|
4月前
|
C# 开发者 Windows
全面指南：WPF无障碍设计从入门到精通——让每一个用户都能无障碍地享受你的应用，从自动化属性到焦点导航的最佳实践
【8月更文挑战第31天】为了确保Windows Presentation Foundation (WPF) 应用程序对所有用户都具备无障碍性，开发者需关注无障碍设计原则。这不仅是法律要求，更是社会责任，旨在让技术更人性化，惠及包括视障、听障及行动受限等用户群体。
土木林森
88 0
土木林森
|
4月前
|
C# 前端开发 UED
WPF数据验证实战：内置控件与自定义规则，带你玩转前端数据验证，让你的应用程序更上一层楼！
【8月更文挑战第31天】在WPF应用开发中，数据验证是确保输入正确性的关键环节。前端验证能及时发现错误，提升用户体验和程序可靠性。本文对比了几种常用的WPF数据验证方法，并通过示例展示了如何使用内置验证控件（如`TextBox`）及自定义验证规则实现有效验证。内置控件结合`Validation`类可快速实现简单验证；自定义规则则提供了更灵活的复杂逻辑支持。希望本文能帮助开发者更好地进行WPF数据验证。
土木林森
139 0
土木林森
|
4月前
|
C# UED 定位技术
WPF控件大全：初学者必读，掌握控件使用技巧，让你的应用程序更上一层楼！
【8月更文挑战第31天】在WPF应用程序开发中，控件是实现用户界面交互的关键元素。WPF提供了丰富的控件库，包括基础控件（如`Button`、`TextBox`）、布局控件（如`StackPanel`、`Grid`）、数据绑定控件（如`ListBox`、`DataGrid`）等。本文将介绍这些控件的基本分类及使用技巧，并通过示例代码展示如何在项目中应用。合理选择控件并利用布局控件和数据绑定功能，可以提升用户体验和程序性能。
土木林森
77 0
土木林森
|
4月前
|
C# Windows IDE
WPF入门实战：零基础快速搭建第一个应用程序，让你的开发之旅更上一层楼！
【8月更文挑战第31天】在软件开发领域，WPF（Windows Presentation Foundation）是一种流行的图形界面技术，用于创建桌面应用程序。本文详细介绍如何快速搭建首个WPF应用，包括安装.NET Framework和Visual Studio、理解基础概念、创建新项目、设计界面、添加逻辑及运行调试等关键步骤，帮助初学者顺利入门并完成简单应用的开发。
土木林森
142 0
广州爱奇迪-伍华聪
|
4月前
|
开发框架 前端开发 JavaScript
WPF应用开发之控件动态内容展示
WPF应用开发之控件动态内容展示
广州爱奇迪-伍华聪
57 2
mingupup
|
4月前
|
前端开发 C#
wpfui：一个开源免费具有现代化设计趋势的WPF控件库
wpfui：一个开源免费具有现代化设计趋势的WPF控件库
mingupup
152 0