將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。