Xaml:使用动态可见组件设计布局

Question

在mvvm应用程序中，根据用户选择动态显示窗口内的某些区域(实际上是MainWindow中的MainWindow)。

更改块在Stackpanels中，我有4个，每次只显示一个。这是完成将BooleanToVisibilityConverter.可见性绑定到bool属性并使用

我将所有备用StackPanel放在父控件中。它工作正常，但是在Visual中的设计阶段，我看到了所有的，因此我在计算最终布局时遇到了问题。

如何轻松地创建具有更多控件的布局，这些控件共享相同的窗口区域，一次只显示一个控件？

Answer 1

设置仅设计时间的数据上下文

通过设置设计时数据上下文，可以大大简化在Studio设计器中开发XAML。

一个实现是基于设置一个重复的DataContext，在最后的编译过程中将忽略它。

若要实现切换，请向ViewModel添加一个属性，该属性将通知设计器是否可以在开发模式下使用。

对于本例，我使用了一个MVVMLight情况，但是对于这个声明的实例属性IsInDesignMode和静态属性ViewModelBase.IsInDesignModeStatic。

示例：

using System.ComponentModel;

namespace DataContextDesignTime.Example
{
    public class MyViewModel : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        private bool _flag;
        public bool Flag
        {
            get => _flag;
            set
            {
                if (!Equals(_flag, value))
                {
                    _flag = value;
                    PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(Flag)));
                    PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(NotFlag)));
                }
            }
        }

        public bool NotFlag => !Flag;
    }
}

<Window x:Class="DataContextDesignTime.Example.ExamleWindow"
        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:DataContextDesignTime.Example"
        mc:Ignorable="d"
        Title="ExamleWindow" Height="450" Width="800">
    <d:Window.DataContext>
        <local:MyViewModel Flag="True" NotFlag="True"/>
    </d:Window.DataContext>
    <Window.Resources>
        <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
    </Window.Resources>
    <StackPanel>
        <Border Background="LightBlue" Height="200"
                Visibility="{Binding Flag, Converter={StaticResource BooleanToVisibilityConverter}}"/>
        <Border Background="LightGreen" Height="400"
                Visibility="{Binding NotFlag, Converter={StaticResource BooleanToVisibilityConverter}}"/>
    </StackPanel>
</Window>

在本例中，可以在XAML或属性浏览器中更改属性值。

您将立即看到绑定、触发器的工作，以及某些数据的显示是如何变化的。

​

​

备注

这可能在更复杂的VM/包上失败，但通常在设计时设置DataContext并不困难。

我需要重新编译项目以查看属性中的更改。

XAML设计器面板有一个“启用/禁用项目代码”按钮。

​

Answer 2

，但是在Visual的设计阶段，我看到了所有这些，所以我在计算最终布局时遇到了问题。

通过在visual中打开Document Outline选项卡，很容易解决这个问题。一旦打开，导航到可见的树，并切换眼球，以明显隐藏/取消隐藏一个人不感兴趣的控件；仅在设计期间。

​

​