Я пытаюсь настроить размер Image
на ширину родительского контейнера в BindableLayout
, но не нашел способа добиться этого.
Для этого я использую другую тему.
Сначала я попытался встроить Image
в контейнер Grid
следующим образом:
<StackLayout x:Name="NewsList"
BindableLayout.ItemsSource="{Binding News}">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Frame>
<Grid Padding="0" Margin="0"
VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"
BackgroundColor="Red">
<Image Source="{Binding Image}" Aspect="AspectFit"/>
</Grid>
<Label Text="Description" />
</Frame>
</DataTemplate>
</BindableLayout>
</StackLayout
=› но мы видим, что вокруг изображений появляются красные полосы (сверху/снизу или слева/справа): < /а>
Затем я попытался использовать CachedImage
из FFImageLoading
следующим образом:
<Grid Padding="0" Margin="0"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
BackgroundColor="Orange">
<ffimageloading:CachedImage Source="{Binding Image}"
HorizontalOptions="Fill"
VerticalOptions="Fill"
Aspect="AspectFill"
DownsampleToViewSize="True"/>
</Grid>
=› но в этом случае изображения видны не полностью или обрезаны
=› Есть ли другой способ, позволяющий мне отобразить изображение во всю ширину родительского контейнера и сохранить исходное соотношение сторон?
Обновление 1:
Отображаемые изображения взяты из сообщений Facebook. Вот четвертые изображения, которые отображаются:
- https://scontent-cdt1-1.xx.fbcdn.net/v/t1.0-9/s720x720/118713552_3623822074306674_9076571821151026884_n.jpg?_nc_cat=110&_nc_sid=110474&_nc_ohc=8xcbXj0tf5IAX-b_jE9&_nc_ht=scontent-cdt1-1.xx&tp=7&oh=60af4b756944856e28327736fd542c65&oe=5F98D58D
- https://scontent-cdg2-1.xx.fbcdn.net/v/t15.13418-10/96415113_248439429597332_6367448024599232512_n.jpg?_nc_cat=100&_nc_sid=ad6a45&_nc_ohc=2jBGHupMA20AX-8Y-M8&_nc_ht=scontent-cdg2-1.xx&oh=918470153ca23c927b921b2f1a61d4a5&oe=5F97D9C7
- https://scontent-cdg2-1.xx.fbcdn.net/v/t15.5256-10/95397765_284933452664428_1743250590344937472_n.jpg?_nc_cat=111&_nc_sid=ad6a45&_nc_ohc=LWajKszkHiMAX-sqkeZ&_nc_oc=AQmqjn5ykjy2tYfmRvpQChhtdsJZgk9_Smn3oU9weGt5xe9QY4933u_sNV1qAnZrIFc&_nc_ht=scontent-cdg2-1.xx&oh=c93af2de18eb417b224d8ea211197cda&oe=5F98A096
- https://scontent-cdg2-1.xx.fbcdn.net/v/t1.0-9/s720x720/95921743_3263337923688426_3234683279575613440_o.jpg?_nc_cat=102&_nc_sid=8024bb&_nc_ohc=AkRxtEdIyU8AX99QWmR&_nc_ht=scontent-cdg2-1.xx&tp=7&oh=6dc746bd0ea30097aee78f57a6395fb4&oe=5F980B69
Обновление 2:
Я пробовал решение, данное @Leo:
<StackLayout Orientation="Vertical" x:DataType="model:News">
<Image Source="{Binding Image}" Aspect="AspectFill"/>
<Label Text="Description" />
</StackLayout>
Но результат все равно плохой, так как первое и четвертое изображения обрезаны:
AspectFit
: оставить пустым, как ваше первое изображение. 2.AspectFill
: полная ширина с зажимом, как у второго. 3.Fill
: полная ширина с неправильным радио. (Или отредактируйте свое изображение, чтобы оно соответствовало вашему макету, если это то, что вы преследуете.) - person Shaw   schedule 28.09.2020