WPF：如何将 Visibility 属性绑定到 xaml 元素？

WPF: How to bind a Visibility property to an xaml element?

提问by plain

I've got some problem I need some help with. I want to bind the visibility properties from a view model to the xaml elements so I get some visually changes (collapse or show in this case) by just changing the value in the viewmodel.

我有一些问题需要帮助。我想将视图模型中的可见性属性绑定到 xaml 元素，这样我就可以通过更改视图模型中的值来获得一些视觉上的变化（在这种情况下是折叠或显示）。

I got this xaml

我得到了这个 xaml

<Window x:Class="PampelMuse.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:welcome="clr-namespace:PampelMuse.Views.Welcome"
    xmlns:backend="clr-namespace:PampelMuse.Views.Backend"
    xmlns:pampelMuse="clr-namespace:PampelMuse" xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"
    Title="PampelMuse" Height="670" Width="864">
<Grid>
    <Image HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Source="Resources/Images/Backgrounds/4.jpg" Stretch="UniformToFill" />
    <welcome:WelcomeScreen x:Name="UIWelcome" HorizontalAlignment="Center" VerticalAlignment="Center" Visibility="{Binding ElementName=UiWelcomeVisibility}" />
    <backend:BackendUI x:Name="UIBackend" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Visibility="{Binding ElementName=UiBackendVisibility}" />
</Grid>

The visibilities as you can see are binded to the properties UiWelcomeVisibilityand UiBackendVisibilityin the UIModel. These properties are now defined as followed:

正如你所看到的能见度都绑定到属性UiWelcomeVisibility和UiBackendVisibility在UIModel。这些属性现在定义如下：

public partial class MainWindow : Window
{
    private ViewModel.ViewModel ViewModel = PampelMuse.ViewModel.ViewModel.GetInstance();

    public MainWindow()
    {
        InitializeComponent();

        DataContext = ViewModel; // Setting the data context what effects all the xaml elements in this component too, including UIWelcome and BackendUI

        ViewModel.UIModel.UiBackendVisibility = Visibility.Collapsed;
    }

The ViewModel:

视图模型：

public class ViewModel
{
    private static ViewModel instance = new ViewModel();
    public UIModel UIModel = UIModel.GetInstance();

    public static ViewModel GetInstance()
    {
        return instance;
    }
}

And the UIModel:

和 UIModel：

public class UIModel
{
    private static UIModel instance = new UIModel();

    public Visibility UiWelcomeVisibility { get; set; }
    public Visibility UiBackendVisibility { get; set; }

    public static UIModel GetInstance()
    {
        return instance;
    }
}

I just don't see any coding mistakes here (and I don't get some at runtime in fact) but the BackendUI-visibility-property is not changed by the UiBackendVisibility of UIModel.

我只是在这里没有看到任何编码错误（实际上我在运行时没有发现一些错误），但是 UIModel 的 UiBackendVisibility 没有更改 BackendUI-visibility-property。

Any ideas? Thanks so far.

有任何想法吗？到目前为止，谢谢。

回答by Jon

You are doing the binding wrong. Visibility="{Binding ElementName=UiWelcomeVisibility}"sets the visibility of an element equal to another visual elementnamed "UiWelcomeVisibility". There are two problems with this:

你做的绑定错误。Visibility="{Binding ElementName=UiWelcomeVisibility}"将元素的可见性设置为等于另一个名为“UiWelcomeVisibility”的视觉元素。这有两个问题：

1. There is no element named "UiWelcomeVisibility" in the first place.
2. Even if there were, a visual element itself is not a valid value for the Visibilityproperty.

1. 首先没有名为“UiWelcomeVisibility”的元素。
2. 即使有，视觉元素本身也不是该Visibility属性的有效值。

What you want is to databind to the viewmodel instead. Assuming that you have already set the DataContextto the viewmodel, just use

您想要的是将数据绑定到视图模型。假设您已经设置DataContext了视图模型，只需使用

<welcome:WelcomeScreen ... Visibility="{Binding UiWelcomeVisibility}" />