如何在Xamarin Forms中保持图像的正常高度的同时使用它的全宽度？

Question

Having big problems to fit an image to the screen width while keeping it's normal height. I gather different images from my database (depending on what you clicked previously) and therefor the image height/width are different all the time. How can I make so the image always fills the screen width while keeping it's normal height?

Right now some images fill the width while keeping it's normal height while some images does not.

What I have tried:

AspectFill crops out parts of the image so this solution does not work.

Fill stretches the image which also is not a good solution.

theimage.WidthRequest = App.ScreenWidth; I also tried to do this to fix the issue and I get the ScreenWidth from the AppDelegete but theimagedoes not change it's width at all.

I also then tried to add a grid.column like this:

<Grid.RowDefinitions>

<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition x:Name = "width"/>

</Grid.ColumnDefinitions>

<Image x:Name="theimage" Grid.Row="1" Grid.Column = "0"  HorizontalOptions = "StartAndExpand" VerticalOptions = "StartAndExpand" />

And connecting it in the code like this:

width.Width = App.ScreenWidth;

But some of the images remains the same and does not fill the screen width.

Do I have to do a custom renderer in order to sucesssfully make an image fill the screens width while keeping it's normal height?

This is the current code I have (that i have changed a million times with the code examples i have above):

<ScrollView HorizontalOptions = "FillAndExpand" VerticalOptions = "FillAndExpand" >
<StackLayout HorizontalOptions = "FillAndExpand" VerticalOptions = "FillAndExpand">
<Grid>

<Grid.RowDefinitions>

    <RowDefinition Height="Auto"/>
    <RowDefinition Height="100"/>

</Grid.RowDefinitions>

<StackLayout Grid.Row="0" BackgroundColor = "Red" HorizontalOptions = "FillAndExpand" VerticalOptions = "FillAndExpand">

    <Image Grid.Row="1"  x:Name="theimage" Aspect = "AspectFit"  HorizontalOptions = "FillAndExpand" VerticalOptions = "FillAndExpand" />

    <Button Clicked="clickFunc" TextColor="White" Grid.Row="1" HeightRequest="80" WidthRequest="120" BorderRadius="40" HorizontalOptions="End" VerticalOptions="Start" />

<StackLayout Grid.Row="1" Padding="10,20,10,0">

    <Label TextColor = "#474747" x:Name="title" Text="" HorizontalOptions="Start" FontFamily="Helvetica Neue" FontAttributes="Bold" />

</StackLayout>
</StackLayout>
</Grid> 
</StackLayout>
</ScrollView>

I am running out of ideas to solve this issue now. Do I have to do a renderer in order to make it work?

Answer 1

best option is for you to learn how to use MVVM.(steep but worth the experience)

what you can do is

View

<Image Source="{Binding ImageSource,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged }" Width="100" Height="{Binding SourceImageHeight,Mode=OneWay,UpdateSourceTrigger=PropertyChanged}"></Image>

Using this you can Set the values of Xaml properties inside a ViewModel(class) which allows your code to be VERY dynamic.

View Code Behind (setting the datacontext(can also be set inside the view))

InitializeComponent();
viewModel = new YourViewModel();
this.DataContext = viewModel;

ViewModel

public class YourViewModel
{
  private String _imageSource = "";

  public String ImageSource
  {
   get{return _imageSource;}
   set{_imageSource = value;
       NotifyPropertyChanged(m => m.ImageSource);
      }
  }

  private Int _sourceImageHeight = 0;

  public Int SourceImageHeight 
  {
   get{return _sourceImageHeight ;}
   set{_sourceImageHeight = value;
       NotifyPropertyChanged(m => m.SourceImageHeight);
      }
  }
}

all you have to do from here is

ImageSource = ImageLocation

and

SourceImageHeight = 1200

Note: In the Viewmodel, if you dont use the private variables(_imageSource/_sourceImageHeight) and rather use the public Variable name(ImageSource/SourceImageHeight) in the setter, you will create an Infinite Loop.