CODEWITHSUNDEEP
c#wpfxamlbindingviewmodel
plain
plain

Reputation: 1

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

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.

I got this 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 UiWelcomeVisibility and UiBackendVisibility in the UIModel. These properties are now defined as followed:

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:

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.

Any ideas? Thanks so far.

Upvotes: 0

Views: 14712

Answers (1)

Jon
Jon

Reputation: 437744

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

  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 Visibility property.

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

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

Upvotes: 1

Related Questions