WPF Image in grid with label and caption

Question

I've been struggling with placing an image with a label above and a caption below in a grid. What I would like to get is the top label aligned in the middle right above the image, and the bottom label right beneath the image like this:

But what I actually get is this:

I've used the following code in my view:

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

I've also tried using a 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>

But then the caption is not visible if the window is not large enough.

I've tried both options for LastChildFill, but it made no difference. Does anyone know how to get this done?

Answer 1

Your inner grid is being stretched to fill the entirety of the outer grid. As the middle row in the inner grid is the only row with variable sizing it is then being expanded vertically but, as the image defaults to "Stretch" = "Uniform", it is only filling a certain amount of the middle row and being vertically aligned in the middle of it's row.

This should sort it:

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

A good way of debugging this kind of issue is to set background colour of various elements to see the areas they're occupying.

Edited to reflect comment

Answer 2

You need to invert the grid row definition to:

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

This is because your middle grid is being stretched to whatever the area is left so zou get the imperssion that both labels are on the far parts of the image.