WPF 文本覆盖网格

Question

我已经搜索了整个 stackoverflow，但找不到简单的解决方案来解决我的问题。

我有网格，我想用一些文本/图像覆盖整个网格。你有什么想法我该怎么做？

实际上这是俄罗斯方块游戏，我想在他输掉后显示用户文本/图像“游戏结束”，所以我需要从 c# 手动完成。有什么想法吗？

感谢您的帮助:-)

<Window x:Class="TetrisWPF.MainWindow"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:TetrisWPF"
    mc:Ignorable="d"
    Title="MainWindow" 
     AllowsTransparency="True" 
  ResizeMode="CanResizeWithGrip"
  WindowStyle="None"
  ShowInTaskbar="True"
    WindowState="Maximized"
    KeyDown="HandleKeyDown"
    Initialized="MainWindow_Initilized" Background="#222222">
<Window.Resources>

    <FontFamily x:Key="FontAwesome">/Fonts/fontawesome-webfont.ttf#FontAwesome</FontFamily>
</Window.Resources>
<DockPanel LastChildFill="false">
    <Button DockPanel.Dock="Right" Visibility="Hidden" Width="300">Right</Button>
    <StackPanel DockPanel.Dock="Right" Width="311" >
        <Button x:Name="btnPlay" Content="Play" Click="btnPlay_Click" Width="50" Height="25" Margin="5"/>
        <Label Content="Score " Height="56" x:Name="Score" HorizontalAlignment="Center" FontSize="28" FontWeight="Bold" Margin="0,0,0,0"/>
        <Label Content="Lines " Height="56" x:Name="Lines" HorizontalAlignment="Center" FontSize="28" FontWeight="Bold" Margin="0,0,0,0"/>
        <Label Content="Level 1" Height="56" x:Name="level" HorizontalAlignment="Center" FontSize="28" FontWeight="Bold" Margin="0,0,0,0" />
        <Button  x:Name="buttonPlay" HorizontalAlignment="Right" VerticalAlignment="Top" Height="60" Margin="0,20,0,0" Width="205" Click="buttonPlay_Click" >
            <Button.Template>
                <ControlTemplate TargetType="Button">
                    <Image Name="img1" Source="C:\Users\xx\Pictures\btn.png" />
                </ControlTemplate>
            </Button.Template>
        </Button>
        <Button x:Name="buttonPause" Content="Pause (L1)" HorizontalAlignment="Right"  VerticalAlignment="Top" Height="60" Margin="0,20,0,0" Width="205" Click="buttonPause_Click" />
        <Button x:Name="buttonRestart" Content="Restart" HorizontalAlignment="Right" VerticalAlignment="Top" Height="60" Margin="0,20,0,0" Width="205" Click="buttonRestart_Click" />
        <Button x:Name="buttonStop" Content="Stop" HorizontalAlignment="Right" VerticalAlignment="Top" Height="60" Margin="0,20,0,0" Width="205" Click="buttonStop_Click" />
        <Button x:Name="buttonDemo" Content="Demo" HorizontalAlignment="Right" VerticalAlignment="Top" Height="60" Margin="0,20,0,0" Width="205" Click="buttonDemo_Click" />
        <Button x:Name="buttonExit" Content="Exit" HorizontalAlignment="Right" VerticalAlignment="Top" Height="60" Margin="0,20,0,0" Width="205" Click="buttonExit_Click"  />
        <TextBlock x:Name="GameOverText" Height="56" FontSize="28" FontWeight="Bold" TextWrapping="Wrap" Text="Game Over" Foreground="#FFD41A1A"/>
        <TextBlock x:Name="GamePausedText" Height="56" FontSize="28" FontWeight="Bold" TextWrapping="Wrap" Text="Game Paused" Foreground="#FF0D15B6" Margin="0,0,-0.8,0"/>
    </StackPanel>
    <Grid Name="MainGrid" Height="750" Width="375" DockPanel.Dock="Right">
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
    </Grid>
</DockPanel>

Answer 1

使用网格，您可以简单地添加占据相同空间的对象，它们将按照您添加它们的顺序重叠。在您的示例中，您有很多列和行，因此要在所有列和行上覆盖某些内容，您必须将其 RowSpan 和 ColumnSpan 设置为您拥有的行/列数以填充所有空间。

一种更简单的方法可能是将您的网格放在另一个网格中（只有 1 行和 1 列），然后在其中添加一些内容（这是我想要覆盖组件时所做的，只需将它们粘贴在自己的小 1x1 中网格）。

像这样：

<Grid>
    <Grid Name="MainGrid" Height="750" Width="375" DockPanel.Dock="Right">
        ... all those columns
    </Grid>
    <Border Name="GameOverlay" Background="Black" Visibility="Hidden">
        <TextBlock Text="Game Over!" Foreground="White" FontWeight="Bold"
                   FontSize="24"
                   HorizontalAlignment="Center"
                   VerticalAlignment="Center"/>
    </Border>
</Grid>

请注意，如果您想遮盖原始内容，请务必设置背景（尽管半透明背景可能看起来很酷！）。

要在代码中显示和隐藏它，只需使用GameOverlay.Visibility = Visibility.Visible 或GameOverlay.Visibility = Visibility.Hidden 显示和隐藏它，或者将其绑定到您可以更改的属性。

这样你可以让它看起来你想要的样子，把它放在你想要的地方，在设计器中将它设置为可见，然后将它更改为隐藏（这样你就可以让它在代码中可见）。

比在需要时在代码中构建它并手动将其添加到用户体验要容易得多。