在uwp listview不可用的项目上放置一个掩码

Question

我有一个UWP列表视图，我以正常方式与列表绑定。 （这里的意思不是发生）现在，当我有一个项目不可用时，我只是从列表中删除它。但我希望用户可以看到这些项目存在但现在不可用。为了解释我的问题，这里的列表https://i.stack.imgur.com/CIU1p.png这里是一个photoshop蒙太奇我想要的如果项目不可用https://i.stack.imgur.com/gCV2k.png我搜索但我找不到，如果它甚至可以用UWP listview做。谢谢

Answer 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");
        }
    }
}