I tried to load the image on ffimageloading:CachedImage from URL, few images which are of 5 MBs are not loading in Android Tablet.
Please suggest to me what should I do about the issue?
<ListView
BackgroundColor="#171921"
HasUnevenRows="True"
HorizontalOptions="FillAndExpand"
ItemsSource="{Binding DisplayData.ImagesSASUrl}"
SelectionMode="None"
VerticalOptions="Start">
<ListView.ItemTemplate>
<DataTemplate x:DataType="x:String">
<ViewCell>
<Grid>
<ffimageloading:CachedImage
Margin="10"
Aspect="AspectFit"
BitmapOptimizations="True"
DownsampleToViewSize="True"
HeightRequest="200"
LoadingPlaceholder="imageloading.png"
Source="{Binding .}" />
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Related
I do have the following XAML code. And the output is as shown below in the picture. How can I achieve to fill the image within its grid in the frame? Thank you for your help.
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid Padding="10,20,10,0">
<Frame
Margin="5"
BackgroundColor="AntiqueWhite"
CornerRadius="20"
HasShadow="True"
HeightRequest="200"
HorizontalOptions="FillAndExpand">
<Grid RowDefinitions="7*,3*">
<Image
Grid.Row="0"
x:DataType="products:PopularProduct"
Aspect="AspectFill"
HorizontalOptions="FillAndExpand"
Source="{Binding FullImageUrl}"
VerticalOptions="FillAndExpand" />
</Grid>
</Frame>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
I would make use of StackLayout with something like this
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout
HorizontalOptions="FillAndExpand"
Orientation="Horizontal"
VerticalOptions="FillAndExpand">
<Frame
Margin="10,20,10,20"
Padding="0"
BackgroundColor="AntiqueWhite"
HasShadow="False"
HeightRequest="200"
HorizontalOptions="FillAndExpand">
<StackLayout Orientation="Vertical">
<Frame
Padding="0"
CornerRadius="20"
HasShadow="True"
IsClippedToBounds="True">
<Grid RowDefinitions="7*,3*">
<Image
Grid.Row="0"
x:DataType="products:PopularProduct"
Aspect="AspectFill"
HorizontalOptions="FillAndExpand"
Source="{Binding FullImageUrl}"
VerticalOptions="FillAndExpand" />
<StackLayout
Grid.Row="1"
Margin="10"
Orientation="Vertical">
<Label Text="Any label if you want here" />
</StackLayout>
</Grid>
</Frame>
</StackLayout>
</Frame>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
good afternoon, i have a listview with grid with two labels in the first column and an image in the second column, it happens that the image is disrespecting, without the image the label is in the correct size.
My problem is that the label doesn’t show all her content when it has the image
When you have the image the labels are wrong. image with resized error
Without the image, which would be expected but I don't know how to fix it for the cells to resize
error-free image
I've tried everything, if anyone can help me thank you
mycode
<ListView
x:Name="ListView_ListaRotas"
HasUnevenRows="True"
IsPullToRefreshEnabled="True"
ItemTapped="ListView_ListaRotas_ItemTapped"
Refreshing="ListView_ListaRotas_Refreshing"
SeparatorVisibility="None">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Frame
Margin="0,5"
Padding="5,0"
BorderColor="Gray"
Opacity="{Binding PermiteCheck, Converter={StaticResource Key=OpacityConverter}}">
<Grid
Margin="0"
Padding="1,0"
ColumnSpacing="0"
RowSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackLayout HorizontalOptions="StartAndExpand" VerticalOptions="CenterAndExpand">
<Label
FontAttributes="Bold"
FontSize="18"
HorizontalTextAlignment="Start"
Text="{Binding Ds_Observacao}"
VerticalTextAlignment="Start" />
<StackLayout Orientation="Horizontal">
<Label
FontSize="Medium"
Text="{Binding Nm_Posto}"
VerticalTextAlignment="Center" />
<Image
Aspect="AspectFit"
HeightRequest="20"
IsVisible="{Binding HasSketch}"
Source="rascunho.png"
WidthRequest="20" />
</StackLayout>
</StackLayout>
<Image
Grid.Column="1"
Aspect="AspectFit"
HorizontalOptions="EndAndExpand"
Source="{Binding TimeLine}"
VerticalOptions="Center" />
</Grid>
</Frame>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Im making an Android application and Im trying to center right checkbox on all rows in the listview, but I cant do it.
I want do something like this. Thanks
https://imgur.com/FhecIT3
<StackLayout Orientation="Vertical">
<RelativeLayout>
<ListView ItemsSource="{Binding Funcionarios}"
HasUnevenRows="True"
Margin="20"
ItemTapped="ListView_ItemTapped">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal">
<image:CircleImage Source="{Binding Imagem}" Aspect="AspectFill" WidthRequest="60"
HeightRequest="60" BorderColor="Black" BorderThickness="2">
</image:CircleImage>
<StackLayout Orientation="Vertical">
<Label Text="{Binding Nome}" FontSize="Large"/>
<Label Text="{Binding Zona}"/>
<CheckBox IsChecked="False" />
</StackLayout>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</RelativeLayout>
</StackLayout>
Try
<ViewCell>
<StackLayout Orientation="Horizontal">
<image:CircleImage Source="{Binding Imagem}" Aspect="AspectFill" WidthRequest="60" HeightRequest="60" BorderColor="Black" BorderThickness="2"> </image:CircleImage>
<StackLayout Orientation="Vertical">
<Label Text="{Binding Nome}" FontSize="Large"/>
<Label Text="{Binding Zona}"/>
</StackLayout>
<StackLayout Orientation="Vertical" HorizontalOptions="End">
<CheckBox IsChecked="False" VerticalOptions="Center"/>
</StackLayout>
</StackLayout>
</ViewCell>
I need to add reference to ItemTemplate like the code beneath:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:prism="clr-
namespace:Prism.Mvvm;assembly=Prism.Forms"
prism:ViewModelLocator.AutowireViewModel="True"
x:Class="InfoSeries.Views.MainPage"
Title="Info Series">
<ContentPage.Resources>
<ResourceDictionary>
<DataTemplate x:Key="TopSeriesTemplate">
<ViewCell>
<ViewCell.View>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<StackLayout>
<Label Text="{Binding Network}" FontSize="14" TextColor="#98a6ad" Margin="5, 0, 0, 0" />
</StackLayout>
</Grid>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ResourceDictionary>
</ContentPage.Resources>
<ListView ItemTemplate="{StaticResource TopSeriesTemplate}"
ItemsSource="{Binding Path=TopSeries}"/>
I have tried lots if different things but the below code is as close as i've come so far.
<ListView ItemTemplate="{StaticResource TopSeriesTemplate}"
ItemsSource="{Binding Path=TopSeries}" >
<behaviors:Interaction.Behaviors>
<behaviors:BehaviorCollection>
<behaviors:EventToCommand EventName="ItemTapped"
Command="{Binding GoToDetailPage}" />
</behaviors:BehaviorCollection>
</behaviors:Interaction.Behaviors>
<ListView.ItemTemplate>
<DataTemplate x:key="TopSeriesTemplate">
<ViewCell>
<ViewCell.View>
<StackLayout VerticalOptions="Center" Margin="30,0,0,0" Orientation="Horizontal">
<Label Text="{Binding name}" TextColor="Black" FontSize="20" VerticalOptions="Center">
</StackLayout>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
That is the error: StaticResource not found for key TopSeriesTemplate
I also added Xam.Behaviors (Nuget) and added this:
xmlns:behaviors="clr-namespace:Xam.Behaviors;assembly=Xam.Behaviors"
I followed this guide: https://blog.qmatteoq.com/prism-for-xamarin-forms-basic-navigation-and-dependency-injection-part-2/#comment-51794
I want to have some space around the Image cell items of a ListView:
<StackLayout>
<ListView ItemsSource="{Binding Items}" HasUnevenRows="True">
<ListView.ItemTemplate>
<DataTemplate>
<ImageCell Text="{Binding Title}" ImageSource="{Binding Image}" TextColor="Black" DetailColor="Gray"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
but there's no Margin property available for the ImageCell?
EDIT
I did what cvanbeek suggested before posting the question:
<DataTemplate>
<StackLayout Padding="5">
<ImageCell Text="{Binding Title}" ImageSource="{Binding Image}" TextColor="Black" DetailColor="Gray"/>
</StackLayout>
</DataTemplate>
but I got this exception:
Unhandled Exception:
System.InvalidCastException: Specified cast is not valid.
in the OnCreate method in MainActivity.cs
DataTemplate definition
Only View can be put inside DataTemplate, however StackLayout is Layout.
Use a ViewCell instead , it is more flexible and controllable.
<ListView >
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Padding="20" Orientation="Horizontal" >
<Label Margin="20" Text="123"/>
<Image Source="Assets/StoreLogo.png"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>