WPF 10天修炼 第五天- 内容控件

WPF内容控件

　　在WPF中，所有呈现在用户界面上的对象都称为用户界面元素。但是只有派生自System.Windows.Controls.Control类的对象才称为控件。内容控件通常是指具有Content属性的控件，Content属性并非定义在每个控件中，而是定义在基类System.Windows.Controls命名空间的ContentControl类中。注意：Content属性只接收单个内容元素。

WPF内容控件分类

1、  直接继承ContentControl的控件

2、  继承HeaderedContentControl的控件

3、  继承ItemsControl的控件

4、  继承HeaderedItemsControl的控件

 

直接继承ContentControl的控件

　　也可以成为单项内容控件，这种控件只能指定一个内容元素。WPF中包含的单项内容控件：

　　Button：按钮控件

　　CheckBox：复选框控件

　　ComboBoxItem：单选框列表项

　　ContentControl：内容控件的基类

　　Frame：页框架

　　GridViewColumnHeader：按钮控件的标题头

　　GroupItem：组合框的组合项。

　　Label：标签控件。

　　ListBoxItem：列表项。

　　ListViewItem：列表视图项。

　　NavigationWindow：导航窗口。

　　RadioButton：单选按钮。

　　RepeatButton：重复按钮。

　　ScrollViewer：滚动查看器，或称为滚动面板。

　　StatusBarItem：状态项。

　　ToggleButton：选中按钮。

　　ToolTip：提示控件。

　　UserControl：用户控件。

　　Window：WPF窗口

 

继承HeaderedContentControl的控件

         这类控件包含一个标头和一个内容项目。HeaderedContentControl类派生自ContentControl，继承了其Content属性，同时又定了类型Object的Header属性。Header提供了控件的标头。WPF中包含的这类控件有3个：

Exapander：带标题的折叠控件。

GroupBox：组合框控件。

TabItem：这是TabControl控件内的一个Tab项。

 

继承ItemsControl的控件

         这类控件包含一个内容项的集合。例如ListBox控件就是一个典型的ItemsControl控件，该控件具有ListBxItem内容项的集合。

继承HeaderedItemsControl的控件

         该类控件包含一个标头和一个内容项的集合。HeaderedItemsControl类继承ItemsControl类。在WPF中有3个这种类型的控件。

         MenuItem：菜单项控件。

         ToolBar：工具条控件。

         TreeviewItem：树状图。

Content属性

WPF中的Content属性可接收的对象分为两大类：

1、  继承自UIElement基类的对象：UIElement定义了WPF中的布局、输入及路由等。是WPF的核心子系统。这种类型的对象具有可视化特性，WPF将使用UIElement.OnRedner方法来显示派生自该类的对象，OnRender方法将生成一个绘图呈现，在需要时进行绘制。

2、  继承自其他类的对象：WPF的处理方法很简单，通过调用该对象的ToString方法来显示一行文本。

 

内容容器控件

ScrollViewer滚动条控件

<Window x:Class="WPFDemo.ScrollViewerDemo"

        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:local="clr-namespace:WPFDemo"

        mc:Ignorable="d"

        WindowStartupLocation="CenterScreen"

        Title="ScrollViewerDemo" Height="300" Width="300"> 

    <ScrollViewer>

        <Grid Height="400">

            <Grid.RowDefinitions>

                <RowDefinition />

                <RowDefinition />

                <RowDefinition />

                <RowDefinition />

                <RowDefinition />

            </Grid.RowDefinitions> 

            <Button Name="button1" Content="button1" Grid.Row="0"></Button>

            <Button Name="button2" Content="button2" Grid.Row="1"></Button>

            <Button Name="button3" Content="button3" Grid.Row="2"></Button>

            <Button Name="button4" Content="button4" Grid.Row="3"></Button>

            <Button Name="button5" Content="button5" Grid.Row="4"></Button>

        </Grid>

    </ScrollViewer>

</Window>

默认情况下ScrollViewer总是显示一个垂直的滚动条。可以通过调整VerticalScrollBarVisibility属性来设置滚动条的显示方式。也可以使用HorizontalScrollBarVisibility属性设置水平滚动条的显示方式。

<ScrollViewer  Width="100">

        <Grid Height="400">

            <Grid.RowDefinitions>

                <RowDefinition />

                <RowDefinition />

                <RowDefinition />

                <RowDefinition />

                <RowDefinition />

            </Grid.RowDefinitions>

            <Button Name="button1" Content="button1" Grid.Row="0" Width="200"></Button>

            <Button Name="button2" Content="button2" Grid.Row="1" Width="200"></Button>

            <Button Name="button3" Content="button3" Grid.Row="2" Width="200"></Button>

            <Button Name="button4" Content="button4" Grid.Row="3" Width="200"></Button>

            <Button Name="button5" Content="button5" Grid.Row="4" Width="200"></Button>

        </Grid>

    </ScrollViewer>

设置横向滚动条显示

<ScrollViewer  Width="100" HorizontalScrollBarVisibility="Auto">

        <Grid Height="400">

            <Grid.RowDefinitions>

                <RowDefinition />

                <RowDefinition />

                <RowDefinition />

                <RowDefinition />

                <RowDefinition />

            </Grid.RowDefinitions> 

            <Button Name="button1" Content="button1" Grid.Row="0" Width="200"></Button>

            <Button Name="button2" Content="button2" Grid.Row="1" Width="200"></Button>

            <Button Name="button3" Content="button3" Grid.Row="2" Width="200"></Button>

            <Button Name="button4" Content="button4" Grid.Row="3" Width="200"></Button>

            <Button Name="button5" Content="button5" Grid.Row="4" Width="200"></Button>

        </Grid>

    </ScrollViewer>

 HorizontalScrollBarVisibility属性和VerticalScrollBarVisibility这两个属性都是ScrollBarVisibility枚举类型的值。下表是ScrollBarVisibility枚举值：

枚举值	描述
Disabled	禁止显示滚动条，即使当前视图区域无法显示所有内容，滚动条也不出现
Auto	当前视图区域可以容纳所有内容时，不显示滚动条，否则自动显示滚动条。
Hidden	隐藏滚动条的显示，但是用户可以通过键盘等进行滚动。该属性主要用于自定义滚动方式。
Visible	无论如何滚动条都会显示。

 

 

使用下面实例演示ScrollViewer自定义滚动

<Window x:Class="WPFDemo.ScrollViewerDemo_CustomPage"

        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:local="clr-namespace:WPFDemo"

        mc:Ignorable="d"

        Title="ScrollViewerDemo_CustomPage" Height="300" Width="300">

    <DockPanel Background="AliceBlue">

        <TextBlock DockPanel.Dock="Top" Text="ScrollViewer 自定义滚动" FontSize="20" Background="AntiqueWhite" Margin="10"></TextBlock>

        <TextBlock DockPanel.Dock="Top" Text="使用左侧按钮进行翻页" FontSize="20" Background="AntiqueWhite" Margin="10"></TextBlock>

        <StackPanel DockPanel.Dock="Left" Width="150" Background="Aqua">

            <Button Name="btnLineUp" Content="向上滚动"    Margin="10" Padding="10" Click="btnLineUp_Click" />

            <Button Name="btnLineDown" Content="向下滚动"  Margin="10" Padding="10" Click="btnLineDown_Click" />

            <Button Name="btnLineLeft" Content="向左滚动"  Margin="10" Padding="10" Click="btnLineLeft_Click" />

            <Button Name="btnLineRight" Content="向右滚动" Margin="10" Padding="10" Click="btnLineRight_Click" />

            <Button Name="btnPageUp" Content="向上翻页"    Margin="10,30,10,10" Padding="10" Click="btnPageUp_Click" />

            <Button Name="btnPageDown" Content="向上翻页"  Margin="10" Padding="10" Click="btnPageDown_Click" />

            <Button Name="btnPageLeft" Content="向左翻页"  Margin="10" Padding="10" Click="btnPageLeft_Click" />

            <Button Name="btnPageRight" Content="向右翻页" Margin="10" Padding="10" Click="btnPageRight_Click" />

        </StackPanel>

        <StackPanel DockPanel.Dock="Left" Width="150" Background="Aqua">

            <Button Name="btnLineHome" Content="回到首行"    Margin="10" Padding="10" Click="btnLineHome_Click" />

            <Button Name="btnLineEnd" Content="回到尾行"    Margin="10" Padding="10" Click="btnLineEnd_Click" />

            <Button Name="btnColumnHome" Content="回到首列"    Margin="10" Padding="10" Click="btnColumnHome_Click" />

            <Button Name="btnColumnEnd" Content="回到尾列"    Margin="10" Padding="10" Click="btnColumnEnd_Click" />

            <Button Name="btnLineOffsetUp" Content="向下偏移3个单位"    Margin="10,30,10,10" Padding="10" Click="btnLineOffsetUp_Click" />

            <Button Name="btnColumnOffsetRight" Content="向右偏移3个单位"    Margin="10" Padding="10" Click="btnColumnOffsetRight_Click" />

            <Button Name="btnLineOffsetDown" Content="向上偏移3个单位"    Margin="10" Padding="10" Click="btnLineOffsetDown_Click" />

            <Button Name="btnColumnOffsetLeft" Content="向左偏移3个单位"    Margin="10" Padding="10" Click="btnColumnOffsetLeft_Click" />

        </StackPanel>

        <Border Width="500" Height="400" BorderThickness="2" Background="Beige"  VerticalAlignment="Top" HorizontalAlignment="Left">

            <ScrollViewer Name="SVText" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Visible">

                <TextBlock Name="txtText" Width="800" Height="900" TextWrapping="Wrap"></TextBlock>

            </ScrollViewer>

        </Border>

    </DockPanel>

</Window>

添加后台代码

namespace WPFDemo
{
    /// <summary>
    /// ScrollViewerDemo_CustomPage.xaml 的交互逻辑
    /// </summary>
    public partial class ScrollViewerDemo_CustomPage : Window
    {
        public ScrollViewerDemo_CustomPage()
        {
            InitializeComponent();
            BindText();
        }
        public void BindText()
        { 
            for (int i = 0; i < 1000; i++)
            {
                txtText.Text += i + "
";
            }
        }

        private void btnLineUp_Click(object sender, RoutedEventArgs e)
        {
            SVText.LineUp();
        }
         
        private void btnLineDown_Click(object sender, RoutedEventArgs e)
        {
            SVText.LineDown();
        }

        private void btnLineLeft_Click(object sender, RoutedEventArgs e)
        {
            SVText.LineLeft();
        }

        private void btnLineRight_Click(object sender, RoutedEventArgs e)
        {
            SVText.LineRight();
        }
         
        private void btnPageUp_Click(object sender, RoutedEventArgs e)
        {
            SVText.PageUp();
        }

        private void btnPageDown_Click(object sender, RoutedEventArgs e)
        {
            SVText.PageDown();
        }

        private void btnPageLeft_Click(object sender, RoutedEventArgs e)
        {
            SVText.PageLeft();
        }

        private void btnPageRight_Click(object sender, RoutedEventArgs e)
        {
            SVText.PageRight();
        }

        private void btnLineHome_Click(object sender, RoutedEventArgs e)
        {
            SVText.ScrollToHome();
        }

        private void btnLineEnd_Click(object sender, RoutedEventArgs e)
        {
            SVText.ScrollToEnd();
        }

        private void btnColumnHome_Click(object sender, RoutedEventArgs e)
        {
            SVText.ScrollToLeftEnd();
        }

        private void btnColumnEnd_Click(object sender, RoutedEventArgs e)
        {
            SVText.ScrollToRightEnd();
        }

        private void btnLineOffsetUp_Click(object sender, RoutedEventArgs e)
        {
            SVText.ScrollToVerticalOffset(SVText.VerticalOffset + 3);
        }

        private void btnColumnOffsetRight_Click(object sender, RoutedEventArgs e)
        {
            SVText.ScrollToHorizontalOffset(SVText.HorizontalOffset + 3);
        }

        private void btnLineOffsetDown_Click(object sender, RoutedEventArgs e)
        {
            SVText.ScrollToVerticalOffset(SVText.VerticalOffset - 3);
        }

        private void btnColumnOffsetLeft_Click(object sender, RoutedEventArgs e)
        {
            SVText.ScrollToHorizontalOffset(SVText.HorizontalOffset - 3);
        }
    }
}

 

GroupBox组合框

<Window x:Class="WPFDemo.GroupBoxDemo"

        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:local="clr-namespace:WPFDemo"

        mc:Ignorable="d"

        Title="GroupBoxDemo" Height="300" Width="300">

    <Grid>

        <Grid.RowDefinitions>

            <RowDefinition />

            <RowDefinition />

        </Grid.RowDefinitions>

        <GroupBox Header="GroupBox组合框" Grid.Row="0" Margin="20">

            <StackPanel>

                <CheckBox Margin="10">选项1</CheckBox>

                <CheckBox Margin="10">选项2</CheckBox>

                <CheckBox Margin="10">选项3</CheckBox>

            </StackPanel>

        </GroupBox>

        <GroupBox Header="GroupBox组合框2" Grid.Row="1" Margin="20">

            <StackPanel>

                <RadioButton Margin="10">选项1</RadioButton>

                <RadioButton Margin="10">选项2</RadioButton>

                <RadioButton Margin="10">选项3</RadioButton>

            </StackPanel>

        </GroupBox>

    </Grid>

</Window>

TabItem标签页控件

<Window x:Class="WPFDemo.TabItemDemo"

        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:local="clr-namespace:WPFDemo"

        mc:Ignorable="d"

        Title="TabItemDemo" Height="300" Width="300">

    <Grid>

        <TabControl>

            <TabItem Header="选项卡1">

                <StackPanel>

                    <CheckBox  Margin="5">选项1</CheckBox>

                    <CheckBox  Margin="5">选项2</CheckBox>

                    <CheckBox  Margin="5">选项3</CheckBox>

                </StackPanel>

            </TabItem>

            <TabItem Header="选项卡2" IsSelected="True">

                <Grid>

                    <Grid.RowDefinitions>

                        <RowDefinition/>

                        <RowDefinition/>

                    </Grid.RowDefinitions>

                    <GroupBox Header="GroupBox1" Margin="10" Grid.Row="0">

                        <StackPanel>

                            <CheckBox Margin="5">选项1</CheckBox>

                            <CheckBox Margin="5">选项2</CheckBox>

                            <CheckBox Margin="5">选项3</CheckBox>

                        </StackPanel>

                    </GroupBox>

                    <GroupBox Header="GroupBox2" Margin="10" Grid.Row="1">

                        <StackPanel>

                            <RadioButton Margin="5">选项1</RadioButton>

                            <RadioButton Margin="5">选项2</RadioButton>

                            <RadioButton Margin="5">选项3</RadioButton>

                        </StackPanel>

                    </GroupBox>

                </Grid>

            </TabItem>

            <TabItem Header="选项卡3">

                <StackPanel>

                    <RadioButton  Margin="5">选项1</RadioButton>

                    <RadioButton  Margin="5">选项2</RadioButton>

                    <RadioButton  Margin="5">选项3</RadioButton>

                </StackPanel>

            </TabItem>

        </TabControl>

    </Grid>

</Window>

 

Expander可折叠控件

 属性：

IsExpanded:获取和设置Expander控件的折叠状态。

ExpandDirection：获取或设置Expander控件内容展开的方向。枚举值：包含Up、Down、Left、Right，分别为上下左右。

事件：

Collapsed：当Expander折叠时，在内容实际被收起前触发该事件。

Expanded：当Expander展开时，在内容实际被显示前触发该事件。

<Window x:Class="WPFDemo.ExpanderDemo"

        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:local="clr-namespace:WPFDemo"

        mc:Ignorable="d"

        Title="ExpanderDemo" Height="300" Width="300">

    <Grid>

        <Grid.RowDefinitions>

            <RowDefinition Height="Auto"/>

            <RowDefinition Height="Auto"/>

            <RowDefinition Height="Auto"/>

            <RowDefinition Height="Auto"/>

        </Grid.RowDefinitions>

        <Expander Header="折叠菜单1" Grid.Row="0" Background="AliceBlue"   >

            <StackPanel>

                <CheckBox Margin="5">选项1</CheckBox>

                <CheckBox Margin="5">选项2</CheckBox>

                <CheckBox Margin="5">选项3</CheckBox>

            </StackPanel>

        </Expander>

        <Expander Header="折叠菜单2" Grid.Row="1"  Background="Aqua" IsExpanded="True">

            <StackPanel>

                <CheckBox Margin="5">选项1</CheckBox>

                <CheckBox Margin="5">选项2</CheckBox>

                <CheckBox Margin="5">选项3</CheckBox>

            </StackPanel>

        </Expander>

        <Expander Header="展开我时我才加载内容，折叠回去我清空内容" Grid.Row="2" Background="Beige"  Collapsed="Expander_Collapsed" Expanded="Expander_Expanded">

            <ScrollViewer MaxHeight="120" HorizontalScrollBarVisibility="Disabled">

                <TextBlock Name="txtText"></TextBlock>

            </ScrollViewer>

        </Expander>

        <Expander Grid.Row="3" Background="Beige" >

            <Expander.Header>

                <StackPanel>

                    <TextBlock>我是自定义折叠菜单Header</TextBlock>

                    <Button>在Header中添加按钮</Button>

                </StackPanel>

            </Expander.Header>

            <StackPanel>

                <CheckBox Margin="5">选项1</CheckBox>

                <CheckBox Margin="5">选项2</CheckBox>

                <CheckBox Margin="5">选项3</CheckBox>

            </StackPanel>

        </Expander>

    </Grid>

</Window>