WPF 10天修煉第五天- 內容控件

時間 2019-12-08

標籤 wpf 10天修煉第五內容控件简体版

原文原文鏈接

WPF內容控件

　　在WPF中，全部呈如今用戶界面上的對象都稱爲用戶界面元素。可是隻有派生自System.Windows.Controls.Control類的對象才稱爲控件。內容控件一般是指具備Content屬性的控件，Content屬性並不是定義在每一個控件中，而是定義在基類System.Windows.Controls命名空間的ContentControl類中。注意：Content屬性只接收單個內容元素。express

WPF內容控件分類app

一、直接繼承ContentControl的控件框架

二、繼承HeaderedContentControl的控件工具

三、繼承ItemsControl的控件佈局

四、繼承HeaderedItemsControl的控件spa

直接繼承ContentControl的控件3d

　　也能夠成爲單項內容控件，這種控件只能指定一個內容元素。WPF中包含的單項內容控件：orm

　　Button：按鈕控件xml

　　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屬性可接收的對象分爲兩大類：

一、繼承自UIElement基類的對象：UIElement定義了WPF中的佈局、輸入及路由等。是WPF的核心子系統。這種類型的對象具備可視化特性，WPF將使用UIElement.OnRedner方法來顯示派生自該類的對象，OnRender方法將生成一個繪圖呈現，在須要時進行繪製。

二、繼承自其餘類的對象：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 + "\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);
        }
    }
}

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>