I have ListView with ViewCell and it's ViewCell contains Label with huge text. How can I make an auto-height ViewCell???
Screenshot of issue
My XAML code:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Physis.Movements_And_Interactions_Page" xmlns:local="clr-namespace:Physis">
<ContentPage.ToolbarItems>
<ToolbarItem x:Name="settings" Text="{Binding settings_text}" Clicked="Handle_Clicked"/>
</ContentPage.ToolbarItems>
<ContentPage.Content>
<StackLayout Margin="20,35,20,20" x:Name="Main_View2" >
<ListView x:Name="Main_Menu" ItemsSource="{Binding Planets}" ItemSelected="Handle_ItemSelected" ItemTapped="Handle_ItemTapped" BackgroundColor="{DynamicResource Key=backgroundColor}" SeparatorColor="{DynamicResource Key=textColor}">
<ListView.ItemTemplate>
<DataTemplate >
<ViewCell >
<StackLayout Orientation="Vertical" >
<Label Text="{Binding Name}" StyleClass="Body"/>
<Label Text="{Binding Description}" StyleClass="Body"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout >
</ContentPage.Content>
Thanks everyone!
Set HasUnevenRows="true" on your ListView. See documentation here https://learn.microsoft.com/en-us/dotnet/api/Xamarin.Forms.ListView.HasUnevenRows?view=xamarin-forms
Related
I'm developing a mobile application and I want to put one Grid in the SrollView, under it a ListView with the height of its elements, under the ListView another ListView with same height.
I put two Listviews in StackLayout. It should look something like that
This is content that should scroll in ScrollView
But with this implementation(code below), the first ListView Occupies the entire remaining height, and the second Listview is far from it
there is listview height at the full remaining size
And my second Listview after scrolling is far away, here
It also occupies the entire height of the scrollview
Here is the code:
<ScrollView>
<Grid RowSpacing="2">
<Grid.RowDefinitions>
<RowDefinition Height="130"/>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid x:Name="RecommendedCaloriesGrid" Grid.Row="0" RowSpacing="2" ColumnSpacing="1"
BackgroundColor="Violet" Margin="3">
// here is code of my Grid 1
</Grid>
</Grid>
<StackLayout Grid.Row="1"> // here I want to make a listview under Each other
<ListView x:Name="ItemsListView" BackgroundColor="red"
ItemsSource="{Binding Items}"
HasUnevenRows="true"
RefreshCommand="{Binding LoadItemsCommand}"
IsPullToRefreshEnabled="true"
IsRefreshing="{Binding IsBusy, Mode=OneWay}"
CachingStrategy="RecycleElement"
ItemSelected="OnItemSelected">
<d:ListView.ItemsSource>
<x:Array Type="{x:Type x:String}">
<x:String>First Item</x:String>
<x:String>Second Item</x:String>
</x:Array>
</d:ListView.ItemsSource>
<ListView.Header>
<StackLayout Margin="5" Spacing="2">
<StackLayout Orientation="Horizontal">
<Label Text="Завтрак" HorizontalOptions="StartAndExpand"
FontSize="Large" FontAttributes="Bold"/>
<Label Text="744 ккал" HorizontalOptions="EndAndExpand"
FontSize="Large" FontAttributes="Bold"/>
</StackLayout>
<Label Text="Рекомендуется 30% от суточного потребления (n ккал)." FontSize="11"/>
</StackLayout>
</ListView.Header>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Padding="10">
<Label Text="{Binding Text}"
d:Text="{Binding .}"
LineBreakMode="NoWrap"
Style="{DynamicResource ListItemTextStyle}"
FontSize="16" />
<Label Text="{Binding Description}"
d:Text="Item descripton"
LineBreakMode="NoWrap"
Style="{DynamicResource ListItemDetailTextStyle}"
FontSize="13" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<ListView x:Name="LunchListView" // second ListView under first
ItemsSource="{Binding Items}"
HasUnevenRows="true"
RefreshCommand="{Binding LoadItemsCommand}"
IsPullToRefreshEnabled="true"
IsRefreshing="{Binding IsBusy, Mode=OneWay}"
CachingStrategy="RecycleElement"
ItemSelected="OnItemSelected">
<d:ListView.ItemsSource>
<x:Array Type="{x:Type x:String}">
<x:String>First Item</x:String>
<x:String>Second Item</x:String>
<x:String>Third Item</x:String>
<x:String>Forth Item</x:String>
</x:Array>
</d:ListView.ItemsSource>
// SAME logic here
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</Grid>
</ScrollView>
How I can fix it?
Please help me to find a solution.
I read many articles like below, but did not find the answer. I want to do this without calculating the height in code-behind:
Xamarin.Forms ListView size to content?
Xamarin.Forms - ListView change height at runtime
https://forums.xamarin.com/discussion/comment/66248
Xamarin.Forms: ListView inside StackLayout: How to set height?
Why did you use two listviews to do this, you can just use different DataTemplate to achieve this function.
You can refer to the following code:
1.Consuming a DataTemplateSelector in XAML
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-
namespace:Selector;assembly=Selector" x:Class="Selector.HomePage">
<ContentPage.Resources>
<ResourceDictionary>
<DataTemplate x:Key="validPersonTemplate">
<ViewCell>
...
</ViewCell>
</DataTemplate>
<DataTemplate x:Key="invalidPersonTemplate">
<ViewCell>
...
</ViewCell>
</DataTemplate>
<local:PersonDataTemplateSelector x:Key="personDataTemplateSelector"
ValidTemplate="{StaticResource validPersonTemplate}"
InvalidTemplate="{StaticResource invalidPersonTemplate}" />
</ResourceDictionary>
</ContentPage.Resources>
...
</ContentPage>
2.use like this:
<ListView x:Name="listView" ItemTemplate="{StaticResource personDataTemplateSelector}"
/>
For more details, you can check:
https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/templates/data-templates/selector
Besides, you can also try ListView Grouping, for more details:
https://learn.microsoft.com/en-ie/xamarin/xamarin-forms/user-interface/listview/
https://learn.microsoft.com/en-us/samples/xamarin/xamarin-forms-samples/userinterface-listview-grouping/
the first ListView Occupies the entire remaining height
For me it looks like its the issue with footer which is taking extra space inside listview. Can you just put the Empty listview footer and see if it works:
<ListView.Footer>
<Label />
</ListView.Header>
I'm stuck in this problem in first try to use xamarin forms.
I'm trying to set DataTemplateSelector for CollectionView in Xamarin forms but I get this error "LoadTemplate should not be null".
It working without problems if I used ListView.
this is my XAML Code :
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:viewmodel="clr-namespace:JisrWallet.ViewModels"
xmlns:common="clr-namespace:JisrWallet.Common"
x:Class="JisrWallet.views.Layout.CardsPage"
xmlns:views="clr-namespace:SuaveControls.Views;assembly=SuaveControls.FloatingActionButton"
BackgroundColor="{StaticResource lightGray}">
<ContentPage.Resources>
<ResourceDictionary>
<common:IntColorToHexConverter x:Key="colorConverter"/>
<common:PrefixValueConverter x:Key="prefixConverter"/>
<DataTemplate x:Key="existCardTemplate">
<StackLayout Margin="2">
<Image Source="{Binding StoreImageUrl}"
Aspect="AspectFill"
HeightRequest="120"
BackgroundColor="{Binding CardColor, Converter={StaticResource colorConverter}}"/>
</StackLayout>
</DataTemplate>
<DataTemplate x:Key="newCardTemplate">
<StackLayout BackgroundColor="{Binding CardColor, Converter={StaticResource colorConverter}}">
<Label Text="{Binding CardName, Converter={StaticResource prefixConverter}, ConverterParameter=1}"
HeightRequest="120"
HorizontalOptions="Center"
VerticalOptions="Center"
VerticalTextAlignment="Center"
TextColor="White"/>
<Label Text="{Binding CardName}"
FontAttributes="Bold"
BackgroundColor="{Binding CardColor, Converter={StaticResource colorConverter}}"
TextColor="{StaticResource whiteColor}"
HorizontalTextAlignment="Center"/>
<BoxView HeightRequest="2" BackgroundColor="White"/>
</StackLayout>
</DataTemplate>
<common:CardItemTemplateSelector x:Key="cardItemTemplateSelector"
ExistCardTemplate="{StaticResource existCardTemplate}"
NewCardTemplate="{StaticResource newCardTemplate}"/>
</ResourceDictionary>
</ContentPage.Resources>
<StackLayout>
<StackLayout.BindingContext>
<viewmodel:CardsViewModel/>
</StackLayout.BindingContext>
<CollectionView x:Name="collectionView"
ItemsSource="{Binding Cards}"
ItemTemplate="{StaticResource newCardTemplate}"
SelectionMode="Single"
SelectionChanged="CollectionView_SelectionChanged">
<CollectionView.ItemsLayout >
<GridItemsLayout Orientation="Vertical" Span="2" />
</CollectionView.ItemsLayout>
</CollectionView>
<views:FloatingActionButton Image="ic_add_white"
ButtonColor="{StaticResource AccentColor}"
WidthRequest="56"
HeightRequest="56"
HorizontalOptions="End"
VerticalOptions="CenterAndExpand"
Margin="8"
Clicked="FloatingActionButton_Clicked"/>
</StackLayout>
</ContentPage>
I can't figure out the problem. Can anyone help me please ?
you define the DataTemplateSelector in your <ResourceDictionary>
<ResourceDictionary>
...
<common:CardItemTemplateSelector x:Key="cardItemTemplateSelector"
ExistCardTemplate="{StaticResource existCardTemplate}"
NewCardTemplate="{StaticResource newCardTemplate}"/>
</ResourceDictionary>
you could use it in your CollectionView like this:
<CollectionView>
...
ItemTemplate="{StaticResource cardItemTemplateSelector}"
</CollectionView>
more info refer to link:DataTemplateSelector
I have a problem. In Datatemplate i cant reach TextCell in xaml. Anybody can help me?
<?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="Spirocco.MedicationPage"
Title="Gyógyszerek">
<ContentPage.Content>
<ListView>
<ListView.ItemTemplate>
<DataTemplate>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage.Content>
Update: I reach it but the VS dont show it.
In first answer there is a solution.
<StackLayout>
<ListView x:Name="Medications" ItemsSource="{Binding Medications}">
<ListView.ItemTemplate>
<DataTemplate>
<ImageCell ImageSource="{Binding Icon}" Text="{Binding Name}" Detail="{Binding Type}" Tapped="ImageCell_Tapped"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
Hello I have an app i'm doing in xamrian forms and I have a card styled list view. I want to be able to add 3 buttons underneath the listview one on the left one in the center and one on the right
here's my 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="App.HomePage">
<ListView x:Name="listView" HasUnevenRows="true" ItemSelected="OnItemSelected">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Frame Padding="0,0,0,8" BackgroundColor="#d2d5d7">
<Frame.Content>
<Frame Padding="15,15,15,15" OutlineColor="Gray" BackgroundColor="White">
<Frame.Content>
<StackLayout Padding="20,0,0,0" Orientation="Horizontal" HorizontalOptions="CenterAndExpand">
<Image
HorizontalOptions="StartAndExpand"
Source="{Binding Image}" />
<Label Text="{Binding Name}"
TextColor="#69add1"
FontFamily="OpenSans-Light"
FontSize="24"/>
</StackLayout>
</Frame.Content>
</Frame>
</Frame.Content>
</Frame>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage>
How would I go about doing this in xaml?
Thank's in advance! :)
Try this:
<?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:local="clr-namespace:Sandbox_Forms"
x:Class="Sandbox_Forms.MainPage">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ListView Grid.Row="0" BackgroundColor="Aqua">
<!-- Add bindings and data template -->
</ListView>
<StackLayout Orientation="Horizontal" Grid.Row="1">
<Button Text="Button1" HorizontalOptions="FillAndExpand"/>
<Button Text="Button2" HorizontalOptions="FillAndExpand"/>
<Button Text="Button3" HorizontalOptions="FillAndExpand"/>
</StackLayout>
</Grid>
</ContentPage>
This will limit your ListView to only fill the space that your buttons do not occupy. The output should look something like this:
<StackLayout>
<ListView>
...
</ListView>
<StackLayout Orientation="Horizontal">
<Button ... />
<Button ... />
<Button ... />
</StackLayout>
</StackLayout>
I don't know why my list view is not showing up, I don't know if I need to add something, here is my code:
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" BackgroundColor="#1B1B1B" x:Class="wantafood.Page1">
<ContentPage.Content>
<ListView x:Name="listView">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout BackgroundColor="#eee"
Orientation="Vertical">
<StackLayout Orientation="Horizontal">
<Label Text="LabelText"
TextColor="#f35e20" />
<Label Text="LabelText2"
HorizontalOptions="EndAndExpand"
TextColor="#503026" />
</StackLayout>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage.Content>
</ContentPage>
If someone could point to me what I'm missing, I would really appreciate that, I'm sure is something dumb, but I can't see it, thanks.