如何在带有数据绑定的ItemsControl中设置Z-Index?

时间:2017-04-07 05:11:21

标签: c# xaml uwp

这有几个答案,但它们都不适用于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中无法使用的样式触发器目标类型。

1 个答案:

答案 0 :(得分:2)

看起来像一个错字。它是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>