MVVM Different ViewModel for each WizardPage

[admin]

I am creating a ViewModel for a Window with a kendo Wizzard control on it. The ViewModel is getting very big because I 5 pages in my wizzard. Is there a way to bind a ViewModel to a page. 

Sorry I am new to WPF and MVVM.

Basically I have something like this.

<Window
        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:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    xmlns:ui="clr-namespace:SMS.Installer.UI"
    x:Class="SMS.Installer.UI.MainWindow"
        mc:Ignorable="d"
        Icon="Resources/favicon.ico"
        Title="SMS Installer"
        WindowStartupLocation="CenterScreen">
    <Window.DataContext>
        <ui:MainWindowViewModel/>
    </Window.DataContext>
    <Grid>
        <DockPanel>
            <telerik:RadWizard x:Name="MainWindowWizard" >

                <!-- Introduction form -->
                <telerik:WelcomeWizardPage Name="IntroductionPage" SideHeaderWidth="120">
                    <!-- some page controls removed -->
                </telerik:WelcomeWizardPage>
                <!-- License agreement -->
                <telerik:WizardPage Name="LicenseAgreementPage" SideHeaderWidth="120" AllowNext="{Binding CanLicenseAgreementPageNext}">

                   <!-- !!!!!! WANT TO PUT BINDING HERE !!!!!! -->

                   <!-- some page controls removed-->
                </telerik:WizardPage>
                <!-- License key -->
                <telerik:WizardPage Name="LicenseKeyPage" SideHeaderWidth="120"  AllowNext="{Binding CanLicenseKeyPageNext}">
                    <!-- some page controls removed-->
                </telerik:WizardPage>
                <!-- database -->
                <telerik:WizardPage Name="DatabasePage" SideHeaderWidth="120"  AllowNext="{Binding CanDatabasePageNext}">
                    <!-- some page controls removed-->
                </telerik:WizardPage>
                <!-- installation -->
                <telerik:CompletionWizardPage Name="InstallationPage" SideHeaderWidth="120" AllowHelp="False">
                    <!-- some page controls removed-->
                </telerik:CompletionWizardPage>
            </telerik:RadWizard>
        </DockPanel>
    </Grid>
</Window>

 

 

[admin]

I have been trying to use binding via the element name, and using relative binding but still keep getting an error 

In this example LicenseKeyView has a DataContext set to a MVVM model with CanPageNext property.

<telerik:WizardPage Name="LicenseKeyPage" SideHeaderWidth="120" AllowNext="{Binding  DataContext.CanPageNext, ElementName=LicenseKeyView}" >
                    <ui:LicenseKeyView x:Name="LicenseKeyView" />
 </telerik:WizardPage>

Gives this error

System.Windows.Data Error: 4 : Cannot find source for binding with reference 'ElementName=LicenseKeyView'. BindingExpression:Path=DataContext.CanPageNext; DataItem=null; target element is 'WizardPage' (Name='LicenseKeyPage'); target property is 'AllowNext' (type 'Boolean')

 

This is the relative binding I have tried.

<telerik:WizardPage Name="LicenseKeyPage" SideHeaderWidth="120" AllowNext="{Binding RelativeSource={RelativeSource AncestorType={x:Type UserControl}}, Path=DataContext.CanPageNext}" >
                    <ui:LicenseKeyView  />
</telerik:WizardPage>

[Vladimir Stoyanov]

Hello,

Can you try setting you binding like this: 

<telerik:WizardPage Name="LicenseKeyPage" SideHeaderWidth="120" AllowNext="{Binding  DataContext.CanPageNext, Source={x:Reference LicenseKeyView}}" >
                    <ui:LicenseKeyView x:Name="LicenseKeyView" />
 </telerik:WizardPage>

Let me know if that solves the problem and if I can be of any further assistance.

Regards,
Vladimir Stoyanov
Progress Telerik

[admin]

Thanks this worked