Send a FlipViewItem as a RelayCommandParameter in a Windows Store App

Question

I am trying to send to a view model the current item of a FlipView control, using MVVM Light.

The XAML code representing the FlipView control is the following:

<FlipView x:Name="mainFlipView" Margin="0,10,0,10" ItemsSource="{Binding AlbumItems, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
    <FlipView.ItemTemplate>
        <DataTemplate>
            <Grid Margin="5">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                        <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>

                <TextBlock Text="{Binding Caption}"
                       FontSize="23"
                       HorizontalAlignment="Center"
                       TextAlignment="Center"
                       TextWrapping="Wrap"
                       Margin="10"/>

                <ScrollViewer Grid.Row="1" ZoomMode="Enabled">
                    <uc:ImageViewer FilePath="{Binding ImagePath}" />
                </ScrollViewer>

                <TextBlock Text="{Binding NrOfVotes}" FontSize="20"
                       Grid.Row="2" HorizontalAlignment="Center"                           
                       Margin="10" />
             </Grid>
         </DataTemplate>
    </FlipView.ItemTemplate>
</FlipView>
...

The XAML code of the item containing the relay command is:

<Page.BottomAppBar>
    <CommandBar>
        <AppBarButton x:Name="appBarButtonDelete" Label="Delete" Icon="Delete" 
                      Command="{Binding DeleteItemCommand}"
                      CommandParameter="{Binding ElementName=mainFlipView, Path=SelectedItem}"/>
    </CommandBar>
</Page.BottomAppBar>

In the ViewModel, the RelayCommand is declared and used as follows:

public class ResultsPageViewModel : ViewModelBase
{
    public RelayCommand<MyModel> DeleteItemCommand { get;  private set; }

    public ResultsPageViewModel()
    {
        this.DeleteItemCommand = new RelayCommand<MyModel>(post => DeleteItem(post));
    }

    public void DeleteItem(MyModel p)
    {
        //P is always null here...
    }
}

The problem is that in the DeleteItem function I always get the parameter as null. I have tried declaring the RelayCommand as RelayCommand<object> but the problem persists.

I also tried the "workaround" method of declaring a MyModel bindable property and binding it to the FlipView. It works, but I would like to know what am I doing wrong in this situation.

Thank you in advance!

It is an `ObservableCollection` – rhcpfan Oct 20 '14 at 10:15 — rhcpfan, Oct 20 '14 at 10:15

score 0 · Answer 1 · answered Feb 03 '15 at 11:40

Try a different strategy: take the parameter directly from ViewModel, after a proper binding.

XAML

<FlipView x:Name="mainFlipView" 
          Margin="0,10,0,10"
          ItemsSource="{Binding AlbumItems, Mode=TwoWay }"
          SelectedItem="{Binding AlbumSelectedItem, Mode=TwoWay}">

ViewModel

private MyModel albumSelectedItem;
public MyModel AlbumSelectedItem
{
    get
    {
        return albumSelectedItem;
    }

    set
    {
        if (value != null && albumSelectedItem != value)
        {
            albumSelectedItem = value;
            RaisePropertyChanged(() => AlbumSelectedItem);
        }
    }
}

public void DeleteItem(MyModel p)
{
    //P is always null here...
    var pp = AlbumSelectedItem;
}

Obviously, CommandParameter is useless. ;-)

Send a FlipViewItem as a RelayCommandParameter in a Windows Store App

1 Answers1