2022-10-19

Calling another ViewModel using Caliburn.micro in .NET WPF

I have a ShellView and ShellViewModel. Within that ShellView I have a page call FirstPage which I have embedded as a frame and opening that on Startup is no problem. So far this is what I've done.

ShellView.xaml.cs

public partial class ShellView : Window
    {
        public ShellView()
        {
            InitializeComponent();
            FirstPage.Content = new FirstPage();
        }
    }

ShellView.xaml

<Window x:Class="CaliburnMicroDemo.Views.ShellView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        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:local="clr-namespace:CaliburnMicroDemo.Views"
        mc:Ignorable="d"
        Title="ShellWindow" Height="450" Width="800">
    <Grid>            
        <Frame x:Name="FirstPage" Source="FirstPage.xaml" NavigationUIVisibility="Hidden"/>
    </Grid>
</Window>

FirstPage.xaml.cs

public partial class FirstPage : Page
    {
        public FirstPage()
        {
            InitializeComponent();           
            this.DataContext = new FirstPageViewModel();
        }        
    }

FirstPage.xaml

<Page x:Class="CaliburnMicroDemo.Views.FirstPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      xmlns:local="clr-namespace:CaliburnMicroDemo.Views"
      mc:Ignorable="d" 
      d:DesignHeight="450" d:DesignWidth="800"
      Title="FirstPage">

    <Grid>            
        <Button x:Name="ChangeMessage" Content="Press Me" VerticalAlignment="Top" />
        <TextBlock x:Name="Message" VerticalAlignment="Center" HorizontalAlignment="Center" Text="{Binding Path=Message, Mode=OneWay}"/>
    </Grid>
</Page>

ShellViewModel.cs

 public class ShellViewModel : PropertyChangedBase
 {
 }

FirstPageViewModel.cs

public class FirstPageViewModel: PropertyChangedBase
{       
    private string message;

    public string Message
    {
        get
        {
            return message;
        }
        set
        {
            message = value;
            NotifyOfPropertyChange(() => Message);
        }
    }

    private int _pressCount;        

    public FirstPageViewModel()
    {
        Message = "Yolo";
        _pressCount = 0;
    }

    public void ChangeMessage()
    {
        _pressCount++;
        Message = "Presses = " + _pressCount;
    }        
}

Now the contents here is displayed without any issue. But when I click on the button eventhough I'm mapping them through NotifyOfPropertyChange at the setters in FirstPageViewModel.cs it's not working. For the one which uses two different windows the answer is here. But for the one which uses page not sure how to do it. Once again my question here is that how to map the ViewModel and View and bind the data and change the property. Here in this situation to change it on button click. The above logic works fine if I have only ShellView and ShellViewModel. And I'm starting this through the Bootstrapper class, the standard way of doing it using Caliburn.micro. Would appreciate if someone could help me out with this. Required anymore details please leave a comment would update accordingly.



No comments:

Post a Comment