Use different template for last item in a WPF itemscontrol

Question

I'm using a custom template in my itemscontrol to display the following result:

item 1, item 2, item3,

I want to change the template of the last item so the result becomes:

item 1, item2, item3

The ItemsControl:

<ItemsControl ItemsSource="{Binding Path=MyCollection}">

    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal" IsItemsHost="True"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>

    <ItemsControl.ItemTemplate>
        <DataTemplate>

            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding Path=Name}"/>
                <TextBlock Text=", "/>
            </StackPanel>

        </DataTemplate>
    </ItemsControl.ItemTemplate>

</ItemsControl>

Is there anyone who can give a solution for my problem? Thank you!

Cindicindie

Answer 1

I've found the solution for my problem using only XAML. If there is anybody who needs to do the same, use this:

<ItemsControl ItemsSource="{Binding Path=MyCollection}">

    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal" IsItemsHost="True"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>

    <ItemsControl.ItemTemplate>
        <DataTemplate>

            <StackPanel Orientation="Horizontal">
                <TextBlock x:Name="comma" Text=", "/>
                <TextBlock Text="{Binding}"/>
            </StackPanel>

            <DataTemplate.Triggers>
                <DataTrigger Binding="{Binding RelativeSource={RelativeSource PreviousData}}" Value="{x:Null}">
                    <Setter TargetName="comma" Property="Visibility" Value="Collapsed"/>
                </DataTrigger>
            </DataTemplate.Triggers>

        </DataTemplate>
    </ItemsControl.ItemTemplate>

</ItemsControl>

Cindicindie

+1 Nice simple solution. However it should be noted that if any changes are made to the data bound collection (ordering, filtering, adding, or removing), the 'DataTrigger` will not be triggered again and the DataTemplate will not be updated accordingly. – Greatgranduncle

As a note to those coming here looking for an answer based on the initial question (and other similar questions that erroneously link here), this is not what you are looking for. This solution changes the FIRST item's template, not the LAST item template. – Vitality

jpwkeeper is quite right but that's a damn sexy solution for my problem! – Antilogarithm

Note though, that PreviousData turned out to be very slow for controls with lots of items, having it on 1000 items is unusable. – How

An alternative for using PreviousData is shown here: https://mcmap.net/q/298615/-how-can-a-separator-be-added-between-items-in-an-itemscontrol - This answer uses AlternationIndex – Scorecard

This solution only changes the first item's template and also its less performant when there are more items. This solution thought work good for me and works both for first and last item. https://mcmap.net/q/303684/-use-different-template-for-last-item-in-a-wpf-itemscontrol – Marlonmarlow

Answer 2

You can use DataTemplateSelector, in SelectTemplate() method you can check whether item is the last and then return an other template.

In XAML:

<ItemsControl.ItemTemplate>     
  <DataTemplate>
      <ContentPresenter 
             ContentTemplateSelector = "{StaticResource MyTemplateSelector}">

In Code behind:

 private sealed class MyTemplateSelector: DataTemplateSelector
 { 

    public override DataTemplate SelectTemplate(
                                      object item, 
                                      DependencyObject container)
    {
        // ...
    }
  }

Appendicle

With the supplied parameters (item and container), there is no way that I can determine whether the item is the last one in the collection. – Cindicindie

You can find parent ItemsControl container usign FindParentOfType<TParent> method (google intrawebs) and then use AlternationIndex, see StackOverflow fo the examples – Appendicle

Answer 3

This solution affects the last row and updates with changes to the underlying collection:

---

CodeBehind

The converter requires 3 parameters to function properly - the current item, the itemscontrol, the itemscount, and returns true if current item is also last item:

  class LastItemConverter : IMultiValueConverter
    {

        public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
        {
            int count = (int)values[2];

            if (values != null && values.Length == 3 && count>0)
            {
                System.Windows.Controls.ItemsControl itemsControl = values[0] as System.Windows.Controls.ItemsControl;
                var itemContext = (values[1] as System.Windows.Controls.ContentPresenter).DataContext;
            
                var lastItem = itemsControl.Items[count-1];

                return Equals(lastItem, itemContext);
            }

            return DependencyProperty.UnsetValue;
        }

        public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

---

XAML

The Data-Trigger for a DataTemplate, that includes a textbox named 'PART_TextBox':

  <DataTemplate.Triggers>
            <DataTrigger Value="True" >
                <DataTrigger.Binding>
                    <MultiBinding Converter="{StaticResource LastItemConverter}">
                        <Binding RelativeSource="{RelativeSource FindAncestor, AncestorType={x:Type ItemsControl}}" />
                        <Binding RelativeSource="{RelativeSource Self}"/>
                        <Binding RelativeSource="{RelativeSource FindAncestor, AncestorType={x:Type ItemsControl}}" Path="Items.Count"/>
                    </MultiBinding>
                </DataTrigger.Binding>
                <Setter Property="Foreground" TargetName="PART_TextBox" Value="Red" />
            </DataTrigger>
 </DataTemplate.Triggers>      

The converter as a static resource in the Xaml

<Window.Resources>
     <local:LastItemConverter x:Key="LastItemConverter" />
</Window.Resources>

---

SnapShot

And a snapshot of it in action

The code has been added to the itemscontrol from this 'codeproject' https://www.codeproject.com/Articles/242628/A-Simple-Cross-Button-for-WPF

Note the last item's text in red

Unrivalled

Answer 4

You can use converters to find out first or last item of such collection control and it works pretty nice. It works flawlessly on my code.

I wrote a First/Last item converter that can be used for ItemsControl, ListView and ListBox.

public class FirstItemConverter : IMultiValueConverter
{
    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
    {
        if (values.Length <= 1 || values[1] is null)
        {
            return false;
        }

        if (values[0] is ItemsControl itemsControl)
        {
            return Equals(itemsControl.Items[0], values[1]);
        }

        if (values[0] is ListBox listBox)
        {
            return Equals(listBox.Items[0], values[1]);
        }

        if (values[0] is ListBox listView)
        {
            return Equals(listView.Items[0], values[1]);
        }

        return false;
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture) => throw new NotImplementedException();
}

public class LastItemConverter : IMultiValueConverter
{
    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
    {
        if (values.Length <= 1 || values[1] is null)
        {
            return false;
        }

        if (values[0] is ItemsControl itemsControl)
        {
            return Equals(itemsControl.Items[^1], values[1]);
        }

        if (values[0] is ListBox listBox)
        {
            return Equals(listBox.Items[^1], values[1]);
        }

        if (values[0] is ListBox listView)
        {
            return Equals(listView.Items[^1], values[1]);
        }

        return false;
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture) => throw new NotImplementedException();
}

and in your xaml, you can use it like this to show/hide your desired controls

<ItemsControl ItemsSource="{Binding YourItemCollection}">
                <ItemsControl.Resources>
                    <converters:FirstItemConverter x:Key="firstItemConverter" />
                    <converters:LastItemConverter x:Key="lastItemConverter" />
                </ItemsControl.Resources>
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Grid>
                            <Button>
                                <!--Icon button-->
                                <Button.Style>
                                    <Style TargetType="Button">
                                        <Style.Triggers>
                                            <DataTrigger Value="True">
                                                <DataTrigger.Binding>
                                                    <MultiBinding Converter="{StaticResource firstItemConverter}">
                                                        <Binding RelativeSource="{RelativeSource FindAncestor, AncestorType={x:Type ItemsControl}}" />
                                                        <Binding />
                                                    </MultiBinding>
                                                </DataTrigger.Binding>
                                                <Setter Property="Visibility" Value="Visible" />
                                            </DataTrigger>
                                            <DataTrigger Value="True">
                                                <DataTrigger.Binding>
                                                    <MultiBinding Converter="{StaticResource lastItemConverter}">
                                                        <Binding RelativeSource="{RelativeSource FindAncestor, AncestorType={x:Type ItemsControl}}" />
                                                        <Binding />
                                                    </MultiBinding>
                                                </DataTrigger.Binding>
                                                <Setter Property="Visibility" Value="Visible" />
                                            </DataTrigger>
                                        </Style.Triggers>
                                    </Style>
                                </Button.Style>
                            </Button>
                        </Grid>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>

Marlonmarlow

Answer 5

One question... I see you're using an ItemsControl as opposed to say a ListBox and that it appears to be bound to a collection of strings, and that you're only trying to display the resulting text without formatting the individual parts, which makes me wonder if your desired output is actually the string itself as mentioned in the question, and not an actual ItemsControl per se.

If I'm correct about that, have you considered just using a simple TextBlock bound to the items collection, but fed through a converter? Then Inside the converter, you would cast value to an array of strings, then in the Convert method, simply Join them using a comma as the separator which will automatically, only add them between elements, like so...

var strings = (IEnumerable<String>)value;

return String.Join(", ", strings);

Whiggism

I would also agree that this (or something like this) would be the best solution for the OP's actual use case as using an ItemsControl to simply generate a comma-separated list of strings feels like complete overkill. However, the question was about applying a different style to the last element in an ItemsControl so unfortunately, I couldn't upvote this. – Rhapsodist

You can always still upvote it for those who do want the results as described in my answer, who may very well be trying to achieve what I'm guessing they may really want. Remember, there is an accepted answer that does do what he wanted so you can vote that up too (although if you look at that accepted answer, he's 'treating' the first, not last item, but semantics...) In the end, you vote if something is helpful or not. Not just 'does it match exactly.' That's the point of this site! :) – Whiggism