I have implemented a listview and in each item I want to have two labels, in each end horizontally. But in reality it just put the two labels next to eachother left aligned.
I read that maybe this is not possible with a stacklayout, as it doesn't take up more space than needed. (Even tried fill and fillandExpand which didn't help.)
Instead I should use a grid. But I have options on my listview, as grouping, refresh, caching, tapped, which I guess I don't have on a grid?
I would like to succeed with a listview if that is possible. Anyone have some insights to this layout issue?
Here is my xaml 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"
x:Class="MyApp.Page.ItemsTest">
<ListView x:Name="ItemView"
ItemsSource="{Binding ItemGroup}"
CachingStrategy="RecycleElement"
IsGroupingEnabled="true"
HasUnevenRows="True"
ItemTapped="Handle_ItemTapped">
<ListView.GroupHeaderTemplate>
<DataTemplate>
<ViewCell>
<StackLayout BackgroundColor="#FFA500" Orientation="Vertical" Padding="10">
<StackLayout Orientation="Horizontal">
<Label Text="{Binding Heading}" TextColor="White" FontAttributes="Bold" />
</StackLayout>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.GroupHeaderTemplate>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal" Padding="10" HorizontalOptions="FillAndExpand">
<Label Text="{Binding Name}" FontAttributes="Bold" HorizontalTextAlignment="Start"/>
<Label Text="{Binding Start, StringFormat='{0:HH:mm}'}" FontAttributes="Bold" HorizontalTextAlignment="End"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage>
Central part is this:
<StackLayout Orientation="Horizontal" Padding="10" HorizontalOptions="FillAndExpand">
<Label Text="{Binding Name}" FontAttributes="Bold" HorizontalTextAlignment="Start"/>
<Label Text="{Binding Start, StringFormat='{0:HH:mm}'}" FontAttributes="Bold" HorizontalTextAlignment="End"/>
</StackLayout>
Update:
As requested I have a colored the background of the two labels and the stacklayout. It's the same output if I use HorizontalOptions="End" and HorizontalTextAlignment="End" at the same time or each one alone. Also if I remove the HorizontalOptions="FillAndExpand" on the stacklayout, it's still the exact same graphical output. (The orange color was already present)
Maybe you could use a Grid instead of the StackLayout and place each Label in a different Column:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Text="{Binding Name}" FontAttributes="Bold" HorizontalTextAlignment="Start"/>
<Label Grid.Column="1" Text="{Binding Start, StringFormat='{0:HH:mm}'}" FontAttributes="Bold" HorizontalTextAlignment="End"/>
</Grid>
You could also use nested StackLayout
<StackLayout>
<Label />
<Label Text="Gender:" FontAttributes="Bold"/>
<StackLayout Orientation="Horizontal">
<Label HorizontalOptions="Start" Text="First Name: " FontAttributes="Bold"/>
<Entry HorizontalOptions="EndAndExpand" Placeholder="First Name" MaxLength="256" Text="{Binding FirstName}"></Entry>
</StackLayout>
</StackLayout>
Related
I have got the following xaml code:
<StackLayout Padding="10" x:DataType="model:Light">
<StackLayout HorizontalOptions="FillAndExpand" Grid.Column="0" Grid.Row="1">
<Label Text="{Binding Name}" LineBreakMode="NoWrap" Style="{DynamicResource ListItemTextStyle}" FontSize="24" HorizontalOptions="StartAndExpand" VerticalOptions="StartAndExpand"/>
</StackLayout>
<StackLayout HorizontalOptions="FillAndExpand" Grid.Column="1" Grid.Row="1" >
<Button Text="{Binding Enabled}" Command="{Binding ToggleLight}" CommandParameter="{Binding .}" HorizontalOptions="CenterAndExpand"></Button>
</StackLayout>
</StackLayout>
How do I exclude Command="{Binding ToggleLight}" on my Button form the x:DataType="model:Light" defined on my StackLayout?
Use binding-path.
Define "x:Name" outside the StackLayout (StackLayout, Grid, ListView and etc.)
Add "x:Reference" for your Command binding inside the StackLayout
The command is excluded.
Like:
<Grid x:Name="WhateverParent">
<StackLayout x:DataType="model:Light">
<Button ... Command="{Binding Path=BindingContext.ToggleLight, Source={x:Reference WhateverParent}}" />
</StackLayout>
</Grid>
How to keep the built-in Header of a ListView frozen to the top when scrolling vertically down through the ListView items?
Before flagging as duplicate: I tried to apply answers in Keep ListView.HeaderTemplate visible/static/sticky in UWP for Xamarin.Forms targeting Android without success.
Short code sample:
<ListView ItemsSource="{Binding MyList}"
HasUnevenRows="True"
SeparatorVisibility="Default"
CachingStrategy="RecycleElement">
<ListView.Header>
<Label HorizontalTextAlignment="Center"
FontAttributes="Bold"
Text="Header Title"/>
</ListView.Header>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Label Text="{Binding Name}"/>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Here is an alternative approach to this if the list isn't long
<StackLayout>
<Label HorizontalTextAlignment="Center"
FontAttributes="Bold"
Text="Header Title"/>
<StackLayout BindableLayout.ItemsSource="{Binding MyList}">
<BindableLayout.ItemTemplate>
<DataTemplate>
<StackLayout>
<Label Text="{Binding Name}"/>
<!-- boxview as separator -->
<BoxView HeightRequest="1" Color="Aqua" HorizontalOptions="FillAndExpand"/>
</StackLayout>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
</StackLayout>
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 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.
Am working small Xamarin.forms application.Now i have doubt to how to count and display list items in label
like email and gmail.
I'm browsing in google various sites i did't get result
My Xaml code is below how to display count in side bar and i used grid for that sum Xaml.task error will be occur
<?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:emit="clr-namespace:System.Reflection.Emit;assembly=mscorlib"
x:Class="vMonitor.Views.HomeListView"
Title="Home List View"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008">
<ScrollView>
<StackLayout Orientation="Vertical">
<ListView ItemsSource="{Binding Model}" Margin="20,0,20,0"
x:Name="listView"
SeparatorVisibility="Default" SeparatorColor="Brown"
HasUnevenRows="True">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid>
<StackLayout Orientation="Horizontal" Padding="10">
<Label Text="{Binding Name}" FontSize="20" FontFamily="TimesNewRomen" FontAttributes="None">
<Label.GestureRecognizers>
<TapGestureRecognizer Command="{Binding Path=BindingContext.TabCommand, Source={x:Reference listView}}" CommandParameter="{Binding .}"/>
</Label.GestureRecognizers>
</Label>
<Label Text="{Binding UserID}" FontSize="20" FontFamily="TimesNewRomen" FontAttributes="None"/>
</StackLayout>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ScrollView>
</ContentPage>
Then you can use ViewCell for List Item.
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Padding="15,10" Orientation="Horizontal">
<Label
VerticalTextAlignment="Center"
Text="{Binding ItemName}" TextColor="#FF1654" FontAttributes="Bold" FontSize="16"/>
<Label VerticalOptions="End"
VerticalTextAlignment="Center"
Text="{Binding ItemCount}" TextColor="#FF1654" FontAttributes="Bold" FontSize="16"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
You can Bind ItemName and ItemCount. If you want to Display Left Side Image then you can add Image at start position in ViewCell.
For Expandable you have to use IsVisible Property for that cell.