wpf - 一个画布在相邻画布上的 ZIndex

问题描述

我正在尝试渲染一排互锁的箭头，如下所示：

每个箭头代表工作流中的一个步骤，每个箭头的颜色由其步骤在工作流中的位置决定。虽然上面的示例有 3 种颜色（之前、当前、之后），但到目前为止，我只实现了 2 种颜色（之前/当前、之后），这对于这个问题来说很好。我有一个IMultiValueConverter来处理这些颜色。

工作流步骤表示为StepStruct具有Step属性（手动设置，稍后会详细介绍）和VmFunc返回该步骤的视图模型的属性。我的当前IMultiValueConverter使用步骤列表中的步骤索引，而不是实际Step值。

我的问题是箭头。最初，我将每一步都作为画布呈现一个简单的矩形，这很容易上手。但是为了制作箭头，我使用了一个PolyLine我想要定位在画布右侧的箭头，实际上是从一个画布的右侧开始并溢出到下一个画布。

我无法Panel.ZIndex以这样一种方式工作，即画布的箭头可见溢出到其右侧邻居中。

我的代码粘贴在下面。注意：

Polyline我已经将's Panel.Zindex（我已经读过会影响其父画布的 z-index）绑定到StepStruct'Step属性，并且我已经设置了Step值，以便每个步骤的值小于其左侧步骤的值，它应该显示左步在右步之上。
我评论了一行设置Canvas.Left每个PolyLine. 当我取消注释这条线（并将其移动到位）时，Polyline确实会移动到画布的右侧，但它是不可见的，我想这是因为它隐藏在右侧的画布后面。（我已经通过将更改为PolyLine以负 x 值开头来确认这一点，因此您可以看到未被相邻画布阻挡的部分。这没有被描绘出来。）
我已将每个画布呈现Step为文本，并且这些TextBlocks 都具有相同的 z-index (40)，因此它们位于一些PolyLines 的前面和其他的后面，这表明它们的PolyLinez-index 设置正确，在至少在它自己的画布内。

<Border Grid.Row="0" BorderBrush="{StaticResource BackgroundBlack}" BorderThickness="2">

    <!--Progress bar-->
    <ItemsControl ItemsSource="{Binding StepViewModels}" Grid.Row="0" x:Name="progressBar">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <UniformGrid Rows="1"/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>

        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Canvas Height="24">
                    <Canvas.Style>
                        <Style TargetType="Canvas">
                            <Setter Property="Background" Value="{StaticResource BackgroundDarkGrey}"/>

                            <Style.Triggers>
                                <DataTrigger>
                                    <DataTrigger.Binding>
                                        <!-- the binding. this part works so I'm omitting the code -->
                                    </DataTrigger.Binding>
                                    <DataTrigger.Value>True</DataTrigger.Value>
                                    <Setter Property="Background" Value="{StaticResource DisabledGrey}"/>
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </Canvas.Style>

                    <Polyline Points="0,-1 20,11 0,25" Stroke="{StaticResource BackgroundBlack}" StrokeThickness="2" 
                            Fill="{Binding Background, RelativeSource={RelativeSource AncestorType=Canvas}}"
                            Panel.ZIndex="{Binding Step}"
                            />
                    <!--Canvas.Left="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType=Canvas}}"-->

                    <TextBlock Text="{Binding Step}" FontWeight="ExtraBlack" Panel.ZIndex="40" Foreground="Pink" FontSize="20" Canvas.Left="8"/>
                </Canvas>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Border>

结果（Canvas.Left仍然有评论）

如何根据需要在一个画布的末尾和下一个画布的顶部渲染箭头？

（我当然可以保持这种方式并使其工作，但绑定会非常烦人和复杂，需要将每个箭头绑定到前一个画布的颜色；或者更确切地说是进行某种涉及的转换IndexOf - 1）

标签： wpfxaml

wpf - 一个画布在相邻画布上的 ZIndex

问题描述

解决方案

推荐阅读