如何在帶有數據綁定的ItemsControl中設置Z-Index？

Question

有幾個答案，但沒有一個適用於UWP，只有WPF。我有一個自定義的ItemsControl，它根據孩子各自視圖模型中的屬性動態地將其子元素放置在一個不尋常的模式中。項目部分重疊，我需要確保所選項目不隱藏在任何其他項目下。但我無法弄清楚如何將一個值綁定到Grid的Z-index上。

<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的ContentPresenter而不是子元素。但我不知道如何去做這件事。所有示例都是針對WPF的，並使用UWP中不提供的Style觸發器目標類型。

Answer 1

看起來像一個錯字。它的大寫I在ZIndex。

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>