c# uwp gridview items zindex

Question

In UWP I have GridView. That GridView has ItemTemplate like this:

<Page.Resources>
    <DataTemplate x:Key="Template" x:DataType="local:ModelClass">
        <local:CustomUserControl
            Model="{x:Bind Mode=OneWay}"/>
    </DataTemplate>
</Page.Resources>

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <GridView x:Name="gvMain" ItemTemplate="{StaticResource Template}" SelectionChanged="gvMain_SelectionChanged">
        <GridView.ItemsPanel>
            <ItemsPanelTemplate>
                <ItemsWrapGrid Orientation="Vertical"
                               Margin="0,0,0,-10"
                               MaximumRowsOrColumns="1"
                               ItemWidth="50"
                               ItemHeight="50"/>
            </ItemsPanelTemplate>
        </GridView.ItemsPanel>
    </GridView>
</Grid>

The usercontrol is like this:

<Grid x:Name="gridMain" Width="50" Height="50">
    <Grid VerticalAlignment="Top" HorizontalAlignment="Right" Margin="0, 0, -10, 0" Width="20" Height="20" Background="Pink"/>
</Grid>

And in codebehind:

    public ModelClass Model
    {
        get { return (ModelClass)GetValue(ModelProperty); }
        set { SetValue(ModelProperty, value); SetBackground(); }
    }

    public static readonly DependencyProperty ModelProperty =
        DependencyProperty.Register("Model", typeof(ModelClass), typeof(CustomUserControl), new PropertyMetadata(new ModelClass()));

    private void SetBackground()
    {
        if (Model == null)
        {
            return;
        }
        gridMain.Background = Model.BackgroundColor;
    }

    public CustomUserControl()
    {
        this.InitializeComponent();
    }

I am populating the GridView like this:

        List<ModelClass> list = new List<ModelClass>();

        ModelClass mc = new ModelClass();
        mc.BackgroundColor = new SolidColorBrush(Colors.Red);

        ModelClass mc1 = new ModelClass();
        mc1.BackgroundColor = new SolidColorBrush(Colors.Blue);

        ModelClass mc2 = new ModelClass();
        mc2.BackgroundColor = new SolidColorBrush(Colors.Yellow);

        ModelClass mc3 = new ModelClass();
        mc3.BackgroundColor = new SolidColorBrush(Colors.Green);

        list.Add(mc);
        list.Add(mc1);
        list.Add(mc2);
        list.Add(mc3);

        gvMain.ItemsSource = list;

And what it looks like is this:

On each item there is a small square in upper right corner, colored in pink.

When I click on some item, I want that item to overlap every other items, so my pink square will be visible.

How to change Z-index of GridView items in this case?

Answer 1

How to change Z-index of GridView items in this case?

If you want to change the GridViewItem's Z-Index, you might think about using canvas relevant panel as the GridView's ItemsPanel.

Then, in your SelectionChanged event handler method, you could use the Canvas.SetZIndex(UIElement, index) method to set current selected item's Canvas.ZIndex. It would get your effect that you want.

But, if you used the general Canvas control as the GridView's ItemsPanel. You would find that the items would not be shown as the general items list.

As a result, in your case, you also would need to define your custom panel. You could need to rearrange the items in it.

I've made a simple for your reference:

<GridView x:Name="gvMain" SelectionChanged="gvMain_SelectionChanged">
        <GridView.ItemsPanel>
            <ItemsPanelTemplate>
                <local:CustomPanel></local:CustomPanel>
            </ItemsPanelTemplate>
        </GridView.ItemsPanel>
        <GridViewItem >
            <Rectangle Fill="Red" Width="50" Height="50"></Rectangle>
        </GridViewItem>

        <GridViewItem >
            <Rectangle Fill="Blue"  Width="50" Height="50" ></Rectangle>
        </GridViewItem>

        <GridViewItem>
            <Rectangle Fill="Yellow" Width="50" Height="50"></Rectangle>
        </GridViewItem>
</GridView>

public class CustomPanel:Canvas
{
    protected override Size MeasureOverride(Size availableSize)
    {
        Size s = base.MeasureOverride(availableSize);

        foreach (UIElement element in this.Children)
        {

            element.Measure(availableSize);
        }

        return s;
    }

    protected override Size ArrangeOverride(Size finalSize)
    {
        this.Clip = new RectangleGeometry { Rect = new Rect(0, 0, finalSize.Width, finalSize.Height) };
        Double position = 0d;
        foreach (UIElement item in this.Children)
        {
            if (item == null)
                continue;
            Size desiredSize = item.DesiredSize;

            if (double.IsNaN(desiredSize.Width) || double.IsNaN(desiredSize.Height)) continue;
            var rect = new Rect(0, position, desiredSize.Width, desiredSize.Height);
            item.Arrange(rect);
            TranslateTransform compositeTransform = new TranslateTransform();
            compositeTransform.X = position / 2;
            item.RenderTransform = compositeTransform;
            position += desiredSize.Width;
        }
        return finalSize;
    }
}
private void gvMain_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    GridViewItem item = (sender as GridView).SelectedItem as GridViewItem;
    if (item != null)
    {
        Canvas.SetZIndex(item,index);
    }
}

This just is a simple code sample, you could do more custom behavior in your custom panel.

The following are the effect screenshots: