Xaml: 设计具有动态可见组件的布局

Question

在 mvvm 应用程序中，window（实际上是 MainWindow 中的 UserControl）中的某些区域会根据用户选择动态显示。

更改块在 Stackpanels 内，我有 4 个，一次只显示一个。这是通过将 Visibility 绑定到 bool 属性并使用 BooleanToVisibilityConverter.

完成的

我将所有备用 StackPanel 放在父控件中。它工作正常，但在 设计阶段 在 Visual Studio 我看到了所有这些，所以我在确定最终布局时遇到了问题。

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

Answer 1

, but during design phase in Visual Studio I see all of them, so I have problems in figuring the final layout.

通过在 visual studio 中调出 Document Outline 选项卡可以轻松解决此问题。打开后，导航到可见树并将 eyeball 切换为可见 hide/unhide 不感兴趣的控件； 仅在设计时。

Answer 2

设置仅设计时数据上下文

在 Studio Designer 中开发 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 或属性浏览器中更改属性值。
您将立即看到您的绑定、触发器的工作，以及某些数据的显示如何变化。

备注

这可能会在更复杂的情况下失败 VMs/packages，但通常在设计时设置 DataContext 并不困难。

I need to recompile the project to see the changes in the properties.

XAML 设计器面板有一个 «Enable/Disable 项目代码» 按钮。

Xaml: 设计具有动态可见组件的布局

Xaml: design a layout with dynamically visible components

wpf

xaml

visual-studio-designer

设置仅设计时数据上下文

备注