将StackPanel对齐到Canvas顶部中心

Question

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

我把标签计数器内部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-索引值1，但随后它违背的Horizo​​ntalAlignment和VerticalAlignment设置：

我也曾尝试放弃整个StackPanel的想法和编程设置标签计数器的位置和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); 

看来罚款我的屏幕上，但在不同的一个标签被overlappi NG：

Answer 1

如果您不希望某个元素上应该将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"/> 

Answer 2

你只需要重新整理你的元素。

<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一切的顶部，设置它的Background到Transparent。