时间：2019-04-01 标签：c#uwp gridview items zindex

Question

在 UWP 中，我有 GridView。那个 GridView 有这样的 ItemTemplate：

<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>

用户控件是这样的：

<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>

在代码隐藏中：

    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();
    }

我正在像这样填充 GridView：

        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;

它看起来是这样的：

每个项目的右上角都有一个小方块，用粉红色着色。

当我单击某个项目时，我希望该项目与其他所有项目重叠，因此我的粉红色方块将可见。

在这种情况下如何更改 GridView 项目的 Z-index？

Answer 1

在这种情况下如何更改 GridView 项目的 Z-index？

如果你想改变GridViewItem的Z-Index，你可以考虑使用canvas相关面板作为GridView的ItemsPanel。

然后，在您的SelectionChanged 事件处理方法中，您可以使用Canvas.SetZIndex(UIElement, index) 方法来设置当前选定项的Canvas.ZIndex。它会得到你想要的效果。

但是，如果您使用通用的 Canvas 控件作为 GridView 的 ItemsPanel。您会发现这些项目不会显示为常规项目列表。

因此，在您的情况下，您还需要定义自定义面板。您可能需要重新排列其中的项目。

我做了一个简单的供大家参考：

<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);
    }
}

这只是一个简单的代码示例，您可以在自定义面板中执行更多自定义行为。

以下是效果截图：