I'm trying to list data in a ListView, and each row has 4 columns and 1 that spans over 4.
How can I achieve the following for each entry in listning:
Xaml:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="myMood.Views.Entries"
Icon="ic_view_headline_white_24dp.png"
xmlns:viewModels="clr-namespace:myMood.ViewModels">
<ContentPage.BindingContext>
<viewModels:EntriesViewModel />
</ContentPage.BindingContext>
<ListView ItemsSource="{Binding MoodEntries}"
HasUnevenRows="True"
Margin="20">
<ListView.Header>
<StackLayout Orientation="Horizontal" VerticalOptions="Start">
<Image Source="ic_date_range_black_24dp.png"></Image>
<Image Source="ic_local_hotel_black_24dp.png"></Image>
<Image Source="ic_directions_run_black_24dp.png"></Image>
<Image Source="ic_done_all_black_24dp.png"></Image>
</StackLayout>
</ListView.Header>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Label Text="{Binding EntryDate}"></Label>
<Label Text="{Binding Sleep}"></Label>
<Label Text="{Binding Stress}"></Label>
<Label Text="{Binding AchivedGoals}"></Label>
<Label Text="{Binding Comment}"></Label>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage>
As #Jason suggested, you can use a grid like this:
<ListView ItemsSource="{Binding MoodEntries}"
HasUnevenRows="True"
Margin="20">
<ListView.Header>
<StackLayout Orientation="Horizontal" VerticalOptions="Start">
<Image Source="ic_date_range_black_24dp.png"></Image>
<Image Source="ic_local_hotel_black_24dp.png"></Image>
<Image Source="ic_directions_run_black_24dp.png"></Image>
<Image Source="ic_done_all_black_24dp.png"></Image>
</StackLayout>
</ListView.Header>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid ColumnSpacing="2"
RowSpacing="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Grid.Row="0"
Text="{Binding EntryDate}"
BackgroundColor="Yellow"/>
<Label Grid.Column="0" Grid.Row="0"
Text="{Binding Sleep}"
BackgroundColor="Green"/>
<Label Grid.Column="0" Grid.Row="0"
Text="{Binding Stress}"
BackgroundColor="Blue"/>
<Label Grid.Column="0" Grid.Row="0"
Text="{Binding AchivedGoals}"
BackgroundColor="Silver"/>
<Label Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="4"
Text="{Binding Comment}"
BackgroundColor="Pink"/>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Notice that Cell elements can have only one child. In this case it is the Grid I've added
You can get more information about the layouts that Xamarin.Forms provide at xamarin developers site
Related
I have a listview inside a stacklayout...everything appears find on screen... apart from the picker which is about a cm out from the rest of the row...i have tried changing the height of the rows but to no avail...does anyone know why the picker... '0' isnt on the same horizontal alignment as the rest of the rows such as brandName, size and Price.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackLayout Grid.Row="0">
<ListView x:Name="WineLV" IsVisible="True" VerticalOptions="FillAndExpand" HasUnevenRows="True" ItemsSource="{Binding WineL}" HeightRequest="50">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout BackgroundColor="Transparent" HorizontalOptions="StartAndExpand" Padding="5">
<Frame OutlineColor="Black" Padding="10" BackgroundColor="Transparent">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="16*"/>
<ColumnDefinition Width="35*"/>
<ColumnDefinition Width="15*"/>
<ColumnDefinition Width="15*"/>
<ColumnDefinition Width="19*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Grid.Row="0" Text="{Binding Id}" VerticalOptions="End" IsVisible="False"/>
<controls:CircleImage Grid.Column="0" Grid.Row="0" HeightRequest="60" HorizontalOptions="CenterAndExpand" VerticalOptions="Center" Aspect="AspectFill" WidthRequest="66" Grid.RowSpan="2" Source="{Binding Img}"/>
<Label Grid.Column="1" Grid.Row="0" Text="{Binding BrandName}" VerticalOptions="Start" FontSize="Medium"/>
<Label Grid.Column="1" Grid.Row="1" Text="{Binding Grapes}" VerticalOptions="Start" FontSize="Medium"/>
<Label Grid.Column="2" Grid.Row="0" Text="{Binding Sizes}" VerticalOptions="Start" FontSize="Medium"/>
<Picker Grid.Column="3" Grid.Row="0" Title=" 0" x:Name="pPicker" HorizontalOptions="EndAndExpand" ItemsSource="{Binding ListQ}" ItemDisplayBinding="{Binding Value}" SelectedIndexChanged="QuantityC" SelectedItem ="{Binding Selected}"/>
<Label Grid.Column="4" Grid.Row="0" VerticalOptions="Start" HorizontalOptions="EndAndExpand" Text="{Binding Price, StringFormat='£{0:0.00}'}" FontSize="Medium"/>
</Grid>
</Frame>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
all the others have VerticalOptions="Start" - try changing them to Center, and possibly setting VerticalTextAlignment also
Some times when loading a View, it does not fully load on Iphone.. see the screenshot.. (Images are blurred on purpose..) At least, it does not load with proper dimensions. it is usually fixed by rotating the phone to landscape and back.. is there a way to avoid this?
here is my view:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:vm="clr-namespace:GalShare.ViewModel"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:ffimageloading="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"
xmlns:forms="clr-namespace:RedCorners.Forms;assembly=RedCorners.Forms"
mc:Ignorable="d"
x:Class="GalShare.Views.Gallery">
<NavigationPage.TitleView>
<Grid Padding="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="180"/>
<ColumnDefinition Width="10"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="45"/>
</Grid.RowDefinitions>
<Button Grid.Row="0" Grid.Column="0" Text="Back" x:Name="Backbutton" Clicked="Backbutton_Clicked"></Button>
<Button Grid.Row="0" Grid.Column="2" Text="Ph. contact info" x:Name="PhInfo" Clicked="PhInfo_Clicked"></Button>
</Grid>
</NavigationPage.TitleView>
<ContentPage.Content>
<AbsoluteLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<StackLayout
AbsoluteLayout.LayoutFlags="All"
AbsoluteLayout.LayoutBounds="0,0,1,1">
<ContentView x:Name="Messagecontainer" Padding="5">
<forms:Frame2 CornerRadius="8"
HasShadow="True"
ShadowRadius="8"
ShadowColor="Black"
Padding="5"
BackgroundColor="LightGray">
<Label x:Name="Messagefield"></Label>
</forms:Frame2>
</ContentView>
<CollectionView ItemsSource="{Binding Galleries}" Margin="0" x:Name="MyCollection" SelectionMode="Single" SelectionChanged="CollectionView_SelectionChanged">
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Vertical"
Span="2" />
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<ContentView Padding="8">
<forms:Frame2 CornerRadius="15"
HasShadow="True"
ShadowRadius="5"
HeightRequest="190"
BackgroundColor="LightGray"
Padding="1">
<StackLayout HorizontalOptions="Start" VerticalOptions="Start" Padding="2">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ffimageloading:CachedImage Grid.Row="0" Grid.Column="0" x:Name="myImage" Source="{Binding ThumbUrl}" Aspect="AspectFit" CacheDuration="1" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" DownsampleToViewSize="False"></ffimageloading:CachedImage>
<StackLayout Padding="0" Margin="0" Spacing="0" Grid.Column="0" Grid.Row="1">
<StackLayout Spacing="0" Margin="0" Padding="5,0,5,0">
<ImageButton HorizontalOptions="Center" Padding="0" WidthRequest="28" Aspect="AspectFit" HeightRequest="28" Margin="0" Source="{Binding likeImg}" x:Name="Favoriteimage" Clicked="LikeButton_Clicked" ></ImageButton>
<!-- <Button CharacterSpacing="0" HorizontalOptions="Center" Padding="0" WidthRequest="50" HeightRequest="28" Margin="0" Text="Like" x:Name="Favoriteimage" Clicked="Button_Clicked" ></Button>-->
</StackLayout>
<Label x:Name="Picname" Text="{Binding ImageName}" IsVisible="{Binding showname}" FontSize="Micro" VerticalOptions="End" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" ></Label>
</StackLayout>
</Grid>
</StackLayout>
</forms:Frame2>
</ContentView>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
<StackLayout IsVisible="{Binding isBusy}" x:Name="LoadingLayout" Padding="12"
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds="0.5,0.5,-1,-1">
<ActivityIndicator IsVisible="{Binding IsBusy}"
IsRunning="{Binding IsBusy}" />
<Label Text="Loading gallery..." IsVisible="{Binding IsBusy}" HorizontalOptions="Center" TextColor="Black"/>
</StackLayout>
</AbsoluteLayout>
</ContentPage.Content>
</ContentPage>
Because you used AbsoluteLayout as root layout of the ContentPage . If you want to put the ActivityIndicator on the CollectionView , you could use Grid and put them in the same cell .
<Grid VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackLayout Grid.Row="0" Grid.Column="0" BackgroundColor="Red" x:Name="LoadingLayout" Padding="12">
//...
</StackLayout>
<StackLayout Grid.Row="0" Grid.Column="0" IsVisible="{Binding isBusy}" x:Name="LoadingLayout" Padding="12" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand">
<ActivityIndicator IsVisible="{Binding IsBusy}"
IsRunning="{Binding IsBusy}" />
<Label Text="Loading gallery..." IsVisible="{Binding IsBusy}" HorizontalOptions="Center" TextColor="Black"/>
</StackLayout>
</Grid>
If the problem still exists, you could share your sample so that I can test it on my side .
the following code shows the following image:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:controls="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin"
x:Class="TestProjectXamarin.Views.ShoppingCart">
<ContentPage.Content>
<StackLayout>
<ListView ItemsSource="{Binding ShoppingCartList}" HasUnevenRows="True" SeparatorVisibility="None">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid Padding="10" RowSpacing="10" ColumnSpacing="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Text="{Binding Id}" VerticalOptions="End" IsVisible="False"/>
<controls:CircleImage Grid.Column="1" Grid.Row="1" HeightRequest="60" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" Aspect="AspectFill" WidthRequest="66" Grid.RowSpan="2" Source="{Binding Image}"/>
<Label Grid.Column="2" Grid.Row="1" Text="{Binding Name}" VerticalOptions="End"/>
<Label Grid.Column="2" Grid.Row="2" VerticalOptions="Start" Text="{Binding Detail}"/>
<Label Grid.Column="3" Grid.Row="2" VerticalOptions="Start" Text="{Binding Price, StringFormat='£{0}'}"/>
<Label Grid.Column="4" Grid.Row="2" VerticalOptions="Start" Text="{Binding Quantity}"/>
<Label Grid.Column="5" Grid.Row="2" VerticalOptions="Start" Text="{Binding SubTotalForItem, StringFormat='£{0}'}"/>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<Label x:Name="TotalForItems" HorizontalTextAlignment="End" VerticalTextAlignment="Start" Margin="20,20" FontSize="Large" FontAttributes="Bold"/>
</StackLayout>
</ContentPage.Content>
</ContentPage>
I would like the total at the bottom moved to directly below the last subtotal of £50, so there is no gap, i have tried VerticalTextAlignment="Start" but to no avail
Thanks
First off, you should never ever put a ListView in StackLayout. You are just asking for more trouble in terms of layout cycles and redraw timings.
As #Jason has mentioned, you can solve the current problem with ListView's Footer
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:controls="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin"
x:Class="TestProjectXamarin.Views.ShoppingCart">
<ContentPage.Content>
<ListView ItemsSource="{Binding ShoppingCartList}" HasUnevenRows="True" SeparatorVisibility="None">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid Padding="10" RowSpacing="10" ColumnSpacing="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Text="{Binding Id}" VerticalOptions="End" IsVisible="False"/>
<controls:CircleImage Grid.Column="1" Grid.Row="1" HeightRequest="60" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" Aspect="AspectFill" WidthRequest="66" Grid.RowSpan="2" Source="{Binding Image}"/>
<Label Grid.Column="2" Grid.Row="1" Text="{Binding Name}" VerticalOptions="End"/>
<Label Grid.Column="2" Grid.Row="2" VerticalOptions="Start" Text="{Binding Detail}"/>
<Label Grid.Column="3" Grid.Row="2" VerticalOptions="Start" Text="{Binding Price, StringFormat='£{0}'}"/>
<Label Grid.Column="4" Grid.Row="2" VerticalOptions="Start" Text="{Binding Quantity}"/>
<Label Grid.Column="5" Grid.Row="2" VerticalOptions="Start" Text="{Binding SubTotalForItem, StringFormat='£{0}'}"/>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.Footer>
<Label x:Name="TotalForItems" HorizontalAlignment="End" FontSize="Large" FontAttributes="Bold"/>
</ListView.Footer>
</ListView>
</ContentPage.Content>
</ContentPage>
Also don't use TextAlignment properties unless absolutely necessary!
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 am returning about 20 rows of data in my listview and it is just showing 12.
How can I introduce a scroll in my listview below. I tried putting a scrollview around it but no luck.
<StackLayout Grid.Column="1" Orientation="Vertical" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Padding="0" Spacing="0">
<SearchBar x:Name="searchBar" Placeholder="Search" SearchCommandParameter="{Binding Source={x:Reference searchBar}, Path=Text}"/>
<StackLayout VerticalOptions="FillAndExpand">
<StackLayout VerticalOptions="FillAndExpand" Padding="1" BackgroundColor="Black">
<ListView x:Name="dataList" BackgroundColor="White">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Label FontSize="20" VerticalOptions="CenterAndExpand" TextColor="Black" Text="{Binding HeadLines}"></Label>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</StackLayout>
</StackLayout>
Answer
Your XAML structure is wrong. Please have a look my code, and try it. Hope, It will help you.
Code
<Grid VerticalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<SearchBar Grid.Column="0" x:Name="searchBar" Placeholder="Search" SearchCommandParameter="{Binding Source={x:Reference searchBar}, Path=Text}" />
<ListView Grid.Column="2" x:Name="dataList" BackgroundColor="White">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Label FontSize="20" VerticalOptions="CenterAndExpand" TextColor="Black" Text="{Binding HeadLines}">
</Label>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>