MVVM Different ViewModel for each WizardPage

4 posts, 1 answers
  1. admin
    admin avatar
    3 posts
    Member since:
    Sep 2017

    Posted 22 Sep Link to this post

    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>

     

     

  2. admin
    admin avatar
    3 posts
    Member since:
    Sep 2017

    Posted 26 Sep in reply to admin Link to this post

    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>

  3. Answer
    Vladimir Stoyanov
    Admin
    Vladimir Stoyanov avatar
    23 posts

    Posted 26 Sep Link to this post

    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
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
  4. admin
    admin avatar
    3 posts
    Member since:
    Sep 2017

    Posted 26 Sep in reply to Vladimir Stoyanov Link to this post

    Thanks this worked
Back to Top