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

Ваша внутренняя сетка растягивается, чтобы заполнить всю внешнюю сетку. Поскольку средний ряд во внутренней сетке является единственной строкой с переменным размером, он затем расширяется по вертикали, но, поскольку изображение по умолчанию имеет значение «Растянуть» = «Унифицированный», оно заполняет только определенное количество среднего ряда и имеет вертикальную ориентацию. выровнены по середине строки.

Это должно отсортировать это:

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

Это потому, что ваша средняя сетка растянута до любой оставшейся области, так что вы получите впечатление, что обе метки находятся на дальней части изображения.