Question

我试图使用索引在蓝色背景上设置红色椭圆，但无论我改变什么都不影响它的位置。我怎样才能使红点出现在蓝色矩形的前面/上面？

        <Grid.RowDefinitions>
            <RowDefinition Height="8"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="8"/>
        </Grid.RowDefinitions>

        <Border Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3"
                Cursor="Hand" 
                Background="LightBlue" 
                CornerRadius="4"
                Panel.ZIndex="0"
                Padding="10,0,10,0">
            <Grid>
                <Rectangle HorizontalAlignment="Center"
                    Height="30"
                    MinWidth="100" 
                    Panel.ZIndex="5"/>
                <Label Content="{Binding VirtualName}" HorizontalContentAlignment="Center"/>
            </Grid>
        </Border>

        <Ellipse Stroke="White" StrokeThickness="2" Fill="Red" Height="16" Width="16"
                 Grid.Row="2" Grid.Column="1" Margin="0,-8,0,0" 
                 Panel.ZIndex="50"/>

        <Ellipse Stroke="White" StrokeThickness="2" Fill="Red" Height="16" Width="16"
                 Grid.Row="0" Grid.Column="1" Margin="0,0,0,0" 
                 Panel.ZIndex="50"/>
    </Grid>

Answer 1

您可以摆脱Canvas.ZIndex属性。它们会根据您将它们放置在网格中的顺序显示在顶部，因此z索引不会影响任何内容。

这里的问题是底部椭圆被剪裁，因为它位于高度为8的行中。尝试将其边距设置为0,0,0,-8，您将获得所需的行为。

Answer 2

只使用没有任何行的网格，并在边框上添加边距，这是网格上的第一个元素。将带有VerticalAlignment的椭圆放置在顶部和底部，它们将呈现在边框的顶部。

<Grid>
    <Border Cursor="Hand" 
            Background="LightBlue" 
            CornerRadius="4"
            Margin="0 8"
            Padding="10,0,10,0">
        <Grid>
            <Rectangle HorizontalAlignment="Center" Height="30" MinWidth="100" />
            <Label Content="{Binding VirtualName}" HorizontalContentAlignment="Center"/>
        </Grid>
    </Border>

    <Ellipse VerticalAlignment="Top" Stroke="White" StrokeThickness="2" Fill="Red" Height="16" Width="16"/>

    <Ellipse VerticalAlignment="Bottom" Stroke="White" StrokeThickness="2" Fill="Red" Height="16" Width="16"/>
</Grid>

wpf形状不会使用索引保持在顶部

2 个答案: