如何將圖像添加到 WPF C# XAML 應用程序中的列

Question

我是 C# 和 WPF 開發的新手，我正在開發一個編碼和解碼位圖的程序。 我有以下 XAML 代碼及其預期的 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>

我想要做的是在網格的兩列上添加一個圖像，以便我可以顯示圖像是相同的，但也在下面顯示 bitmap 中的編碼和解碼消息是為了顯示編碼實際上是在職的。 我不確定如何在不將圖像作為網格背景的情況下將圖像添加到列中，並且還要保持網格的完整性。

此外，關於如何在網格列的右下角顯示輸入數據的一些額外指示也會有所幫助。 我對這個特定程序所做的大部分谷歌搜索都讓我感到困惑，我想知道是否有一種標准的方法來處理它。

Answer 1

您可以通過多種方式實現這一點，其中一種方式如下

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