带有标签和标题的网格中的 WPF 图像

Question

我一直在努力将一张上面有标签、下面有标题的图片放在网格中。 我想要的是顶部标签在图像正上方的中间对齐，底部标签在图像正下方，如下所示：

但我实际上得到的是：

在我看来，我使用了以下代码：

<Window x:Class="ImageWithText.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"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid Margin="5">

        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

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

        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="auto"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="auto"/>
            </Grid.RowDefinitions>

            <Label Content="This is a label" 
                   HorizontalAlignment="Center"
                   VerticalAlignment="Bottom"
                   Grid.Row="0"/>

            <Image x:Name="MainImage"
                   Stretch="Uniform"
                   Grid.Row="1">
                <Image.Source>
                    <BitmapImage UriSource="test.jpg"/>
                </Image.Source>
            </Image>

            <TextBlock HorizontalAlignment="Center"
                       VerticalAlignment="Top"
                       Grid.Row="2">
                    <Run Text="Some text "/>
                    <Run Text="Some more text"/>
            </TextBlock>

        </Grid>
    </Grid>
</Window>

我也尝试过使用 DockPanel：

<Window x:Class="ImageWithText.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"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid Margin="5">

        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

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

        <DockPanel>

            <Label Content="This is a label" HorizontalAlignment="Center" DockPanel.Dock="Top"/>

            <Image x:Name="MainImage"
               Stretch="Uniform"
               DockPanel.Dock="Top">
                <Image.Source>
                    <BitmapImage UriSource="test.jpg"/>
                </Image.Source>
            </Image>

            <TextBlock Margin="5"
                   HorizontalAlignment="Center"
                   DockPanel.Dock="Top">
                    <Run Text="Some text "/>
                    <Run Text="Some more text"/>
            </TextBlock>

        </DockPanel>

    </Grid>
</Window>

但如果窗口不够大，则标题不可见。

我已经尝试了 LastChildFill 的两个选项，但没有任何区别。有谁知道如何完成这项工作？

Answer 1

您的内部网格被拉伸以填充整个外部网格。由于内部网格中的中间行是唯一具有可变大小的行，因此它会垂直扩展，但是由于图像默认为“Stretch”=“Uniform”，它只填充了中间行的一定量并且垂直在它所在行的中间对齐。

这应该对其进行排序：

<Grid Margin="5">
        <Grid x:Name="LayoutGrid" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center">            
            <Grid.RowDefinitions>
                <RowDefinition Height="auto"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="auto"/>
            </Grid.RowDefinitions>

            <Label Content="This is a label" 
               HorizontalAlignment="Center"
               VerticalAlignment="Bottom"
               Grid.Row="0"/>

        <Image x:Name="MainImage"
               Stretch="Uniform"
               Grid.Row="1">
            <Image.Source>
               <BitmapImage UriSource="test.jpg"/>
            </Image.Source>
        </Image>

        <TextBlock HorizontalAlignment="Center"
                   VerticalAlignment="Top"
                   Grid.Row="2">
                <Run Text="Some text "/>
                <Run Text="Some more text"/>
        </TextBlock>

    </Grid>
</Grid>

调试此类问题的一个好方法是设置各种元素的背景颜色以查看它们所占据的区域。

编辑以反映评论

Answer 2

您需要将网格行定义反转为：

<Grid.RowDefinitions>
    <RowDefinition Height="*"/>
    <RowDefinition Height="auto"/>
    <RowDefinition Height="*"/>
</Grid.RowDefinitions>

这是因为你的中间网格被拉伸到剩下的任何区域，所以你会得到两个标签都在图像远端的印象。