Hi I am creating an expanding ListView in Xamarin Forms. I have taken a grid with two rows. First height as 50.. and Second as AUTO... When I am clicking on first row and making the below row Visible. The below row becomes Visible but height of cell remains same.. I have made ListView rows as Uneven also.. Please find the code below
<localRenderer:NativeListView x:Name="SkillsListView"
HasUnevenRows="true"
AbsoluteLayout.LayoutFlags="All"
AbsoluteLayout.LayoutBounds="0,0,1,1"
Margin="5,5,5,5"
SelectionMode="None"
BackgroundColor="#F3F4F6"
SeparatorVisibility="None"
>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
Padding="0">
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<AbsoluteLayout HorizontalOptions="FillAndExpand"
VerticalOptions="Fill"
HeightRequest="50"
Grid.Row="0"
BackgroundColor="#F3F4F5">
<AbsoluteLayout Margin="5,5,5,5" AbsoluteLayout.LayoutFlags="All"
AbsoluteLayout.LayoutBounds="0,0,1,1"
BackgroundColor="#FCFCFD">
<Label Text="{Binding SkillCode}"
FontFamily="Roboto#300"
FontSize="16"
FontAttributes="None"
TextColor="#FF888888"
Margin="10,0,0,0"
AbsoluteLayout.LayoutBounds="0,0.5,-1,-1"
AbsoluteLayout.LayoutFlags="PositionProportional" />
<Image x:Name="statusButton"
Margin="0,0,20,0"
Source="{Binding StateIcon}" HeightRequest="7" WidthRequest="13" AbsoluteLayout.LayoutBounds="1,0.5,-1,-1" AbsoluteLayout.LayoutFlags="PositionProportional" />
<Button AbsoluteLayout.LayoutFlags="All"
AbsoluteLayout.LayoutBounds="0,0,1,1" BackgroundColor="Transparent" Clicked="SkillListHeaderTapped" CommandParameter="{Binding .}" />
</AbsoluteLayout>
</AbsoluteLayout>
<Editor Text="{Binding Description}"
FontFamily="Roboto#300"
FontSize="16"
IsEnabled="false"
IsVisible="{Binding IsVisible}"
Margin="10,0,0,10"
BackgroundColor="White"
FontAttributes="None"
Grid.Row="1"
TextColor="#FF686868"
/>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</localRenderer:NativeListView>
Related
I have the below XAML structure using a collection view which is using a list called 'users' as its ItemSource. I have a bound property which controls if the items are visible or not :
<StackLayout Orientation="Horizontal">
<Frame IsVisible="{Binding isVisible}" HasShadow="True" BackgroundColor="White" Padding="0">
The issue is that unless I remove the StackLayout around the Frame then the IsVisible binding doesn't work. Does anyone know why the binding works without the StackLayout, but not with ?
<CollectionView Grid.Row="1" x:Name="users" IsGrouped="True" SelectionMode="Single">
<CollectionView.GroupHeaderTemplate>
<DataTemplate>
<StackLayout Orientation="Horizontal" MinimumHeightRequest="200" BackgroundColor="{Binding tint_colour}">
<Image Source="{Binding school_image}" WidthRequest="120" HeightRequest="100"/>
<Label Text="{Binding organisation_title}"
TextColor="{Binding font_colour}"
FontSize="Large"
FontAttributes="Bold"
VerticalTextAlignment="Center"></Label>
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Tapped="HeaderTapped" CommandParameter="{Binding organisation_title}"></TapGestureRecognizer>
</StackLayout.GestureRecognizers>
</StackLayout>
</DataTemplate>
</CollectionView.GroupHeaderTemplate>
<CollectionView.ItemsLayout>
<LinearItemsLayout Orientation="Vertical" ItemSpacing="1"/>
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout Orientation="Horizontal">
<Frame IsVisible="{Binding isVisible}" HasShadow="True" BackgroundColor="White" Padding="0">
<Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<behaviors:Expander x:Name="MainExpander" CollapseAnimationLength="500" IsExpanded="False" IsVisible="True" >
<behaviors:Expander.Header>
<Grid HorizontalOptions="FillAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="10"/>
</Grid.ColumnDefinitions>
<Frame HeightRequest="40" WidthRequest="40" CornerRadius="20" HorizontalOptions="Start" VerticalOptions="Center" Margin="20" Padding="0" BackgroundColor="Maroon">
<Label Text="{Binding student_initial}" TextColor="White" HorizontalOptions="Center" VerticalOptions="Center" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" />
</Frame>
<StackLayout Grid.Column="2" HorizontalOptions="StartAndExpand" VerticalOptions="Center" Margin="20">
<Label IsVisible="{Binding isVisible}" x:Name="StudentName" Text="{Binding student_fullname}"></Label>
<Label x:Name="StudentID" IsVisible="false" Text="{Binding student_unique_id}"></Label>
</StackLayout>
</Grid>
</behaviors:Expander.Header>
<Grid RowSpacing="0" HorizontalOptions="FillAndExpand" HeightRequest="240" VerticalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Button Grid.Row="0" Text="Messages" Clicked="Button_Clicked"></Button>
<Button x:Name="btnTopUp" Grid.Row="1" Text="Quick Topup" Clicked="Button_Clicked" IsVisible="{Binding topup_product_id, Converter={StaticResource IsNotNullOrEmptyConverter}}"></Button>
<Button Grid.Row="2" Text="Payments" Clicked="Button_Clicked"></Button>
</Grid>
<!-- TODO: Look at adding a balance for childrens topups? -->
</behaviors:Expander>
</Grid>
</Frame>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
I did a test about it and it works fine, here are xaml and codebehind:
xmal:
<StackLayout>
<CollectionView x:Name="mycol">
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout >
<Frame BackgroundColor="Red" IsVisible="{Binding isvisible}">
<Label Text="{Binding Name}"/>
</Frame>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
codebehind:
public partial class CollectionTest : ContentPage
{
ObservableCollection<People> peoples = new ObservableCollection<People> {
new People{ Name="Adam",isvisible=true},
new People{ Name="Bob",isvisible=true},
new People {Name="Adam2",isvisible=false },
new People{ Name="Bob2",isvisible=true} };
public CollectionTest()
{
InitializeComponent();
mycol.ItemsSource = peoples;
}
I am working with a collectionview using GridItemsLayout orientation=“Vertical” Span=“2”.
When I click on a button that expands the lower part of my grid item. Currently only by using ItemSizingStrategy.MeasureAllItems I am able to get the lower part to expand. I was wondering if there is a way of controlling the item positioning on the image so the images always align and only the lower half expands evenly.
I am aware each item has its own layout, but this looks messy. I’ve read the documentation mention this type of sizing.
<ContentPage.Content>
<StackLayout>
<CollectionView x:Name="CollectionList"
VerticalOptions="FillAndExpand"
ItemsSource="{Binding Shares}"
IsGrouped="True"
ItemSizingStrategy="MeasureAllItems">
<!--HEADER-->
<CollectionView.GroupHeaderTemplate>
<DataTemplate>
<StackLayout Orientation="Horizontal"
Padding="5"
BackgroundColor="#f7f7fb">
<Label x:Name="labelname"
Text="{Binding GroupKey}"
/>
<Button Text=" More"
FontSize="16"
Clicked="OpenButton_Clicked"/>
</StackLayout>
</DataTemplate>
</CollectionView.GroupHeaderTemplate>
<!--TEMPLATING-->
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Vertical" Span="2" />
</CollectionView.ItemsLayout>
<!--BODY-->
<CollectionView.ItemTemplate>
<DataTemplate x:DataType="viewmodels:ShareViewModel">
<Grid Padding="5" Margin="1,0,1,0" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="50" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ImageButton x:Name="image"
Source="{Binding ImageLink}"
WidthRequest="150"
Clicked="FullImageView"
Grid.ColumnSpan="2"
Aspect="AspectFill"
Grid.Row="0"
Grid.Column="0"/>
<Label FontSize="16"
Text="{Binding Name}"
Grid.Row="1"
Grid.Column="0"/>
<Label x:Name="label_more"
Text="More"
Grid.Row="1"
Grid.Column="1"
HorizontalTextAlignment="End"/>
<Label
Text="{Binding CreateDate}"
Grid.Row="2"
Grid.Column="0"/>
<ImageButton IsVisible="{Binding TVNImageSet}"
Command="{Binding BindingContext.ToggleTVNCommand, Source={x:Reference Name=sharepage}}"
CommandParameter="{Binding .}"
Source="addresscard.png"
Grid.Row="2"
Grid.Column="1">
</ImageButton>
<!--Lower Section if the card is tapped (EXPAND)-->
<StackLayout
IsVisible="{Binding TVNVisible}"
Grid.Row="3"
Grid.ColumnSpan="2">
<StackLayout Orientation="Horizontal"
IsVisible="{Binding PhoneVisible}"
ClassId="{Binding Phone}">
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"
NumberOfTapsRequired="1"
/>
</StackLayout.GestureRecognizers>
<Image Source="call.png"
WidthRequest="15"/>
<Label
FontSize="12"
Text="{Binding Phone}" />
</StackLayout>
<Label
FontSize="12"
Text="{Binding Address}"
IsVisible="{Binding AddressVisible}">
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped_1" NumberOfTapsRequired="1"/>
</Label.GestureRecognizers>
</Label>
</StackLayout>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
All BindingContext.ToggleTVNCommand does is set TVNVisible to true which shows the lower half the "expanding potion". I don't need to use collection view if there is an easier way fo displaying this data, but CollectionVView seemed like the best choice for the layout and item source I wanted.
After digging around GitHub forums on bugs and updates for Xamarin, someone mentioned to just work with SyncFusion's sfListview the membership is not that bad and my company is willing to pay for it if it makes working with Xamarin easier.
That wasn't the solution I was hoping for, but it works and their customer support is great.
below is the reference
https://help.syncfusion.com/xamarin/listview/working-with-sflistview
Has anyone implanted something like the following, that could be of relevance to me? How can I put a frame that encompasses both the group and the items in the photo:
click to enlarge
I have a dirty but simple way:
When I make same forms I use ListView without grouping and ViewCell with RepeaterView. You need remember that it is not the best perfomance way.
If you want to design the UI like the screenshot your provided, using frame to crop image, you can take a look:
<CollectionView IsGrouped="true" ItemsSource="{Binding Animals}">
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid Padding="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Frame Padding="0"
Grid.RowSpan="2"
BorderColor="Black"
CornerRadius="50"
HeightRequest="40"
HorizontalOptions="Center"
IsClippedToBounds="True"
WidthRequest="40">
<Image
Aspect="AspectFill"
HeightRequest="100"
Source="{Binding ImageUrl}"
WidthRequest="100" />
</Frame>
<Label
Grid.Column="1"
FontAttributes="Bold"
Text="{Binding Name}" />
<Label
Grid.Row="1"
Grid.Column="1"
FontAttributes="Italic"
Text="{Binding Location}"
VerticalOptions="End" />
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
<CollectionView.GroupHeaderTemplate>
<DataTemplate>
<Label
BackgroundColor="LightGray"
FontAttributes="Bold"
FontSize="Large"
Text="{Binding Name}" />
</DataTemplate>
</CollectionView.GroupHeaderTemplate>
</CollectionView>
About viewmodel class, you can take a look Xamarin.Forms CollectionView Grouping
I am trying to build a grid, with the first row fixed during vertically scroll, and the first column fixed during horizontally scroll
Do you know any plugin/component to achieve this ?
Actually for this I use 3 scrollView :
One for the fixed row, with only horizontal scroll
One for the fixed column, with only vertical scroll
One for the other cell, with horizontal and vertical scroll.
Then I have to synchronize the scrollViews, to be sure the alignment is preserved.
This is really ugly to do, and it might be laggy with all this synchronizations...
<StackLayout Spacing="0">
<ScrollView
x:Name="ScrollEnteteSynthese"
Orientation="Horizontal"
Scrolled="ScrollEnteteSynthese_Scrolled"
>
<Grid
x:Name="gridEnteteSynthese"
BackgroundColor="{StaticResource Grey}"
ColumnSpacing="1"
RowSpacing="1"
/>
</ScrollView>
<StackLayout
Orientation="Horizontal"
Spacing="0"
HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"
>
<ScrollView
x:Name="ScrollColSynthese"
Orientation="Vertical"
Scrolled="ScrollColSynthese_Scrolled"
HorizontalOptions="Fill"
VerticalOptions="FillAndExpand"
WidthRequest="100">
<Grid
x:Name="gridColSynthese"
ColumnSpacing="1"
RowSpacing="1"
BackgroundColor="{StaticResource Grey}"
/>
</ScrollView>
<ScrollView
x:Name="ScrollSynthese"
Orientation="Both"
Scrolled="ScrollSynthese_Scrolled"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
>
<Grid
x:Name="gridSynthese"
BackgroundColor="{StaticResource GreyLight}"
ColumnSpacing="1"
RowSpacing="1"
/>
</ScrollView>
</StackLayout>
</StackLayout>
Actually, there are many different layout can implement it. For example
<StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Grid HeightRequest="300" >
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="350" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.2*"/>
<ColumnDefinition Width="0.8*"/>
</Grid.ColumnDefinitions>
<Frame Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Padding="0">
<ScrollView BackgroundColor="LightBlue" VerticalScrollBarVisibility="Never" HorizontalScrollBarVisibility="Never">
<StackLayout Orientation="Horizontal">
//...
</StackLayout>
</ScrollView>
</Frame>
<Frame Grid.Row="1" Grid.Column="0" Padding="0" Margin="0,-5,0,0">
<ScrollView BackgroundColor="LightGreen" VerticalScrollBarVisibility="Never" HorizontalScrollBarVisibility="Never">
<StackLayout Orientation="Vertical">
//...
</StackLayout>
</ScrollView>
</Frame>
<Frame Grid.Row="1" Grid.Column="1" Padding="0" Margin="-5,-5,0,0">
<Grid Grid.Row="1" Grid.Column="1" BackgroundColor="LightPink">
//
</Grid>
</Frame>
</Grid>
</StackLayout>
We've got an simple collection view for horizontal items. See code below.
<CollectionView ItemsSource="{Binding Items}" ItemsLayout="HorizontalList" ItemSizingStrategy="MeasureFirstItem" HorizontalOptions="StartAndExpand" VerticalOptions="Start" Grid.Row="1">
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid Padding="10">
<Grid.GestureRecognizers>
<TapGestureRecognizer Tapped="Item_Tapped" CommandParameter="{Binding .}"></TapGestureRecognizer>
</Grid.GestureRecognizers>
<Grid.RowDefinitions>
<RowDefinition Height="150" />
<RowDefinition Height="35" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150" />
</Grid.ColumnDefinitions>
<Image
Source="{Binding ImageUrl}"
HorizontalOptions="Fill"
VerticalOptions="Fill"
Aspect="AspectFill"
HeightRequest="60"
WidthRequest="60" />
<Label
HorizontalOptions="Center"
Grid.Row="1"
Text="{Binding Title}"
FontAttributes="Bold"
LineBreakMode="TailTruncation" />
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
On android this works great and I've got items stand neatly next to each other. On iOS the items are overlapping each other. Cannot find why this doesn't work on iOS.