I can't seem to execute command binding around RadDataBoundListBox having HubTiles

[Shah Z]

Hi,

First of all I'm pretty new to xaml and wp8 app development.

How can I use HubTile's command binding feature in RadDataBoundListBox?
I know there's something to do with DataTemplate is not part of VisualTree so the command is not invoked, I have tried several ways but no luck.. hope you can help. 

I can see the code will call the command if the HubTile if it is not part of the DataBoundListBox

What am i missing? 

Code snippet is provided below..

<phone:PhoneApplicationPage
    x:Class="MyFinanceWinPhone.LightToolkit.Client.Views.a"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:telerikPrimitives="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Primitives"
    xmlns:MyCommand="clr-namespace:MyFinanceWinPhone.LightToolkit.Client.Views"
    xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
    xmlns:cmd="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Extras.WP8"
    xmlns:System="clr-namespace:System;assembly=mscorlib" FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d"
    shell:SystemTray.IsVisible="True"
    x:Name="myPage">

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel Grid.Row="0" Margin="12,17,0,28">
            <TextBlock Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <StackPanel x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <!--<telerikPrimitives:RadHubTile CommandParameter="The Parameter">
                <telerikPrimitives:RadHubTile.Command>
                    <MyCommand:ACommand />
                </telerikPrimitives:RadHubTile.Command>
            </telerikPrimitives:RadHubTile>

            <telerikPrimitives:RadHubTile CommandParameter="The Parameter2">
                <telerikPrimitives:RadHubTile.Command>d
                    <MyCommand:ACommand />
                </telerikPrimitives:RadHubTile.Command>
            </telerikPrimitives:RadHubTile>-->

            <telerikPrimitives:RadHubTile Command="{Binding HelloCommand}" CommandParameter="The Parameter3" />

            <telerikPrimitives:RadDataBoundListBox x:Name="radListBox" ItemsSource="{Binding Items}" Margin="6,0,6,0" Grid.Row="3">
                <telerikPrimitives:RadDataBoundListBox.ItemTemplate>
                    <DataTemplate>
                        <telerikPrimitives:RadHubTile DataContext="{Binding DataContext,ElementName=LayoutRoot}" Height="100" Width="150" FontSize="20"  Title="{Binding Title}"  Command="{Binding HelloCommand}" CommandParameter="Inside datatemplate"/>
                    </DataTemplate>
                </telerikPrimitives:RadDataBoundListBox.ItemTemplate>

                <telerikPrimitives:RadDataBoundListBox.VirtualizationStrategyDefinition>
                    <telerikPrimitives:WrapVirtualizationStrategyDefinition Orientation="Horizontal" WrapLineAlignment="Center"/>
                </telerikPrimitives:RadDataBoundListBox.VirtualizationStrategyDefinition>
            </telerikPrimitives:RadDataBoundListBox>

        </StackPanel>


    </Grid>

</phone:PhoneApplicationPage>

a.xaml.cs code...

using System.Collections.ObjectModel;
using System.Windows;
using System.Windows.Input;
using Microsoft.Phone.Controls;
using MyFinance.WindowsPhone.Core.UI;
using MyFinance.WindowsPhone.Core.UI.Commands;

namespace MyFinanceWinPhone.LightToolkit.Client.Views
{
    public partial class a : PhoneApplicationPage
    {
        public a()
        {
            InitializeComponent();

            LayoutRoot.DataContext = new aViewModel();
        }
    }

    public class aViewModel : GalaSoftViewModel
    {
        public aViewModel()
        {
            HelloCommand = new DelegateCommand(AAA, o => true);

            Items = new ObservableCollection<AnItem>
                        {
                            new AnItem
                                {
                                    Title = "Hello World"
                                },
                            new AnItem
                                {
                                    Title = "Hello World 2"
                                },
                                   new AnItem
                                {
                                    Title = "goheadgostan"
                                }
                        };
        }

        private void AAA(object parameter)
        {
            MessageBox.Show("Hello Command via aViewModel");
        }

        private ObservableCollection<AnItem> _items;
        public ObservableCollection<AnItem> Items
        {
            get { return _items; }
            set { Set("Items", ref _items, value); }
        }

        public ICommand HelloCommand { get; set; }

    }

    public class AnItem : GalaSoftViewModel
    {
        private string _title;
        public string Title
        {
            get { return _title; }
            set { Set("Title", ref _title, value); }
        }
    }
}

The base ViewModel

using GalaSoft.MvvmLight;

namespace MyFinance.WindowsPhone.Core.UI
{
    public class GalaSoftViewModel : ViewModelBase
    {
        public GalaSoftViewModel()
        {
            BroadCast = false;
        }

        private string _applicationTitle = "No Application Title";
        public virtual string ApplicationTitle
        {
            get { return _applicationTitle; }
            set
            {
                _applicationTitle = value;
                RaisePropertyChanged("ApplicationTitle");
            }
        }

        private string _pageTitle = "No page title";
        public virtual string PageTitle
        {
            get { return _pageTitle; }
            set
            {
                _pageTitle = value;
                RaisePropertyChanged("PageTitle");
            }
        }

        public bool BroadCast { get; set; }
    }
}

Please help...

Shah

[Victor]

Hi Shah,

The data context of your hub tile inside the ItemTemplate will be a AnItem object. You will only be able to bind to its poperties. If you want to have access to a global command, every AnItem object should expose a property that points to this command (that's the purpose of a view model anyway, to glue together your models and the view). In this case you will have access only to the Title property.

Also, you should not set the DataContext of your hub tiles explicitly.

I hope this helps.

Greetings,
Victor
the Telerik team