Image alignment in UWP is wrong (left instead of center). Workaround?

This problem has been reported in the bug

Does anyone have an easy workaround? (easy meaning not having to rewrite the entire UI structure around the image.)

And how do we get the Xamarin team to fix this bug? It is marked with importance normal major and should be quite easy fi fix. Still it have been laying there since December 2016 with seemingly no progress at all.




  • ShantimohanElchuriShantimohanElchuri USMember ✭✭✭✭✭

    @JimmiBendtson Keeping the bug business aside, what is your code or xaml with respect to the Image view in question?

  • JimmiBendtsonJimmiBendtson USMember ✭✭

    Well it is quite simple:

    <?xml version="1.0" encoding="utf-8" ?>

    You can easily test this out yourselves and compare Android with UWP. Make sure that image.png is taller than it is wide.

    In my app I have the following: An image control with fixed size as above that should show images with different (and unknown) aspect ratios. The image content should be centered in the Image control. It is centeret on both Android and iOS, but in UWP the image content is left aligned.


  • JimmiBendtsonJimmiBendtson USMember ✭✭

    OK posting code did not go that well. Trying again:

            <ContentPage xmlns=""
                <Image x:Name="_iconImage" HorizontalOptions="Center" VerticalOptions="Center" WidthRequest="200" HeightRequest="200" BackgroundColor="Gray" Source="image.png"/>
  • JimmiBendtsonJimmiBendtson USMember ✭✭

    No response to this?

    Can someone from the Xamarin team please comment on this, give a status on the bug progress and suggest workaround?


  • NMackayNMackay GBInsider, University mod
    edited August 2017


    Firstly have you tested with Forms 2.3.5-pre6 to make sure it's still happening?

    If you want the team to look at something that's fallen through the to fix list maybe try pestering then on the pre-release thread, posting a general thread like this will not get noticed. You need to test with the latest pre release 1st though.

    Until it's fixed you could either try using the FFImageLoading plugin instead

    Alternatively try playing about with different layout options using OnPlatform, I noticed some weirdness with image layouts in a listview template before in UWP.

    Alternative maybe try using AbsoluteLayout to take care of centering the image in the page if there's a bug in the UIElements layout calculations.

    Something that will work for you is to use a grid instead, I tested this on an Android and a Lumia 650 handset and the image centered correctly. Tested with Forms

    <Grid RowSpacing="0" ColumnSpacing="0">
                <ColumnDefinition Width="*"></ColumnDefinition>
                <ColumnDefinition Width="Auto"></ColumnDefinition>
                <ColumnDefinition Width="*"></ColumnDefinition>
                <RowDefinition Height="*"></RowDefinition>
                <RowDefinition Height="Auto"></RowDefinition>
                <RowDefinition Height="*"></RowDefinition>
            <Image Grid.Row="1" Grid.Column="1" Source="image.png" HeightRequest="200" WidthRequest="200"></Image>

    If something in the framework isn't working correctly you can usually work around it with with a different approach.

  • JimmiBendtsonJimmiBendtson USMember ✭✭

    Thanks for your recommendation

    This is an large existing app that we are now creating an UWP version of either.

    As I mention in my first post I will prefer not to rewrite the UI stucture of the application. It will be a lot of work going over the 10 to 20 places where we show images and redesign the UI. Therefore this should be fixed at the root of the problem.

    I'll test the prerelease and will also take a look at FFImageLoading to see it thats an easy fix.

  • NMackayNMackay GBInsider, University mod

    "Therefore this should be fixed at the root of the problem"

    I do believe that's known as a perfect world scenario :)

    Hopefully 235-pre6 fixes your issue, it fixes a lot of UWP issues including using binding in a page title nested in a navigation page.,

Sign In or Register to comment.