In WInUI 3 how can I pass ViewModel from a Page that has a UserControl - xaml

Question

In a WinUI 3 application, using CommunityToolkit.Mvvm.
All ViewModels are created by a DI container.
The parent Page has a ViewModel and contains a child UserControl that also has a ViewModel.
Right now the UserControl DataContext is bound to the ViewModel like this:
<controls:AddEditControl x:Name="AddEditControl"
DataContext="{x:Bind ViewModel.UserDetailsViewModel}" />
What I tried to set ViewModel like this:
public sealed partial class AddEditControl : UserControl
{
public UserDetailsViewModel ViewModel
{
get;
}
public AddEditControl()
{
ViewModel = App.GetService<UserDetailsViewModel>();
this.InitializeComponent();
}
}
The issue is that setting a ViewModel in a code behind of the UserControl the same way its set in Page is not binding properly.
The goal is to be able to use the same x:Bind markup in the UserControl as in the Page.
<Page x:Class="SearchUserPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="using:CSA2.Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:converters="using:CommunityToolkit.WinUI.UI.Converters"
xmlns:ctkControls="using:CommunityToolkit.WinUI.UI.Controls"
xmlns:customConverters="using:CSA2.Converters"
xmlns:i="using:Microsoft.Xaml.Interactivity"
xmlns:ic="using:Microsoft.Xaml.Interactions.Core"
mc:Ignorable="d"
Margin="-40">
<Page.Resources>
</Page.Resources>
<Grid x:Name="ContentArea">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Border Grid.Row="0"
Margin="500 -78 60 0">
<StackPanel HorizontalAlignment="Right">
</StackPanel>
</Border>
<Grid x:Name="GridPanel"
Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="{x:Bind ViewModel.UserDetailsRowHeight, Mode=OneWay}"
MinHeight="40" />
</Grid.RowDefinitions>
<Grid Grid.Row="0"
Margin="{StaticResource NavigationViewPageContentMargin}">
</Grid>
<Grid Grid.Row="1"
Margin="{StaticResource NavigationViewPageContentMargin}">
</Grid>
<Grid Grid.Row="2"
Background="#FAFAFA">
<TabView IsAddTabButtonVisible="False"
Background="#CCC">
<TabView.TabItems>
<TabViewItem x:Uid="UserDetailsTab"
IsClosable="False">
<controls:AddEditControl x:Name="AddEditControl"
DataContext="{x:Bind ViewModel.UserDetailsViewModel}" />
</TabViewItem>
<TabViewItem Header="History"
IsClosable="False">
<TextBlock Text="User History"
Style="{StaticResource SubheaderTextBlockStyle}"
Margin="10" />
</TabViewItem>
</TabView.TabItems>
</TabView>
</Grid>
</Grid>
</Grid>
</Page>
<UserControl x:Class="Controls.AddEditControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using: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>
</UserControl.Resources>
<Grid Margin="{StaticResource NavigationViewPageContentMargin}"
Padding="0 0 0 40">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*" />
<ColumnDefinition Width="7*" />
</Grid.ColumnDefinitions>
<ToggleButton Grid.Column="0"
Command="{Binding EditUserCommand,Mode=TwoWay}"
IsChecked="{Binding IsEditButtonChecked, Mode=TwoWay}"
Margin="10"
HorizontalAlignment="Left"
Style="{ThemeResource DefaultToggleButtonStyle}"
Visibility="{Binding IsEditVisible, Mode=TwoWay, Converter={StaticResource BoolToVisibilityConverter}}">
<StackPanel Orientation="Horizontal">
<Viewbox Style="{StaticResource ButtonIcon}">
<SymbolIcon Symbol="Edit" />
</Viewbox>
<TextBlock x:Uid="EditButton" />
</StackPanel>
</ToggleButton>
<StackPanel Orientation="Horizontal"
HorizontalAlignment="Right"
Margin="10 0"
Visibility="{Binding IsUserSelected, Converter={StaticResource BoolToVisibilityConverter}}">
<Button Command="{Binding SaveCommand}"
Style="{ThemeResource DefaultButtonStyle}"
Margin="10 0">
<StackPanel Orientation="Horizontal">
<Viewbox Style="{StaticResource ButtonIcon}">
<SymbolIcon Symbol="Save" />
</Viewbox>
<TextBlock x:Uid="SaveButton" />
</StackPanel>
</Button>
<Button Command="{Binding ResetCommand}">
<StackPanel Orientation="Horizontal">
<Viewbox Style="{StaticResource ButtonIcon}">
<SymbolIcon Symbol="Undo" />
</Viewbox>
<TextBlock x:Uid="ResetButton" />
</StackPanel>
</Button>
</StackPanel>
<StackPanel Grid.Column="1"
Margin="10"
VerticalAlignment="Center"
Visibility="{Binding IsUserSelected, Converter={StaticResource BoolToVisibilityConverter}}">
<TextBlock x:Uid="UserFunctionsText"
Style="{StaticResource DetailSubTitleStyle}" />
</StackPanel>
</Grid>
<Grid Row="1"
Grid.Column="0"
Visibility="{Binding IsUserSelected, Converter={StaticResource BoolToVisibilityConverter}}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*" />
<ColumnDefinition Width="7*" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0"
Margin="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="4*" />
<ColumnDefinition Width="8*" />
</Grid.ColumnDefinitions>
<Grid.Resources>
</Grid.Resources>
<TextBlock x:Uid="UserIdText"
Grid.Row="0"
Grid.Column="0"
Style="{StaticResource EditForm_TextBlock}"
Visibility="{Binding IsCreateNewUser, Mode=TwoWay, Converter={StaticResource InverseBoolToVisibilityConverter}}" />
<TextBox x:Uid="UserIdText"
Grid.Row="0"
Grid.Column="1"
IsReadOnly="True"
Text="{Binding UserId, Mode=TwoWay}"
Style="{StaticResource EditForm_TextBox_ReadOnly}"
Visibility="{Binding IsCreateNewUser, Mode=TwoWay, Converter={StaticResource InverseBoolToVisibilityConverter}}" />
<TextBlock x:Uid="UserNameText"
Grid.Row="1"
Grid.Column="0"
Style="{StaticResource EditForm_TextBlock}" />
<TextBox x:Uid="UserNameNullText"
Grid.Row="1"
Grid.Column="1"
IsReadOnly="True"
Text="{Binding UserName, Mode=TwoWay}"
Style="{StaticResource EditForm_TextBox_ReadOnly}" />
<TextBlock x:Uid="UserEmailText"
Grid.Row="2"
Grid.Column="0"
Style="{StaticResource EditForm_TextBlock}" />
<TextBox x:Uid="UserEmailNullText"
Grid.Row="2"
Grid.Column="1"
IsReadOnly="True"
Text="{Binding UserEmail, Mode=TwoWay}"
Style="{StaticResource EditForm_TextBox_ReadOnly}" />
<TextBlock x:Uid="UserDepartmentText"
Grid.Row="3"
Grid.Column="0"
Style="{StaticResource EditForm_TextBlock}" />
<ComboBox Grid.Row="3"
Grid.Column="1"
Visibility="{Binding ReadOnlyMode, Mode=TwoWay, Converter={StaticResource InverseBoolToVisibilityConverter}}"
IsEditable="False"
HorizontalAlignment="Stretch"
MaxDropDownHeight="180"
ItemsSource="{Binding UserDepartments}"
SelectedItem="{Binding UserDepartment, Mode=TwoWay}"
Style="{StaticResource EditForm_ComboBox}" />
<TextBox x:Uid="UserDepartmentNullText"
Grid.Row="3"
Grid.Column="1"
Visibility="{Binding ReadOnlyMode, Mode=TwoWay, Converter={StaticResource BoolToVisibilityConverter}}"
IsReadOnly="{Binding ReadOnlyMode, Mode=TwoWay}"
Text="{Binding UserDepartment, Mode=TwoWay}"
Style="{StaticResource EditForm_TextBox}" />
<TextBlock x:Uid="UserStatusText"
Grid.Row="4"
Grid.Column="0"
Style="{StaticResource EditForm_TextBlock}" />
<ComboBox Grid.Row="4"
Grid.Column="1"
Visibility="{Binding ReadOnlyMode,Mode=TwoWay, Converter={StaticResource InverseBoolToVisibilityConverter}}"
IsEditable="False"
HorizontalAlignment="Stretch"
MaxDropDownHeight="180"
ItemsSource="{Binding UserStatus}"
SelectedItem="{Binding SelectedUserStatus, Mode=TwoWay}"
Style="{StaticResource EditForm_ComboBox}" />
<TextBox Grid.Row="4"
Grid.Column="1"
Visibility="{Binding ReadOnlyMode, Mode=TwoWay, Converter={StaticResource BoolToVisibilityConverter}}"
IsReadOnly="{Binding ReadOnlyMode, Mode=TwoWay}"
Text="{Binding SelectedUserStatus, Mode=TwoWay}"
Style="{StaticResource EditForm_TextBox}" />
<TextBlock x:Uid="UserRoleText"
Grid.Row="5"
Grid.Column="0"
Style="{StaticResource EditForm_TextBlock}" />
<ComboBox x:Name="UserRoles"
Grid.Row="5"
Grid.Column="1"
Visibility="{Binding ReadOnlyMode,Mode=TwoWay, Converter={StaticResource InverseBoolToVisibilityConverter}}"
HorizontalAlignment="Stretch"
MaxDropDownHeight="180"
IsEditable="False"
ItemsSource="{Binding UserRoles}"
SelectedItem="{Binding SelectedUserRole, Mode=TwoWay}"
Style="{StaticResource EditForm_ComboBox}">
<i:Interaction.Behaviors>
<ic:EventTriggerBehavior EventName="SelectionChanged">
<ic:InvokeCommandAction Command="{Binding SelectedItemCommand}"
CommandParameter="{x:Bind UserRoles.SelectedItem,Mode=OneWay}" />
</ic:EventTriggerBehavior>
</i:Interaction.Behaviors>
</ComboBox>
<TextBox Grid.Row="5"
Grid.Column="1"
Visibility="{Binding ReadOnlyMode, Mode=TwoWay, Converter={StaticResource BoolToVisibilityConverter}}"
IsReadOnly="{Binding ReadOnlyMode, Mode=TwoWay}"
HorizontalAlignment="Stretch"
Text="{Binding SelectedUserRole, Mode=TwoWay}"
Style="{StaticResource EditForm_TextBox}" />
</Grid>
<Grid Grid.Column="1"
Margin="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
</Grid>
</Grid>
<Grid Row="2"
Visibility="{Binding IsEditButtonChecked, Converter={StaticResource BoolToVisibilityConverter}}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*" />
<ColumnDefinition Width="7*" />
</Grid.ColumnDefinitions>
<StackPanel Orientation="Horizontal"
HorizontalAlignment="Right"
Margin="10 -50 10 0"
Visibility="{Binding IsUserSelected, Converter={StaticResource BoolToVisibilityConverter}}">
<Button Command="{Binding SaveCommand}"
Style="{ThemeResource DefaultButtonStyle}"
Margin="10 0">
<StackPanel Orientation="Horizontal">
<Viewbox Style="{StaticResource ButtonIcon}">
<SymbolIcon Symbol="Save" />
</Viewbox>
<TextBlock x:Uid="SaveButton" />
</StackPanel>
</Button>
<Button Command="{Binding ResetCommand}"
Style="{ThemeResource DefaultButtonStyle}">
<StackPanel Orientation="Horizontal">
<Viewbox Style="{StaticResource ButtonIcon}">
<SymbolIcon Symbol="Undo" />
</Viewbox>
<TextBlock x:Uid="ResetButton" />
</StackPanel>
</Button>
</StackPanel>
</Grid>
</Grid>
</UserControl>
using CSA2.ViewModels;
// To learn more about WinUI, the WinUI project structure,
// and more about our project templates, see: http://aka.ms/winui-project-info.
namespace CSA2.Views;
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class SearchUserPage : Page
{
public SearchUserViewModel ViewModel
{
get;
}
public SearchUserPage()
{
ViewModel = App.GetService<SearchUserViewModel>();
InitializeComponent();
}
}