Search code examples
windows-phonewinrt-xamlmvvm-lightwindows-phone-toolkitcimbalino

Windows phone 8 app bar command parameter always null - Cimbalino


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


Solution

  •     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