This is a migrated thread and some comments may be shown as answers.

Data binding in multiple xaml/frame

3 Answers 52 Views
GridView
This is a migrated thread and some comments may be shown as answers.
Andrew Chan
Top achievements
Rank 1
Andrew Chan asked on 19 May 2010, 04:56 AM
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 { getset; }    
        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;    
        }    
    }    
}    




3 Answers, 1 is accepted

Sort by
0
Maya
Telerik team
answered on 19 May 2010, 04:49 PM
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.
0
Andrew Chan
Top achievements
Rank 1
answered on 19 May 2010, 06:34 PM
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
0
Accepted
Maya
Telerik team
answered on 20 May 2010, 03:53 PM
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.
Tags
GridView
Asked by
Andrew Chan
Top achievements
Rank 1
Answers by
Maya
Telerik team
Andrew Chan
Top achievements
Rank 1
Share this question
or