Flipview的專案模板系結可見性的動態變化

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

我需要根據用戶輸入（按下按鈕）更改作為 FlipView 專案模板一部分的兩個文本塊（比如說TextBlock1和TextBlock2）的可見性。

如果按下按鈕第一次TextBlock1是可見和TextBlock2被隱藏（或折疊）

現在，如果第二次按下按鈕，TextBlock1將被折疊并且TextBlock2將可見。

然后“回圈”重復，它從頭開始（見代碼）

專案來源是類串列 List<SourceClass> SourceClassList

源類有兩個成員，型別為 Visibility（一個成員系結到 TextBlock1，第二個系結到 TextBlock2）

在 Page 類中，正如我所描述的，每個成員更改的作業可見性

但是只有當我離開頁面然后回傳時才能看到更改，但正如我提到的，我希望它動態更改

我正在嘗試系結模式的 OneWay 和 TwoWay，但它們都不起作用

主頁.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>

主頁.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;
        }
    }

源類.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：一般的系結按預期作業

感謝您的時間 ：）

uj5u.com熱心網友回復：

我正在嘗試系結模式的 OneWay 和 TwoWay，但它們都不起作用

問題是您還沒有實作INotifyPropertyChangedSourceClassvisibilityOfFrontSide和visibilityOfBackSide屬性的介面。這將導致屬性值更新不回應 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>

標籤：

上一篇：如何清除串列框中復選框的邊距

下一篇：Xamarin-系結自定義視圖內容