绝对z顺序(跨多个DataTemplates) [英] Absolute z-order (across several DataTemplates)

问题描述

创建一个带有Canvas ItemsPanel的列表框，该列表框显示两种不同类型的对象:NodeVM和LinkLineVM(使用CompositeCollection).每个VM对象都有一个DataTemplate:
NodeVMs DataTemplate的TextBlock(A)
LinkLineVMs DataTemplate具有Line(B)和TextBlock(C) 如何获得以下绝对z顺序:A(顶部)，C，B(底部).

Ive a ListBox with a Canvas ItemsPanel that displays 2 different types of objects: NodeVMs and LinkLineVMs (using a CompositeCollection). Each VM object has a DataTemplate:
NodeVMs DataTemplate has a TextBlock (A)
LinkLineVMs DataTemplate has a Line (B) and a TextBlock (C) How get the following absolute z-order: A (top), C, B (bottom).

<ListBox>
    <ListBox.Resources>
        <DataTemplate DataType="{x:Type p:NodeVM}">
            <StackPanel>
                <TextBlock ... />
                ...
            </StackPanel>
        </DataTemplate>
        <DataTemplate DataType="{x:Type p:NetworkLinkVM}">
            <Grid>
                <Line ... />
                <TextBlock ... />
            </Grid>
        </DataTemplate>
    </ListBox.Resources>
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas IsItemsHost="True" PreviewMouseUp="network_visualization_list_PreviewMouseUp" />
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
<ListBox>

有人曾经说过一张照片值一千字.绿色矩形== NodeVM，线+小框== NetworkLinkVM. A正常，因为链接[-30]越过其他链接，但是B却是问题，因为隐藏了链接[-31]框，低于链接[-32]

Someone once said a picture is worth a 1000 words. Green rectangle == NodeVM, Line+small box == NetworkLinkVM. A is ok as link [-30] passes over other link BUT B is a problem as link [-31] box is hidden BELOW link [-32]

推荐答案

在ListBox.ItemContainerStyle中而不是DataTemplate中设置ZIndex索引.

Set your ZIndex index in ListBox.ItemContainerStyle instead of your DataTemplate.

这样做的原因是所有项目都包裹在ListBoxItem中，因此您需要在ListBoxItem而不是DataTemplate

The reason for this is that all items are wrapped in a ListBoxItem, so you need to set the ZIndex on the ListBoxItem instead of on the DataTemplate

<Style TargetType="{x:Type ListBoxItem}">
    <Setter Property="Canvas.ZIndex" 
            Value="{Binding Converter={StaticResource GetObjectZIndexConverter}}" />
</Style>

您将需要一个转换器来检查typeof您的数据绑定对象，并根据它是NodeVM还是NetworkLinkVM返回正确的ZIndex.

You'll need a converter that checks the typeof your databound object, and returns the correct ZIndex based on if it's a NodeVM or NetworkLinkVM.

这只会为您的DataTemplates设置ZIndex，但是一旦整理出它们，您就可以将NetworkLinkVM's内部Line和TextBlock

This will only set the ZIndex for your DataTemplates, but once those are sorted out, you can set the ZIndex of NetworkLinkVM's internal Line and TextBlock

这篇关于绝对z顺序(跨多个DataTemplates)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！