Dynamic change of binded visibility of flipview's item template

Question

I am making UWP desktop app using c# and xaml.

I need to change visibility of two text blocks(let's say TextBlock1 and TextBlock2) which is a part of FlipView's item template, depending on user input (pressing button).

If button is pressed first time TextBlock1 is visible and TextBlock2 is hidden (or collapsed)

Now If button is pressed second time TextBlock1 would be collapsed and TextBlock2 would be visible.

Then "cycle" repeats and it is going from beginning (see code)

Item source is list of classes List<SourceClass> SourceClassList

Source class has two members which type is Visibility (one member is binded to TextBlock1 and second to TextBlock2)

In Page class it is working visibility of each member changes as I described

But the change is only visible if I navigate away from page and than came back but as I mentioned I want it to changes dynamically

I was trying OneWay and TwoWay of binding mode but none of them works

MainPage.xaml

                 <FlipView x:Name="Cards" ItemsSource="{x:Bind SourceClassList, Mode=TwoWay}">
                    <FlipView.ItemTemplate>
                        <DataTemplate x:DataType="data:SourceClass" >
                            <StackPanel>
                                <TextBlock x:Name="TextBlock1" Text="{x:Bind FrontSideOfCard }" Visibility="{x:Bind visibilityOfFrontSide }" />
                                <TextBlock x:Name="TextBlock2" Text="{x:Bind BackSideOfCard}" Visibility="{x:Bind visibilityOfBackSide}"/>
                            </StackPanel>
                        </DataTemplate>
                    </FlipView.ItemTemplate>
                    <StackPanel/>
                </FlipView>

MainPage.xaml.cs

    public List<SourceClass> SourceClassList;
    public MainPage()
    {
        IsTextBlock1Visible = false;
        SourceClassList = //here is import from previous class which is not important for the problem 
        this.InitializeComponent();
    }                                                                             
    private void Flip_Click(object sender, RoutedEventArgs e)
    {
        if (IsTextBlock1Visible == false)
        {
            SourceClassList[cards.SelectedItem].visibilityOfBackSide = Visibility.Visible;
           SourceClassList[cards.SelectedItem].visibilityOfFrontSide = Visibility.Collapsed;
            IsTextBlock1Visibl = true;
        }
        else
        {
            SourceClassList[cards.SelectedItem].visibilityOfBackSide = Visibility.Collapsed;
           SourceClassList[cards.SelectedItem].visibilityOfFrontSide = Visibility.Visible;
            IsTextBlock1Visibl = false;
        }
    }

SourceClass.cs

public string TextBlock1 { get; set; }
public string TextBlock2 { get; set; }

public Visibility visibilityOfFrontSide { get; set; }
public Visibility visibilityOfBackSide { get; set; }

public SourceClass(string txt1, string txt2)
{
    TextBlock1 = txt1;
    TextBlock2 = txt2;
    
    visibilityOfBackSide = Visibility.Collapsed;
    visibilityOfFrontSide = Visibility.Visible;
    
}

PS: binding in general works as expected

Thank you for your time :)

Answer 1

I was trying OneWay and TwoWay of binding mode but none of them works

The problem is that you have not implemented INotifyPropertyChanged interface for SourceClass visibilityOfFrontSide and visibilityOfBackSide property. it will cause property value update does not response UI. Please update SourceClass like the following. And set Visibility binding model as one way (default is onetime for x:bind)

SourceClass

public class SourceClass : INotifyPropertyChanged
{
    public string TextBlock1 { get; set; }
    public string TextBlock2 { get; set; }

    private Visibility _visibilityOfFrontSide;
    private Visibility _visibilityOfBackSide;
    public Visibility visibilityOfFrontSide
    {
        get
        {
            return _visibilityOfFrontSide;
        }
        set
        {
            _visibilityOfFrontSide = value;
            OnPropertyChanged();
        }
    }
    public Visibility visibilityOfBackSide
    {
        get { return _visibilityOfBackSide; }
        set
        {
            _visibilityOfBackSide = value;
           OnPropertyChanged();
        }
    }

    public SourceClass(string txt1, string txt2)
    {
        TextBlock1 = txt1;
        TextBlock2 = txt2;

        visibilityOfBackSide = Visibility.Collapsed;
        visibilityOfFrontSide = Visibility.Visible;

    }
    public void OnPropertyChanged([CallerMemberName] string name = "")
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
    }
    public event PropertyChangedEventHandler PropertyChanged;
}

Xaml

 <StackPanel>
     <TextBlock x:Name="TextBlock1" Text="{x:Bind TextBlock1 }" Visibility="{x:Bind visibilityOfFrontSide,Mode=OneWay}" />
     <TextBlock x:Name="TextBlock2" Text="{x:Bind TextBlock2}" Visibility="{x:Bind visibilityOfBackSide,Mode=OneWay}"/>
 </StackPanel>