在网格内调整图像大小 - WPF

Question

我必须以中心图像的左端视图或右端视图的双倍宽度显示三幅图像。左端和右端的图像源大小为 335x377，中间图像源的大小为 403x226。

  <Grid x:Name="LayoutRoot" Background="Black">

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

       <Grid.ColumnDefinitions>          
       <ColumnDefinition Width="0.5*" ></ColumnDefinition>
       <ColumnDefinition Width="*" ></ColumnDefinition>
       <ColumnDefinition Width="0.5*" ></ColumnDefinition>
       </Grid.ColumnDefinitions>

       <StackPanel Grid.Row="0" Grid.Column="0" HorizontalAlignment="Center" Background="Blue" VerticalAlignment="Center" >
        <Image Name="ImageViewer1"  Stretch="None" />
       </StackPanel>
       <StackPanel Grid.Row="0" Grid.Column="1" HorizontalAlignment="Center" Background="Yellow" VerticalAlignment="Center"  >
        <Image Name="ImageViewer2"    Stretch="None" />
       </StackPanel>
      <StackPanel Grid.Row="0" Grid.Column="2" HorizontalAlignment="Center" Background="Red" VerticalAlignment="Center"  >
        <Image Name="ImageViewer3"   Stretch="None" />
      </StackPanel>

  </Grid

我需要定义 'ImageViewer' 的大小才能实现吗？

Answer 1

除非图片宽度与列宽不完全匹配，否则设置

显然是错误的

<Image Stretch="None" ... />

您可以设置

<Image Stretch="Uniform" ... />

使左右图像水平填充它们的列，或者

<Image Stretch="UniformToFill" ... />

使它们也填充行高，但在它们的两侧切掉一点。

您还可以删除 StackPanel：

<Grid>
    ...
    <Image x:Name="ImageViewer1" Grid.Column="0" Stretch="UniformToFill" />
    <Image x:Name="ImageViewer2" Grid.Column="1" Stretch="UniformToFill" />
    <Image x:Name="ImageViewer3" Grid.Column="2" Stretch="UniformToFill" />
</Grid>

在网格内调整图像大小 - WPF

Resize Images inside grid - WPF

c#

wpf

grid

xaml