put a mask on uwp listview unavailable item

Question

I had an UWP listview that i bind with a list in a normal way. (Means not incidence here) For now, when i had an item unavailable, i just remove it from the list. But i want that the user can see that this items exist but is not available right now. To explain my problem, here the list https://i.sstatic.net/CIU1p.png And here a photoshop montage of what i want if the item is unavailable https://i.sstatic.net/gCV2k.png I search but i can't find if it's even possible to do it with UWP listview. Thanks

Answer 1

It's a common XAML layout and Binding question. To achieve your requirement, you need to put a layer in your DataTemplate, then, you could hide/show it according to its available/unavailable.

I made a simple code sample for your reference:

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