Cristofher Ambiado
Cristofher Ambiado

Reputation: 101

Image overflow in ListView Xamarin.Forms (Android)

have a ListView in which for each element of the List you have 3 buttons for 3 different options, when you enter the screen there are no overflow problems in the images of the ImageButton, but when you do the first scroll the sources start to overflow as shown in the following image

enter image description here

The images lose the center and are misaligned as you scroll up or down, this problem does not occur in iOS, only occurs in Android (version 6,7,8 and 9), apparently it is a problem like Android render the images

I tried, changing the ImageButton control to Button and the problem persists, also trying to assign the "Aspect" property to the ImageButton, but I'm not getting successful results, any help how to fix this? then my code XAML

   <ListView 
                ItemsSource="{Binding ListaRecintos}"
                SelectionMode="None"
                IsRefreshing="{Binding IsRefreshing, Mode=TwoWay}"        
                             RowHeight="80"
                             HasUnevenRows="True">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <ViewCell>
                                <StackLayout
                                    Margin="0,4,0,0"
                                Orientation="Vertical">

                                    <Grid>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="1*"/>
                                            <ColumnDefinition Width="3.9*"/>
                                            <ColumnDefinition Width="*"/>
                                        </Grid.ColumnDefinitions>


                                        <Label
                                            Text="{Binding Code}" 
                                            HorizontalOptions="Start" 
                                            FontSize="Small" 
                                            WidthRequest="40"
                                            HeightRequest="30"
                                            FontAttributes="Bold"
                                            VerticalTextAlignment="Center"
                                            HorizontalTextAlignment="Center"
                                            TextColor="{StaticResource das.color.texto}"
                                            VerticalOptions="CenterAndExpand"
                                            Grid.Column="0">
                                        </Label>

                                        <StackLayout Orientation="Vertical"
                                                      Grid.Column="1">
                                             <Label                                 
                                            Text="{Binding Name}"
                                            HorizontalOptions="Start" 
                                            FontSize="Small" 
                                            HeightRequest="32"
                                            MaxLines="2"
                                            TextColor="{StaticResource das.color.texto}"
                                            VerticalOptions="Center"
                                            VerticalTextAlignment="Center">
                                        </Label>
                                        </StackLayout>
                                    </Grid>

                                    <!--STACK BUTTON-->
                                    <StackLayout
                                              Orientation="Horizontal"
                                              HorizontalOptions="EndAndExpand"
                                              Margin="0,1,1,0">

                                        <!--BUTTON 1-->
                                        <ImageButton 
                                            Source="ic_check_wt"
                                            Aspect="AspectFit"
                                            CornerRadius="0"
                                            BackgroundColor="{StaticResource das.color.estado_success}"                                            
                                            HorizontalOptions="End"
                                            VerticalOptions="Center"
                                            HeightRequest="35"
                                            WidthRequest="50"
                                            CommandParameter="2"
                                            Command="{Binding ControlAuditoriaCommand}"
                                            IsEnabled="{Binding EnabledButton}"/>

                                        <!--BUTTON 2-->
                                        <ImageButton 
                                            Source="ic_hammer"                                         
                                            BackgroundColor="{StaticResource das.color.estado_primary}"                                        
                                            HorizontalOptions="End"
                                            CornerRadius="0"
                                            Aspect="AspectFit"
                                            VerticalOptions="Center"
                                            HeightRequest="35"
                                            WidthRequest="50"
                                            CommandParameter="1"
                                            Command="{Binding ControlAuditoriaCommand}"
                                            IsEnabled="{Binding EnabledButton}"/>

                                        <!--BUTTON 3-->
                                        <ImageButton 
                                            Source="ic_arrow_up"
                                            BackgroundColor="{StaticResource das.color.estado_success}"                                           
                                            HorizontalOptions="End"
                                            CornerRadius="0"
                                            Aspect="AspectFit"
                                            VerticalOptions="Center"
                                            HeightRequest="35"
                                            WidthRequest="50"
                                            CommandParameter="3"
                                            Command="{Binding ControlAuditoriaCommand}"
                                            IsEnabled="{Binding EnabledButton}"/>

                                    </StackLayout>
                                </StackLayout>
                            </ViewCell>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>

How can I avoid this behavior? Any help for me?

Upvotes: 0

Views: 295

Answers (1)

ColeX
ColeX

Reputation: 14475

I suggest you use (Frame + image ) instead of ImageButton , and add tapgesture on it .

Upvotes: 1

Related Questions