How to toggle the visibility of two buttons using DataTrigger Behavior in XAML, WP 8.1?

Question

I have two buttons- Button A & Button B. Both are kept hidden initially. Data is fetched from an Observable Collection OCollection.

This is what I am trying to acheive:

1) Initially, both buttons are hidden. (Done)

2) On the first click (clicking any list view item), Button A should be made visible. (Done)

3) On rest of the clicks (clicking any other listview item, other than the one in which button A has been kept visible), Button B should be made visible. And visibility of button A shouldn't change back to Collapsed.

NB: Each Listview Item must contain only one Button (either Button A or Button B).

OCollection is set as the ItemSource of a ListView. Each ListView Item is a Grid containing a default image.

XAML:

     <ListView Name="lv" 
              ItemsSource="{Binding OCollection}" 
              Background="Linen"                  
              Grid.ColumnSpan="3">
        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid Background="LightGray" Name="buttonGrid" Tag="{Binding dumyString}">
                    <i:Interaction.Behaviors>
                        <ic:DataTriggerBehavior Binding="{Binding ElementName=lv, Path=SelectedValue.dumyString}" Value="{Binding dumyString}" ComparisonCondition="Equal">
                            <ic:ChangePropertyAction TargetObject="{Binding ElementName=ButtonA}" PropertyName="Visibility" Value="Visible" />
                        </ic:DataTriggerBehavior>
                        <ic:DataTriggerBehavior Binding="{Binding ElementName=lv, Path=SelectedValue.dumyString}" Value="{Binding dumyString}" ComparisonCondition="NotEqual">
                            <ic:ChangePropertyAction TargetObject="{Binding ElementName=ButtonA}" PropertyName="Visibility" Value="Collapsed" />
                        </ic:DataTriggerBehavior>
                        <ic:DataTriggerBehavior Binding="{Binding ElementName=lv, Path=buttonGrid.Tag}" Value="{Binding dumyString}" ComparisonCondition="Equal">
                            <ic:ChangePropertyAction TargetObject="{Binding ElementName=ButtonB}" PropertyName="Visibility" Value="Visible" />
                        </ic:DataTriggerBehavior>                            
                    </i:Interaction.Behaviors>

                    <Image Source="/Assets/Logo.png" />
                    <Button Name="ButtonA" Content="ButtonA" Background="Black" Visibility="Collapsed" />
                    <Button Name="ButtonB" Content="ButtonB" Background="Black" Visibility="Collapsed" />
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

To acheive 3, I am comparing the tag of the grid with the button content. It doesn't work because the logic is wrong. Well, how can this be acheived without using code behind. I am following MVVM pattern, so adios to Code behind.

A sample would be nice because I am just a beginner.

Class:

public class dumyClass
{
    public string dumyString { get; set; }
}

Answer 1

I think you can subscribe to CollectionChanged event in your viewmodel, then bind visibility of yours buttons to bool property and handle your event by changing value of your property. Dont forget about BooleanToVisibility converter. If it's needed i can give you some example of code.

Here it's:

public FooViewModel()
    {
        this.OCollection += this.OCollectionChanged;
    }

    private void OCollectionChanged(object sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e)
    {
        var collection = sender as System.Collections.Generic.List<Bar>;
        if (collection != null && collection.Count > 1)
        {
            this.IsButtonVisible = true;
            base.RaisePropertyChanged(() => this.IsButtonVisible);
        }
    }

If you are using MVVM, i hope you know what is means of RaisePropertyChanged and you know how to bind visibility of button to bool property. Let me know if something you cant understand.