How To Dim Read Items In A UWP App List

Question

I have a simple Master/Detail app called Daily Bible Reading .

One of my TODO items has been to keep track of what you have read by dimming any ListView items that have been.

<ListView Name="Chapters" ItemsSource="{x:Bind ChapterCollection}" IsItemClickEnabled="True" ItemClick="Chapter_ItemClick">
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="data:ChapterItem">
            <StackPanel>
                <TextBlock Text="{x:Bind date}" Foreground="White"/>
                <TextBlock Text="{x:Bind ChapterReference}" Foreground="White"/>
            </StackPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

My thinking is that, when each days content loads or you select one of the items, it sets a variable in the user's RoamingSettings . I'm doing a similar thing for setting FontSize .

public ApplicationDataContainer roamingsettings = ApplicationData.Current.RoamingSettings;

private void FontSize_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    var newfontsize = FontSizeComboBox.SelectedIndex + 10;

    // store the user preferences
    // get the device name
    var deviceinfo = new Windows.Security.ExchangeActiveSyncProvisioning.EasClientDeviceInformation();
    var devicename = deviceinfo.FriendlyName;
    // set the preference
    roamingsettings.Values[devicename + "_FontSize"] = newfontsize.ToString();
}

If the user did set it, then respect that preference.

// set TextBlock FontSize and then change if the user has preferences
private void SetFontSize(object sender, RoutedEventArgs e)
{
    var textblock = (TextBlock)sender;
    // set a default
    textblock.FontSize = 20;

    // load user preferences
    // get the device name
    var deviceinfo = new Windows.Security.ExchangeActiveSyncProvisioning.EasClientDeviceInformation();
    var devicename = deviceinfo.FriendlyName;
    // check to see if the preference is there
    if (roamingsettings.Values.ContainsKey(devicename + "_FontSize"))
    {
        var fontsize = Convert.ToInt32(roamingsettings.Values[devicename + "_FontSize"]);
        textblock.FontSize = fontsize;
    }
}

I figure that I can do a similar thing for Foreground of the item (just change the Foreground=White to Foreground=Grey , or something). The issue is that I don't know how to make a change on a per-item basis. The font change is global, when the app loads. My items are being loaded from an ObservableCollection .

public sealed partial class MainPage : Page
{
    public ObservableCollection<ChapterItem> ChapterCollection { get; set; }

    public MainPage()
    {
        this.InitializeComponent();

        ChapterCollection = new ObservableCollection<ChapterItem>();
    }

    // what to do when the page is navigated to
    protected override async void OnNavigatedTo(NavigationEventArgs e)
    {
        await MainPageViewModel.PopulateCollections(ChapterCollection);
    }
}

I assume that the answer lies somewhere in the dark realm of converters. I say it that way as I haven't been able to wrap my head around them.

I will, happily, post View and/or ViewModel code, if you want. I'm not sure if it would be of any benefit to the question.

As a secondary point, I may be thinking about all of this the wrong way. I know enough about programming to, kind of, make things work. I don't know enough to know if something is a best practice. I will say that the app's code is much better than it was a couple years ago. I welcome any general guidance, aside from the specific question.

Answer 1

You will have to use a converter and you need an extra property in Model to Bind that with the background/opacity of the StackPanel. You need to add this converter resource at page level or at app level

Let's say you have (bool) "HasBeenRead" then:

<ListView Name="Chapters" ItemsSource="{x:Bind ChapterCollection}" IsItemClickEnabled="True" ItemClick="Chapter_ItemClick">
<ListView.ItemTemplate>
    <DataTemplate x:DataType="data:ChapterItem">
        <StackPanel Background="{x:Bind HasBeenRead, Converter={StaticResource CustomColorConverter}, Mode=TwoWay}">
            <TextBlock Text="{x:Bind date}" Foreground="White"/>
            <TextBlock Text="{x:Bind ChapterReference}" Foreground="White"/>
        </StackPanel>
    </DataTemplate>
</ListView.ItemTemplate>

public sealed class CustomColorConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        if (value != null && (bool)value)
        {
            return new SolidColorBrush(Colors.Red);
        }
        else
        {
            return new SolidColorBrush(Colors.Yellow);
        }
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        throw new NotImplementedException();
    }
}