Forum Xamarin.Forms

How do I fix the size of an image?

FB123FB123 CAMember ✭✭

I'm trying to set the height and width of my image and have it a fixed size however if I shrink the container (frame, stackpanel, grid, etc...) the image shrinks along with it. I would have assumed setting the height and width (WidthRequest, HeightRequest, MinimumHeightRequest, MinimumWidthRequest) would have forced the image to remain the set size... however it doesn't/

What am I missing>?

Best Answers

Answers

  • ThomasBurkhartThomasBurkhart DEMember ✭✭✭✭

    Hi Fraser,
    without any Xaml or code of your view it's like looking into a crystal ball. Please post it here otherwise it's hard to help

  • FB123FB123 CAMember ✭✭
    edited May 2016
      public ImagePage()
            {
                Title = "ImagePage";
                BackgroundColor = Color.Yellow;
    
                img = new Image()
                {
                    Source = "picture.png", //a 600x600 picture
                    WidthRequest = 600,
                    HeightRequest = 600,
                    MinimumHeightRequest = 600,
                    MinimumWidthRequest = 600,
                    VerticalOptions = LayoutOptions.End,
                    HorizontalOptions = LayoutOptions.End,
                    Aspect = Aspect.AspectFill//.AspectFit//.Fill  
                };
    
                Content = img;
    
                //Content = new ContentView
                //{
                //    VerticalOptions = LayoutOptions.CenterAndExpand,
                //    HorizontalOptions = LayoutOptions.CenterAndExpand,
                //    BackgroundColor = Color.Green,
                //    WidthRequest = 600,
                //    HeightRequest = 600,
                //    Padding = new Thickness(20),
                //    Content = img
                //};
    
    
            }
    
  • WiktorKonckiWiktorKoncki USMember ✭✭

    @FraserBaldwin You have to understand how size negotiations work. Setting height and width request is not a command, it's a humble request. That means your image will be of this size but only if the layout that contains this image has the space for it. If you have a grid layout that is 200x200 and image that you request to be 300x300, the result will be an image of only 200x200. This behaviour can only be avoided using AbsoluteLayout and setting it's IsClippedToBounds property to false. This will actually draw image outside if it's parent layout if the layout is to small. Hope This helps.

  • FB123FB123 CAMember ✭✭

    Unfortunately it seems that the IsClippedToBounds = false only draws the image vertically outside it's parent and not horizontally...

  • FB123FB123 CAMember ✭✭

    Totally get it, and the end goal is to have that, however I want to ideally set the Aspect of the image to be "Fill/Fit" where the height is always being filled and it crops or letterboxes only on the width.

  • FB123FB123 CAMember ✭✭

    and to add another additional layer of complexity, the image needs to be always right aligned....

  • FB123FB123 CAMember ✭✭

    So close. It is actually the solution to the original question posted on this thread (the issue I had was I didn't set the stack layout orientation to horizontal)
    However it seems that the HorizontalOptions LayoutOption.EndAndExpand is ignored and is just acting as Start.

  • WiktorKonckiWiktorKoncki USMember ✭✭

    @FraserBaldwin
    Ok, then try to add another transparent view to the beginning of the stack and set it's option to start and expand, then remove horizontal option for image. This should do the trick. You may also try using Grid with */Auto sized columns for stuff like this. Everybody moves from simple layouts to grid eventually, especially now, after they added margin property.

  • SuplanusSuplanus Member ✭✭

    I solved this in my case "want to display images with the same width and heigt in listview item":

    <StackLayout Orientation="Horizontal"  HeightRequest="48" Grid.Column="0">
        <Image Source="{Binding Image}" WidthRequest="72" Aspect="Fill"  />    
    </StackLayout>
    
  • hvaughanhvaughan USMember ✭✭✭
    edited January 2

    @Suplanus said:
    I solved this in my case "want to display images with the same width and heigt in listview item":

    <StackLayout Orientation="Horizontal"  HeightRequest="48" Grid.Column="0">
        <Image Source="{Binding Image}" WidthRequest="72" Aspect="Fill"  />    
    </StackLayout>
    

    This finally fixed my issue. Trying to show a background image across the screen but the image was not filling the full height of an iPhone 11 Pro Max for example. Putting the Image within a StackLayout that was within an AbsoluteLayout and setting Aspect="AspectFill" and VerticalOptions="FillAndExpand" on the Image fixed the issue.

    <AbsoluteLayout>
      <StackLayout AbsoluteLayout.LayoutBounds="0,0,1,1"
                   AbsoluteLayout.LayoutFlags="All">
          <Image Aspect="AspectFill"
                 Source="diamond"
                 VerticalOptions="FillAndExpand"/>
      </StackLayout>
    </AbsoluteLayout>
    
  • jonathannicholsjonathannichols USMember ✭✭
    edited March 13

    You can set the height to whatever you want and the width will follow, but not the other way around, use this:
    var imgGrid = new Grid() { VerticalOptions = LayoutOptions.StartAndExpand, HorizontalOptions = LayoutOptions.CenterAndExpand, Margin = new Thickness(0, 20, 0, 20) };

    imgGrid.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto });

    imgGrid.ColumnDefinitions.Add(new ColumnDefinition { Width = GridLength.Auto });

    var image = new CachedImage() { Source = question.Image, Aspect = Aspect.AspectFill, HorizontalOptions = LayoutOptions.CenterAndExpand, VerticalOptions = LayoutOptions.FillAndExpand, HeightRequest = Application.Current.MainPage.Width * 0.5 }; imgGrid.Children.Add(image);

Sign In or Register to comment.