TabControl控件

TabControl表示包含多个共享相同的空间在屏幕上的项的控件。它也是继承于Selector基类,所以TabControl也只支持单选操作。另外,TabControl的元素只能是TabItem,这个TabItem继承于HeaderedContentControl类,所以TabControl的元素实际上是一个带标题的ContentControl内容控件。

1. 属性成员

  • ContentTemplate:表示TabItem元素的内容模板。
  • SelectedContentStringFormat:当前所选内容的格式。
  • SelectedContentTemplateSelector:获取当前选定的TabItem项的模板选择器。
  • SelectedContentTemplate:当前选定的TabItem项的模板。
  • SelectedContent:当前选定的TabItem项里面的内容(也是一些控件)。
  • TabStripPlacement:获取或设置选项卡标题相对于选项卡上内容的对齐方式。
  • ContentStringFormat:指定如何设置内容的格式。
  • ContentTemplateSelector:获取或设置内容模板选择器。

TabControl的SelectedContent可能是我们比较常用的一个属性,事实上,TabControl通常被当成布局控件来使用。

2. 示例

前端代码

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition Height="50"/>
        </Grid.RowDefinitions>
        <TabControl x:Name="_tabControl" Grid.Row="0" SelectionChanged="_tabControl_SelectionChanged">
            <TabItem Header="首页">
                <Border Background="LightBlue">
                    <TextBlock Text="首页" FontSize="24" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                </Border>
            </TabItem>
            <TabItem Header="时事热点">
                <Border Background="LightCoral">
                    <TextBlock Text="时事热点新闻" FontSize="24" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                </Border>
            </TabItem>
            <TabItem Header="国际赛事">
                <Border Background="LightCyan">
                    <TextBlock Text="国际赛事新闻" FontSize="24" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                </Border>
            </TabItem>
            <TabItem Header="人文阅读">
                <Border Background="LightGoldenrodYellow">
                    <TextBlock Text="人文阅读新闻" FontSize="24" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                </Border>
            </TabItem>
            <TabItem Header="社会焦点">
                <Border Background="LightGreen">
                    <TextBlock Text="社会焦点新闻" FontSize="24" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                </Border>
            </TabItem>
        </TabControl>
        <TextBlock x:Name="_textBlock" TextWrapping="Wrap" Grid.Row="1"/>
    </Grid>
private void _tabControl_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            var tab = sender as TabControl;
            var item = tab.SelectedItem as TabItem;
            var content = tab.SelectedContent;
            _textBlock.Text = "标题:" + item.Header.ToString() + " 内容:" + content;
        }

在这里插入图片描述

我们订阅了TabControl控件的SelectionChanged事件,并在回调函数中获取了当前选中的TabItem对象以及它里面的内容。

TreeView树控件

操作系统的资源管理器就是一个TreeView。所以它常用于显示文件夹、目录等具有层级结构的数据。TreeView由节点和分支构成,每个节点可以包含零个或多个子节点,分支表示父子关系。在TreeView中,每个节点表示为TreeViewItem对象,可以通过TreeView的Items属性来获取或设置TreeViewItem对象集合。

1. TreeViewItem元素简介

TreeViewItem作为TreeView唯一的元素类型,它继承于HeaderedItemsControl(带标题),而HeaderedItemsControl又继承于ItemsControl,由此可见,TreeViewItem元素本身也是一个集合控件。
TreeViewItem有两个常用的属性,分别是IsSelected属性和IsExpanded属性,IsSelected表示当前元素是否选中,IsExpanded表示当前元素是否展开。

2. TreeView属性

  • SelectedValuePath属性:获取或设置SelectedItem或SelectedValue的路径。
  • SelectedValue属性:获取SelectedItem的值。
  • SelectedItem属性:获取当前选中的项。

3. TreeView示例

前端代码

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <StackPanel Orientation="Horizontal">
            <TextBlock Text="根目录" VerticalAlignment="Center" Margin="3"/>
            <TextBox x:Name="_TextBox" Width="380" Height="25" Margin="3"/>
            <Button Content="选择..." MinWidth="45" Margin="3" Click="Button_Click"/>
        </StackPanel>
        <TreeView x:Name="_TreeView" Grid.Row="1" SelectedItemChanged="_TreeView_SelectedItemChanged"/>
    </Grid>

后端代码


using System;
using System.IO;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Forms;
using MessageBox = System.Windows.MessageBox;

namespace WpfTest01
{
    public class Person
    {
        public string Name { get; set; }
        public int Age { get; set; }
        public string Address { get; set; }
 
    }
 
    public partial class MainWindow
    {        
        public MainWindow()
        {
            InitializeComponent();
            
        }
        private void Button_Click(object sender, RoutedEventArgs e)
        {
            FolderBrowserDialog dialog = new FolderBrowserDialog();
            if (dialog.ShowDialog() == System.Windows.Forms.DialogResult.OK)
            {
                _TextBox.Text = dialog.SelectedPath;
                LoadTreeView(dialog.SelectedPath);
 
            }
        }
 
        private void LoadTreeView(string rootPath)
        {
            // 设置根节点
            TreeViewItem rootNode = new TreeViewItem();
            rootNode.Header = "根目录";
 
            // 加载子文件夹和文件
            LoadSubDirectory(rootNode, rootPath);
 
            // 将根节点添加到TreeView中
            _TreeView.Items.Add(rootNode);
        }
 
        private void LoadSubDirectory(TreeViewItem node, string path)
        {
            try
            {
                DirectoryInfo dirInfo = new DirectoryInfo(path);
 
                // 加载子文件夹
                foreach (DirectoryInfo subDirInfo in dirInfo.GetDirectories())
                {
                    TreeViewItem subNode = new TreeViewItem();
                    subNode.Header = subDirInfo.Name;
 
                    LoadSubDirectory(subNode, subDirInfo.FullName);
 
                    node.Items.Add(subNode);
                }
 
                // 加载文件
                foreach (FileInfo fileInfo in dirInfo.GetFiles())
                {
                    TreeViewItem subNode = new TreeViewItem();
                    subNode.Header = fileInfo.Name;
 
                    node.Items.Add(subNode);
                }
            }
            catch (Exception ex)
            {
                MessageBox.Show(ex.Message);
            }
        }
 
        private void _TreeView_SelectedItemChanged(object sender, RoutedPropertyChangedEventArgs<object> e)
        {
            // 获取选中的节点
            TreeViewItem selectedNode = _TreeView.SelectedItem as TreeViewItem;
 
            // 显示选中节点的Header
            if (selectedNode != null)
            {
                MessageBox.Show(selectedNode.Header.ToString());
            }
        }
    }
}

在这里插入图片描述

首先,通过鼠标操作,选择TreeView的根目录,然后,利用DirectoryInfo获取当前所有目录,再利用递归调用,一层一层的获取所有子目录,最后以TreeViewItem元素一层层加载到控件中。

Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐