【C# .NET】WPF (五) 常用控件之内容控件（ContentControls）

卫觉

一个爱学习的笨蛋

WPF常用控件

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

WPF有两个类似的类继承树，一个与界面（ UI ）相关，如 UIElement 类；另一个与内容（ Content ）相关，如 ContentElement。

ContentElement 支持文本方式，而 UIElement 则支持图形方式。

Control 类中派生出来的控件，基本上可以分为4类：

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

内容控件（ContentControls）继承树：

5. 内容控件（ContentControls）

内容控件是 WPF 控件中的一大类，ContentControl 直接从 Control 类中派生出来。

1）内容控件包括：

Frame（框架控件）

2. Button（普通按钮）

3. ToggleButton（拨动按钮）

4. CheckBox（选择控件）

5. RadioButton（单选按钮）

6. RepeatButton（重复按钮）

7. HeaderedContentControl（标题栏内容控件）

8. GroupBox（分组框）

9. Expander（伸展控件）

10. Lable（标签控件）

ContentControls 中常用控件：

5.1 框架控件（Frame）

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

例子：

    <StackPanel>
        <Frame>
            <Frame.Content>
                <Button Content="Button" Foreground="Black" FontSize="50"/>
            </Frame.Content>
        </Frame>
    </StackPanel>

Frame可以嵌入HTML ，例子：

    <StackPanel>
        <Frame Source="https://www.baidu.com/" Foreground="White"/>
    </StackPanel>

Frame 只能是简单的嵌入 HTML，通常用于静态页面，无法进行动态加载
动态加载需要引用另一个框架，这里不进行讲解，感兴趣的同学可以私聊我发教程

5.2 通用按钮基类 (ButtonBase)

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

ButtonBase 常用属性	描述
Name	获取或设置元素的唯一标识名称
Background	获取或设置控件填充背景画笔
Foreground	获取或设置控件前景色的画笔
BorderBrush	获取或设置控件边框颜色画笔
BorderThickness	获取或设置控件的边框宽度
Opacity	获取或设置控件的不透明度
Content	获取或设置控件中的文字内容
Margin	获取或设置元素的外边距
MaxHeight	获取或设置元素的最大高度约束
MaxWidth	获取或设置元素的最大宽度约束
MinHeight	获取或设置元素的最小高度约束
MinWidth	获取或设置元素的最小宽度约束
Height	获取或设置元素的高度
Width	获取或设置元素的宽度
HorizontalAlignment	获取或设置在父元素中此元素的水平对齐方式
HorizontalContentAlignment	获取或设置控件内容的水平对齐方式
VerticalAlignment	获取或设置在父元素中此元素的垂直对齐方式
VerticalContentAlignment	获取或设置控件内容的垂直对齐方式
Visibility	获取或设置此元素的可见性
Cursor	获取或设置在鼠标位于此元素上时显示的光标
FontFamily	获取或设置控件的字体系列
FontSize	获取或设置字号
FontWeight	获取或设置指定字体的粗细
Command（重点）	获取或设置在按下按钮时调用的命令
CommandParameter（重点）	获取或设置要传递给 Command 属性的参数
CommandTarget（重点）	获取或设置要引发指定命令的对象
ContentTemplate（重点）	获取或设置用于显示 ContentControl 内容的数据模板
ContentTemplateSelector（重点）	获取或设置一个模板选择器，以使应用程序编写器能够提供自定义模板选择逻辑
Template（重点）	获取或设置控件模板
Style（重点）	获取或设置此元素呈现时所使用的样式
ToolTip	获取或设置在用户界面中为此元素显示的工具提示对象
Triggers（重点）	获取直接在此元素上或在子元素中建立的触发器的集合
IsCancel	获取或设置一个值，该值指示 Button 是否是一个“取消”按钮。用户可以通过按 ESC 键来激活 Cancel 按钮
IsDefault	获取或设置一个值，该值指示 Button 是否是一个默认按钮。用户可以通过按 ENTER 键调用默认按钮
ClickMode	获取或设置 Click 事件何时发生

属性太多，这里就不一一演示，有兴趣的同学自行摸索，标注重点的，是真的非常重点

ButtonBase 常用事件	描述
Click	在单击 Button 时发生
MouseDoubleClick	在双击或多次单击鼠标按钮时发生
MouseDown	在鼠标位于此元素上并且按下任意鼠标按钮时发生
MouseEnter	在鼠标进入此元素的边界时发生
MouseLeave	在鼠标离开此元素的边界时发生
MouseLeftButtonDown	在鼠标位于此元素上并且按下鼠标左键时发生
MouseLeftButtonUp	在鼠标位于此元素上并且松开鼠标左键时发生
MouseMove	在鼠标位于此元素上并且移动鼠标指针时发生
MouseRightButtonDown	在鼠标位于此元素上并且按下鼠标右键时发生
MouseRightButtonUp	在鼠标位于此元素上并且松开鼠标右键时发生
MouseUp	在鼠标位于此元素上并且松开任意鼠标按钮时发生
MouseWheel	在鼠标位于此元素上并且用户滚动鼠标滚轮时发生

5.3 普通按钮（Button）

1）点击状态触发事件：

XAML代码：

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

C#代码：

    public partial class MainWindow : Window
        public MainWindow()
            InitializeComponent();
        void OnClick1(object sender, RoutedEventArgs e)
            btn1.Background = Brushes.Blue;
        void OnClick2(object sender, RoutedEventArgs e)
            btn2.Background = Brushes.Red;
        void OnClick3(object sender, RoutedEventArgs e)
            btn1.Background = Brushes.Yellow;
            btn2.Background = Brushes.Violet;

运行演示：

点击状态触发事件都是由鼠标左键触发

2）鼠标状态触发事件：

XMAL代码：

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

C#代码：

    public partial class MainWindow : Window
        public MainWindow()
            InitializeComponent();
        private void btn1_MouseEnter(object sender, MouseEventArgs e)
            btn1.Content = "鼠标进入";
            btn1.Background = Brushes.White;
        private void btn1_MouseLeave(object sender, MouseEventArgs e)
            btn1.Content = "鼠标离开";
            btn1.Background = Brushes.Gray;
        //按下鼠标右键
        private void btn1_MouseDown(object sender, MouseButtonEventArgs e)
            btn1.Content = "按下鼠标右键";
            btn1.Background = Brushes.Blue;
        //抬起鼠标右键
        private void btn1_MouseUp(object sender, MouseButtonEventArgs e)
            btn1.Content = "抬起鼠标右键";
            btn1.Background = Brushes.Orange;
       //双击鼠标左键
        private void btn1_MouseDoubleClick(object sender, MouseButtonEventArgs e)
            btn1.Content = "双击鼠标左键";
            btn1.Background = Brushes.Red;

运行演示：

5.4 拨动按钮（ToggleButton）

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

有时，我们需要拨动按钮维持三个状态，这时我们把 IsThreeeState 属性设为 True ，这时，IsChecked 的属性值可取三个值： True, False 和 Null 。

常用事件	发生小件
Checked	当 IsChecked 为 True 时，产生该事件
UnChecked	当 IsChecked 为 False 时，产生该事件
Indeterminate	当 IsChecked 为 Null 时，产生该事件

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

样式模版参考：

5.5 选择控件（CheckBox）

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

XAML代码：

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

C#代码：

    public partial class MainWindow : Window
        public MainWindow()
            Initial如果izeComponent();
        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";

运行演示：

5.6 单选按钮（RadioButton）

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

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

XAML代码：

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

C#代码：

    public partial class MainWindow : Window
        public MainWindow()
            InitializeComponent();
        void WriteText2(object sender, RoutedEventArgs e)
            RadioButton li = (sender as RadioButton);
            txtb.Text = "你选择： " + li.Content.ToString() + ".";

运行演示：

所以说，如果只有一个单选组的情况下，可以不用设置分组，各组之间互不干涉

5.7 重复按钮（RepeatButton）

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

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

常用属性	描述
Delay	获取或设置开始重复前被按下时等待的时间（以毫秒为单位）。该值必须为非负数
Interval	获取或设置开始重复后重复之间的时间间隔（以毫秒为单位）。该值必须为非负数

XAML代码：

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

C#代码：

    public partial class MainWindow : Window
        public MainWindow()
            InitializeComponent();
        void Increase(object sender, RoutedEventArgs e)
            Int32 Num = Convert.ToInt32(valueText.Text);
            valueText.Text = ((Num + 1).ToString());
        void Decrease(object sender, RoutedEventArgs e)
            Int32 Num = Convert.ToInt32(valueText.Text);
            valueText.Text = ((Num - 1).ToString());

5.8 标题栏内容控件（HeaderedContentControl）

标题栏内容控件一般用在需要带有标题的情况，它并没有太大的作用，通常我们不直接使用 HeaderedContentControl 控件，而是使用他的派生类：分组框和伸展控件。

常用属性	描述
Header	获取或设置标题
BorderThickness	获取或设置边框线条大小
Foreground	获取或设置边框颜色

    <StackPanel>
        <HeaderedContentControl Width="200" Height="200" BorderBrush="White" BorderThickness="5" >
            <HeaderedContentControl.Header>
                <TextBlock Background="Gray" FontSize="20" Foreground="White" Text="我是标题"/>
            </HeaderedContentControl.Header>
            <HeaderedContentControl.Content>
                <StackPanel>
                    <TextBlock Text="我是内容" FontSize="15" Foreground="LightGreen"/>
                </StackPanel>
            </HeaderedContentControl.Content>
        </HeaderedContentControl>
    </StackPanel>

5.9 分组框（GroupBox）

分组框（GroupBox）作用是把一些相近的控件放在一起，同时用一个带标题的边框把它们组合起来。

XAML代码：

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

实际上分组框仅仅只是起到一个边框加标题的作用，内容你可以是任意控件，例如，你把TextBlock 和 Button 组合放一起，也是没问题，只要是继承自 ContentControl 类的控件都可以。

5.10 伸展控件（Expander）

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

常用属性	描述
ExpandDirection	获取或设置伸缩方向
IsExpanded	获取或设置默认伸展方式

XAML代码：

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

5.11 标签控件（Lable）

标签控件可以在窗口的某个地方显示字符串。

在WPF里，TextBlock 和 TextBox 等都可以用来显示字符串。标签控件区别于 TextBlock 和TextBox 的功能主要有两点：

1．在默认的情况下，标签控件是只读的，颜色是灰色的；

2．标签控件内置了一个AccessText控件，可以直接设定热键到目标控件。

XAML代码：

    <StackPanel Orientation="Vertical">
        <Label Target="{Binding ElementName=tb}" Foreground="LightGreen" Content="快捷键（_p）"/>
        <TextBox x:Name="tb" Text="同时按下 Alt 和 p 键,可获取输入焦点"/>
        <Label Target="{Binding ElementName=tb1}" Foreground="LightGreen" Content="快捷键（_o）"/>
        <TextBox x:Name="tb1" Text="同时按下 Alt 和 o 键，可获取输入焦点"/>
    </StackPanel>

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

5.12 热键设置（AccessText）

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

前面介绍了 Label 可以设置热键，事实上，大部分控件都能设置热键。

XAML代码：

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

5.13 提示控件（ToolTip）

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

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

XAML代码：

    <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需要注意下述两点：

1. ToolTip 虽然是一个控件，但其本身不具备接收用户输入的功能。比如上面的例子中，在ToolTip 中使用了 Button，你就无法点击 Button。

2. ToolTip 虽然是一个控件，但它不能像其他控件那样作为其他控件的子控件，它必须和某个控件的 ToolTip 属性相连。

5.14 滚动条（ScrollViewer）

当窗口中的内容比窗口的大小要大时，通常要在窗口中显示滚动条。在WPF中显示滚动条要用到ScrollViewer类，这是一个内容控件，和所有的内容控件一样，它只能含有一个子控件。


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

    <ScrollViewer HorizontalScrollBarVisibility="Auto">
        <StackPanel>
            <Button Content="Start" HorizontalAlignment="Center" Background="LightGreen"