在 wpf window 的右上角固定一个图像，而不考虑网格行的高度

Question

我必须将图像放在网格的右上角。但它不应该占用网格行的高度。意味着它应该显示为网格的顶层。我怎样才能做到这一点？像下面这样，网格行的高度随着图像的高度而增加（Img_Data）。

<Grid x:Name="LayoutRoot" Background="Black"  >
    <Grid.RowDefinitions>
        <RowDefinition Height="auto"></RowDefinition>
        <RowDefinition  Height="auto"></RowDefinition>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" ></ColumnDefinition>
        <ColumnDefinition Width="*" ></ColumnDefinition>
        <ColumnDefinition Width="*" ></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <StackPanel x:Name="menu"  Grid.Row="0" Grid.ColumnSpan="3"    >
        <Button x:Name="btnOpen" Margin="8" Padding="4" Content="Select" Click="btnOpen_Click"  Width="auto" Height="25"/>
        <Button Margin="8" Width="100" Height="28" Content="Play"  BorderBrush="Transparent" Name="btnPlay" Click="btnPlay_Click"  Style="{StaticResource CommonButton}" >
        </Button>
        <Label x:Name="lblRecordTimer" Foreground="White"  HorizontalAlignment="Center" VerticalAlignment="Center"></Label>
        <Label x:Name="lblPlayMode" Foreground="White"   HorizontalAlignment="Center" VerticalAlignment="Center" >Play</Label>
        <Image Name="Img_Data" Source="/images/Data.png" HorizontalAlignment="Right"    Width="187" Height="150"    />
    </StackPanel>

    <StackPanel Grid.Row="1"  Grid.ColumnSpan="3"  Orientation="Vertical" HorizontalAlignment="Center">
        <Label Content="Show Details"  FontSize="18"  Foreground="White" ></Label>
        <fa:ImageAwesome Icon="Refresh" Foreground="Red"  Visibility="Collapsed" Width="50" Height="50" x:Name="spinner1" Spin="True" SpinDuration="4" />
    </StackPanel>
</Grid>

Answer 1

您可以使用 Canvas 作为 Grid 的最后一个 child。像这样：

<Grid x:Name="LayoutRoot" Background="Black"  >
    <Grid.RowDefinitions>
        <RowDefinition Height="auto"></RowDefinition>
        <RowDefinition  Height="auto"></RowDefinition>
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" ></ColumnDefinition>
        <ColumnDefinition Width="*" ></ColumnDefinition>
        <ColumnDefinition Width="*" ></ColumnDefinition>
    </Grid.ColumnDefinitions>

    <StackPanel x:Name="menu"  Grid.Row="0" Grid.ColumnSpan="3"    >
        <Button x:Name="btnOpen" Margin="8" Padding="4" Content="Select" Width="auto" Height="25"/>
        <Button Margin="8" Width="100" Height="28" Content="Play"  BorderBrush="Transparent" Name="btnPlay">
        </Button>
        <Label x:Name="lblRecordTimer" Foreground="White"  HorizontalAlignment="Center" VerticalAlignment="Center"></Label>
        <Label x:Name="lblPlayMode" Foreground="White"   HorizontalAlignment="Center" VerticalAlignment="Center" >Play</Label>
    </StackPanel>

    <StackPanel Grid.Row="1"  Grid.ColumnSpan="3"  Orientation="Vertical" HorizontalAlignment="Center">
        <Label Content="Show Details"  FontSize="18"  Foreground="White" ></Label>
    </StackPanel>

    <Canvas
        Grid.Row="0"
        Grid.RowSpan="2"
        Grid.Column="0"
        Grid.ColumnSpan="3">
        <Image 
            Name="Img_Data" 
            Canvas.Top="16"
            Canvas.Right="16"
            Source="/images/Data.png"
            Width="187"
            Height="150"/>
    </Canvas>
</Grid>

在 wpf window 的右上角固定一个图像，而不考虑网格行的高度

Fix an image at top right corner of wpf window irrespective of the height of grid row

c#

wpf

grid

xaml

overlay