使用MVVM DataTriggers在WPF XAML视图之间切换/Window窗口自适应内容大小并居中

简介: 原文 使用MVVM DataTriggers在WPF XAML视图之间切换 相关文章: http://www.technical-recipes.com/2016/switching-between-wpf-xaml-views-using-mvvm-datatemplate/ 这篇文章解决了能够根据ViewModel类的属性在不同视图之间切换的问题。

原文 使用MVVM DataTriggers在WPF XAML视图之间切换

相关文章:

http://www.technical-recipes.com/2016/switching-between-wpf-xaml-views-using-mvvm-datatemplate/

这篇文章解决了能够根据ViewModel类的属性在不同视图之间切换的问题。

要开始使用Visual Studio,请创建一个新的WPF应用程序:

XamlSwitching1

因此,当我们构建并运行应用程序时,我们有一个这样的空白窗口:

XamlSwitching2

为了演示如何在不同视图之间切换WPF窗口,创建两个新的XAML视图View1.xaml和View2.xaml,每个视图由一个包含不同文本的简单TextBlock组成,以证明视图不同。

在Visual Studio项目中,右键单击项目文件夹,然后选择“添加”>“新建项”。选择用户控件(WPF)并将文件命名为View1.xaml:

XamlSwitching3

在文件的xaml部分中,插入代码以在视图中显示Text,如下所示:

<UserControl
    x:Class="MvvmSwitchViews.View1"
    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:ei="http://schemas.microsoft.com/expression/2010/interactions"
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
    xmlns:local="clr-namespace:MvvmSwitchViews"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Width="800"
    Height="450"
    Background="Red"
    mc:Ignorable="d">
    <Grid>
        <Button
            Margin="10"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Content="  Screen for View2"
            FontSize="20">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Click">
                    <ei:ChangePropertyAction
                        PropertyName="ContentTemplate"
                        TargetObject="{Binding ElementName=ct}"
                        Value="{DynamicResource View2Template}" />
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </Button>
    </Grid>
</UserControl>

 

 

重复上一步,但这次创建一个名为View2.xaml的新视图。插入View2.xaml的代码,如下所示:

<UserControl
    x:Class="MvvmSwitchViews.View2"
    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:ei="http://schemas.microsoft.com/expression/2010/interactions"
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
    xmlns:local="clr-namespace:MvvmSwitchViews"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Width="400"
    Height="200"
    Background="Green"
    mc:Ignorable="d">
    <Grid>
        <Button
            Margin="10"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Content="  Screen for View1"
            FontSize="20">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Click">
                    <ei:ChangePropertyAction
                        PropertyName="ContentTemplate"
                        TargetObject="{Binding ElementName=ct}"
                        Value="{DynamicResource View1Template}" />
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </Button>
    </Grid>
</UserControl>

 

 

我们可能希望根据类的属性在XAML视图之间切换。例如,如果我们的ViewModel属性设置为“0”,则显示View1; 否则,如果我们的ViewModel属性设置为“1”,则显示View 2。在这种情况下,您将使用DataTrigger。

右键单击项目文件夹,创建一个非常简单的ViewModel类,选择Add> New Item。选择Class,我们将调用我们的ViewModel类MainWindowViewModel.cs:

XamlSwitching4

我们的ViewModel类包含一个getter / setter属性和一个用于设置默认属性值的构造函数:

namespace MvvmSwitchViews
{
    public class MainWindowViewModel
    {
        public int SwitchView
        {
            get;
            set;
        }

        public MainWindowViewModel()
        {
            SwitchView = 1;
        }
    }
}

 

 

在我们的MainWindow.xaml中,我们使用我们创建的ViewModel类配置DataTemplate,DataContext。

还有DataTrigger,告诉应用程序显示哪个视图,如果属性设置为默认值以外的任何值:

<Window
    x:Class="MvvmSwitchViews.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:local="clr-namespace:MvvmSwitchViews"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Title="MainWindow"
    local:CenterOnSizeChangeBehaviour.CenterOnSizeChange="True"
    SizeToContent="WidthAndHeight"
    WindowStartupLocation="CenterScreen"
    mc:Ignorable="d">
    <Window.DataContext>
        <local:MainWindowViewModel />
    </Window.DataContext>
    <Window.Resources>
        <DataTemplate x:Key="View1Template" DataType="{x:Type local:MainWindowViewModel}">
            <local:View1 />
        </DataTemplate>
        <DataTemplate x:Key="View2Template" DataType="{x:Type local:MainWindowViewModel}">
            <local:View2 />
        </DataTemplate>
    </Window.Resources>
    <Grid>
        <ContentControl x:Name="ct" Content="{Binding}">
            <ContentControl.Style>
                <Style TargetType="{x:Type ContentControl}">
                    <Setter Property="ContentTemplate" Value="{StaticResource View1Template}" />
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding SwitchView}" Value="0">
                            <Setter Property="ContentTemplate" Value="{StaticResource View2Template}" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </ContentControl.Style>
        </ContentControl>
    </Grid>
</Window>

 

 

在我们的ViewModel构造函数中,'SwitchView'属性默认为“0”,从而导致应用程序在运行时显示View1:

XamlSwitching5

现在在ViewModel构造函数中将'SwitchView'属性设置为“1”:

   public MainWindowViewModel()
        {
            SwitchView = 1;
        }

 

 

重新构建并重新运行应用程序时,我们将显示View2屏幕,如下所示:

XamlSwitching6

Window窗口自适应内容大小并居中

using System.Windows;

namespace MvvmSwitchViews
{
    public static class CenterOnSizeChangeBehaviour
    {
        /// <summary>
        /// Centers the window in the screen, when its changing its size.
        /// </summary>
        public static readonly DependencyProperty CenterOnSizeChangeProperty =
            DependencyProperty.RegisterAttached
            (
                "CenterOnSizeChange",
                typeof(bool),
                typeof(CenterOnSizeChangeBehaviour),
                new UIPropertyMetadata(false, OnCenterOnSizeChangePropertyChanged)
            );

        public static bool GetCenterOnSizeChange(DependencyObject obj)
        {
            return (bool)obj.GetValue(CenterOnSizeChangeProperty);
        }
        public static void SetCenterOnSizeChange(DependencyObject obj, bool value)
        {
            obj.SetValue(CenterOnSizeChangeProperty, value);
        }

        private static void OnCenterOnSizeChangePropertyChanged(DependencyObject dpo, DependencyPropertyChangedEventArgs args)
        {
            System.Windows.Window window = dpo as System.Windows.Window;
            if (window != null)
            {
                if ((bool)args.NewValue)
                {
                    window.SizeChanged += OnWindowSizeChanged;
                }
                else
                {
                    window.SizeChanged -= OnWindowSizeChanged;
                }
            }
        } 
        private static void OnWindowSizeChanged(object sender, SizeChangedEventArgs e)
        {
            System.Windows.Window window = (System.Windows.Window)sender; 
            window.WindowStartupLocation = WindowStartupLocation.Manual;
            window.Left = (SystemParameters.WorkArea.Width - window.ActualWidth) / 2 + SystemParameters.WorkArea.Left;
            window.Top = (SystemParameters.WorkArea.Height - window.ActualHeight) / 2 + SystemParameters.WorkArea.Top;
        }
    }
}

 

目录
相关文章
|
7月前
|
XML 开发框架 .NET
|
1月前
|
数据处理 C# Windows
WPF中实现弹出进度条窗口
【11月更文挑战第14天】在WPF中实现弹出进度条窗口,需创建进度条窗口界面(XAML)和对应的代码-behind(C#)。通过定义`ProgressWindow`类,包含`ProgressBar`和`TextBlock`,并在主窗口或逻辑代码中调用,模拟长时间任务时更新进度条,确保UI流畅。
|
3月前
|
设计模式 前端开发 C#
WPF 项目中 MVVM模式 的简单例子说明
本文通过WPF项目中的加法操作示例,讲解了MVVM模式的结构和实现方法,包括数据模型、视图、视图模型的创建和数据绑定,以及命令的实现和事件通知机制。
|
4月前
|
前端开发 C# 开发者
WPF开发者必读:MVVM模式实战,轻松构建可维护的应用程序,让你的代码更上一层楼!
【8月更文挑战第31天】在WPF应用程序开发中,MVVM(Model-View-ViewModel)模式通过分离关注点,提高了代码的可维护性和可扩展性。本文详细介绍了MVVM模式的三个核心组件:Model(数据模型)、View(用户界面)和ViewModel(处理数据绑定与逻辑),并通过示例代码展示了如何在WPF项目中实现MVVM模式。通过这种模式,开发者可以更高效地构建桌面应用程序。希望本文能帮助你在WPF开发中更好地应用MVVM模式。
227 1
|
4月前
|
前端开发 C# 设计模式
“深度剖析WPF开发中的设计模式应用:以MVVM为核心,手把手教你重构代码结构,实现软件工程的最佳实践与高效协作”
【8月更文挑战第31天】设计模式是在软件工程中解决常见问题的成熟方案。在WPF开发中,合理应用如MVC、MVVM及工厂模式等能显著提升代码质量和可维护性。本文通过具体案例,详细解析了这些模式的实际应用,特别是MVVM模式如何通过分离UI逻辑与业务逻辑,实现视图与模型的松耦合,从而优化代码结构并提高开发效率。通过示例代码展示了从模型定义、视图模型管理到视图展示的全过程,帮助读者更好地理解并应用这些模式。
118 0
|
4月前
|
开发者 C# UED
WPF多窗口应用程序开发秘籍:掌握窗口创建、通信与管理技巧,轻松实现高效多窗口协作!
【8月更文挑战第31天】在WPF应用开发中,多窗口设计能显著提升用户体验与工作效率。本文详述了创建新窗口的多种方法,包括直接实例化`Window`类、利用`Application.Current.MainWindow`及自定义方法。针对窗口间通信,介绍了`Messenger`类、`DataContext`共享及`Application`类的应用。此外,还探讨了布局控件与窗口管理技术,如`StackPanel`与`DockPanel`的使用,并提供了示例代码展示如何结合`Messenger`类实现窗口间的消息传递。总结了多窗口应用的设计要点,为开发者提供了实用指南。
289 0
|
4月前
|
容器 C# 开发者
XAML语言大揭秘:WPF标记的魅力所在,让你轻松实现界面与逻辑分离,告别复杂代码!
【8月更文挑战第31天】XAML提供了一种直观且易于维护的界面设计方式,使得开发者可以专注于逻辑和业务代码的编写,而无需关心界面细节。通过数据绑定、布局管理和动画效果等特性,XAML可以实现丰富的界面交互和视觉效果。在实际开发过程中,开发者应根据具体需求选择合适的技术方案,以确保应用程序能够满足用户的需求。希望本文的内容能够帮助您在WPF应用程序开发中更好地利用XAML语言。
51 0
|
4月前
|
前端开发 开发者 C#
WPF开发者必读:MVVM模式实战,轻松实现现代桌面应用架构,让你的代码更上一层楼!
【8月更文挑战第31天】在WPF应用程序开发中,MVVM(Model-View-ViewModel)模式通过分离应用程序的逻辑和界面,提高了代码的可维护性和可扩展性。本文介绍了MVVM模式的三个核心组件:Model(数据模型)、View(用户界面)和ViewModel(处理数据绑定和逻辑),并通过示例代码展示了如何在WPF项目中实现MVVM模式。通过这种方式,开发者可以构建更加高效和可扩展的桌面应用程序。
212 0
|
4月前
|
设计模式 前端开发 C#
WPF/C#:理解与实现WPF中的MVVM模式
WPF/C#:理解与实现WPF中的MVVM模式
268 0
|
7月前
|
数据可视化 API C#