Search code examples
androidiosxamltelerikmaui

iOS Display is different from Android .Net MAUI Telerik

I have the following code for both Android and iOS, but when it comes to running and displaying it everything gets out of whack or moves, why is this?

<telerik:RadListView x:Name="listView" 
            ItemsSource="{Binding SPagina}" 
            Margin="10"                             
            BackgroundColor="LightGray">
<telerik:RadListView.ItemTemplate >
    <DataTemplate>
        <telerik:ListViewTemplateCell >
            <telerik:ListViewTemplateCell.View>
                <StackLayout Margin="0,0,0,10" BackgroundColor="LightGray">
                    <telerik:RadBorder BorderColor="#44185f" 
                                Margin="0,1,0,1"
                                CornerRadius="5"
                                BorderThickness="3"
                                Background="White"
                                Padding="7">
                        <Grid >
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="10"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="10"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="10"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>
                            <Label Grid.Row="0" Grid.ColumnSpan="6" TextColor="#3A023A" Text="{Binding TituloPublicacion}" FontSize="16"  FontAttributes="Bold" FontFamily="Arial"/>
                            <Label Grid.Row="2" Grid.Column="0" Text="Tipo:" FontSize="14"/>
                            <Label Grid.Row="2" Grid.Column="1" Text="{Binding Tipo}" FontSize="14"/>
                            <Label Grid.Row="2" Grid.Column="2" Text="Año:" FontSize="14"/>
                            <Label Grid.Row="2" Grid.Column="3" Text="{Binding Anio}" FontSize="14"/>
                            <Label Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="2"  Text="Congreso/Revista:" FontSize="14"/>
                            <Label Grid.Row="4" Grid.Column="2" Grid.ColumnSpan="2"  Text="{Binding RevistaCongreso}" FontSize="14"/>
                            <Label Grid.Row="6" Grid.Column="0" Text="Autores: "  FontSize="12"/>
                            <Label Grid.Row="6" Grid.Column="1" Grid.ColumnSpan="6" Text="{Binding Autores}"  FontSize="12"/>
                        </Grid>
                    </telerik:RadBorder>
                </StackLayout>
            </telerik:ListViewTemplateCell.View>
        </telerik:ListViewTemplateCell>
    </DataTemplate>
</telerik:RadListView.ItemTemplate>

</telerik:RadListView>

and the problem is that the view looks different on the two devices.

I put the following example images.

Andorid: iOS:

Why does this happen? ...

Solution

  • RadListView is their Version of the ListView, Please use their CollectionView instead : https://www.telerik.com/maui-ui/collectionview

    <telerik:RadCollectionView x:Name="collectionView" 
            ItemsSource="{Binding SPagina}" 
            Margin="10"                             
            BackgroundColor="LightGray">