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

【问题标题】：Aligning StackPanel to top-center in Canvas将 StackPanel 与 Canvas 中的顶部中心对齐
【发布时间】：2015-06-22 17:41:34
【问题描述】：

我正在尝试创建一个应用程序来衡量其用户的快速反应性能。该应用程序以全屏模式启动，并根据屏幕分辨率调整其元素的大小。该项目受到 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-index 值设置为 1，但随后它违反了 HorizontalAlignment 和 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);

它在我的屏幕上看起来不错，但在另一个屏幕上标签重叠了：

【问题讨论】：

两个答案都解决了这个问题。谢谢

标签： c# wpf xaml canvas

【解决方案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"/>

【讨论】：

【解决方案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。

【讨论】：