Flipview的项目模板绑定可见性的动态变化

Question

我正在使用 c# 和 xaml 制作 UWP 桌面应用程序。

我需要根据用户输入（按下按钮）更改作为 FlipView 项目模板一部分的两个文本块（比如说 TextBlock1 和 TextBlock2）的可见性.

如果第一次按下按钮 TextBlock1 是 可见 并且 TextBlock2 是 隐藏（或折叠）

现在如果第二次按下按钮，TextBlock1 将折叠，TextBlock2 将可见。 p>

然后“循环”重复，从头开始（见代码）

项目来源是类列表List<SourceClass> SourceClassList

源类有两个成员，类型是可见性（一个成员绑定到 TextBlock1，第二个绑定到 TextBlock2）

在 Page 类中，正如我所描述的，每个成员的工作可见性都会发生变化

但只有当我离开页面然后返回时才能看到更改，但正如我所提到的，我希望它动态更改

我尝试了 OneWay 和 TwoWay 的绑定模式，但它们都不起作用

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：绑定通常按预期工作

感谢您的宝贵时间:)

Answer 1

我尝试了 OneWay 和 TwoWay 的绑定模式，但它们都不起作用

问题是你没有为SourceClass visibilityOfFrontSide 和visibilityOfBackSide 属性实现INotifyPropertyChanged 接口。这将导致属性值更新不响应 UI。请按如下方式更新 SourceClass。并将Visibility绑定模型设置为一种方式（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>