如何在具有数据绑定的项控件中设置 Z 索引

Question

有几个

答案，但没有一个适用于UWP，只适用于WPF。 我有一个自定义 ItemsControl，它根据子级各自视图模型中的属性将其子项动态放置在不寻常的模式中。 项目部分重叠，我需要确保所选项目不会隐藏在任何其他项目下面。 但是我无法弄清楚如何将值绑定到网格的 Z 索引。

<ItemsControl Name="myItemsControl" ItemsSource="{x:Bind PageViewModel.myCollectionOfMyViewModel}" RenderTransformOrigin="0.5,0.5" >
   <ItemsControl.RenderTransform>
        <CompositeTransform x:Name="myTransform" />
   </ItemsControl.RenderTransform>
   <ItemsControl.ItemsPanel>
      <ItemsPanelTemplate>
           <Grid />
      </ItemsPanelTemplate>
   </ItemsControl.ItemsPanel>
  <ItemsControl.ItemTemplate>
      <DataTemplate x:DataType="viewmodel:MyViewModel">
          <Grid Name="ItemGrid" Canvas.ZIndex="{x:Bind SelectedItem, Mode=OneWay, Converter={StaticResource SelectedItemToZindexConverter}}" RenderTransformOrigin="0.5,0.5" >
               <Grid.RenderTransform>
                    <CompositeTransform Rotation="{Binding ItemIdxNum, Mode=OneWay, Converter={StaticResource ItemIdxToRotationAngleConverter}}"
                                                TranslateX="{Binding ItemIdxNum, Mode=OneWay, Converter={StaticResource ItemIdxToXPosConverter}}"
                                                TranslateY="{Binding ItemIdxNum, Mode=OneWay, Converter={StaticResource ItemIdxToYPosConverter}}"
                                                ScaleX="{x:Bind SelectedItem, Mode=OneWay, Converter={StaticResource SelectedItemBoolToScaleConverter}}"
                                                ScaleY="{x:Bind SelectedItem, Mode=OneWay, Converter={StaticResource SelectedItemBoolToScaleConverter}}"
                                                />
                </Grid.RenderTransform>
                <StackPanel Orientation="Horizontal">
                      <TextBlock Text="{x:Bind ItemName, Mode=OneWay}"/>
                </StackPanel>                                
           </Grid>
      </DataTemplate>
   </ItemsControl.ItemTemplate>
</ItemsControl>

那里的 Canvas.Zindex 不会抛出构建错误，但它不起作用。 在这里和其他地方搜索，似乎我需要针对 ItemsControl 的内容演示器而不是子元素。 但我不知道该怎么做。所有示例都适用于 WPF，并使用 UWP 中不可用的样式触发器目标类型。

Answer 1

看起来像一个错字。这是ZIndex的资本I.

Canvas.ZIndex="..." <!-- right -->
Canvas.Zindex="..." <!-- wrong -->

更新

ItemsControl 将使用 ContentPresenter 包装所有项目，但您可以通过创建自己的版本来覆盖该功能。使用它代替ItemsControl：

public class MyItemsControl : ItemsControl
{
    protected override DependencyObject GetContainerForItemOverride()
    {
        return ItemTemplate?.LoadContent() ?? base.GetContainerForItemOverride();
    }
    protected override void PrepareContainerForItemOverride(DependencyObject element, object item)
    {
        ((FrameworkElement) element).DataContext = item;
    }
}

您的 xaml 可以通过将根级别标记切换为MyItemsControl来使用它

 <local:MyItemsControl Name="myItemsControl"
                        ItemsSource="{x:Bind PageViewModel.myCollectionOfMyViewModel}"
                        RenderTransformOrigin="0.5,0.5">
    <ItemsControl.RenderTransform>
        <CompositeTransform x:Name="myTransform" />
    </ItemsControl.RenderTransform>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Grid />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate x:DataType="viewmodel:MyViewModel">
            <Grid Name="ItemGrid"
                    Canvas.ZIndex="{x:Bind SelectedItem, Mode=OneWay, Converter={StaticResource SelectedItemToZindexConverter}}"
                    RenderTransformOrigin="0.5,0.5">
                <Grid.RenderTransform>
                    <CompositeTransform Rotation="{Binding ItemIdxNum, Mode=OneWay, Converter={StaticResource ItemIdxToRotationAngleConverter}}"
                                        TranslateX="{Binding ItemIdxNum, Mode=OneWay, Converter={StaticResource ItemIdxToXPosConverter}}"
                                        TranslateY="{Binding ItemIdxNum, Mode=OneWay, Converter={StaticResource ItemIdxToYPosConverter}}"
                                        ScaleX="{x:Bind SelectedItem, Mode=OneWay, Converter={StaticResource SelectedItemBoolToScaleConverter}}"
                                        ScaleY="{x:Bind SelectedItem, Mode=OneWay, Converter={StaticResource SelectedItemBoolToScaleConverter}}" />
                </Grid.RenderTransform>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="{x:Bind ItemName, Mode=OneWay}" />
                </StackPanel>
            </Grid>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</local:MyItemsControl>