How to change Flipviewitem from Flipview dynamically using c#

Question

I am working on Windows phone 8.1 winRT App and try to load FilpviewItem from code behind using the index property but its not working for me how we slide flipviewitem from c#

Following is my code which is not working

 <FlipView x:Name="flip" Grid.Row="1" Grid.ColumnSpan="4" Grid.Column="0" Margin="0,0,0,0.333" Grid.RowSpan="2">
        <FlipViewItem>
                <Button Foreground="White" Background="Black" x:Name="btnAdd" Content="Add" Grid.Row="1" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center" Tapped="btnAdd_Tapped" ></Button>
        </FlipViewItem>
        <FlipViewItem>
            <Button x:Name="btny2" Content="mov" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Center" Tapped="btny2_Tapped" ></Button>
        </FlipViewItem>
        <FlipViewItem>
            <Button x:Name="btnUpdate" Content="Upd" Grid.Row="1" Grid.Column="2" HorizontalAlignment="Right" Tapped="btnupdate_Tapped" ></Button>
        </FlipViewItem>
        <FlipViewItem>
            <Button x:Name="btnRemove" Content="Rem" Grid.Row="1" Grid.Column="3" HorizontalAlignment="Center" Tapped="btnRemove_Tapped" ></Button>
        </FlipViewItem>
    </FlipView>


private void btnAdd_Tapped(object sender, TappedRoutedEventArgs e)
    {
        flip.SelectedIndex++;

    }

    private void btnupdate_Tapped(object sender, TappedRoutedEventArgs e)
    {
        flip.SelectedIndex++;
    }

    private void btny2_Tapped(object sender, TappedRoutedEventArgs e)
    {
        flip.SelectedIndex++;
    }

    private void btnRemove_Tapped(object sender, TappedRoutedEventArgs e)
    {
        flip.SelectedIndex++;
    }

I found something interestning here When I increase the selected index and debug on to the SlideHub_SelectionChanged event this event gets executed 3 time with following response its automatically going to select index 0 '? SlideHub.SelectedIndex 1 ? SlideHub.SelectedIndex 2 ? SlideHub.SelectedIndex 0' — Arjun Balip, Nov 04 '16 at 06:52
@martijn I found multiple user face same issue but unable to found an proper solution. I ma open new question as previous questions are not properly answered and after found an workaround I reply there questions and answer the my question — Arjun Balip, Nov 07 '16 at 05:30
I'll re-open this one then, so you can edit this post. Please don't re-post answers to multiple questions again however. — Martijn Pieters, Nov 07 '16 at 07:19
Its ok no issue, I am new in stackoverflow thats why i don't have an idea about the same — Arjun Balip, Nov 07 '16 at 09:33

score 0 · Answer 1 · edited May 23 '17 at 11:59

The amusing thing here is that your code works perfectly well when I copy paste it on my system. However, you could use data binding to achieve this in a cleaner manner.

How To do it with data binding:

create a property named FlipSelectedIndex for example.

private int flipSelectedIndex = 0;

public int FlipSelectedIndex
{
    get { return flipSelectedIndex; }
    set
    {
        if (value <= flip.Items.Count - 1)
        {
            flipSelectedIndex = value;
            RaisePropertyChanged("FlipSelectedIndex");
        }
    }
}

Add an INotifyPropertyChangedinterface and implement it implicitly and then add an event to it called RaisePropertyChanged do this by adding a ,INotifyPropertyChangedinterface to ClassName : Page declaration and add the following method:
```
public event PropertyChangedEventHandler PropertyChanged;
public void RaisePropertyChanged(string property)
{
    PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(property));
}
```
Please Note: The PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName)); Only works with C# 6.0 which is available in Visual Studio 2015. For any editions you will have to use

if (PropertyChanged != null) { PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); }
Once done now it's simple: at a button tap simply use FlipSelectedIndex++; or FlipSelectedIndex--; as required.
Update the XAML with adding the SelectedIndex property of the Flipview to data binding like this: SelectedIndex="{Binding FlipSelectedIndex,Mode=TwoWay}" Use two way binding to ensure your FlipSelectedIndex also updates if you change the selected view on the Flipview from the swipe action instead of the button.

Please do remember to add that data context of the page to the code behind using DataContext="{Binding RelativeSource={RelativeSource Self}}" Else the binding won't work. For more information you could refer to my answer on the FlipView here

How to change Flipviewitem from Flipview dynamically using c#

1 Answers1

How To do it with data binding: