Блог

Главная - Вопросы по программированию - Изменение размера изображений внутри сетки — WPF

Изменение размера изображений внутри сетки — WPF

#c# #wpf #xaml #grid

#c# #wpf #xaml #сетка

Вопрос:

Я должен показать три изображения таким образом, чтобы центральное изображение имело двойную ширину левого или правого конечных видов. Источник изображения в левом и правом конце имеет размер 335×377, а центральный источник изображения имеет размер 403×226.

   <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’ для достижения этой цели?

Комментарии:

1. Попробуйте установить Stretch для свойства значение UniformToFill .

Ответ №1:

Если ширина изображения не более или менее точно не соответствует ширине столбца, очевидно, неправильно устанавливать

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

Вы бы либо установили

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

чтобы левое и правое изображения заполняли свои столбцы по горизонтали, или

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

чтобы они также заполняли высоту строки, но немного обрезали их по бокам.

Вы также можете удалить панели стека:

 <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>
Метки: