如何将图像添加到 WPF C# XAML 应用程序中的列

Question

I am new to C# and WPF development, and I am working on a program that encodes and decodes bitmaps. I have the following XAML code and its expected output:

<Page x:Class="Thompson_EncodeDecode.BeforeDecoding"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
  xmlns:local="clr-namespace:Thompson_EncodeDecode"
  mc:Ignorable="d" 
  d:DesignHeight="450" d:DesignWidth="800"
  Title="BeforeDecoding">

<Grid Margin="10,0,10,10">
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Border Grid.Column="0" Height="35" Padding="5" Background="White">
        <Label VerticalAlignment="Center" Foreground="Black">Before Encoding</Label>
    </Border>
    <Border Grid.Column="1" Height="35" Padding="5" Background="White">
        <Label VerticalAlignment="Center" Foreground="Black"> After Encoding</Label>
    </Border>
</Grid>

What I am trying to do is add an image onto both columns of the grid so that I can show that the images are the same, but also below that show what the encoded and decoded message within the bitmap is to show that the encoding is actually working. I am unsure how to add an image to the column without either making the image the background for the grid, and also maintaining the Grid integrity.

Also some extra pointers on how to have the input data shown on the bottom right of the grid column would be helpful too. Most of the Googling I have been doing regarding this particular program has confused me, and I am wondering if there is a standard way of approaching it.

Answer 1

You can achieve this in many ways, one of the way is as follows

<Grid Background="Gray">
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>

    <!-- U can move this duplicate code into an usercontrol to reuse-->
    <Grid Grid.Column="0">
        <Grid.RowDefinitions>
            <!--Header-->
            <RowDefinition Height="1*"/>
            <!--Body-->
            <RowDefinition Height="8*"/>
            <!--Footer-->
            <RowDefinition Height="1*"/>
        </Grid.RowDefinitions>

        <Label Content="Header" Grid.Row="0"/>
        <Image Grid.Row="1"/>
        <Label Content="footer" Grid.Row="2" HorizontalContentAlignment="Right"/>


    </Grid>

    <Grid Grid.Column="1">
        <Grid.RowDefinitions>
            <!--Header-->
            <RowDefinition Height="1*"/>
            <!--Body-->
            <RowDefinition Height="8*"/>
            <!--Footer-->
            <RowDefinition Height="1*"/>
        </Grid.RowDefinitions>

        <Label Content="Header" Grid.Row="0"/>
        <Image Grid.Row="1"/>
        <Label Content="footer" Grid.Row="2" HorizontalContentAlignment="Right"/>

    </Grid>

</Grid>