Data binding in multiple xaml/frame

[Andrew Chan]

Hi there,

I have a master page (home1.xaml) with 2 frames. The left frame (Search.xaml) is having a certain combo boxes and a search button to refresh a gridview in the right frame (Grid.xaml). However, the button does not work properly to load the data into the gridview. If I place the button in the same xaml of the gridview, it works with no problem.

Am I missing anything to let two xaml files talk to each other? I am following the MVVM pattern. I have attached the source below for your reference. Very much appreciate for your help.

Regards,
Andrew

home1.xaml

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
    xmlns:viewmodel="clr-namespace:MVVM_MerchmanX_Frame.ViewModel"
    xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" xmlns:telerikGridView="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.GridView" x:Class="MVVM_MerchmanX_Frame.Views.Home1"
    Width="800" Height="480">
    <UserControl.Resources>
        <viewmodel:ProductViewModel x:Key="viewmodel" />
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot" Width="800">
        <navigation:Frame Width="173" Margin="8,0,0,84" Source="/Views/Search.xaml" Foreground="Black" Background="#00ADD4EA" HorizontalAlignment="Left"/>
        <navigation:Frame Margin="177,0,0,0" Style="{StaticResource ContentFrameStyle}" Content="Frame" Source="/Views/Grid.xaml" HorizontalAlignment="Left" Width="600"/>
    </Grid>
</UserControl>

search.xaml

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:dataInput="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.Input" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:telerikInput="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Input" xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"
    xmlns:viewmodel="clr-namespace:MVVM_MerchmanX_Frame.ViewModel"
    mc:Ignorable="d" xmlns:telerikGridView="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.GridView" x:Class="MVVM_MerchmanX_Frame.Views.Search"
    >
    <UserControl.Resources>
        <viewmodel:ProductViewModel x:Key="viewmodel" />
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot" Background="#FFADD4EA" Width="220">
        <dataInput:Label HorizontalAlignment="Left" Margin="29,20,0,0" VerticalAlignment="Top" Content="Season"/>
        <dataInput:Label HorizontalAlignment="Left" Margin="29,75,0,0" VerticalAlignment="Top" Content="Gender"/>
        <dataInput:Label HorizontalAlignment="Left" Margin="29,129,0,0" Content="Age" VerticalAlignment="Top"/>
        <dataInput:Label Margin="29,184,0,0" Content="Silhouette" VerticalAlignment="Top" HorizontalAlignment="Left"/>
        <telerikInput:RadComboBox Height="7" HorizontalAlignment="Left" Margin="29,40,0,0" VerticalAlignment="Top" Width="84">
            <telerikInput:RadComboBoxItem Content="Item 1"/>
            <telerikInput:RadComboBoxItem Content="Item 2"/>
            <telerikInput:RadComboBoxItem Content="Item 3"/>
        </telerikInput:RadComboBox>
        <telerikInput:RadComboBox HorizontalAlignment="Left" Margin="29,149,0,129" Width="84" Height="7" VerticalAlignment="Top">
            <telerikInput:RadComboBoxItem Content="Item 1"/>
            <telerikInput:RadComboBoxItem Content="Item 2"/>
            <telerikInput:RadComboBoxItem Content="Item 3"/>
        </telerikInput:RadComboBox>
        <telerikInput:RadComboBox HorizontalAlignment="Left" Margin="29,95,0,0" VerticalAlignment="Top" Width="84" Height="7">
            <telerikInput:RadComboBoxItem Content="Item 1"/>
            <telerikInput:RadComboBoxItem Content="Item 2"/>
            <telerikInput:RadComboBoxItem Content="Item 3"/>
        </telerikInput:RadComboBox>
        <telerikInput:RadComboBox HorizontalAlignment="Left" Margin="29,204,0,0" Width="84" Height="7" VerticalAlignment="Top">
            <telerikInput:RadComboBoxItem Content="Item 1"/>
            <telerikInput:RadComboBoxItem Content="Item 2"/>
            <telerikInput:RadComboBoxItem Content="Item 3"/>
        </telerikInput:RadComboBox>
        <telerik:RadButton x:Name="btnSearch" Margin="29,250,0,0" VerticalAlignment="Top" Content="Search" HorizontalAlignment="Left" Width="68" RenderTransformOrigin="0.515,1" Command="{Binding LoadProductsCommand, Source={StaticResource viewmodel}}" />
    </Grid>
</UserControl>

grid.xaml

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:viewmodel="clr-namespace:MVVM_MerchmanX_Frame.ViewModel"
    xmlns:dataInput="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.Input" xmlns:telerikGridView="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.GridView" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls" Height="300" VerticalAlignment="Top"
    x:Class="MVVM_MerchmanX_Frame.Views.Grid">
    <UserControl.Resources>
        <viewmodel:ProductViewModel x:Key="viewmodel" />
    </UserControl.Resources>
    <UserControl.DataContext>
        <Binding Source="{StaticResource viewmodel}" Path="ProductCollection"></Binding>
    </UserControl.DataContext>
    <Grid x:Name="LayoutRoot" Background="White" Width="640" HorizontalAlignment="Left">
        <telerikGridView:RadGridView Name="gridProduct" Margin="8,8,0,33" ScrollViewer.HorizontalScrollBarVisibility="Visible" ItemsSource="{Binding ProductCollection, Source={StaticResource viewmodel}}" Width="432" HorizontalAlignment="Left"/>
        <telerik:RadButton HorizontalAlignment="Left" Margin="8,0,0,7" VerticalAlignment="Bottom" Content="Search" Command="{Binding LoadProductsCommand, Source={StaticResource viewmodel}}"/>
    </Grid>
</UserControl>

ProductViewModel.cs

using System;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using MVVM_MerchmanX_Frame.CommandBase;
using MVVM_MerchmanX_Frame.Model;
using MVVM_MerchmanX_Frame.Provider;

namespace MVVM_MerchmanX_Frame.ViewModel
{
    public class ProductViewModel : ViewModelBase
    {
        public ICommand LoadProductsCommand { get; set; }
        private ObservableCollection<Product> m_productCollection;

        public ObservableCollection<Product> ProductCollection
        {
            get { return m_productCollection; }
            set
            {
                if (m_productCollection != value)
                {
                    m_productCollection = value;
                    OnPropertyChanged("ProductCollection");
                }
            }
        }

        private void LoadProducts(object parameter)
        {
            ProductCollection = ProductProvider.LoadProducts();
        }

        private bool CanLoadProducts(object parameter)
        {
            return true;
        }

        public ProductViewModel()
        {
            LoadProductsCommand = new DelegateCommand(LoadProducts, CanLoadProducts);
        }
    }
}

ProductProvider.cs

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using MVVM_MerchmanX_Frame.Model;
using System.Runtime.Serialization.Json;
using System.IO;
using System.Text;

namespace MVVM_MerchmanX_Frame.Provider
{
    public class ProductProvider
    {
        public static ObservableCollection<Product> LoadProducts()
        {


            var productCollection = new ObservableCollection<Product>();
            productCollection.Add(new Product()
            {
                Age = "ADULT",
                Description1 = "Desc1",
                Description2 = "Desc2",
                Description3 = "Desc3",
                Description4 = "Desc4",
                Gender = "WOMEN",
                ModelId = "104",
                ModelName = "XXX1",
                Silhouette = "SHORT",
                SilhouetteType = "BOTTOM"
            });
            productCollection.Add(new Product()
            {
                Age = "ADULT",
                Description1 = "Desc1",
                Description2 = "Desc2",
                Description3 = "Desc3",
                Description4 = "Desc4",
                Gender = "WOMEN",
                ModelId = "102",
                ModelName = "XXX2",
                Silhouette = "SHORT",
                SilhouetteType = "BOTTOM"
            });
            productCollection.Add(new Product()
            {
                Age = "ADULT",
                Description1 = "Desc11",
                Description2 = "Desc22",
                Description3 = "Desc33",
                Description4 = "Desc44",
                Gender = "MEN",
                ModelId = "101",
                ModelName = "XXX3",
                Silhouette = "CAP/HAT/VISOR",
                SilhouetteType = "TOP"
            });
            productCollection.Add(new Product()
            {
                Age = "ADULT",
                Description1 = "Desc1",
                Description2 = "Desc2",
                Description3 = "Desc3",
                Description4 = "Desc4",
                Gender = "MEN",
                ModelId = "103",
                ModelName = "XXX4",
                Silhouette = "SHORT SLEEVE T-SHIRT",
                SilhouetteType = "TOP"
            });
            return productCollection;
        }
    }
}

[Maya]

Hello Andrew Chan,

When you define your ViewModel in search.xaml, the button in the same file is working with this instance of the ViewModel. However, as you instantiate it again in grid.xaml, the button here is working with a new collection of products. So, what you need to do is to use only one instance of the ViewModel. A possible solution is to define the button "search" inside the main page and only here to use the view model as a resource for the Collection of products.
Furthermore, you may use RadTabControl and define each part - search and grid - in different RadTabItems and again define the button in the main page.



Regards,
Maya
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Andrew Chan]

Hi Maya,

Thanks a lot. The gridview can be refreshed successfully now after moving the button out to the main page.

So in this case, how can i grab the combo box values in search.xaml and fit those values to CommandParameter attribute of the button in the main page now? Or any other suggestion?

Regards,
Andrew

[Maya]

Hi Andrew Chan,

The Navigation Framework supports a lot of functionalities. You may use the UriMapper in order to create the link between the pages. Furthermore, you may try the NavigationService.Navigate() that accepts object as a parameter and to pass the selectedProduct, depending on the data in the combo box.

Greetings,
Maya
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.