Bug 47962 - [UWP] ImageCell image is not sized correctly
Summary: [UWP] ImageCell image is not sized correctly
Status: CONFIRMED
Alias: None
Product: Forms
Classification: Xamarin
Component: Windows ()
Version: 2.3.3
Hardware: PC Windows
: Normal normal
Target Milestone: ---
Assignee: Bugzilla
URL:
: 57869 ()
Depends on:
Blocks:
 
Reported: 2016-11-25 14:07 UTC by rjcollingham
Modified: 2017-07-24 18:13 UTC (History)
6 users (show)

Tags: ac, uwp, image
Is this bug a regression?: ---
Last known good build:


Attachments
ImageCellDemoPage.cs (1.40 KB, text/plain)
2016-11-25 14:07 UTC, rjcollingham
Details
Screenshot of Android and UWP (213.10 KB, image/png)
2016-11-25 14:11 UTC, rjcollingham
Details


Notice (2018-05-24): bugzilla.xamarin.com is now in read-only mode.

Please join us on Visual Studio Developer Community and in the Xamarin and Mono organizations on GitHub to continue tracking issues. Bugzilla will remain available for reference in read-only mode. We will continue to work on open Bugzilla bugs, copy them to the new locations as needed for follow-up, and add the new items under Related Links.

Our sincere thanks to everyone who has contributed on this bug tracker over the years. Thanks also for your understanding as we make these adjustments and improvements for the future.


Please create a new report for Bug 47962 on Developer Community or GitHub if you have new information to add and do not yet see a matching new report.

If the latest results still closely match this report, you can use the original description:

  • Export the original title and description: Developer Community HTML or GitHub Markdown
  • Copy the title and description into the new report. Adjust them to be up-to-date if needed.
  • Add your new information.

In special cases on GitHub you might also want the comments: GitHub Markdown with public comments

Related Links:
Status:
CONFIRMED

Description rjcollingham 2016-11-25 14:07:04 UTC
Created attachment 18676 [details]
ImageCellDemoPage.cs

UWP ImageCell image is not sized correctly. I used the ImageCell example code from your documentation (https://developer.xamarin.com/api/type/Xamarin.Forms.ImageCell/).

Steps to reproduce

1) Create a new Xamarin Forms blank project shared
2) Add ImageCellDemoPage.cs to shared project (see attached)
3) in App.cs change to be 

             MainPage = new ImageCellDemoPage();

4) Run on Android - works perfectly
5) Run on UWP - the image is huge

Thanks
Comment 1 rjcollingham 2016-11-25 14:11:48 UTC
Created attachment 18677 [details]
Screenshot of Android and UWP
Comment 2 Lee McPherson 2017-02-12 03:54:31 UTC
If you look at the source for UWP ImageCell, there are no limits to the height.  So if your image is large, it's going to stretch the Grid that the ImageCell is made of.

I had to create my own ImageCellRenderer  on the UWP side and use my own DataTemplate for the ImageCell.


[assembly: ExportRenderer(typeof(ImageCell), typeof(CustomImageCellRenderer))]
namespace AppNamespace.UWP
{

    public class CustomImageCellRenderer : ImageCellRenderer
    {
        public override Windows.UI.Xaml.DataTemplate GetTemplate(Cell cell)
        {           
            var fixedTemplate = (Windows.UI.Xaml.DataTemplate)App.Current.Resources["ImageCellFixed"];
         
            return fixedTemplate;
        }
    }
}

In your UWP App.xaml:

  <Application.Resources>
        <ResourceDictionary >

            <forms:ImageConverter x:Key="ImageConverter"/>

            <DataTemplate x:Key="ImageCellFixed">
                <Grid Margin="5,5,5,5">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>

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

                    <Image Grid.Column="0" Grid.RowSpan="2"
            				DataContext="{Binding ImageSource, Converter={StaticResource ImageConverter}}"
			            	Source="{Binding Value}"
				            VerticalAlignment="Center" 
                           Stretch="UniformToFill" 
                           Height="60"
                           Margin="0,0,10,0"/>

                    <TextBlock Grid.Column="1" Grid.Row="0"
                				Text="{Binding Text}"
                				Style="{ThemeResource BaseTextBlockStyle}"
				                Visibility="{Binding Text,RelativeSource={RelativeSource Self}, Converter={StaticResource CollapseWhenEmpty}}"
				                Foreground="{Binding TextColor, Converter={StaticResource ColorConverter}, ConverterParameter=DefaultTextForegroundThemeBrush}" />

                    <TextBlock Grid.Column="1" Grid.Row="1"
            				Text="{Binding Detail}"
            				Style="{ThemeResource BodyTextBlockStyle}"
            				Visibility="{Binding Text,RelativeSource={RelativeSource Self}, Converter={StaticResource CollapseWhenEmpty}}"
            				Foreground="{Binding DetailColor, Converter={StaticResource ColorConverter}, ConverterParameter=DefaultTextForegroundThemeBrush}"
            				x:Name="detail" />
                </Grid>

            </DataTemplate>

        </ResourceDictionary>
    </Application.Resources>
Comment 3 Lee McPherson 2017-02-12 03:55:13 UTC
don't forget this reference at the top of App.xaml:

 xmlns:forms="using:Xamarin.Forms.Platform.UWP"
Comment 4 Lee McPherson 2017-02-13 01:23:23 UTC
submitted a PR for this...
Comment 5 Rui Marinho 2017-02-20 15:27:57 UTC
https://github.com/xamarin/Xamarin.Forms/pull/760
Comment 6 David Ortinau [MSFT] 2017-06-16 22:05:05 UTC
Not sure this is the way to go as this appears to be default UWP behavior and we need to respect that. That said, Samantha will revisit this issue and we'll decide how Xamarin.Forms should handle it.
Comment 7 Jimmy [MSFT] 2017-07-24 18:13:03 UTC
*** Bug 57869 has been marked as a duplicate of this bug. ***