I created a CustomView to use in CollectionView's DataTemplate
<Frame CornerRadius="10" IsClippedToBounds="True" Padding="0" HasShadow="False" >
<AbsoluteLayout Padding="0" Margin="0">
<Image Source="image1.png" AbsoluteLayout.LayoutBounds="0,0,1,1" Aspect="AspectFill" AbsoluteLayout.LayoutFlags="All"></Image>
<Frame BackgroundColor="#fedb0a" AbsoluteLayout.LayoutBounds="0,0,0.426,0.1177" AbsoluteLayout.LayoutFlags="All" HasShadow="False">
<StackLayout Orientation="Horizontal" AbsoluteLayout.LayoutBounds="0.682,0.29,AutoSize,0.05885">
<Label Text="Hi" FontSize="Medium" VerticalOptions="CenterAndExpand"></Label>
</StackLayout>
</Frame>
<StackLayout AbsoluteLayout.LayoutBounds="0,1,1,0.2" AbsoluteLayout.LayoutFlags="All" BackgroundColor="#95000000" Orientation="Horizontal">
<StackLayout VerticalOptions="CenterAndExpand" Margin="5,0,5,0">
<Frame CornerRadius="20" IsClippedToBounds="True" Padding="0">
<Image Source="icon1.png" Aspect="AspectFill" WidthRequest="40" HeightRequest="40"></Image>
</Frame>
</StackLayout>
<StackLayout VerticalOptions="CenterAndExpand">
<Label Text="hopeshow~" FontSize="Large" TextColor="#fedb0a"></Label>
<Label Text="2020 year" FontSize="Medium" TextColor="White"></Label>
</StackLayout>
</StackLayout>
</AbsoluteLayout>
</Frame>
I placed it in my DataTemplate <vi:MyCustomView HeightRequest="40"></vi:MyCustomView> but it seems that the HeightRequest is not sequenced.
the view autosized a large view.
The WidthRequest is ok when I set a value.
How to do with it?
The layout like StackLayout and AbsoluteLayout will not fit the size of its child elements . So if you want to implement it you can use Grid instead of them .
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
//set them in the same Row and Column and they will be in the same position .
<Image Source="image1.png" Grid.Row="0" Grid.Column="0"></Image>
<Frame BackgroundColor="#fedb0a" HasShadow="False"Grid.Row="0" Grid.Column="0">
//...
</Frame>
//...other elements
</Grid>
For more details about layout you can check https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/grid
Related
In MVC ASP.net Core, I used partials to re-use blocks of a page. In Xamarin, we have DataTemplates & ControlTemplates but I'm not sure how to best use them.
In one of my pages I have the following for the content:
<StackLayout>
<Frame BackgroundColor="#2196F3" Padding="24" CornerRadius="0">
<Label Text="Welcome to data template selector" HorizontalTextAlignment="Center" TextColor="White" FontSize="36"/>
</Frame>
<CollectionView ItemsSource="{Binding MainPageView.Fields}"
EmptyView="No fields for this screen."
ItemTemplate="{StaticResource templateSelector}"
SelectionChanged="CollectionView_SelectionChanged">
</CollectionView>
<StackLayout Margin="10,0,10,5" Orientation="Vertical">
<Button Command="{Binding MainPageView.SubmitCommand}" Text="Submit" />
<validator:ErrorSummaryView
IsVisible="{Binding MainPageView.ShowValidationSummary, Mode=OneWay}"
ErrorStateManager="{Binding MainPageView.ErrorStateManager, Mode=OneWay}"
Margin="0,0,0,5"/>
</StackLayout>
</StackLayout>
The template selector is (there will be more choices later):
<tempcel:FieldDataTemplateSelector
x:Key="templateSelector"
RadioTemplate="{StaticResource RadioTemplate}"
DropListTemplate="{StaticResource DropListTemplate}">
</tempcel:FieldDataTemplateSelector>
Where I could use some direction is right now 80% of what is in RadioTemplate and DropListTemplate are the same and I'd like to pull the shared code out so if I want to change the base layout, I only need to change one place. Here are the two DataTemplates:
<DataTemplate x:Key="DropListTemplate">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackLayout
Orientation="Horizontal"
Grid.Row="0">
<Label
Text="{Binding Name}"
Style="{StaticResource LabelStyle}">
</Label>
<ImageButton HorizontalOptions="Center"
CornerRadius="6"
VerticalOptions="Center"
Clicked="HelpButton_Clicked"
HeightRequest="12"
WidthRequest="12"
BorderColor="Black"
BackgroundColor="Black"
BorderWidth="1"
IsVisible="{Binding ShowHelpButton}">
<ImageButton.Source>
<FontImageSource FontFamily="FAFreeSolid"
Color="White"
Glyph="{x:Static fa:FontAwesomeIcons.Question}"/>
</ImageButton.Source>
</ImageButton>
</StackLayout>
<Label
Grid.Row="1"
Style="{StaticResource HelpStyle}"
Text="{Binding HelpTopic.Text}"
IsVisible="{Binding HelpTopic.IsVisible, Mode=TwoWay}">
</Label>
<Picker
Grid.Row="2"
IsEnabled="{Binding IsEnabled}"
Margin="10,2,10,0"
ItemsSource="{Binding Choices.Choices}"
SelectedItem="{Binding SelectedChoice}"
ItemDisplayBinding="{Binding Label}"
SelectedIndexChanged="Picker_SelectedIndexChanged">
</Picker>
<validator:ErrorView ErrorState="{Binding ErrorStatemanager[Input]}" Grid.Row="3" />
</Grid>
</DataTemplate>
<DataTemplate x:Key="RadioTemplate">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackLayout
Orientation="Horizontal"
Grid.Row="0">
<Label
Text="{Binding Name}"
Style="{StaticResource LabelStyle}">
</Label>
<ImageButton HorizontalOptions="Center"
CornerRadius="6"
VerticalOptions="Center"
Clicked="HelpButton_Clicked"
HeightRequest="12"
WidthRequest="12"
BorderColor="Black"
BackgroundColor="Black"
BorderWidth="1"
IsVisible="{Binding ShowHelpButton}">
<ImageButton.Source>
<FontImageSource FontFamily="FAFreeSolid"
Color="White"
Glyph="{x:Static fa:FontAwesomeIcons.Question}"/>
</ImageButton.Source>
</ImageButton>
</StackLayout>
<Label
Grid.Row="1"
Style="{StaticResource HelpStyle}"
Text="{Binding HelpTopic.Text}"
IsVisible="{Binding HelpTopic.IsVisible, Mode=TwoWay}">
</Label>
<StackLayout
Grid.Row="2"
RadioButtonGroup.GroupName="{Binding Choices.Code}"
RadioButtonGroup.SelectedValue="{Binding Value}"
BindableLayout.ItemsSource="{Binding Choices.Choices}"
BindableLayout.EmptyView="No choices available"
Orientation="Horizontal"
Spacing="50"
Margin="10,2,0,0">
<BindableLayout.ItemTemplate>
<DataTemplate>
<RadioButton Value="{Binding Value}"
Content="{Binding Label}"
IsChecked="{Binding IsSelected}"
CheckedChanged="OnRadioChanged">
</RadioButton>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
<validator:ErrorView ErrorState="{Binding ErrorStatemanager[Input]}" Grid.Row="3" />
</Grid>
</DataTemplate>
I haven't figured out enough about Xamarin to know if I need to change where I have the CollectionView to put something there that has the common layout information with a way to put the different editors in. Or, if there is a way to modify the DataTemplates to get their base layout from something else. I tried looking at ContentPresenter but couldn't figure out how it would fit in.
Thanks
I found there is very little difference between DropListTemplate and RadioTemplate. So you can also achieve this without DropListTemplate and RadioTemplate .
You can display and hide the two views (Picker and BindableLayout) based on the item data of the CollectionView 's ItemsSource.
The following are the difference in the two Templates:
<Picker
Grid.Row="2"
IsEnabled="{Binding IsEnabled}"
Margin="10,2,10,0"
ItemsSource="{Binding Choices.Choices}"
SelectedItem="{Binding SelectedChoice}"
ItemDisplayBinding="{Binding Label}"
SelectedIndexChanged="Picker_SelectedIndexChanged">
</Picker>
and
<StackLayout
Grid.Row="2"
RadioButtonGroup.GroupName="{Binding Choices.Code}"
RadioButtonGroup.SelectedValue="{Binding Value}"
BindableLayout.ItemsSource="{Binding Choices.Choices}"
BindableLayout.EmptyView="No choices available"
Orientation="Horizontal"
Spacing="50"
Margin="10,2,0,0">
<BindableLayout.ItemTemplate>
<DataTemplate>
<RadioButton Value="{Binding Value}"
Content="{Binding Label}"
IsChecked="{Binding IsSelected}"
CheckedChanged="OnRadioChanged">
</RadioButton>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
I have a Xamarin Forms project and I have a Content Page with a ListView in which I have two buttons to add or remove items from a Cart.
When I click on the remove button it works just fine but when I click on the add button it only works if I click it on the left corner. If I click somewhere else on the button it will register as if I click the entire item on the listView.
Also, I don't know why but the buttons change its size when clicked.
Here is how it is performing
And here is the code. The button that is not working properly is called btnAdd
<?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="AppCrijoya.Views.CartPage">
<ContentPage.Content>
<StackLayout Padding="0">
<Grid RowSpacing="0" Margin="0">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackLayout Grid.Row="0" VerticalOptions="Start" BackgroundColor="#ffffff" Padding="0,8" Margin="0,0,0,5">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label VerticalOptions="Center" HorizontalOptions="Center" Grid.Column="0">Monto Total:</Label>
<Label x:Name="lblTotalCart" VerticalOptions="Center" HorizontalOptions="Center" Grid.Column="1" TextColor="Black" FontAttributes="Bold"></Label>
<Button VerticalOptions="Center" HorizontalOptions="Center" Grid.Column="2" x:Name="btnContinue" Text="Continuar"
BackgroundColor="#353A47" FontSize="12" HeightRequest="35"
TextColor="White" Clicked="BtnContinue_Clicked" Padding="0" />
</Grid>
<StackLayout x:Name="stkEmpty" IsVisible="False" Margin="0,220,0,0" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">
<Image Source="bag.png" HeightRequest="40"></Image>
<Label HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">TU CESTA DE LA COMPRA ESTÁ VACÍA</Label>
</StackLayout>
</StackLayout>
<ScrollView Grid.Row="1">
<ListView x:Name="CartListView" ItemsSource="{Binding oList}" HasUnevenRows="True" IsPullToRefreshEnabled="False" SelectionMode="None">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Frame Margin="3.5" CornerRadius="30">
<Grid x:Name="Item" HorizontalOptions="FillAndExpand" VerticalOptions="Center" HeightRequest="150" RowSpacing="6">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="155"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source="{Binding Image}" Aspect="Fill" HeightRequest="100" WidthRequest="100" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"></Image>
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<StackLayout Grid.Row="0" VerticalOptions="Center" HorizontalOptions="Start">
<Label Text="{Binding Name}" Margin="0" TextColor="Black" FontSize="15"/>
</StackLayout>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="35"/>
</Grid.RowDefinitions>
<!--<StackLayout Grid.Column="1" Grid.Row="0" HorizontalOptions="Start" VerticalOptions="Center">
<Label Text="Cantidad" VerticalOptions="Center"/>
</StackLayout>-->
<StackLayout Grid.Column="0" Grid.Row="1" HorizontalOptions="Start">
<Label Text="Precio Unidad"/>
</StackLayout>
<StackLayout Grid.Column="1" Grid.Row="1" HorizontalOptions="End">
<Label Text="{Binding Price, StringFormat='{0:N2}€'}"/>
</StackLayout>
<StackLayout Grid.Column="0" Grid.Row="2" HorizontalOptions="Start">
<Label Text="Precio Total" FontAttributes="Bold"/>
</StackLayout>
<StackLayout Grid.Column="1" Grid.Row="2" HorizontalOptions="Start">
<Label Text="{Binding Total, StringFormat='{0:N2}€'}" TextColor="Black"/>
</StackLayout>
<StackLayout Grid.Column="0" Grid.Row="3" HorizontalOptions="StartAndExpand">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<Button x:Name="btnRemove"
Grid.Column="0"
CornerRadius="15"
BackgroundColor="#E5D3C2"
WidthRequest="50"
HeightRequest="35"
Padding="0" Text="-"
CommandParameter="{Binding .}"
Clicked="BtnRemove_Clicked"
BorderWidth="0.3"
TextColor="#353A47"
BorderColor="#353A47"/>
<Button x:Name="btnAdd"
Grid.Column="2"
CornerRadius="15"
BackgroundColor="#E5D3C2"
WidthRequest="50"
HeightRequest="35"
Padding="0" Text="+"
CommandParameter="{Binding .}"
Clicked="BtnAdd_Clicked"
BorderWidth="0.3"
TextColor="#353A47"
BorderColor="#353A47"/>
<Label x:Name="lblQuantity"
Grid.Column="1"
VerticalOptions="Center"
Text="{Binding Quantity}"
FontAttributes="Bold"
FontSize="15"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center"
HeightRequest="20"
WidthRequest="30"/>
</Grid>
</StackLayout>
<!-- <Button x:Name="btnDelete" Grid.ColumnSpan="2" Grid.Row="3" Text="Retirar de bolsa" CommandParameter="{Binding Id}"
BackgroundColor="#9C2424" FontSize="10" HeightRequest="35"
TextColor="White" Clicked="BtnDelete_Clicked" Padding="0" />-->
</Grid>
</Grid>
</Grid>
</Frame>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ScrollView>
</Grid>
</StackLayout>
</ContentPage.Content>
</ContentPage>
Please help because I have no idea of why this is happening. Thanks.
EDIT
If I remove the label in between the two buttons it will work, don't know why
You may get more reliable behavior if you:
Add the missing RowDefinition, so Grid.Row="3" has height 35.
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<!-- ADD BELOW LINE -->
<RowDefinition Height="auto"/>
<RowDefinition Height="35"/>
</Grid.RowDefinitions>```
Remove the unneeded StackLayout. Change:
<StackLayout Grid.Column="0" Grid.Row="3" HorizontalOptions="StartAndExpand">
<Grid>
...
</Grid>
</StackLayout>
to:
<Grid Grid.Column="0" Grid.Row="3" HorizontalOptions="StartAndExpand">
...
</Grid>
IF the above are not sufficient, you might need to add a HeightRequest or hardcoded RowDefinition Height somewhere. I realize this is not ideal - Auto heights are preferable, because they adapt as needed - but sometimes Xamarin Forms needs that extra hint.
The first place to try is to give the whole ItemTemplate a HeightRequest:
<ViewCell>
<Frame ... HeightRequest="300" ...
If that works, then you might try instead putting that on one of the nested elements, to allow most of the content to be automatically sized.
ALTERNATIVE (If the first two items aren't enough)
Its possible to collapse any complex ItemTemplate layout to a SINGLE Grid. Then use StackLayout within cells as needed (but NO NESTED Grids). This is done by use of ColumnSpan and RowSpan to describe areas of the overall grid. You can see this visually if you DIAGRAM the entire layout on a piece of paper, drawing vertical and horizontal lines around each section. Extend those lines all the way to edges of the outer grid.
Xamarin Forms should do a better job of figuring out the layout of this single Grid.
The page might also appear faster.
Try to change the order of the Label , like this .
<Button
x:Name="btnRemove"
Grid.Column="0"
Padding="0"
BackgroundColor="#E5D3C2"
BorderColor="#353A47"
BorderWidth="0.3"
Clicked="BtnRemove_Clicked"
CommandParameter="{Binding .}"
CornerRadius="15"
HeightRequest="35"
Text="-"
TextColor="#353A47"
WidthRequest="50" />
<Label
x:Name="lblQuantity"
Grid.Column="1"
FontAttributes="Bold"
FontSize="15"
HeightRequest="20"
HorizontalTextAlignment="Center"
Text="{Binding Quantity}"
VerticalOptions="Center"
VerticalTextAlignment="Center"
WidthRequest="30" />
<Button
x:Name="btnAdd"
Grid.Column="2"
Padding="0"
BackgroundColor="#E5D3C2"
BorderColor="#353A47"
BorderWidth="0.3"
Clicked="BtnAdd_Clicked"
CommandParameter="{Binding .}"
CornerRadius="15"
HeightRequest="35"
Text="+"
TextColor="#353A47"
WidthRequest="50" />
I did a test based on your code,I found that the middle Label lblQuantity(Label x:Name="lblQuantity") has covered button (Button x:Name="btnAdd" ), so you can just remove property WidthRequest="30" of the middle label (lblQuantity), just as follows:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<Button x:Name="btnRemove"
Grid.Column="0"
CornerRadius="15"
BackgroundColor="#E5D3C2"
WidthRequest="50"
HeightRequest="35"
Padding="0"
Text="-"
Clicked="btnRemove_Clicked"
BorderWidth="0.3"
TextColor="#353A47"
BorderColor="#353A47"/>
<Button x:Name="btnAdd"
Grid.Column="2"
CornerRadius="15"
BackgroundColor="#E5D3C2"
WidthRequest="50"
HeightRequest="35"
Padding="0"
Text="+"
Clicked="btnAdd_Clicked"
BorderWidth="0.3"
TextColor="#353A47"
BorderColor="#353A47"/>
<Label x:Name="lblQuantity"
Grid.Column="1"
VerticalOptions="Center"
Text="{Binding Name}"
FontAttributes="Bold"
FontSize="15"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center"
HeightRequest="20"
/>
</Grid>
An item template that includes a SkiaSharp control displaying svg, a SwipeView and some labels,
is taking forever to load when navigating to the page.
I am using StackLayout with BindableLayout.ItemSource and ItemTemplate.
Using CollectionView will let the page load much faster, but then every attempt to scroll down will slow the app for a moment, while the CollectionView generate the next batch of items.
I have moved all the code generating the items source to background, so the only thing happening on the ui thread is the binding to the ObservableCollection from the viewmodel, and drawing it.
I have also tried reducing the layouts in the item template, but it did not improve loading speed.
Xaml for page:
<DataTemplate x:Key="DataTemplateReportsItemAction">
<StackLayout Orientation="Horizontal">
<effectsView:SfEffectsView Style="{StaticResource StyleRippleEffectReportAction}">
<effectsView:SfEffectsView.GestureRecognizers>
<TapGestureRecognizer Command="{Binding ActionCommand}" />
</effectsView:SfEffectsView.GestureRecognizers>
<image:SVGImage ImageSource="{Binding IconName}"
Style="{StaticResource StyleSVGImageReportRowAction}" />
</effectsView:SfEffectsView>
<BoxView Style="{StaticResource StyleBoxViewReportItemAction}"
IsVisible="{Binding IsLast, Converter={StaticResource BoolToReverseBoolConverter}}" />
</StackLayout>
</DataTemplate>
<ControlTemplate x:Key="DataTemplateReportsItemCellDefault">
<StackLayout Orientation="Horizontal"
HorizontalOptions="FillAndExpand"
BindingContext="{TemplateBinding BindingContext}">
<StackLayout Orientation="Vertical"
HorizontalOptions="FillAndExpand"
VerticalOptions="Center">
<Label Style="{StaticResource StyleLabelReportCellTop}"
Text="{Binding DisplayValue}"
TextColor="{Binding ColorName, TargetNullValue={StaticResource ColorLabelReportCell}, FallbackValue={StaticResource ColorLabelReportCell}}" />
<Label Style="{StaticResource StyleLabelReportCellBottom}"
Text="{Binding DisplayTitle}"
TextColor="{Binding ColorName, TargetNullValue={StaticResource ColorLabelReportCell}, FallbackValue={StaticResource ColorLabelReportCell}}" />
</StackLayout>
<BoxView Style="{StaticResource StyleBoxViewReportItemCell}"
IsVisible="{Binding IsLast, Converter={StaticResource BoolToReverseBoolConverter}}" />
</StackLayout>
</ControlTemplate>
<ControlTemplate x:Key="DataTemplateReportsItemCellTrend">
<StackLayout Orientation="Horizontal"
HorizontalOptions="FillAndExpand"
BindingContext="{TemplateBinding BindingContext}">
<StackLayout Orientation="Vertical"
HorizontalOptions="FillAndExpand"
VerticalOptions="Center">
<image:SVGImage ImageSource="{Binding IconName}"
HorizontalOptions="Center" />
<Label Style="{StaticResource StyleLabelReportCellTrend}"
Text="{Binding DisplayTitle}"
TextColor="{Binding ColorName, TargetNullValue={StaticResource ColorLabelReportCell}, FallbackValue={StaticResource ColorLabelReportCell}}" />
</StackLayout>
<BoxView Style="{StaticResource StyleBoxViewReportItemCell}"
IsVisible="{Binding IsLast, Converter={StaticResource BoolToReverseBoolConverter}}" />
</StackLayout>
</ControlTemplate>
<converters:ValueToValueConverter x:Key="CellTemplateSelector"
DefaultValue="{StaticResource DataTemplateReportsItemCellDefault}">
<converters:ValueToValueList>
<converters:ValueToValueItem OnValue="{x:Static reportenums:MobileColumnMetaType.Trend}"
ToValue="{StaticResource DataTemplateReportsItemCellTrend}" />
</converters:ValueToValueList>
</converters:ValueToValueConverter>
<DataTemplate x:Key="DataTemplateReportsItemCell">
<ContentView ControlTemplate="{Binding MobileMetaType, Converter={StaticResource CellTemplateSelector}}"
HorizontalOptions="FillAndExpand" />
</DataTemplate>
<DataTemplate x:Key="DataTemplateReportsItem">
<Grid HeightRequest="{StaticResource DoubleReportRowTotalHeight}">
<Grid.RowDefinitions>
<RowDefinition Height="{StaticResource DoubleReportRowTitleHeight}" />
<RowDefinition Height="{StaticResource DoubleReportRowSwipeHeight}" />
</Grid.RowDefinitions>
<StackLayout Margin="0,5"
Orientation="Horizontal"
HorizontalOptions="FillAndExpand"
Spacing="10">
<image:SVGImage ImageSource="{Binding LactationIcon}"
IsVisible="{Binding LactationIcon, Converter={StaticResource StringToIsVisibleConverter}}"
Style="{StaticResource StyleSVGImageReportRowLactation}" />
<Label Style="{StaticResource StyleLabelReportRowTitle}"
FontSize="{Binding UseSmallTitle, Converter={StaticResource RowFontSizeConverter}}"
Text="{Binding DisplayTitle}" />
<Label Style="{StaticResource StyleLabelReportRowTitleGroup}"
IsVisible="{Binding GroupName, Converter={StaticResource StringToIsVisibleConverter}}"
Text="{Binding GroupName}" />
<Frame Style="{StaticResource StyleFrameReportRowBadge}"
BackgroundColor="{Binding Badge.BadgeType, Converter={StaticResource BadgeColorConverter}}"
IsVisible="{Binding Badge.HasBadge}">
<Label Style="{StaticResource StyleLabelReportRowTitleBadge}"
Text="{Binding Badge.BadgeTitle}" />
</Frame>
</StackLayout>
<Grid Grid.Row="1">
<SwipeView BackgroundColor="{StaticResource ColorReportViewRowBackground}"
IsEnabled="{Binding IsEditable}"
x:Name="swipey">
<SwipeView.RightItems>
<SwipeItems Mode="Reveal"
SwipeBehaviorOnInvoked="RemainOpen">
<SwipeItemView WidthRequest="{Binding Width, Source={Reference swipey}}">
<Grid BackgroundColor="{StaticResource ColorLabelReportRowActionsBackground}">
<Grid Margin="20,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<effectsView:SfEffectsView Style="{StaticResource StyleRippleEffectReportRowClose}"
helpers:VisualTreeHelper.ReferenceObject="{Binding Source={Reference swipey}}">
<effectsView:SfEffectsView.GestureRecognizers>
<TapGestureRecognizer Tapped="OnGroupRowCloseTapped" />
</effectsView:SfEffectsView.GestureRecognizers>
<image:SVGImage Style="{StaticResource StyleSVGImageReportRowActionsClose}" />
</effectsView:SfEffectsView>
<StackLayout Grid.Column="2"
Orientation="Horizontal"
BindableLayout.ItemTemplate="{StaticResource DataTemplateReportsItemAction}"
BindableLayout.ItemsSource="{Binding ActionItems}" />
</Grid>
</Grid>
</SwipeItemView>
</SwipeItems>
</SwipeView.RightItems>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<StackLayout Orientation="Horizontal"
HorizontalOptions="FillAndExpand"
BackgroundColor="{StaticResource ColorTransparent}"
BindableLayout.ItemTemplate="{StaticResource DataTemplateReportsItemCell}"
BindableLayout.ItemsSource="{Binding Cells}">
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Command="{Binding BindingContext.NavigateCommand, Source={RelativeSource Mode=FindAncestor, AncestorType={x:Type views:BasePage}}}"
CommandParameter="{Binding}" />
</StackLayout.GestureRecognizers>
</StackLayout>
<Frame Grid.Column="1"
Padding="0"
BackgroundColor="{StaticResource ColorReportGroupRowActionsBackground}"
IsVisible="{Binding IsEditable}">
<image:SVGImage Style="{StaticResource StyleSVGImageSwipe}" />
</Frame>
</Grid>
</SwipeView>
<Grid BackgroundColor="{StaticResource ColorTransparent}"
IsVisible="{Binding IsEditable, Converter={StaticResource BoolToReverseBoolConverter}}">
<Grid.GestureRecognizers>
<TapGestureRecognizer Command="{Binding BindingContext.NavigateCommand, Source={RelativeSource Mode=FindAncestor, AncestorType={x:Type views:BasePage}}}"
CommandParameter="{Binding}" />
</Grid.GestureRecognizers>
</Grid>
</Grid>
</Grid>
</DataTemplate>
</ContentView.Resources>
<ContentView.Content>
<Grid>
<gradient:SfGradientView BackgroundBrush="{StaticResource BrushViewBackgroundGradient}" />
<Grid BackgroundColor="{StaticResource ColorReportsBrowserViewBackground}"
Margin="10,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<reports:ReportToolbarView />
<RefreshView Grid.Row="1"
IsRefreshing="{Binding IsRefreshing, Mode=TwoWay}"
Command="{Binding RefreshCommand}"
BackgroundColor="{StaticResource ColorReportsViewBackground}"
Margin="10,0">
<ScrollView HorizontalScrollBarVisibility="Never"
VerticalScrollBarVisibility="Default">
<StackLayout Orientation="Vertical">
<StackLayout BindableLayout.ItemsSource="{Binding ReportItems}"
BindableLayout.ItemTemplate="{StaticResource DataTemplateReportsItem}"
Orientation="Vertical" />
<BoxView HeightRequest="50" />
</StackLayout>
</ScrollView>
</RefreshView>
<sortfilter:SortFilterView Grid.Row="1"
VerticalOptions="Start"
IsVisible="{Binding SortFilterModel.IsVisible}" />
</Grid>
</Grid>
</ContentView.Content>
For comparison, replacing the item template with a simple Label makes the page load extremely fast.
Is there a way to load lists of items faster in Xamarin Forms?
Too many StackLayouts. Even worse, you stacked them into each other. Don't do that.
StackLayouts need a lot of layout cycles, as they have to calculate their size based on the children you have put in. If one of those children is a StackLayout as well, that will more than double the layout passes necessary to get to the final result.
And now guess what happens, when you have 50 or more items in your list. Those layout passes will have to run for each single item in your list.
My advice based on my experience would be to replace the StackLayouts with a grid and place your elements using their Grid.Row, Grid.Colum, Grid.RowSpan and Grid.Columnspan properties. Also set your grid sizes to either fixed values or use star based sizes. Don't use "Auto" as this needs more layout passes as well.
Above code works fine but for the below code the button should show in single row but it wraps to 2 rows.
<Frame CornerRadius="10" Grid.Row="1"
OutlineColor="#FF00BBEE" Margin="2,2"
Padding="0">
<StackLayout Padding="0">
<Grid Padding="0">
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Label Grid.Row="0" TextColor="Black" FontSize="Large" Text=" B.Sc(Physician Assistant)" HorizontalOptions="Start" VerticalOptions="CenterAndExpand" FontAttributes="Bold"></Label>
<Label Grid.Row="1" TextColor="Black" FontSize="Medium" Text=" Duration:3 Years + 1 Year Internship" HorizontalOptions="Start" VerticalOptions="CenterAndExpand" FontAttributes="Italic"></Label>
<Label Grid.Row="2" TextColor="Black" FontSize="Medium" Text=" Eligibility: +2 Pass with Biology as one subject" HorizontalOptions="Start" VerticalOptions="CenterAndExpand"></Label>
<Grid Grid.Row="3">
<Button HorizontalOptions="Center" Text="Apply Now" VerticalOptions="CenterAndExpand"></Button>
</Grid>
</Grid>
</StackLayout>
</Frame>
What is Above code? According to your code, you mean that there are four RowDefinitions in Grid, the Label and Button should have same height?
For Grid's RowDefinitions, default value of the RowDefinition.Height property is *. So every RowDefinition has same height, but you add VerticalOptions="CenterAndExpand" for every Label and Button, so this property will change height to adapt view's content.
If I delete VerticalOptions="CenterAndExpand", you can see every RowDefinition have the same height.
<Frame
Margin="2.2"
Padding="0"
CornerRadius="10"
OutlineColor="#FF00BBEE">
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Label
Grid.Row="0"
BackgroundColor="Red"
FontSize="Large"
Text=" B.Sc(Physician Assistant)"
TextColor="Black"
/>
<Label
Grid.Row="1"
BackgroundColor="Aquamarine"
Text=" Duration:3 Years + 1 Year Internship"
TextColor="Black"
/>
<Label
Grid.Row="2"
BackgroundColor="Beige"
Text=" Eligibility: +2 Pass with Biology as one subject"
TextColor="Black"
/>
<Button Grid.Row="3" Text="Apply Now" BackgroundColor="BlueViolet" />
</Grid>
</Frame>
This only shows minus option on the stepper. Why the plus option is not visible? The stepper works just fine on iOS.
<Entry Text="{Binding Path=Quantity, Mode=TwoWay}" Grid.Column="1" Grid.Row="1"></Entry>
<Stepper Value="{Binding Path=Quantity, Mode=TwoWay}"
Grid.Column="2"
Grid.Row="1"
MinimumWidthRequest="200"></Stepper>
I have tried shared code in my Grid , it works .
<Grid VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="400" />
<RowDefinition Height="100" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Entry Text="{Binding Path=Quantity, Mode=TwoWay}"
Grid.Column="0"
Grid.Row="0"></Entry>
<Stepper Value="{Binding Path=Quantity, Mode=TwoWay}"
Grid.Column="1"
Grid.Row="0"
MinimumWidthRequest="200"></Stepper>
<BoxView Grid.Row="1"
Grid.Column="0"
BackgroundColor="Red" />
<Button Grid.Row="2"
Grid.Column="0"
BackgroundColor="Yellow"
Clicked="Button_Clicked" />
</Grid>
The effects :
If you have a doubt about MinimumWidthRequest , it can be affected by Layout . If using it in StackLayout , then it will work , however in Grid can not .
<StackLayout Orientation="Horizontal" VerticalOptions="Start">
<Label Text="Welcome to Xamarin.Forms!"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand" />
<Entry Text="{Binding Path=Quantity, Mode=TwoWay}" Placeholder="123456789" MinimumWidthRequest="5"
></Entry>
<Stepper Value="{Binding Path=Quantity, Mode=TwoWay}"
MinimumWidthRequest="1"></Stepper>
</StackLayout>
The effects :
In addition , from Remarks of MinimumWidthRequest :
This causes overflow handling to shrink this element to its minimum width before elements who do not have a minimum size set.
I think it just be used to shrink the element , if the element not be supported the limit size , then it will not work .Here Stepper is not recommended for using MinimumWidthRequest. If works, it will cause it to appear asymmetric.