Question

我有图像和3个文本块。我想要左侧放置图像，右侧放置3个TextBlock。我试过这个：

<Grid x:Name="Grid">
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Image Grid.RowSpan="3" 
                Source="image.jpg" Stretch="Uniform" HorizontalAlignment="Left" VerticalAlignment="Top"/>
            <TextBlock Grid.Column="1" 
                Text="11"
                FontSize="25"/>
            <TextBlock Grid.Column="1" 
                Grid.Row="1"
                Text="22"/>
            <TextBlock Grid.Column="1" 
                Grid.Row="2"
                Text="33" FontSize="14"/>
        </Grid>

但是当图像很大时，我在行之间有很大的空间。我怎么能这样做？

Answer 1

如果您希望图像保持其大小...只需删除网格行并将TextBlocks抛出到垂直StackPanel中。

如果你想调整你的图像大小以使其与3个TextBlocks具有相同的高度...你可以将图像的高度绑定到你放置TextBlocks的任何容器的ActualHeight，如下所示：

 <Grid x:Name="Grid">
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Image Height="{Binding ActualHeight, ElementName=myStackPanel}" Source="image.jpg" Stretch="Uniform" HorizontalAlignment="Left" VerticalAlignment="Top"/>
    <StackPanel Grid.Column="1">
        <StackPanel Name="myStackPanel">
            <TextBlock Text="11" FontSize="25"/>
            <TextBlock Text="22"/>
            <TextBlock Text="33" FontSize="14"/>
        </StackPanel>
    </StackPanel>
</Grid>

Answer 2

我会尝试制作一个包含1行和2列的网格。

在第一列中，我会放置图像。

在第二列中，我将放置一个垂直流动的堆栈面板。然后将文本块添加到堆栈面板。

高度图像的高度图像

2 个答案: