Bug 28289 - RowDefinition=Auto + Image (with HeightRequest and WidthRequest defined) doess not play well in iOS
Summary: RowDefinition=Auto + Image (with HeightRequest and WidthRequest defined) does...
Status: RESOLVED NORESPONSE
Alias: None
Product: Forms
Classification: Xamarin
Component: Forms ()
Version: 1.4.1
Hardware: PC Windows
: Normal normal
Target Milestone: ---
Assignee: Bugzilla
URL:
Depends on:
Blocks:
 
Reported: 2015-03-21 06:41 UTC by saramgsilva
Modified: 2016-04-08 19:13 UTC (History)
4 users (show)

Tags: ios grid image
Is this bug a regression?: ---
Last known good build:


Attachments
The solution (177.78 KB, image/png)
2015-03-21 06:41 UTC, saramgsilva
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 on Developer Community or GitHub with your current version information, steps to reproduce, and relevant error messages or log files if you are hitting an issue that looks similar to this resolved bug and you do not yet see a matching new report.

Related Links:
Status:
RESOLVED NORESPONSE

Description saramgsilva 2015-03-21 06:41:26 UTC
Created attachment 10439 [details]
The solution

Hello,

I found a problem in Xamarin Forms when ran the iOS app.
I had RowDefinition set to Auto, my image was set HeightRequest =48 and WidthRequest=48, but my image has 48 x 48.


I have this code, which not worked propertly

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="ENEI.SessionsApp.View.SessionsView"
             xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:converters="clr-namespace:ENEI.SessionsApp.Converters;assembly=ENEI.SessionsApp"
             Title="ENEI 2015 Sessions"
             BackgroundColor="White">
    <ContentPage.Resources>
        <ResourceDictionary>
            <converters:FavoriteImageConverter x:Key="FavoriteImageConverter" />
        </ResourceDictionary>
    </ContentPage.Resources>
    <Grid BackgroundColor="White">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

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

        <Label FontSize="Large"
               HorizontalOptions="Center"
               TextColor="#0094FF">
            <Label.IsVisible>
                <OnPlatform Android="false"
                            WinPhone="true"
                            iOS="false"
                            x:TypeArguments="x:Boolean" />
            </Label.IsVisible>
            <OnPlatform Android=""
                        WinPhone="ENEI 2015 Sessions"
                        iOS=""
                        x:TypeArguments="x:String" />
        </Label>

        <ListView x:Name="SessionsList"
                  Grid.Row="1"
                  ItemSelected="SessionsList_OnItemSelected"
                  ItemsSource="{Binding Sessions}"
                  SeparatorColor="#0094FF">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <ViewCell.View>
                            <Grid x:Name="Main" BackgroundColor="Transparent" Padding="20,0,20,0">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="5" />
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="5" />
                                </Grid.RowDefinitions>
                                <Image Grid.Row="1"
                                       HorizontalOptions="StartAndExpand"
                                       Source="{Binding Speaker.ImageUrl}"
                                       VerticalOptions="Start">
                                    <Image.WidthRequest>
                                        <OnPlatform Android="50"
                                                    WinPhone="100"
                                                    iOS="50"
                                                    x:TypeArguments="x:Double" />
                                    </Image.WidthRequest>
                                    <Image.HeightRequest>
                                        <OnPlatform Android="50"
                                                    WinPhone="100"
                                                    iOS="50"
                                                    x:TypeArguments="x:Double" />
                                    </Image.HeightRequest>
                                </Image>

                                <StackLayout Grid.Row="1"
                                             Grid.Column="1"
                                             HorizontalOptions="FillAndExpand"
                                             Padding="10,0,0,0">

                                    <Label Font="Large"
                                           FontAttributes="Bold"
                                           Text="{Binding Name}"
                                           TextColor="Black" />

                                    <Label Font="Medium"
                                           LineBreakMode="TailTruncation"
                                           Text="{Binding Speaker.Name}"
                                           TextColor="Black" />
                                    <Label Font="Small"
                                           LineBreakMode="TailTruncation"
                                           Text="{Binding Date}"
                                           TextColor="Black" />
                                </StackLayout>

                                <Grid Grid.Row="2"
                                      Grid.Column="0"
                                      Grid.ColumnSpan="2"
                                      Padding="0,5,0,0">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*" />
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition Width="*" />
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition Width="*" />
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition Width="*" />
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition Width="*" />
                                    </Grid.ColumnDefinitions>
                                    <StackLayout Grid.Column="1" Orientation="Horizontal">
                                        <Image>
                                            <Image.WidthRequest>
                                                <OnPlatform Android="48"
                                                            WinPhone="48"
                                                            iOS="30"
                                                            x:TypeArguments="x:Double" />
                                            </Image.WidthRequest>
                                            <Image.HeightRequest>
                                                <OnPlatform Android="48"
                                                            WinPhone="48"
                                                            iOS="30"
                                                            x:TypeArguments="x:Double" />
                                            </Image.HeightRequest>
                                            <Image.Source>
                                                <OnPlatform x:TypeArguments="ImageSource">
                                                    <OnPlatform.iOS>
                                                        <FileImageSource File="ic_action_like.png" />
                                                    </OnPlatform.iOS>
                                                    <OnPlatform.Android>
                                                        <FileImageSource File="ic_action_like.png" />
                                                    </OnPlatform.Android>
                                                    <OnPlatform.WinPhone>
                                                        <FileImageSource File="Images/ic_action_like.png" />
                                                    </OnPlatform.WinPhone>
                                                </OnPlatform>
                                            </Image.Source>
                                            <Image.GestureRecognizers>
                                                <TapGestureRecognizer CommandParameter="{Binding}" Tapped="LikeGestureRecognizer_OnTapped" />
                                            </Image.GestureRecognizers>
                                        </Image>
                                        <Label Font="Small"
                                               Text="{Binding NumLikes}"
                                               TextColor="#0094FF"
                                               VerticalOptions="Center" />
                                    </StackLayout>
                                    <Image Grid.Column="3" Source="{Binding IsFavorite, Converter={StaticResource FavoriteImageConverter}}">
                                        <Image.WidthRequest>
                                            <OnPlatform Android="30"
                                                        WinPhone="48"
                                                        iOS="30"
                                                        x:TypeArguments="x:Double" />
                                        </Image.WidthRequest>
                                        <Image.HeightRequest>
                                            <OnPlatform Android="30"
                                                        WinPhone="48"
                                                        iOS="30"
                                                        x:TypeArguments="x:Double" />
                                        </Image.HeightRequest>
                                        <Image.GestureRecognizers>
                                            <TapGestureRecognizer x:Name="VoteGesture"
                                                                  CommandParameter="{Binding}"
                                                                  Tapped="VoteGestureRecognizer_OnTapped" />
                                        </Image.GestureRecognizers>
                                    </Image>
                                    <Image Grid.Column="5">
                                        <Image.WidthRequest>
                                            <OnPlatform Android="30"
                                                        WinPhone="48"
                                                        iOS="30"
                                                        x:TypeArguments="x:Double" />
                                        </Image.WidthRequest>
                                        <Image.HeightRequest>
                                            <OnPlatform Android="30"
                                                        WinPhone="48"
                                                        iOS="30"
                                                        x:TypeArguments="x:Double" />
                                        </Image.HeightRequest>
                                        <Image.Source>
                                            <OnPlatform x:TypeArguments="ImageSource">
                                                <OnPlatform.iOS>
                                                    <FileImageSource File="ic_action_share_2.png" />
                                                </OnPlatform.iOS>
                                                <OnPlatform.Android>
                                                    <FileImageSource File="ic_action_share_2.png" />
                                                </OnPlatform.Android>
                                                <OnPlatform.WinPhone>
                                                    <FileImageSource File="Images/ic_action_share_2.png" />
                                                </OnPlatform.WinPhone>
                                            </OnPlatform>
                                        </Image.Source>
                                        <Image.GestureRecognizers>
                                            <TapGestureRecognizer x:Name="ShareGesture"
                                                                  CommandParameter="{Binding}"
                                                                  Tapped="ShareGesture_OnTapped" />
                                        </Image.GestureRecognizers>
                                    </Image>
                                    <Image Grid.Column="7">
                                        <Image.WidthRequest>
                                            <OnPlatform Android="30"
                                                        WinPhone="48"
                                                        iOS="30"
                                                        x:TypeArguments="x:Double" />
                                        </Image.WidthRequest>
                                        <Image.HeightRequest>
                                            <OnPlatform Android="30"
                                                        WinPhone="48"
                                                        iOS="30"
                                                        x:TypeArguments="x:Double" />
                                        </Image.HeightRequest>
                                        <Image.Source>
                                            <OnPlatform x:TypeArguments="ImageSource">
                                                <OnPlatform.iOS>
                                                    <FileImageSource File="ic_action_list.png" />
                                                </OnPlatform.iOS>
                                                <OnPlatform.Android>
                                                    <FileImageSource File="ic_action_list.png" />
                                                </OnPlatform.Android>
                                                <OnPlatform.WinPhone>
                                                    <FileImageSource File="Images/ic_action_list.png" />
                                                </OnPlatform.WinPhone>
                                            </OnPlatform>
                                        </Image.Source>
                                        <Image.GestureRecognizers>
                                            <TapGestureRecognizer x:Name="DetailsGesture"
                                                                  CommandParameter="{Binding}"
                                                                  Tapped="DetailsGesture_OnTapped" />
                                        </Image.GestureRecognizers>
                                    </Image>
                                </Grid>
                            </Grid>
                        </ViewCell.View>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
            <!--
                Setting the HasUnevenRows property tells the list view to render
                each cell with a different height.
            -->
            <ListView.RowHeight>
                <OnPlatform Android="150"
                            WinPhone="180"
                            iOS="150"
                            x:TypeArguments="x:Int32" />
            </ListView.RowHeight>
        </ListView>
    </Grid>
</ContentPage>



The main grid has 
<Grid.RowDefinitions>
	<RowDefinition Height="5" />
	<RowDefinition Height="Auto" />
	<RowDefinition Height="Auto" />
	<RowDefinition Height="5" />
</Grid.RowDefinitions>

but I must have

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

During the attemps, I did clean to all project and individual projects and then did build/rebuild. I deleted the obj and bin folders and restarted my both pc (windows where I was working and macbook pro which is the host build) I did deploy to a ipad mini 3, where I deleted the app each time I did a deploy.
Comment 1 Jason Smith [MSFT] 2015-05-18 16:44:36 UTC
Can you describe a little more clearly what you are expecting to see?
Comment 2 saramgsilva 2015-05-20 03:05:39 UTC
I got issue related with image size, I set that values but when I run the app the image does not have propertly size.
Comment 3 Jason Smith [MSFT] 2016-04-08 19:13:52 UTC
Thank you for your bug report. As we have not received the information requested, we cannot properly triage your bug and are marking it resolved.

Warm regards,
Xamarin Forms Team