Fatal编程技术网
  • csharp/
  • C# 将StackPanel与画布中的顶部中心对齐

C# 将StackPanel与画布中的顶部中心对齐

c# wpf xaml canvas

C# 将StackPanel与画布中的顶部中心对齐,c#,wpf,xaml,canvas,C#,Wpf,Xaml,Canvas,我正在尝试创建一个应用程序，用来测量用户的快速反应性能。应用程序以全屏模式启动，并根据屏幕分辨率调整其元素的大小。该项目的灵感来自于对aim csgo2地图的培训。 基本上已经完成了，但问题是： 我将标签计数器放在StackPanel内部，但放在Canvas外部，这会阻止用户在目标显示在StackPanel区域时单击目标（而实际上目标位于其下方） 以下是XAML： <Grid> <Canvas Name="Canvas" Background="#EFECCA">

我正在尝试创建一个应用程序，用来测量用户的快速反应性能。应用程序以全屏模式启动，并根据屏幕分辨率调整其元素的大小。该项目的灵感来自于对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>
它在我的屏幕上看起来很好，但在另一个屏幕上，标签重叠：

您只需重新排序元素即可

<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>
将
网格设置为背景，然后将
堆叠面板放置在背景上，您可以将
画布
放在所有内容之上，并将其
背景
设置为
透明
如果您不想在某个元素上进行任何输入或命中测试，则应将
ishitestvisible
属性设置为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"/>







两个答案都解决了问题。非常感谢。

<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"/>