我试图使用索引在蓝色背景上设置红色椭圆,但无论我改变什么都不影响它的位置。我怎样才能使红点出现在蓝色矩形的前面/上面?
<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>
答案 0 :(得分:1)
您可以摆脱Canvas.ZIndex属性。它们会根据您将它们放置在网格中的顺序显示在顶部,因此z索引不会影响任何内容。
这里的问题是底部椭圆被剪裁,因为它位于高度为8的行中。尝试将其边距设置为0,0,0,-8
,您将获得所需的行为。
答案 1 :(得分:1)
只使用没有任何行的网格,并在边框上添加边距,这是网格上的第一个元素。将带有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>