How do I eliminate space on the right side of a GridView item

Question

So I have struggled with this before but have never found a good solution.

I need a a 2 column GridView with items that will fill into the left and the right with the items on the left being left justified and the items on the right being right justified. I want the 2 columns to be edge to edge with a space in the middle. So far I have this but the items don't fill in the container horizontally. The right margin messes it up.

I know there is a css equivalent of only applying a style to odd or even items but I don't think there is similar markup in xaml. Does anyone know how to do this?

Jay Zuo · Accepted Answer

In XAML, we can use ItemsControl.ItemContainerStyleSelector property to apply different styles to odd and even items. This property sets a reference to a custom StyleSelector logic class. The StyleSelector returns different Style values to use for the item container based on characteristics of the object being displayed. Following is a simple sample about how to do this.

Firstly, we need two styles for odd and even items.

Then we need to create a custom StyleSelector class and override SelectStyleCore method to implement the logic. In the method, we can use ItemsControl.ItemsControlFromItemContainer method to get the ItemsControl and then use ItemsControl.IndexFromContainer method to get the index of the container. Once we have the index, we can use it to check whether the item is odd or even item.

public class MyStyleSelector : StyleSelector
{
    public Style OddStyle { get; set; }
    public Style EvenStyle { get; set; }

    protected override Style SelectStyleCore(object item, DependencyObject container)
    {
        var itemsControl = ItemsControl.ItemsControlFromItemContainer(container);
        //Note that the index starts form 0
        if (itemsControl.IndexFromContainer(container) % 2 == 0)
        {
            return OddStyle;
        }
        else
        {
            return EvenStyle;
        }
    }
}

To use this selector, we need to refer to an instance of the custom class as defined in a Resources block in XAML. We can define it in Page.Resources like:

And in GridView, set ItemContainerStyleSelector like:

The complete XAML code might like:

How do I eliminate space on the right side of a GridView item

Answers (1)

Related Questions