将StackPanel与Canvas中的顶部中心对齐

Question

我试图创建一个应用程序来测量它的用户的快速反应性能。应用程序以全屏模式启动，并根据屏幕分辨率调整其元素大小。该项目受training_aim_csgo2地图的强烈启发。 它主要完成了，但问题在于：

我将Label计数器放在StackPanel中，但是在Canvas之外，如果它在StackPanel区域可见地显示（实际上目标在它下面），它会阻止用户点击目标。

这是XAML：

<Grid>
    <Canvas Name="Canvas" Background="#EFECCA">
        <DockPanel VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Width="{Binding ActualWidth, ElementName=Canvas}" Height="{Binding ActualHeight, ElementName=Canvas}" MouseLeftButtonDown="DockPanel_MouseLeftButtonDown" TouchDown="DockPanel_TouchDown" Panel.ZIndex="2" Background="Transparent">
        </DockPanel>
        <Button Width="50"  Height="50" x:Name="button" Style="{DynamicResource buttonStyle}" TouchDown="button_TouchDown" Click="button_Click" Panel.ZIndex="3" HorizontalAlignment="Center" VerticalAlignment="Center" Visibility="Hidden" />
    </Canvas>
    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Top">
        <Label x:Name="counter_SUCCESS" Content="000" HorizontalContentAlignment="Center" Foreground="#046380" />
        <Label x:Name="counter_FAILURE" Content="000...clicks missed" HorizontalContentAlignment="Center" Foreground="#046380" />
        <Label x:Name="counter_NUMBER" Content="0 out of 100" HorizontalContentAlignment="Center" Foreground="#046380" />
    </StackPanel>
    <Button Content="Start" Width="{Binding}" Height="{Binding}" VerticalAlignment="Bottom" HorizontalAlignment="Center" TouchDown="Start_TouchDown" Click="Start_Click" x:Name="Start"/>
</Grid>

有人可以帮我解决这个问题吗？

到目前为止，我尝试做的是将StackPanel移动到Canvas中并将其Z-index值设置为1但是它不遵循Horizo​​ntalAlignment和VerticalAlignment设置：

我还试图删除整个StackPanel的想法，并以编程方式设置Label计数器的位置和Z索引，如下所示：

        counter_SUCCESS.Width = rectangleWidth;
        counter_FAILURE.Width = rectangleWidth;
        counter_NUMBER.Width = rectangleWidth;

        counter_SUCCESS.Height = rectangleHeight / 3;
        counter_FAILURE.Height = rectangleHeight / 3;
        counter_NUMBER.Height = rectangleHeight / 3;

        Canvas.SetLeft(counter_SUCCESS, (ActualWidth - counter_SUCCESS.Width) / 2);
        Canvas.SetLeft(counter_FAILURE, (ActualWidth - counter_FAILURE.Width) / 2);
        Canvas.SetLeft(counter_NUMBER, (ActualWidth - counter_NUMBER.Width) / 2);

        Canvas.SetTop(counter_SUCCESS, 0);
        Canvas.SetTop(counter_FAILURE, rectangleHeight/3);
        Canvas.SetTop(counter_NUMBER, rectangleHeight/3 + counter_FAILURE.Height);

它在我的屏幕上显得很好，但在不同的标签上，标签重叠：

Answer 1

您只需要重新排序元素。

<Grid Background="#EFECCA">
    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Top">
        <Label x:Name="counter_SUCCESS" Content="000" HorizontalContentAlignment="Center" Foreground="#046380" />
        <Label x:Name="counter_FAILURE" Content="000...clicks missed" HorizontalContentAlignment="Center" Foreground="#046380" />
        <Label x:Name="counter_NUMBER" Content="0 out of 100" HorizontalContentAlignment="Center" Foreground="#046380" />
    </StackPanel>

    <Canvas Name="Canvas" Background="Transparent">
        <DockPanel VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Width="{Binding ActualWidth, ElementName=Canvas}" Height="{Binding ActualHeight, ElementName=Canvas}" MouseLeftButtonDown="DockPanel_MouseLeftButtonDown" TouchDown="DockPanel_TouchDown" Panel.ZIndex="2" Background="Transparent">
        </DockPanel>
        <Button Width="50"  Height="50" x:Name="button" Style="{DynamicResource buttonStyle}" TouchDown="button_TouchDown" Click="button_Click" Panel.ZIndex="3" HorizontalAlignment="Center" VerticalAlignment="Center" Visibility="Hidden" />
    </Canvas>

    <Button Content="Start" Width="{Binding}" Height="{Binding}" VerticalAlignment="Bottom" HorizontalAlignment="Center" TouchDown="Start_TouchDown" Click="Start_Click" x:Name="Start"/>
</Grid>

将Grid设置为具有背景，然后将StackPanel放在其上，您可以将Canvas置于所有内容之上并设置它{{1} } Background。

Answer 2

如果您不想对某个元素进行任何输入或命中测试，则应将IsHitTestVisible属性设置为false：

<Grid>
<Canvas Name="Canvas" Background="#EFECCA">
    <DockPanel VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Width="{Binding ActualWidth, ElementName=Canvas}" Height="{Binding ActualHeight, ElementName=Canvas}" MouseLeftButtonDown="DockPanel_MouseLeftButtonDown" TouchDown="DockPanel_TouchDown" Panel.ZIndex="2" Background="Transparent">
    </DockPanel>
    <Button Width="50"  Height="50" x:Name="button" Style="{DynamicResource buttonStyle}" TouchDown="button_TouchDown" Click="button_Click" Panel.ZIndex="3" HorizontalAlignment="Center" VerticalAlignment="Center" Visibility="Hidden" />
</Canvas>
<StackPanel IsHitTestVisible="False" HorizontalAlignment="Center" VerticalAlignment="Top">
    <Label x:Name="counter_SUCCESS" Content="000" HorizontalContentAlignment="Center" Foreground="#046380" />
    <Label x:Name="counter_FAILURE" Content="000...clicks missed" HorizontalContentAlignment="Center" Foreground="#046380" />
    <Label x:Name="counter_NUMBER" Content="0 out of 100" HorizontalContentAlignment="Center" Foreground="#046380" />
</StackPanel>
<Button Content="Start" Width="{Binding}" Height="{Binding}" VerticalAlignment="Bottom" HorizontalAlignment="Center" TouchDown="Start_TouchDown" Click="Start_Click" x:Name="Start"/>