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

Dynamic change of binded visibility of flipview's item template

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

我需要更改两个文本块的可见性(比如 TextBlock1TextBlock2),它们是 FlipView 项目模板的一部分,取决于用户输入(按下按钮)。

如果第一次按下按钮 TextBlock1visible 并且 TextBlock2隐藏(或折叠)

现在如果第二次按下按钮 TextBlock1collapsed 并且 TextBlock2 将是可见.

然后“循环”从头开始重复(见代码)

项目来源是 classes List<SourceClass> SourceClassList

的列表

Source class 有两个类型为 Visibility 的成员(一个成员绑定到 TextBlock1,第二个绑定到 TextBlock2)

在页面 class 中,每个成员的工作可见性都按照我的描述进行更改

但只有当我离开页面然后返回时,更改才可见,但正如我提到的,我希望它动态更改

我正在尝试 OneWay 和 TwoWay 绑定模式,但 none 它们都有效

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:绑定一般按预期工作

感谢您的宝贵时间:)

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

问题是您没有为 SourceClass visibilityOfFrontSidevisibilityOfBackSide 属性 实现 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>