WinRT Xaml Setting different styles to ListViewItems

Question

I have Outlook-liked application. There are 3 Sections. Middle Section contains ListView. Elements of Middle Section ListView have calculated styles

(Red Font = Outdated Jobs, Bolt Font = Unread Jobs, Strikeout text = Performed Jobs)

. Conditions may intersect in a different variations.

I have Xaml markup of Section2:

      <HubSection Name="Section2" Width="400" DataContext="{Binding Section2Items}" 
                    d:DataContext="{Binding Groups[0], Source={d:DesignData Source=../HopUp.Shared/DataModel/SampleData.json, Type=data:SampleDataSource}}"
                    x:Uid="Section2Header" Header="Section 2" Padding="5,25,0,10">

            <DataTemplate>

                <ListView
                    x:Name="lvSection2"
                    ItemsSource="{Binding Items}"
                    Margin="0,-0,0,0"
                    AutomationProperties.AutomationId="ItemGridView"
                    AutomationProperties.Name="Items In Group"
                    ItemTemplate="{StaticResource StandardTripleLineItemTemplate}"
                    SelectionMode="Single"
                    IsSwipeEnabled="false"
                    IsItemClickEnabled="True"
                    ItemClick="ItemView_ItemClickContent">
                    <ListView.ItemContainerStyle>

                        <Style TargetType="ListViewItem">
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="ListViewItem">
                                        <Grid>
                                            <VisualStateManager.VisualStateGroups>
                                                <VisualStateGroup x:Name="CommonStates">
                                                    <VisualState x:Name="Normal"/>
                                                </VisualStateGroup>
                                                <VisualStateGroup x:Name="SelectionStates">
                                                    <VisualState x:Name="Unselected">
                                                        <Storyboard>
                                                            <ColorAnimation Duration="0" Storyboard.TargetName="myback" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="Transparent"/>
                                                        </Storyboard>
                                                    </VisualState>
                                                    <VisualState x:Name="SelectedUnfocused">
                                                        <Storyboard>
                                                            <ColorAnimation Duration="0" Storyboard.TargetName="myback" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="Red"/>
                                                        </Storyboard>
                                                    </VisualState>
                                                </VisualStateGroup>


                                            </VisualStateManager.VisualStateGroups>
                                            <Border x:Name="myback" Background="Transparent">
                                                <ContentPresenter Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
                                            </Border>
                                        </Grid>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </ListView.ItemContainerStyle>
                </ListView>
            </DataTemplate>
        </HubSection>

And I need to set up different styles of ListViewItem by the different conditions.

There is code behind it:

     SampleDataGroup oContentFolder = await MainFunctionality.GetContent(pbActive, m_sUri, sFirstID, m_sSessionID);

                if (oContentFolder != null)
                {
                    Section2.Header = sFirstName;
                    this.DefaultViewModel["Section2Items"] = oContentFolder;

                    lv = Utilities.Utilities.FindVisualChildByName<ListView>(Section2, "lvSection2");
                    if (lv != null)

                        for (int j = 0; j < oContentFolder.Items.Count; j++)
                        {
                            if (oContentFolder.Items[j].ItemType == "ctJob")
                            {
                                if (oContentFolder.Items[j].ItemState == "InWork")
                                {

                             }

                            }
                        }

                        lv.SelectedIndex = 0;      

How can I set up ListViewItem style

Answer 1

I'm no WinRT expert but this may help :

//The class to style
public class SampleTaskItem
    {
        public SampleTaskItem()
        {
            TaskId = (new Random()).Next();
        }
        //Your properties    
        public int TaskId { get; private set; }

        //Calculate these with your object's data
        public bool Done { get; set; }
        public bool Late { get; set; }
        public bool IsNew { get; set; }
    }

    public class TaskItemStyleConverter : IValueConverter
    {

        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            if (value is SampleTaskItem)
            {
                var myTask = value as SampleTaskItem;
                var property = parameter.ToString().ToLower();

                if (property == "fontweight")
                {
                    return myTask.IsNew ? FontWeights.Bold : FontWeights.Normal;
                }
                if (property == "foreground")
                {
                    return myTask.Late ? Brushes.Red : Brushes.Black;
                }
                if (property == "strike")
                {
                    return myTask.Done ? TextDecorations.Strikethrough : null;
                }
                throw new NotImplementedException();
            }

            throw new NotImplementedException();
        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

Then, your ListView may be something like :

<ListView ItemsSource="{Binding RelativeSource={RelativeSource AncestorType={x:Type loc:StyledListview}}, Path=SampleTasks}">
            <ListView.Resources>
                <loc:TaskItemStyleConverter x:Key="STYLER"/>
            </ListView.Resources>
            <ListView.ItemTemplate>
                <DataTemplate DataType="{x:Type loc:SampleTaskItem}">
                    <TextBlock Foreground="{Binding Converter={StaticResource STYLER}, ConverterParameter=foreground}"
                               FontWeight="{Binding Converter={StaticResource STYLER}, ConverterParameter=fontweight}"
                               TextDecorations="{Binding Converter={StaticResource STYLER}, ConverterParameter=strike}"
                               Text="{Binding TaskId}"/>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

Any flag checked in the SampleTaskItem will trigger the desired style, they can combine from none to all.