WPF仿Tabcontrol实现切换多个不同View

更新时间：2024年11月30日 13:56:06 作者：wuty007

这篇文章主要为大家详细介绍了WPF如何模仿Tabcontrol实现切换多个不同View,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下

在同一块区域显示不同的视图内容，直接使用Tabcontrol，可能要重写TabItem的控件模板，最直接的方法通过按钮的切换，控制一个ContentControl的Content值，实现切换不同的视图View。以下是一个简单的实现demo。注：如果用Prism的框架实现，只要设置Region的区域块显示，会更简单一些，至少不用自己实现。

1、ViewA：

<UserControl x:Class="test.viewA"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:test"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    <UserControl.Resources>
        <SolidColorBrush x:Key="TabControlNormalBorderBrush" Color="#8C8E94"/>
        <Style x:Key="TabControlStyle1" TargetType="{x:Type TabControl}">
            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
            <Setter Property="Padding" Value="4,4,4,4"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="BorderBrush" Value="{StaticResource TabControlNormalBorderBrush}"/>
            <Setter Property="Background" Value="#F9F9F9"/>
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TabControl}">
                        <Grid ClipToBounds="true" SnapsToDevicePixels="true" KeyboardNavigation.TabNavigation="Local">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition x:Name="ColumnDefinition0"/>
                                <ColumnDefinition x:Name="ColumnDefinition1" Width="0"/>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition x:Name="RowDefinition0" Height="Auto"/>
                                <RowDefinition x:Name="RowDefinition1" Height="*"/>
                            </Grid.RowDefinitions>
                            <TabPanel x:Name="HeaderPanel" Grid.Column="0" IsItemsHost="true" Margin="2,2,2,0" Grid.Row="0" KeyboardNavigation.TabIndex="1" Panel.ZIndex="1"/>
                            <Border x:Name="ContentPanel" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.Column="0" KeyboardNavigation.DirectionalNavigation="Contained" Grid.Row="1" KeyboardNavigation.TabIndex="2" KeyboardNavigation.TabNavigation="Local">
                                <ContentPresenter x:Name="PART_SelectedContentHost" ContentSource="SelectedContent" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                            </Border>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="TabStripPlacement" Value="Bottom">
                                <Setter Property="Grid.Row" TargetName="HeaderPanel" Value="1"/>
                                <Setter Property="Grid.Row" TargetName="ContentPanel" Value="0"/>
                                <Setter Property="Height" TargetName="RowDefinition0" Value="*"/>
                                <Setter Property="Height" TargetName="RowDefinition1" Value="Auto"/>
                                <Setter Property="Margin" TargetName="HeaderPanel" Value="2,0,2,2"/>
                            </Trigger>
                            <Trigger Property="TabStripPlacement" Value="Left">
                                <Setter Property="Grid.Row" TargetName="HeaderPanel" Value="0"/>
                                <Setter Property="Grid.Row" TargetName="ContentPanel" Value="0"/>
                                <Setter Property="Grid.Column" TargetName="HeaderPanel" Value="0"/>
                                <Setter Property="Grid.Column" TargetName="ContentPanel" Value="1"/>
                                <Setter Property="Width" TargetName="ColumnDefinition0" Value="Auto"/>
                                <Setter Property="Width" TargetName="ColumnDefinition1" Value="*"/>
                                <Setter Property="Height" TargetName="RowDefinition0" Value="*"/>
                                <Setter Property="Height" TargetName="RowDefinition1" Value="0"/>
                                <Setter Property="Margin" TargetName="HeaderPanel" Value="2,2,0,2"/>
                            </Trigger>
                            <Trigger Property="TabStripPlacement" Value="Right">
                                <Setter Property="Grid.Row" TargetName="HeaderPanel" Value="0"/>
                                <Setter Property="Grid.Row" TargetName="ContentPanel" Value="0"/>
                                <Setter Property="Grid.Column" TargetName="HeaderPanel" Value="1"/>
                                <Setter Property="Grid.Column" TargetName="ContentPanel" Value="0"/>
                                <Setter Property="Width" TargetName="ColumnDefinition0" Value="*"/>
                                <Setter Property="Width" TargetName="ColumnDefinition1" Value="Auto"/>
                                <Setter Property="Height" TargetName="RowDefinition0" Value="*"/>
                                <Setter Property="Height" TargetName="RowDefinition1" Value="0"/>
                                <Setter Property="Margin" TargetName="HeaderPanel" Value="0,2,2,2"/>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>
    <UserControl.DataContext>
        <local:viewAModel/>
    </UserControl.DataContext>
    <Grid>
        <TextBlock Text="{Binding Text}" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="50"/>
    </Grid>
</UserControl>

ViewAViewModel：

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace test
{
   public class viewAModel:INotifyPropertyChanged
    {
        public viewAModel()
        {
            Text = "A";
        }

        public event PropertyChangedEventHandler PropertyChanged;

        private void Change(string propertyName)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }

        private string text;

        public string Text
        {
            get { return text; }
            set
            {
                text = value;
                Change("Text");
            }
        }
    }
}

ViewB：

<UserControl x:Class="test.viewB"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:test"
            
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    <UserControl.DataContext>
        <local:viewBModel/>
    </UserControl.DataContext>
    <Grid>
        <TextBlock Text="{Binding Text}" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="50"/>
    </Grid>
</UserControl>

ViewBViewModel：

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace test
{
  public  class viewBModel: INotifyPropertyChanged
    {
        public viewBModel()
        {
            Text = "ViewB";
        }
        public event PropertyChangedEventHandler PropertyChanged;

        private void Change(string propertyName)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }

        private string text;

        public string Text
        {
            get { return text; }
            set
            {
                text = value;
                Change("Text");
            }
        }
    }
}

在MainWindow切换ViewA和ViewB

<Window x:Class="test.MainWindow"
        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:test"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <StackPanel>
            <Button Height="100" Width="100" Content="A" x:Name="A" Click="A_Click"/>
            <Button Height="100" Width="100" Content="B" x:Name="B" Click="B_Click"/>
        </StackPanel>

        <ContentControl x:Name="content" Grid.Column="1">
            <local:viewA/>
        </ContentControl>

    </Grid>
</Window>

MainWindow.cs: 在初始化的时候，通过一个Dictionary，把要展示的View先加载出来，存到字典上，确保只Load一次view，在点击按钮切换ContentControl时，从字典中获取，减少每一次都new一个VIew，造成内存的泄露

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace test
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            FramworkElements["A"]=new viewA();
            FramworkElements["B"]=new viewB();
        }

        private Dictionary<string, FrameworkElement> FramworkElements = new Dictionary<string, FrameworkElement>();

        private void A_Click(object sender, RoutedEventArgs e)
        {
            content.Content = FramworkElements["A"];
        }

        private void B_Click(object sender, RoutedEventArgs e)
        {
            content.Content = FramworkElements["B"];
        }
    }
}

展示的效果：

点击A按钮，切换A视图

点击B按钮，切换B视图：

到此这篇关于WPF仿Tabcontrol实现切换多个不同View的文章就介绍到这了,更多相关WPF切换不同View内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

WPF
View

C#实现的文件压缩和解压缩类
这篇文章主要介绍了C#实现的文件压缩和解压缩类,实例分析了C#针对文件压缩与解压缩的常用技巧,非常具有实用价值,需要的朋友可以参考下
2015-03-03
C#基础学习系列之Attribute和反射详解
大家在使用Attribute的时候大多需要用到反射，所以放在一起。下面这篇文章主要给大家介绍了关于C#基础学习系列之Attribute和反射的相关资料，文中给出了详细的示例代码供大家参考学习，需要的朋友们下面随着小编来一起学习学习吧。
2017-09-09
C# 中的委托与事件机制详解
本文详细介绍了C#中委托和事件的概念、使用方法和应用场景,包括委托定义、匿名方法、Lambda表达式、事件机制和多播委托的详细说明,委托作为类型安全的函数指针,文章还探讨了如何通过匿名方法和Lambda表达式简化委托的使用,以及多播委托在事件处理中的应用
2024-10-10
C#中让控件全屏显示的实现代码（WinForm）
有时候需要让窗口中某一块的内容全屏显示，比如视频播放、地图等等。经过摸索，暂时发现两种可行方法，如果有谁知道其他方法，敬请告知
2012-04-04
C#数据结构与算法揭秘一
本文一介绍了数据结构的基本概念而介绍了算法的基本概念，并且重点讨论了算法时间复杂度，并且用程序予以证明
2012-11-11
C#操作DataGridView获取或设置当前单元格的内容
这篇文章介绍了C#操作DataGridView获取或设置当前单元格的内容，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-02-02
C# 利用ICSharpCode.SharpZipLib实现在线压缩和解压缩
本文主要主要介绍了利用ICSharpCode.SharpZipLib第三方的DLL库实现在线压缩和解压缩的功能，并做了相关的代码演示。
2016-04-04
利用WPF实现Windows屏保的制作
屏保程序的本质上就是一个Win32 窗口应用程序。本文将利用WPF实现Windows屏保的制作，文中的示例代码简洁易懂，对我们学习WPF有一定帮助，感兴趣的可以了解一下
2022-07-07
C#读写配置文件方式(config.ini)入门
这篇文章主要介绍了C#读写配置文件方式(config.ini)入门，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-06-06
浅谈C#索引器
这篇文章主要简单介绍C#索引器，索引器使你可从语法上方便地创建类、结构或接口,以便客户端应用程序可以像访问数组一样访问它们。编译器将生成一个 Item 属性和适当的访问器方法,在主要目标是封装内部集合或数组的类型中,常常要实现索引器,下面我们一起来看看具体内容吧
2021-11-11

WPF仿Tabcontrol实现切换多个不同View

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具