BoolToVisibilityConverter doesn't refresh the UI in the UserControl

[boriskleynbok]

Describe the bug

I have a Page with a UserControl that has a property ViewModel that is created by the DI container.
The BoolToVisibilityConverter does not refresh the UI in the UserControl.

<UserControl
    x:Class="CSA2.Controls.AddEditControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:CSA2.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:i="using:Microsoft.Xaml.Interactivity"
    xmlns:ic="using:Microsoft.Xaml.Interactions.Core"
    xmlns:converters="using:CommunityToolkit.WinUI.UI.Converters"
    mc:Ignorable="d">
    <UserControl.Resources>
        <converters:BoolToObjectConverter x:Key="BoolToVisibilityConverter" TrueValue="Visible" FalseValue="Collapsed"/>
        <converters:BoolToObjectConverter x:Key="InverseBoolToVisibilityConverter" TrueValue="Collapsed" FalseValue="Visible"/>
    </UserControl.Resources>
    <Grid HorizontalAlignment="Left" Margin="0 10 0 0">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid Row="0" VerticalAlignment="Top" Margin="0 0 0 5">
            <StackPanel Orientation="Horizontal">
                <ToggleButton
                    Margin="5 0 0 0"
                    Visibility="{x:Bind ViewModel.IsEditVisible, Mode=TwoWay,
                    Converter={StaticResource BoolToVisibilityConverter}}"
                    Command="{x:Bind ViewModel.AddUserCommand,Mode=OneWay}"
                    IsChecked="{x:Bind ViewModel.IsCreate, Mode=TwoWay}">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock x:Uid="CreateNewButtonText" Margin="2 0 5 0" />
                        <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE7C3;" />
                    </StackPanel>
                </ToggleButton>
                <ToggleButton
                    Margin="5 0 0 0"
                    Visibility="{x:Bind ViewModel.IsEditVisible, Mode=TwoWay,UpdateSourceTrigger=PropertyChanged,
                    Converter={StaticResource BoolToVisibilityConverter}}"
                    Command="{x:Bind ViewModel.EditUserCommand,Mode=OneWay}"
                    IsChecked="{x:Bind ViewModel.IsEdit, Mode=TwoWay}">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="Edit" Margin="0 0 5 0" />
                        <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE70F;" />
                    </StackPanel>
                </ToggleButton>
            </StackPanel>
        </Grid>
        <Grid Row="1" VerticalAlignment="Top" Margin="5 0 0 5"
              Visibility="{x:Bind ViewModel.IsSingleSelection, Mode= TwoWay, UpdateSourceTrigger=PropertyChanged,
              Converter={StaticResource BoolToVisibilityConverter}}">
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <TextBlock x:Uid="UserNameText"
                           VerticalAlignment="Center"
                           Margin="0 0 5 5" />
                <TextBox x:Uid="UserNameNullText"
                         Grid.Row="0"
                         Grid.Column="1"
                         IsReadOnly="{x:Bind ViewModel.IsReadOnly, Mode=TwoWay}"
                         Margin="0 0 5 5"
                         Width="250"
                         Height="25"
                         Text="{x:Bind ViewModel.UserName, Mode=TwoWay}" />
                <TextBlock Grid.Row="1" x:Uid="UserEmailText"
                           Grid.Column="0"
                           VerticalAlignment="Center"
                           Margin="0 0 5 5" />
                <TextBox x:Uid="UserEmailNullText"
                         IsReadOnly="{x:Bind ViewModel.IsReadOnly, Mode=TwoWay}"
                         Margin="0 0 5 5"
                         Grid.Row="1"
                         Grid.Column="1"
                         Width="250"
                         Height="25"
                         Text="{x:Bind ViewModel.UserEmail, Mode= TwoWay}" />
                <TextBlock Grid.Row="2" x:Uid="UserDepartmentText"
                           Grid.Column="0"
                           VerticalAlignment="Center"
                           Margin="0 0 5 5" />
                <ComboBox Grid.Row="2"
                          Grid.Column="1"
                          Height="30"
                          Visibility="{x:Bind ViewModel.IsReadOnly,Mode=TwoWay,
                          Converter={StaticResource InverseBoolToVisibilityConverter}}"
                          IsEditable="False"
                          Margin="0 0 5 5"
                          HorizontalAlignment="Stretch"
                          VerticalAlignment="Center"
                          ItemsSource="{x:Bind ViewModel.UserDepartments,Mode = OneWay}"
                          SelectedItem="{x:Bind ViewModel.UserDepartment, Mode=TwoWay}" />
                <TextBox x:Uid="UserDepartmentNullText"
                         Grid.Row="2"
                         Grid.Column="1"
                         Visibility="{x:Bind ViewModel.IsReadOnly, Mode=TwoWay,
                         Converter={StaticResource BoolToVisibilityConverter}}"
                         IsReadOnly="{x:Bind ViewModel.IsReadOnly, Mode=TwoWay}"
                         Margin="0 0 5 5"
                         Width="250"
                         Height="25"
                         Text="{x:Bind ViewModel.UserDepartment, Mode= TwoWay}" />
                <TextBlock Grid.Row="3" Text="User Status"
                           Grid.Column="0"
                           VerticalAlignment="Center"
                           Margin="0 0 5 5" />
                <ComboBox Grid.Row="3"
                          Grid.Column="1"
                          Height="30"
                          Visibility="{x:Bind ViewModel.IsReadOnly,Mode=TwoWay,
                          Converter={StaticResource InverseBoolToVisibilityConverter}}"
                          IsEditable="False"
                          Margin="0 0 5 5"
                          HorizontalAlignment="Stretch"
                          VerticalAlignment="Center"
                          ItemsSource="{x:Bind ViewModel.UserStatus, Mode= OneWay}"
                          SelectedItem="{x:Bind ViewModel.SelectedUserStatus, Mode=TwoWay}" />
                <TextBox Grid.Row="3"
                         Grid.Column="1"
                         Visibility="{x:Bind ViewModel.IsReadOnly, Mode=TwoWay,
                         Converter={StaticResource BoolToVisibilityConverter}}"
                         IsReadOnly="{x:Bind ViewModel.IsReadOnly, Mode=TwoWay}"
                         Margin="0 0 5 5"
                         Width="250"
                         Height="30"
                         Text="{x:Bind ViewModel.SelectedUserStatus, Mode= TwoWay}" />
            </Grid>
            <Grid Grid.Column="1">
                <Grid.RowDefinitions>
                    <RowDefinition/>
                    <RowDefinition/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <TextBlock x:Uid="UserRoleText"
                           VerticalAlignment="Top"
                           HorizontalAlignment="Center"
                           Margin="5 0 2 5" />
                <Border Grid.Row="1"
                        Grid.Column="0"
                        BorderThickness=".5"
                        BorderBrush="LightGray"
                        CornerRadius="2">
                    <ListView
                        ItemsSource="{x:Bind ViewModel.SelectedUserRoles, Mode=OneWay}"
                        SelectionMode="None"
                        Visibility="{x:Bind ViewModel.IsReadOnly, Mode=TwoWay,
                        Converter={StaticResource BoolToVisibilityConverter}}"/>
                </Border>
                <Border Grid.Row="1"
                        Grid.Column="0"
                        BorderThickness=".5"
                        BorderBrush="LightGray"
                        CornerRadius="2"
                        Visibility="{x:Bind ViewModel.IsReadOnly,Mode=TwoWay,
                        Converter={StaticResource InverseBoolToVisibilityConverter}}">
                    <ListView x:Name="UserRoles"
                              ItemsSource="{x:Bind ViewModel.UserRoles, Mode=OneWay}"
                              SelectionMode="Multiple"
                              VerticalContentAlignment="Top"
                              ScrollViewer.IsVerticalRailEnabled="True"
                              ScrollViewer.VerticalScrollBarVisibility="Visible">
                        <i:Interaction.Behaviors>
                            <ic:EventTriggerBehavior EventName="SelectionChanged">
                                <ic:InvokeCommandAction
                                    Command="{x:Bind ViewModel.SelectedItemsCommand}"
                                    CommandParameter="{x:Bind UserRoles.SelectedItems,Mode=OneWay}" />
                            </ic:EventTriggerBehavior>
                        </i:Interaction.Behaviors>
                    </ListView>
                </Border>
                <TextBlock Grid.Row="0" Grid.Column="1" x:Uid="UserFunctionsText"
                           VerticalAlignment="Top"
                           HorizontalAlignment="Center"
                           Margin="5 0 2 5" />
                <Border Grid.Row="1"
                        Grid.Column="1"
                        Margin="5 0 0 0"
                        BorderThickness=".5"
                        BorderBrush="LightGray"
                        CornerRadius="2">
                    <ListView
                        ItemsSource="{x:Bind ViewModel.SelectedUserFunctions, Mode=OneWay}"
                        SelectionMode="None"
                        Visibility="{x:Bind ViewModel.IsReadOnly, Mode=TwoWay,
                        Converter={StaticResource BoolToVisibilityConverter}}"/>
                </Border>
                <Border Grid.Row="1"
                        Grid.Column="1"
                        Margin="5 0 0 0"
                        BorderThickness=".5"
                        BorderBrush="LightGray"
                        CornerRadius="2"
                        Visibility="{x:Bind ViewModel.IsReadOnly,Mode=TwoWay,
                        Converter={StaticResource InverseBoolToVisibilityConverter}}">
                    <ListView x:Name="UserFunctions"
                              ItemsSource="{x:Bind ViewModel.UserFunctions, Mode=OneWay}"
                              SelectionMode="Multiple"
                              VerticalContentAlignment="Top"
                              ScrollViewer.IsVerticalRailEnabled="True"
                              ScrollViewer.VerticalScrollBarVisibility="Visible">
                        <i:Interaction.Behaviors>
                            <ic:EventTriggerBehavior EventName="SelectionChanged">
                                <ic:InvokeCommandAction
                                    Command="{x:Bind ViewModel.SelectedItemsCommand}"
                                    CommandParameter="{x:Bind UserFunctions.SelectedItems,Mode=OneWay}" />
                            </ic:EventTriggerBehavior>
                        </i:Interaction.Behaviors>
                    </ListView>
                </Border>
            </Grid>
        </Grid>
        <Grid Grid.Row="1" VerticalAlignment="Top"
              Margin="5 0 0 5"
              Visibility="{x:Bind ViewModel.IsMultiSelection,
              Converter={StaticResource BoolToVisibilityConverter}}">
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <TextBlock Grid.Row="0" Text="User Status"
                       Grid.Column="0"
                       VerticalAlignment="Center"
                       Margin="0 0 5 5" />
            <ComboBox Grid.Row="1"
                      Grid.Column="0"
                      Height="30"
                      IsEditable="False"
                      Margin="0 0 5 5"
                      HorizontalAlignment="Stretch"
                      VerticalAlignment="Top"
                      ItemsSource="{x:Bind ViewModel.UserStatus, Mode= OneWay}"
                      SelectedItem="{x:Bind ViewModel.SelectedUserStatus, Mode=TwoWay}" />
            <TextBlock x:Uid="UserDepartmentText"
                       Grid.Row="0"
                       Grid.Column="1"
                       VerticalAlignment="Top"
                       HorizontalAlignment="Center"
                       Margin="2 0 5 0"/>
            <Border Grid.Row="1"
                    Grid.Column="1"
                    BorderThickness=".5"
                    BorderBrush="LightGray"
                    CornerRadius="2">
                <ListView x:Name="UserDepartments"
                          ItemsSource="{x:Bind ViewModel.UserDepartments, Mode=TwoWay}"
                          SelectionMode="Single"
                          VerticalContentAlignment="Top"
                          ScrollViewer.IsVerticalRailEnabled="True"
                          ScrollViewer.VerticalScrollBarVisibility="Visible">
                    <i:Interaction.Behaviors>
                        <ic:EventTriggerBehavior EventName="SelectionChanged">
                            <ic:InvokeCommandAction
                                Command="{x:Bind ViewModel.SelectedItemsCommand}"
                                CommandParameter="{x:Bind UserDepartments.SelectedItems,Mode=OneWay}" />
                        </ic:EventTriggerBehavior>
                    </i:Interaction.Behaviors>
                </ListView>
            </Border>
            <TextBlock x:Uid="UserRoleText"
                       Grid.Row="0"
                       Grid.Column="2"
                       VerticalAlignment="Top"
                       HorizontalAlignment="Center"
                       Margin="5 0 2 5" />
            <Border Grid.Row="1"
                    Grid.Column="2"
                    Margin="5 0 0 0"
                    BorderThickness=".5"
                    BorderBrush="LightGray"
                    CornerRadius="2">
                <ListView x:Name="mUserRoles"
                          ItemsSource="{x:Bind ViewModel.UserRoles, Mode=OneWay}"
                          SelectionMode="Multiple"
                          VerticalContentAlignment="Top"
                          ScrollViewer.IsVerticalRailEnabled="True"
                          ScrollViewer.VerticalScrollBarVisibility="Visible">
                    <i:Interaction.Behaviors>
                        <ic:EventTriggerBehavior EventName="SelectionChanged">
                            <ic:InvokeCommandAction
                                Command="{x:Bind ViewModel.SelectedItemsCommand}"
                                CommandParameter="{x:Bind mUserRoles.SelectedItems,Mode=OneWay}" />
                        </ic:EventTriggerBehavior>
                    </i:Interaction.Behaviors>
                </ListView>
            </Border>
            <TextBlock Grid.Row="0" Grid.Column="3" x:Uid="UserFunctionsText"
                       VerticalAlignment="Top"
                       HorizontalAlignment="Center"
                       Margin="5 0 2 5" />
            <Border Grid.Row="1"
                    Grid.Column="3"
                    Margin="5 0 0 0"
                    BorderThickness=".5"
                    BorderBrush="LightGray"
                    CornerRadius="2">
                <ListView x:Name="mUserFunctions"
                          ItemsSource="{x:Bind ViewModel.UserFunctions, Mode=OneWay}"
                          SelectionMode="Multiple"
                          VerticalContentAlignment="Top"
                          ScrollViewer.IsVerticalRailEnabled="True"
                          ScrollViewer.VerticalScrollBarVisibility="Visible">
                    <i:Interaction.Behaviors>
                        <ic:EventTriggerBehavior EventName="SelectionChanged">
                            <ic:InvokeCommandAction
                                Command="{x:Bind ViewModel.SelectedItemsCommand}"
                                CommandParameter="{x:Bind mUserFunctions.SelectedItems,Mode=OneWay}" />
                        </ic:EventTriggerBehavior>
                    </i:Interaction.Behaviors>
                </ListView>
            </Border>
        </Grid>
        <Grid Grid.Row="1" VerticalAlignment="Top"
              Visibility="{x:Bind ViewModel.IsCreateNewUser,
              Converter={StaticResource BoolToVisibilityConverter}}">
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <TextBlock x:Uid="UserNameText"
                           VerticalAlignment="Center"
                           Margin="0 0 5 5" />
                <TextBox x:Uid="UserNameNullText"
                         Grid.Row="0"
                         Grid.Column="1"
                         Margin="0 0 5 5"
                         Width="250"
                         Height="25"
                         Text="{x:Bind ViewModel.UserName, Mode=TwoWay}" />
                <TextBlock x:Uid="UserEmailText"
                           Grid.Row="1"
                           Grid.Column="0"
                           VerticalAlignment="Center"
                           Margin="0 0 5 5" />
                <TextBox x:Uid="UserEmailNullText"
                         Margin="0 0 5 5"
                         Grid.Row="1"
                         Grid.Column="1"
                         Width="250"
                         Height="25"
                         Text="{x:Bind ViewModel.UserEmail, Mode= TwoWay}" />
                <TextBlock x:Uid="UserDepartmentText"
                           Grid.Row="2"
                           Grid.Column="0"
                           VerticalAlignment="Center"
                           Margin="0 0 5 5" />
                <ComboBox Grid.Row="2"
                          Grid.Column="1"
                          Height="30"
                          IsEditable="False"
                          Margin="0 0 5 5"
                          HorizontalAlignment="Stretch"
                          VerticalAlignment="Center"
                          ItemsSource="{x:Bind ViewModel.UserDepartments, Mode=OneWay}"
                          SelectedItem="{x:Bind ViewModel.UserDepartment, Mode=TwoWay}" />
                <TextBlock Grid.Row="3" Text="User Status"
                           Grid.Column="0"
                           VerticalAlignment="Center"
                           Margin="0 0 5 5" />
                <ComboBox Grid.Row="3"
                          Grid.Column="1"
                          Height="30"
                          IsEditable="False"
                          Margin="0 0 5 5"
                          HorizontalAlignment="Stretch"
                          VerticalAlignment="Center"
                          ItemsSource="{x:Bind ViewModel.UserStatus, Mode= OneWay}"
                          SelectedItem="{x:Bind ViewModel.SelectedUserStatus, Mode=TwoWay}" />
            </Grid>
            <Grid Grid.Column="1">
                <Grid.RowDefinitions>
                    <RowDefinition/>
                    <RowDefinition/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <TextBlock x:Uid="UserRoleText"
                           VerticalAlignment="Top"
                           HorizontalAlignment="Center"
                           Margin="5 0 2 5" />
                <Border Grid.Row="1"
                        Grid.Column="0"
                        BorderThickness=".5"
                        BorderBrush="LightGray"
                        CornerRadius="2">
                    <ListView x:Name="cuUserRoles" ItemsSource="{x:Bind ViewModel.UserRoles, Mode=OneWay}"
                              SelectionMode="Multiple"
                              VerticalContentAlignment="Top"
                              ScrollViewer.IsVerticalRailEnabled="True"
                              ScrollViewer.VerticalScrollBarVisibility="Visible">
                        <i:Interaction.Behaviors>
                            <ic:EventTriggerBehavior EventName="SelectionChanged">
                                <ic:InvokeCommandAction
                                    Command="{x:Bind ViewModel.SelectedItemsCommand}"
                                    CommandParameter="{x:Bind cuUserRoles.SelectedItems,Mode=OneWay}" />
                            </ic:EventTriggerBehavior>
                        </i:Interaction.Behaviors>
                    </ListView>
                </Border>
                <TextBlock Grid.Row="0" Grid.Column="1" x:Uid="UserFunctionsText"
                           VerticalAlignment="Top"
                           HorizontalAlignment="Center"
                           Margin="5 0 2 5" />
                <Border Grid.Row="1"
                        Grid.Column="1"
                        Margin="5 0 0 0"
                        BorderThickness=".5"
                        BorderBrush="LightGray"
                        CornerRadius="2">
                    <ListView x:Name="cuUserFunctions"
                              ItemsSource="{x:Bind ViewModel.UserFunctions, Mode=OneWay}"
                              SelectionMode="Multiple"
                              VerticalContentAlignment="Top"
                              ScrollViewer.IsVerticalRailEnabled="True"
                              ScrollViewer.VerticalScrollBarVisibility="Visible">
                        <i:Interaction.Behaviors>
                            <ic:EventTriggerBehavior EventName="SelectionChanged">
                                <ic:InvokeCommandAction
                                    Command="{x:Bind ViewModel.SelectedItemsCommand}"
                                    CommandParameter="{x:Bind cuUserFunctions.SelectedItems,Mode=OneWay}" />
                            </ic:EventTriggerBehavior>
                        </i:Interaction.Behaviors>
                    </ListView>
                </Border>
            </Grid>

        </Grid>
        <StackPanel Orientation="Horizontal" Grid.Row="2" VerticalAlignment="Bottom">
            <Button Margin="0 5 5 0" Command="{x:Bind ViewModel.SubmitCommand}">
                <TextBlock x:Uid="SubmitText" />
            </Button>
            <Button Margin="5 5 0 0" Command="{x:Bind ViewModel.CancelCommand}">
                <TextBlock x:Uid="CancelText" />
            </Button>
        </StackPanel>
    </Grid>
</UserControl>

Regression

No response

Reproducible in sample app?

• This bug can be reproduced in the sample app.

Steps to reproduce

Create a Page and a ViewModel and bind.
Create a UserControl and bind.
Add UserControl to the Page.

In the UserControl add a BoolToVisibilityConverter to make a Grid Visible or Collapsed based on the Boolean property in the ViewModel of the UserControl.

Expected behavior

Expected for the BoolToVisibilityConverter change Visibility from Collapsed to Visible.

Screenshots

How I want this to apply the BoolToVisibilityConverter

Here none of the converters work.

Windows Build Number

• Windows 10 1809 (Build 17763)
• Windows 10 1903 (Build 18362)
• Windows 10 1909 (Build 18363)
• Windows 10 2004 (Build 19041)
• Windows 10 20H2 (Build 19042)
• Windows 10 21H1 (Build 19043)
• Windows 11 21H2 (Build 22000)
• Other (specify)

Other Windows Build number

No response

App minimum and target SDK version

• Windows 10, version 1809 (Build 17763)
• Windows 10, version 1903 (Build 18362)
• Windows 10, version 1909 (Build 18363)
• Windows 10, version 2004 (Build 19041)
• Other (specify)

Other SDK version

Windows 11

Visual Studio Version

No response

Visual Studio Build Number

Version 17.3.0

Device form factor

No response

Nuget packages

communitytoolkit.mvvm \8.0.0
microsoft.extensions.hosting\6.0.1
microsoft.windowsappsdk\1.1.3
communitytoolkit.winui.ui.controls\7.1.2

Additional context

No response

Help us help you

No.

Hello boriskleynbok, thank you for opening an issue with us!

I have automatically added a "needs triage" label to help get things started. Our team will analyze and investigate the issue, and escalate it to the relevant team if possible. Other community members may also look into the issue and provide feedback 🙌

[michael-hawker]

@boriskleynbok there's a lot of pieces here. You also didn't share the definition of your ViewModel property in the code-behind for the UserControl or any of that code.

Is there a reason you're using BoolToObjectConverter instead of BoolToVisibilityConverter or even just the functionality of x:Bind itself to go from bool to visibility?

These converters have a lot of millage underneath them, so I think we need more information or an isolated repro in order to understand better if this is an issue with usage, the platform, or an actual issue with the converter implementation.

@LalithaNadimpalli would you mind seeing if you can create a small WindowsAppSDK/WinUI 3 project with a UserControl that has a single binding setup with the converter similar to the code above? Thanks!

[LalithaNadimpalli]

@boriskleynbok I was trying to reproduce the WinUI project of this but it would be great if you could provide the code behind ViewModel

[michael-hawker]

I imagine since the latest MVVM Toolkit version is called out, it'd at least be something like this:

public SomeViewModel : ObservableObject
{
     [ObservableProperty]
     private bool _isEditVisible;
}

[boriskleynbok]

@boriskleynbok I was trying to reproduce the WinUI project of this but it would be great if you could provide the code behind ViewModel

public UserDetailsViewModel ViewModel
    {
        get;
    }

    public AddEditControl()
    {
        ViewModel = App.GetService<UserDetailsViewModel>();
        this.InitializeComponent();
    }

using System.Collections.ObjectModel;
using System.Windows.Input;
using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using CSA2.Contracts.ViewModels;
using CSA2.Core.Contracts.Services;
using CSA2.Enums;
using CSA2.Helpers;
using CSA2.Models;

namespace CSA2.ViewModels;

public class UserDetailsViewModel : ObservableRecipient, IUserDetailsViewModel
{
    private readonly IUserDataService _userDataService;
    private bool _isCreateNewUser;
    private bool _isEdit;
    private bool _isEditVisible;
    private bool _isMultiSelection;
    private bool _isReadOnly;
    private bool _isSingleSelection;
    private IList<object>? _selectedItems;
    private List<User>? _selectedUsers;
    private string? _selectedUserStatus;
    private User? _user;
    private string? _userDepartment;
    private ObservableCollection<string>? _userDepartments;
    private List<Department>? _userDepartmentsStore;
    private string? _userEmail;
    private List<UserFunction>? _userFunctions;
    private List<UserFunction>? _userFunctionsStore;
    private string? _userName;
    private List<UserRole>? _userRoles;
    private List<UserRole>? _userRolesStore;
    private ObservableCollection<string>? _userStatus;


    public UserDetailsViewModel(IUserDataService userDataService)
    {
        _userDataService = userDataService ?? throw new ArgumentNullException(nameof(userDataService));
        AddUserCommand = new RelayCommand(AddUserCommandExecute, CanAddUserCommandExecute);
        EditUserCommand = new RelayCommand(EditUserCommandExecute);
        SubmitCommand = new RelayCommand(SubmitCommandExecute);
        CancelCommand = new RelayCommand(CancelCommandExecute);
        SelectedItemsCommand = new RelayCommand<object>(SelectedItemsCommandExecute);
        UserStatus = SetupUserStatus();
        SelectedUserStatus = EnumHelper.ConvertEnumToString(Enums.UserStatus.Active);
        UserDepartments = new ObservableCollection<string>();
        UserRoles = new List<UserRole>();
        UserFunctions = new List<UserFunction>();
        SelectedUsers = new List<User>();
    }

    public IRelayCommand AddUserCommand
    {
        get;
        set;
    }

    public IRelayCommand EditUserCommand
    {
        get;
        set;
    }

    public ICommand SubmitCommand
    {
        get;
        set;
    }

    public ICommand CancelCommand
    {
        get;
        set;
    }

    public ICommand SelectedItemsCommand
    {
        get;
        set;
    }

    public List<UserRole>? UserRoles
    {
        get => _userRoles;
        set => SetProperty(ref _userRoles, value);
    }

    public ObservableCollection<string>? UserDepartments
    {
        get => _userDepartments;
        set => SetProperty(ref _userDepartments, value);
    }

    public List<UserFunction>? UserFunctions
    {
        get => _userFunctions;
        set => SetProperty(ref _userFunctions, value);
    }

    public string? UserEmail
    {
        get => _userEmail;
        set => SetProperty(ref _userEmail, value);
    }

    public string? UserDepartment
    {
        get => _userDepartment;
        set => SetProperty(ref _userDepartment, value);
    }

    public string? UserName
    {
        get => _userName;
        set => SetProperty(ref _userName, value);
    }

    public bool IsMultiSelection
    {
        get => _isMultiSelection;
        set => SetProperty(ref _isMultiSelection, value);
    }

    public string? SelectedUserStatus
    {
        get => _selectedUserStatus;
        set => SetProperty(ref _selectedUserStatus, value);
    }

    public ObservableCollection<string>? UserStatus
    {
        get => _userStatus;
        set => SetProperty(ref _userStatus, value);
    }

    public bool IsReadOnly
    {
        get => _isReadOnly;
        set => SetProperty(ref _isReadOnly, value);
    }

    public bool IsEdit
    {
        get => _isEdit;
        set => SetProperty(ref _isEdit, value);
    }

    public bool IsEditVisible
    {
        get => _isEditVisible;
        set => SetProperty(ref _isEditVisible, value);
    }

    public bool IsCreateNewUser
    {
        get => _isCreateNewUser;
        set => SetProperty(ref _isCreateNewUser, value);
    }

    public List<UserRole> SelectedUserRoles
    {
        get;
        set;
    } = new();

    public List<Department> SelectedUserDepartments
    {
        get;
        set;
    } = new();

    public List<UserFunction> SelectedUserFunctions
    {
        get;
        set;
    } = new();

    public List<User>? SelectedUsers
    {
        get => _selectedUsers;
        set => SetProperty(ref _selectedUsers, value);
    }

    public bool IsSingleSelection
    {
        get => _isSingleSelection;
        set => SetProperty(ref _isSingleSelection, value);
    }

    private bool CanAddUserCommandExecute()
    {
        if (IsEdit)
        {
            return false;
        }

        return true;
    }

    private void CancelCommandExecute()
    {
        if (SelectedUsers?.Count == 0 && _user != null)
        {
            IsEdit = false;
            IsReadOnly = true;
            RefreshUserData();
        }
    }

    private static ObservableCollection<string> SetupUserStatus()
    {
        var setupUserStatus = Enum.GetNames(typeof(UserStatus)).Where(u => !u.Contains("All"));
        return new ObservableCollection<string>(setupUserStatus);
    }

    private void AddUserCommandExecute()
    {
        IsSingleSelection = false;
        IsMultiSelection = false;
        IsEdit = false;
        IsReadOnly = false;
        IsCreateNewUser = true;
        _user = new User();
        UserName = _user.UserName;
        UserEmail = _user.UserEmail;
        UserDepartment = _user.DepartmentName;
        SelectedUserStatus = EnumHelper.ConvertEnumToString(Enums.UserStatus.Active);
        EditUserCommand.NotifyCanExecuteChanged();
    }

    private void SubmitCommandExecute()
    {
    }

    private void EditUserCommandExecute()
    {
        if (!IsEdit)
        {
            IsReadOnly = true;
        }
        else
        {
            IsReadOnly = false;
        }
        RefreshUserData();
    }

    public void SetUser(User user)
    {
        _user = user;
        IsReadOnly = true;
        IsMultiSelection = false;
        IsCreateNewUser = false;
        IsEdit = false;
        IsEditVisible = true;
        RefreshUserData();
    }

    public void SetupUsers(IEnumerable<User> selectedUsers)
    {
        _user = null;
        IsSingleSelection = false;
        IsCreateNewUser = false;
        SelectedUsers?.Clear();
        SelectedUsers = selectedUsers.ToList();
        IsEditVisible = false;
    }

    private void RefreshUserData()
    {
        UserName = _user?.UserName;
        UserEmail = _user?.UserEmail;
        UserDepartment = _user?.DepartmentName;
        SelectedUserStatus = _user is { UserActiveIndicator: true }
            ? EnumHelper.ConvertEnumToString(Enums.UserStatus.Active)
            : EnumHelper.ConvertEnumToString(Enums.UserStatus.Inactive);
    }


    public void SetUpUserData(List<UserRole> userRolesStore, List<Department> userDepartmentsStore,
        List<UserFunction> userFunctionsStore)
    {
        _userDepartmentsStore = userDepartmentsStore;
        _userRolesStore = userRolesStore;
        _userFunctionsStore = userFunctionsStore;
        foreach (var department in _userDepartmentsStore)
        {
            UserDepartments?.Add(department.DepartmentName);
        }

        foreach (var userRole in _userRolesStore)
        {
            SelectedUserRoles.Add(userRole);
            UserRoles?.Add(userRole);
        }

        foreach (var userFunction in _userFunctionsStore)
        {
            SelectedUserFunctions.Add(userFunction);
            UserFunctions?.Add(userFunction);
        }

        IsEditVisible = false;
        IsCreateNewUser = false;
    }

    private void SelectedItemsCommandExecute(object? obj)
    {
        if (obj != null)
        {
            _selectedItems = obj as IList<object>;

            if (_selectedItems != null && _selectedItems.Any())
            {
                ProcessSelectedFlyoutItems(_selectedItems);
            }
        }
    }

    private void ProcessSelectedFlyoutItems(IList<object>? selectedItems)
    {
        if (selectedItems != null)
        {
            foreach (var item in selectedItems)
            {
                if (item is UserRole userRole)
                {
                    if (!SelectedUserRoles.Contains(item))
                    {
                        SelectedUserRoles.Add(userRole);
                    }
                }
                else if (item is Department department)
                {
                    if (!SelectedUserDepartments.Contains(item))
                    {
                        SelectedUserDepartments.Add(department);
                    }
                }
                else if (item is UserFunction userFunction)
                {
                    if (!SelectedUserFunctions.Contains(item))
                    {
                        SelectedUserFunctions.Add(userFunction);
                    }
                }
            }
        }
    }

    public void SetNewUser()
    {
        IsSingleSelection = false;
        IsMultiSelection = false;
        IsEdit = false;
        IsEditVisible = false;
        IsReadOnly = false;
        IsCreateNewUser = true;
        _user = new User();
        UserName = _user.UserName;
        UserEmail = _user.UserEmail;
        UserDepartment = _user.DepartmentName;
        SelectedUserStatus = EnumHelper.ConvertEnumToString(Enums.UserStatus.Active);
    }
}

[boriskleynbok]

Looks like setting up ViewModel as Property for the UserControl in the codebehind doesn't work for x:Bind pattern.
Setting the Data Context works regular {Binding }
controls:AddEditControl x:Name="AddEditControl" DataContext="{x:Bind ViewModel.UserDetailsViewModel}" />