Размер изображения пропорционален изображению позади / под собой?

Question

У нас есть простая страница. Он содержит ListView и Grid. grid содержит два Images ...

Эти два изображения по отдельности представляют собой серый прямоугольник и белую трапецию.

Когда мы накладываем прямоугольник на трапецию, размеры / масштаб изображения (не знаю, какие) не совсем верно. Желание состоит в том, чтобы наложить его таким образом, чтобы изображения выстраивались в линию как ..

Реализация теперь состоит из двух изображений, добавленных в сетку с одной строкой и один столбец. RowDefinition и ColumnDefinition установлены на (один) 1 и автоматически. Для обоих изображений установлено значение CenterAndExpand как для Horziontal, так и для параметра Vertical.

Существует ли способ изменить размер нашего второго изображения (серый прямоугольник), которое накладывается на наше первое изображение (белая трапеция), чтобы что прямоугольник выровнен с трапецией? В настоящее время идея состоит в том, чтобы поиграться с определениями сетки и выровнять ее, используя поля / отступы, но уверен, что это решение не будет переводиться на дисплеи различных размеров устройства.

Как всегда, спасибо за чтение. Очень ценится.

Answer 1

Есть много решений, которые могут это реализовать. Так как вы использовали Grid. Вам лучше установить высоту строки в качестве значения c, чтобы высота изображения соответствовала строке.

Вы можете проверить следующий код

<Grid BackgroundColor="Black">

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

   <Grid.ColumnDefinitions>
       <ColumnDefinition Width=".20*" />
       <ColumnDefinition Width=".30*" />
       <ColumnDefinition Width=".30*" />
       <ColumnDefinition Width=".20*" />
   </Grid.ColumnDefinitions>

   <Image Grid.Column="0" Grid.ColumnSpan="4" Source="pic1" Aspect="AspectFill"/> //white trapezoid
   <Image Grid.Column="1" Grid.ColumnSpan="2" Source="pic2" Aspect="AspectFill"/> //grey rectangle

</Grid>

Для другого устройства вам просто нужно изменить значение высоты (привязка данных).