绝对 z 顺序（跨多个数据模板）

发布于 2024-12-12 04:46:55 字数 1273 浏览 0 评论 0原文

我有一个带有 Canvas ItemsPanel 的 ListBox，它显示 2 种不同类型的对象：NodeVM 和 LinkLineVM（使用 CompositeCollection）。每个VM对象都有一个DataTemplate：
NodeVMs DataTemplate 有一个 TextBlock (A)
LinkLineVMs DataTemplate 有一个 Line (B) 和一个 TextBlock (C) 如何获得以下绝对 z 顺序：A（顶部）、C、B（底部）。

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

有人曾经说过，一张图片胜过1000个字。绿色矩形== NodeVM，线+小框== NetworkLinkVM。 A 没问题，因为链接 [-30] 通过其他链接，但 B 是一个问题，因为链接 [-31] 框隐藏在链接 [-32] 下面在此处输入图像描述

原文

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>

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]
enter image description here

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

榆西 2024-12-19 04:46:55

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

原因是所有项目都包装在 ListBoxItem 中，因此您需要在 ListBoxItem 上设置 ZIndex，而不是在 DataTemplate 上设置 ZIndex

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

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

这只会为您的 DataTemplates 设置 ZIndex，但是一旦整理好这些，您就可以设置 NetworkLinkVM 的内部 Line 和 TextBlock 的 ZIndex

Set your ZIndex index in ListBox.ItemContainerStyle instead of your 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>

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.

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

回复收藏 0 原文

~没有更多了~