Windows phone 8 app bar command parameter always null - Cimbalino

Question

Xaml Namespaces

xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
                        xmlns:interactivity="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
                        xmlns:appBar="clr-namespace:Cimbalino.Phone.Toolkit.Behaviors;assembly=Cimbalino.Phone.Toolkit"
                        xmlns:cmd="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.WP8"



<!--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 x:Name="TitlePanel"
                Grid.Row="0"
                Margin="12,17,0,28">

        <TextBlock Text="Beneficiary"
                   Margin="9,-7,0,0"
                   Style="{StaticResource PhoneTextTitle1Style}" />
    </StackPanel>

    <!--ContentPanel - place additional content here-->
    <Grid x:Name="ContentPanel"
          Grid.Row="1"
          Margin="12,0,12,0">

        <toolkit:LongListMultiSelector
                           x:Name="beneficoryList"
                            ItemsSource="{Binding BeneficoryCollection}"
                            EnforceIsSelectionEnabled="{Binding DataContext.IsSelectionEnabled, ElementName=LayoutRoot,Mode=TwoWay}">

            <!--Is Selection Enabled Changed Command-->
            <!--<interactivity:Interaction.Triggers>
                <interactivity:EventTrigger EventName="IsSelectionEnabledChanged">
                    <interactivity:InvokeCommandAction Command="{Binding DataContext.IsSelectionEnabledChangedOn,ElementName=LayoutRoot,Mode=OneTime}"/>
                </interactivity:EventTrigger>
            </interactivity:Interaction.Triggers>-->


            <toolkit:LongListMultiSelector.ItemTemplate>
                <DataTemplate>
                    <StackPanel>
                        <TextBlock Text="{Binding Name}" FontSize="{StaticResource PhoneFontSizeLarge}"/>
                        <TextBlock Text="{Binding Number}" FontSize="{StaticResource PhoneFontSizeMedium}"/>
                        <TextBlock Text="{Binding Operator}" FontSize="{StaticResource PhoneFontSizeSmall}"/>
                        <!-- Interaction region-->
                        <interactivity:Interaction.Triggers>
                            <interactivity:EventTrigger EventName="Tap">
                                <interactivity:InvokeCommandAction Command="{Binding TapCommand}" CommandParameter="{Binding }"/>
                            </interactivity:EventTrigger>
                        </interactivity:Interaction.Triggers>
                        <!-- Interaction region ends-->
                    </StackPanel>
                </DataTemplate>
            </toolkit:LongListMultiSelector.ItemTemplate>

        </toolkit:LongListMultiSelector>
    </Grid>
</Grid>  
    <interactivity:Interaction.Behaviors>
        <appBar:ApplicationBarBehavior x:Name="appBar" IsVisible="True"
                                       BackgroundColor="{StaticResource PhoneAccentColor}"
                                       ForegroundColor="{StaticResource PhoneBackgroundColor}" Mode="Default">



            <appBar:ApplicationBarIconButton Text="Add"
                                       IconUri="/Toolkit.Content/ApplicationBar.Add.png"
                                       IsVisible="{Binding IsAddCommandVisible,Mode=TwoWay}"  
                                       Command="{Binding AddCommand}"/>

            <appBar:ApplicationBarIconButton Text="Delete"
                                         IconUri="/Toolkit.Content/ApplicationBar.Delete.png"
                                         Command="{Binding DeleteCommand,Mode=OneTime}"
                                         CommandParameter="{Binding SelectedItems,ElementName=beneficoryList}"/>


            <!--Menu Items-->
            <appBar:ApplicationBarBehavior.MenuItems>
                <appBar:ApplicationBarMenuItem Text="HelpDesk" />
                <appBar:ApplicationBarMenuItem Text="Contact Us"/>
            </appBar:ApplicationBarBehavior.MenuItems>
            <!--Menu Items End-->

        </appBar:ApplicationBarBehavior>

    </interactivity:Interaction.Behaviors>

View Model

private RelayCommand<object> _ondeleteCommand;

    public RelayCommand<object> DeleteCommand
    {
        get { return _ondeleteCommand ?? (_ondeleteCommand = new RelayCommand<object>(OnDeleteCommand)); }
    }



    private void OnDeleteCommand(object tobeDeleted)
    {
        if (tobeDeleted != null)
        {
           // Delete
        }
    }

How do I pass selectedItems of LongListMultiSelector to a command .In the command argument I always getting null. there is no binding errors in the output window.

Cimbalino Guide

Answer 1

    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
                        xmlns:interactivity="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
                        xmlns:appBar="clr-namespace:Cimbalino.Phone.Toolkit.Behaviors;assembly=Cimbalino.Phone.Toolkit"
                        xmlns:cmd="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.WP8"


 <!--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>

    <!--App Bar Binding-->
    <interactivity:Interaction.Behaviors>
        <appBar:ApplicationBarBehavior x:Name="appBar" IsVisible="True"
                                       BackgroundColor="{StaticResource PhoneAccentColor}"
                                       ForegroundColor="{StaticResource PhoneBackgroundColor}" Mode="Default">



            <appBar:ApplicationBarIconButton Text="Add"
                                       IconUri="/Toolkit.Content/ApplicationBar.Add.png"
                                       IsVisible="{Binding IsAddCommandVisible,Mode=TwoWay}"  
                                       Command="{Binding AddCommand}"/>

            <appBar:ApplicationBarIconButton Text="Delete"
                                         IconUri="/Toolkit.Content/ApplicationBar.Delete.png"
                                         Command="{Binding DeleteCommand,Mode=OneTime}"
                                         CommandParameter="{Binding SelectedItems,ElementName=beneficoryList}"/>


            <!--Menu Items-->
            <appBar:ApplicationBarBehavior.MenuItems>
                <appBar:ApplicationBarMenuItem Text="HelpDesk" />
                <appBar:ApplicationBarMenuItem Text="Contact Us"/>
            </appBar:ApplicationBarBehavior.MenuItems>
            <!--Menu Items End-->

        </appBar:ApplicationBarBehavior>

    </interactivity:Interaction.Behaviors>


    <!--TitlePanel contains the name of the application and page title-->
    <StackPanel x:Name="TitlePanel"
                Grid.Row="0"
                Margin="12,17,0,28">

        <TextBlock Text="Beneficiary"
                   Margin="9,-7,0,0"
                   Style="{StaticResource PhoneTextTitle1Style}" />
    </StackPanel>

    <!--ContentPanel - place additional content here-->
    <Grid x:Name="ContentPanel"
          Grid.Row="1"
          Margin="12,0,12,0">

        <toolkit:LongListMultiSelector
                           x:Name="beneficoryList"
                            ItemsSource="{Binding BeneficoryCollection}"
                            EnforceIsSelectionEnabled="{Binding DataContext.IsSelectionEnabled, ElementName=LayoutRoot,Mode=TwoWay}">
            <toolkit:LongListMultiSelector.ItemTemplate>
                <DataTemplate>
                    <StackPanel>
                        <TextBlock Text="{Binding Name}" FontSize="{StaticResource PhoneFontSizeLarge}"/>
                        <TextBlock Text="{Binding Number}" FontSize="{StaticResource PhoneFontSizeMedium}"/>
                        <TextBlock Text="{Binding Operator}" FontSize="{StaticResource PhoneFontSizeSmall}"/>
                        <!-- Interaction region-->
                        <interactivity:Interaction.Triggers>
                            <interactivity:EventTrigger EventName="Tap">
                                <interactivity:InvokeCommandAction Command="{Binding TapCommand}" CommandParameter="{Binding }"/>
                            </interactivity:EventTrigger>
                        </interactivity:Interaction.Triggers>
                        <!-- Interaction region ends-->
                    </StackPanel>
                </DataTemplate>
            </toolkit:LongListMultiSelector.ItemTemplate>

        </toolkit:LongListMultiSelector>


    </Grid>


</Grid>

The element 'beneficoryList' is not finding in the visual tree, I was placed the app bar outside of the grid , Now I moved the App-bar inside the grid so 'beneficoryList' is now selectedItems is passed to VM . I think WP only allow traversing to just its immediate parent