在uwp listview上放置一个面具

时间:2018-10-07 12:35:27

标签: listview uwp

我有一个UWP列表视图,该列表视图以常规方式与列表绑定。 (这里没有发生) 现在,当我有一个项目不可用时,我只是将其从列表中删除。但是我希望用户可以看到该项目存在但现在不可用。 为了解释我的问题,请在此列表中 https://i.stack.imgur.com/CIU1p.png 这是我想要的Photoshop蒙太奇,如果该物品不可用 https://i.stack.imgur.com/gCV2k.png 我进行搜索,但是我找不到使用UWP listview进行搜索的可能性。 谢谢

1 个答案:

答案 0 :(得分:1)

这是一个常见的XAML布局和绑定问题。为了满足您的要求,您需要在DataTemplate中放置一个图层,然后可以根据其可用/不可用对其进行隐藏/显示。

我制作了一个简单的代码示例供您参考:

<ListView ItemsSource="{x:Bind tests}">
        <ListView.ItemTemplate>
            <DataTemplate x:DataType="local:Test">
                <Grid>
                    <Border Background="Gray" Visibility="{x:Bind IsAvailable}"  Opacity="0.8">
                        <TextBlock Text="NOT AVAILABLE" Foreground="White" FontWeight="Bold" FontSize="50"></TextBlock>
                    </Border>
                    <StackPanel Orientation="Horizontal" >
                        <TextBlock Text="{x:Bind Name}"></TextBlock>
                        <TextBlock Text="{x:Bind Score}" Margin="20 0 0 0"></TextBlock>
                        <TextBlock Text="{x:Bind Cote}" Margin="20 0 0 0"></TextBlock>
                    </StackPanel>
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
</ListView>
public sealed partial class MainPage : Page
{
    public ObservableCollection<Test> tests;
    public MainPage()
    {
        this.InitializeComponent();
        tests = new ObservableCollection<Test>();
        tests.Add(new Test() {Name="Star",Score=10,Cote=2.8,IsAvailable=Visibility.Collapsed });
        tests.Add(new Test() { Name = "Cera", Score = 0, Cote = 6.6, IsAvailable = Visibility.Visible });
    }
}

public class Test:INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    private void RaisePropertyChanged(string PropertyName)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this,new PropertyChangedEventArgs(PropertyName));
        }
    }

    private string name;
    public string Name
    {
        get { return name; }
        set
        {
            name = value;
            RaisePropertyChanged("Name");
        }
    }

    private int score;
    public int Score
    {
        get { return score; }
        set
        {
            score = value;
            RaisePropertyChanged("Score");
        }
    }

    private double cote;
    public double Cote
    {
        get { return cote; }
        set
        {
            cote = value;
            RaisePropertyChanged("Cote");
        }
    }

    private Visibility isAvailable;
    public Visibility IsAvailable
    {
        get { return isAvailable; }
        set
        {
            isAvailable = value;
            RaisePropertyChanged("IsAvailable");
        }
    }
}

enter image description here