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
Related
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 would like to create a view like this :
. Where Contact1, Contact2 are models and ListViewis a list of these models.
Now i have code like this but i dont get the desired output.
<?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="KiaiDay.Pages.ConviteEmailPage"
NavigationPage.TitleView="Convive por email"
NavigationPage.HasBackButton="True"
NavigationPage.BackButtonTitle="Voltar"
BackgroundColor="AliceBlue">
<ContentPage.Content>
<AbsoluteLayout>
<ActivityIndicator x:Name="indicador" AbsoluteLayout.LayoutBounds="0.5,0.5,100,100" AbsoluteLayout.LayoutFlags="PositionProportional" Color="Blue"/>
<StackLayout>
<ListView x:Name="ListaContactos">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout>
<Image Source="{Binding Imagem}"/>
<Label Text="{Binding Nome}"/>
<Label Text="{Binding Email}"/>
<Label Text="{Binding Numero}"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</AbsoluteLayout>
</ContentPage.Content>
</ContentPage>
As Jason said, you can use CollectionView to do it.However,you should note that:
The CollectionView is currently an early preview, and lacks much of its planned functionality. In addition, the API will change as the implementation is completed.
And CollectionView is available in Xamarin.Forms 4.0-pre1.
If no problem with version, using code as follow:(Update: Adding Frame to code)
<StackLayout Margin="20,35,20,20">
<CollectionView ItemsSource="{Binding Monkeys}" >
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Vertical"
Span="2" />
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout Padding="10">
<Frame BackgroundColor="LightGray"
OutlineColor="Black"
CornerRadius="10">
<Grid Padding="5" WidthRequest="120" HeightRequest="120">
<Grid.RowDefinitions>
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="25" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120" />
</Grid.ColumnDefinitions>
<Label Grid.Row="0"
Text="{Binding Name}"
FontAttributes="Bold"
LineBreakMode="TailTruncation" />
<Image Grid.Row="1"
Source="{Binding ImageUrl}"
Aspect="AspectFill"
HeightRequest="60"
WidthRequest="60" />
<Label Grid.Row="2"
Text="{Binding Location}"
LineBreakMode="TailTruncation"
FontAttributes="Italic"
VerticalOptions="End" />
<Label Grid.Row="3"
Text="{Binding Details}"
LineBreakMode="TailTruncation"
FontAttributes="Italic"
VerticalOptions="End" />
</Grid>
</Frame>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
Refer to official sample , binding source:
BindingContext = new MonkeysViewModel();
Here is the capture image of app.
I basically want the ListView cells to have auto height, and that's what I came up with:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:MovieDbApp.UI"
x:Class="MovieDbApp.View.MoviesPage">
<ContentPage.Content>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ListView x:Name="listView" Grid.Row="0">
<DataTemplate>
<ViewCell>
<StackLayout>
<Label Text="{Binding Title}" />
<Image Source="{Binding PosterPath}" />
<Label Text="{Binding ReleaseDate}" />
<Label Text="{Binding DisplayGenre}" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView>
</Grid>
</ContentPage.Content>
</ContentPage>
This should be simple enough, but now I'm getting that compilation error ans I have no idea what it means as there's no ContentPropertyAttributte in ListView, or at least none that I can find.
you are missing <ListView.ItemTemplate>
<ListView x:Name="listView" Grid.Row="0">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout>
<Label Text="{Binding Title}" />
<Image Source="{Binding PosterPath}" />
<Label Text="{Binding ReleaseDate}" />
<Label Text="{Binding DisplayGenre}" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
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
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>