Hide a grid column in avalonia ui by setting "IsVisible" to "False"

Question

In my avalonia UI application (MVVM, reactive and on desktop) I want to split my window and show some visuals on another window/screen while they should be hidden on my main window. Creation of the second window works but hiding the visuals in the usercontrol on my main window doesn't work.

Summarized, this is what my code looks, here my viewmodel of the control that includes all the visuals I want to show/hide:

namespace myavaloniaapp.ViewModels
{
    public class UserControl1ViewModel : ReactiveObject
    {

        string WindowMode { get; set; } 

        public UserControl1ViewModel()
        {
             OnButtonClick9Async = ReactiveCommand.Create(splitwindow);
             //further stuff is initialized here
        }

        private void splitwindow()
        {

            SecondaryWindow win2 = new SecondaryWindow(); //create a second window...
            win2.Show();
            win2.DataContext = this;  //...and set the new window's datacontext also to this viewmodel
            WindowMode = "False";  // this should hide the grid column in which the visuals that should be hidden are                   

        }
    }
}

The .axaml of UserControl1 looks like this:

<UserControl xmlns="https://github.com/avaloniaui"
             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:views="using:myavaloniaapp.Usercontrols"
             xmlns:vm="using:myavaloniaapp.ViewModels"
             x:Class="myavaloniaapp.Usercontrols.UserControl1">

    <Grid HorizontalAlignment="Stretch" DataContext="{Binding UserControl1ViewModel}">

            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

            <Grid Grid.Column="0">
            
                  <Button Command="{Binding OnButtonClick9Async}">Split</Button><!--the button that should trigger the split of the window-->

                  <!--some visuals in the first column that should always remain visible in this window-->
                
            <Grid Grid.Column="1" IsVisible="{Binding WindowMode}">
            
                  <!--here the visuals that should be hidden when pressing the button by hiding the entire grid column-->
        
            </Grid>
    </Grid>
</UserControl>

However the change of the "IsVisible" property of the grid column simply doesn't do anything. After some research I thought maybe the UI has to be redrawn so I added this to my splitwindow method:

        if (Avalonia.Application.Current.ApplicationLifetime is IClassicDesktopStyleApplicationLifetime desktop) 
        {
            desktop.MainWindow.InvalidateVisual();
        }

However that doesn't help. Interesstingly changing the "IsVisble" property works when I set it to "False" already in the initialization of the view model, so I guess the problem is somehow related to the change of the property not being realized by the UI once it is already drawn. Would appreciate any hint on what I'm doing wrong!

Answer 1

As per radoslawik's comment, RaiseAndSetIfChanged needs to be added in the viewmodel:

private string windowmode;

public string WindowMode
{
       get => windowmode;
       set => this.RaiseAndSetIfChanged(ref windowmode, value); 
}

IsVisible can be a string or a bool, both work.