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>

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

默认情况下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>

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

设置横向滚动条显示

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

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

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 + "\r\n";
}
} 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);
}
}
}

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

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>

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

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>

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

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>

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

上一篇:LeetCode题解之Maximum Depth of N-ary Tree


下一篇:微信小程序与传统APP十大优劣对比