I have a Master-Detail Page in my project, I've set the phone language to Arabic and everything is working fine the master page is on the right and the icon is on the right. But the thing is the TitleView (toolbaritems) are pushed a little bit to the right when the phone is set to Arabic. I tried this without Master-Detail page project and the TitleView is working fine and it is in the exact place.
With Master Detail Page:
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:AppXamarin.Pages"
x:Class="AppXamarin.Pages.MasterMainPage" NavigationPage.HasNavigationBar="False" NavigationPage.HasBackButton="False" FlowDirection="{x:Static Device.FlowDirection}">
<MasterDetailPage.Master>
<local:MasterPage x:Name ="masterPage" FlowDirection="{x:Static Device.FlowDirection}"/>
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<NavigationPage FlowDirection="{x:Static Device.FlowDirection}">
<x:Arguments>
<local:MenuPage></local:MenuPage>
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
MenuPage Xaml file:
<NavigationPage.TitleView>
<Grid Grid.Row="0" Grid.Column="0" HorizontalOptions="EndAndExpand" FlowDirection="{x:Static Device.FlowDirection}">
<Grid.GestureRecognizers>
<TapGestureRecognizer Tapped="cart_Clicked"/>
</Grid.GestureRecognizers>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Image x:Name="BadgeIconImage" Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" Grid.ColumnSpan="2" Margin="6" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Source="cart">
<Image.HeightRequest>
<OnIdiom Phone="25" Tablet="35"/>
</Image.HeightRequest>
<Image.WidthRequest>
<OnIdiom Phone="25" Tablet="35"/>
</Image.WidthRequest>
</Image>
<Frame x:Name="BadgeFrame" Grid.Row="0" Grid.Column="1" CornerRadius="12" Padding="10,4" HasShadow="false" OutlineColor="Transparent" BackgroundColor="Transparent">
<Label x:Name="BadgeTextLabel" FontSize="12" FontAttributes="Bold" HorizontalOptions="EndAndExpand" TextColor="#FF0000"/>
</Frame>
</Grid>
</NavigationPage.TitleView>
Result:
Without Master Detail Page:
<NavigationPage.TitleView>
<Grid Grid.Row="0" Grid.Column="0" HorizontalOptions="EndAndExpand" FlowDirection="{x:Static Device.FlowDirection}">
<!--<Grid.GestureRecognizers>
<TapGestureRecognizer Tapped="cart_Clicked"/>
</Grid.GestureRecognizers>-->
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Image x:Name="BadgeIconImage" Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" Grid.ColumnSpan="2" Margin="6" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Source="cart">
<Image.HeightRequest>
<OnIdiom Phone="25" Tablet="35"/>
</Image.HeightRequest>
<Image.WidthRequest>
<OnIdiom Phone="25" Tablet="35"/>
</Image.WidthRequest>
</Image>
<Frame x:Name="BadgeFrame" Grid.Row="0" Grid.Column="1" CornerRadius="12" Padding="10,4" HasShadow="false" OutlineColor="Transparent" BackgroundColor="Transparent">
<Label x:Name="BadgeTextLabel" FontSize="12" FontAttributes="Bold" HorizontalOptions="EndAndExpand" TextColor="#FF0000"/>
</Frame>
</Grid>
<!--</Grid>-->
</NavigationPage.TitleView>
Result:
My understanding tells me you are trying to add toolbar items so you do not use titleView for that:
What you should be doing, on the other hand, is something like below
C#:
this.ToolbarItems.Add(new ToolbarItem()
{
Icon = "BadgeIconImage",
Command = YourCommand,
});
XAML:
<ContentPage.ToolbarItems>
<ToolbarItem Order="Primary" Icon="BadgeIconImage" />
</ContentPage.ToolbarItems>
To understand Xamarin Forms Toolbar check this guide by Adam Pedley
Update
I have a feeling that the padding that you are using on the Frame is what's pushing your View
Padding="10,4"
Check this:
<Frame x:Name="BadgeFrame" Grid.Row="0" Grid.Column="1" CornerRadius="12" Padding="10,4" HasShadow="false" OutlineColor="Transparent" BackgroundColor="Transparent">
Also could be the corner radius.
Yes I did it
manifest :
<application android:label="Sanaap" android:icon="#mipmap/launcher_foreground" android:theme="#style/MainTheme" android:supportsRtl="true">
MainView.xaml
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Sanaap.App.Views.MenuView"
FlowDirection="RightToLeft"
Title="Main">
Related
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.
I think i have tried everything possible but i'm also sure that i have the nose too close from the window to see clearly after 5 days trying constraining the expansion of the scrollviewer. I would like it to remain under the stact layout of the thumbnail viewer. Represented by the red line. Any help or solution would be greatly appreciated.
<?xml version="1.0" encoding="UTF-8" ?>
<Frame
x:Class="EchoMessager.Pages.ListeMessages.MessageEditor"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:resx="clr-namespace:EchoMessager.Resx"
xmlns:k="clr-namespace:EchoMessager;assembly=EchoMessager"
xmlns:local="clr-namespace:EchoMessager"
xmlns:ctrls="clr-namespace:EchoMessager.Controls;assembly=EchoMessager"
xmlns:ctrl="clr-namespace:EchoMessager.Controls.MessageEditor;assembly=EchoMessager"
x:Name="EditorControlsPresenterContainer"
VerticalOptions="End">
<FlexLayout
Direction="Column"
JustifyContent="End">
<!-- Thumbnail Presenter -->
<StackLayout
x:Name="ThumbnailPlaceHolder"
Margin="0"
Padding="0"
Orientation="Vertical"
VerticalOptions="End"
Spacing="0"
BackgroundColor="#545454">
<ctrls:CloseOpenSwitch
x:Name="PreviewPresenterControlSwith"
IsVisible="True"
VerticalOptions="End"
State="disabled" />
<!-- Row #2 - Thumbnails Viewer Implementation -->
<CollectionView
x:Name="ThumbnailsPresenter"
Margin="0"
VerticalOptions="End"
SelectionMode="Single"
IsVisible="true"
HeightRequest="95"
MinimumHeightRequest="95"
ItemSizingStrategy="MeasureAllItems"
HorizontalScrollBarVisibility="Never"
VerticalScrollBarVisibility="Never">
<CollectionView.ItemsLayout>
<LinearItemsLayout
Orientation="Horizontal"
SnapPointsType="MandatorySingle"
SnapPointsAlignment="Center"
ItemSpacing="8" />
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate x:DataType="{x:Type ctrl:ThumbnailModel}">
<Image
Margin="1"
Aspect="AspectFit"
Source="{Binding Thumbnail, Mode=OneWay}">
<Image.GestureRecognizers>
<TapGestureRecognizer Command="{Binding OpenCommand, Mode=OneWay}" />
</Image.GestureRecognizers>
</Image>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
<!-- Editor Row -->
<StackLayout
x:Name="EditorControlsPresenter"
Margin="0"
Padding="0"
BackgroundColor="GreenYellow"
Orientation="Horizontal"
VerticalOptions="End">
<Image
x:Name="cameraButton"
Margin="0"
VerticalOptions="Center"
FlexLayout.AlignSelf="Start"
WidthRequest="60"
HeightRequest="60"
BackgroundColor="Transparent"
Source="camerabutton.png">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="OnPrendrePhoto" />
</Image.GestureRecognizers>
</Image>
<ScrollView
x:Name="MessagesViewScrollingArea"
Margin="0"
Padding="0"
HorizontalOptions="StartAndExpand"
VerticalOptions="End"
VerticalScrollBarVisibility="Never"
HorizontalScrollBarVisibility="Never">
<!-- What is about to be scroll -->
<Editor
x:Name="EntrerMessage"
Margin="0"
VerticalOptions="End"
FlexLayout.Grow="1"
AutoSize="TextChanges"
Keyboard="Default"
MaxLength="1500"
Placeholder="{x:Static resx:AppResources.MessageEntryPlaceholder}"
Text="{Binding Message.Texte, Mode=TwoWay}"
Unfocused="EntrerMessage_OnUnfocused"
FontSize="{OnPlatform Default=Default,
Converter={StaticResource FontNamedSizeToDouble}}">
</Editor>
</ScrollView>
<AbsoluteLayout
HorizontalOptions="End"
VerticalOptions="Center">
<Image
x:Name="envoyerMessageButton"
Margin="0"
HeightRequest="60"
WidthRequest="60"
Source="sendbutton.png">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="OnSendMessage" />
</Image.GestureRecognizers>
</Image>
<ActivityIndicator
x:Name="activityIndicator"
Margin="0"
HeightRequest="60"
WidthRequest="60"
IsRunning="false"
IsVisible="false"
Opacity="0.8"
Color="Black" />
</AbsoluteLayout>
</StackLayout>
<!-- Editor tools -->
<!-- Bouton Coller -->
<Button
x:Name="boutonCollerMessage"
Margin="0"
Padding="10,0"
IsVisible="false"
FontSize="Micro"
BackgroundColor="Blue"
FlexLayout.AlignSelf="Stretch"
VerticalOptions="CenterAndExpand"
Text="Coller le message"
Clicked="OnCollerMessage" />
</FlexLayout>
</Frame>
Ok, there is a seriously strange bug with xamarin.forms and we found around here that fwe must put this proporty to true on a stacklayout containing many children to make allow it to behave as expected. simply add stacklayoutname.IsTabStop=False;
I need to set the height of the list view so that the bottom view cell is not cut off whenever adding or removing a view item. I can achieve it for some iPhone models, but not the others. It seems it’s not a right way to achieve it by iPhone model. My questions are:
1. On some iPhone models, why the top position shifts down by about 25 pixels after adding a view item?
2. How to find the absolute top position Y coordinate of the list view?
It seems AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" doesn’t help. VerticalOptions="Start" doesn’t help either.
Note:
1. no such an issue on Android phones.
2. Observation only: It seems that changing the margin of the listview header brandStack has no effect on the layout, eg. cannot see increased margins.
3. The following two screenshots show that the top position of the listview header has moved down a bit after an item is added to the listview.
Code:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="tecommobile.Views.PanelsHomePage"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:effects="clr-namespace:tecommobile.Effects;assembly=tecommobile"
xmlns:tecommobile="clr-namespace:tecommobile;assembly=tecommobile"
xmlns:views="clr-namespace:tecommobile.Views;assembly=tecommobile"
xmlns:controls="clr-namespace:Flex.Controls;assembly=Flex"
xmlns:system="clr-namespace:System;assembly=netstandard"
x:Name="PanelHomePage"
Title="{Binding Title}"
BackgroundColor="Bisque"
NavigationPage.HasNavigationBar="false">
<ContentPage.Resources>
<ResourceDictionary>
<Style x:Key="addPanelStyle" TargetType="views:CustomImageButton" BasedOn="{StaticResource customImageButtonStyle}">
<Setter Property="Source" Value="panel_add.png" />
<Setter Property="HeightRequest" Value="70" />
</Style>
</ResourceDictionary>
</ContentPage.Resources>
<ContentPage.Content>
<RelativeLayout>
<tecommobile:GradientColorStack RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent,
Property=Height,
Factor=1}"
RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent,
Property=Width,
Factor=1}"
Style="{StaticResource gradientColorStack}">
<StackLayout>
<StackLayout x:Name="panelListViewStack" BackgroundColor="Red"
AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All">
<ListView x:Name="ItemsListView" BackgroundColor="Orange"
Margin="15"
CachingStrategy="RecycleElement"
IsPullToRefreshEnabled="false"
ItemsSource="{Binding Items}"
RefreshCommand="{Binding LoadItemsCommand}"
SelectionMode="None"
Style="{StaticResource listViewNoSeparatorStyle}"
Scrolled="ItemsListView_OnScrolled">
<ListView.Header>
<StackLayout x:Name="brandStack" Margin="15, 0, 15, 0" HeightRequest="150" BackgroundColor="Yellow">
<Image HeightRequest="48"
HorizontalOptions="Center"
Source="Icon_ILXLinks.png"
WidthRequest="48"
Margin="0,30,0,0" />
<Label FontSize="20"
HorizontalTextAlignment="Center"
Text="TecomPlus"
TextColor="White"
VerticalTextAlignment="Center" />
<Label FontSize="14"
HorizontalTextAlignment="Center"
Text="Your smart security manager"
TextColor="White"
VerticalTextAlignment="Center"
Margin="0,0,0,20" />
</StackLayout>
</ListView.Header>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid effects:RoundCornersEffect.CornerRadius="8" HeightRequest="75" Margin="2" BackgroundColor="{Binding PanelColour}">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="6*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<Image Grid.Row="0" Grid.Column="0" Source="{Binding BindingContext.EditToggleIcon, Source={x:Reference PanelHomePage}}"
BackgroundColor="Transparent" WidthRequest="50" HorizontalOptions="StartAndExpand" Margin="10,0,0,0">
<Image.GestureRecognizers>
<TapGestureRecognizer Command="{Binding Path=BindingContext.HomePageEditPanelCommand, Source={x:Reference PanelHomePage}}" CommandParameter="{Binding .}"
NumberOfTapsRequired="1" />
</Image.GestureRecognizers>
</Image>
<Label Grid.Row="0" Grid.Column="1" Text="{Binding Text}" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" VerticalOptions="FillAndExpand"
LineBreakMode="NoWrap" FontSize="14" TextColor="{Binding PanelTextColour}">
</Label>
<Image Grid.Row="0" Grid.Column="2" Source="forward.png" Style="{StaticResource rightImageStyle}">
</Image>
<Grid.GestureRecognizers>
<TapGestureRecognizer Command="{Binding Path=BindingContext.RunPanelCommand, Source={x:Reference PanelHomePage}}" CommandParameter="{Binding .}"
NumberOfTapsRequired="1" />
</Grid.GestureRecognizers>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
<StackLayout HeightRequest="70"></StackLayout>
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Command="{Binding BackToEditCommand}"/>
</StackLayout.GestureRecognizers>
</StackLayout>
<tecommobile:GradientColorStack.GestureRecognizers>
<TapGestureRecognizer Command="{Binding BackToEditCommand}"/>
</tecommobile:GradientColorStack.GestureRecognizers>
</tecommobile:GradientColorStack>
<views:CustomImageButton Command="{Binding InfoCommand}" BackgroundColor="Transparent"
HeightRequest="30"
WidthRequest="30"
RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent,
Property=Width,
Factor=1,
Constant=-45}"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,
Property=Height,
Factor=0,
Constant=35}"
Source="info.png">
</views:CustomImageButton>
<Grid x:Name="bottomGrid" BackgroundColor="#216593" effects:RoundCornersEffect.CornerRadius="8"
RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1, Constant=-140}"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1, Constant=-70}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1.0*" />
<ColumnDefinition Width="1.0*" />
</Grid.ColumnDefinitions>
<Image x:Name="AddButton" Source="panel_add.png" Grid.Row="0" Grid.Column="0" Style="{StaticResource buttonImageStyle}">
<Image.GestureRecognizers>
<TapGestureRecognizer Command="{Binding AddItemCommand}" NumberOfTapsRequired="1" />
</Image.GestureRecognizers>
</Image>
<Image x:Name="DeleteButton" Source="{Binding BindingContext.DeleteToggleIcon, Source={x:Reference PanelHomePage}}"
Grid.Row="0" Grid.Column="1" Style="{StaticResource buttonImageStyle}">
<Image.GestureRecognizers>
<TapGestureRecognizer Command="{Binding ToggleDeleteIconCommand}" CommandParameter="{x:Reference DeleteButton}" NumberOfTapsRequired="1" />
</Image.GestureRecognizers>
</Image>
</Grid>
</RelativeLayout>
</ContentPage.Content>
</ContentPage>
The top position shifts down because the margin you set in the listView:
<ListView BackgroundColor="Orange" Margin="15">
Remove the Margin="15" and the space will disappear.
BTW, you can add page-safe-area-layout to make it looks better:
<ContentPage ...
xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
Title="Safe Area"
ios:Page.UseSafeArea="true">
<StackLayout>
...
</StackLayout>
</ContentPage>
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.
<ContentPage.Content>
<StackLayout VerticalOptions="Start" HorizontalOptions="Fill">
<RelativeLayout HeightRequest="100" BackgroundColor="Blue">
<Image x:Name="dishImageView" Aspect="AspectFit" BackgroundColor="Maroon" RelativeLayout.YConstraint="10" RelativeLayout.XConstraint="10" RelativeLayout.WidthConstraint="80" RelativeLayout.HeightConstraint="80" Source="pizza1.png" />
<Label Text="Dominoz Pizza"
x:Name="pizzaTitle"
RelativeLayout.YConstraint="10"
RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView,
ElementName= dishImageView,
Constant=20,
Property=Width,
Factor=1}"/>
<Label BackgroundColor="Lime" HeightRequest="60" Margin="0,0,20,0" MaxLines="2" LineBreakMode="WordWrap" Text="Dominoz Pixxa is great pizza.. come and eat pizza"
x:Name="pizzaDescription"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView,
ElementName=pizzaTitle,
Constant=10,
Property= Height, Factor=1}"
RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView,
ElementName= dishImageView,
Constant=20,
Property=Width,
Factor=1}"
/>
</RelativeLayout>
</StackLayout>
</ContentPage.Content>
Basically I am from iOS background. There we use to have leading and trailing spaces. I am not able to see any trailing space option in Xamarin forms.... Can You Please help me how to set this... Here is the sample image what I am trying to implement.
And here is What I am able to get with above source code.
There are a few blogs around advising to not use RelativeLayout, and use AbsoluteLayout and/or StackLayout instead, for performance reasons. I personally am not a fan of RelativeLayout and will try to use alternatives wherever possible. RelativeLayout is also not fun to play with, and the code can get messy quickly.
The layout you are trying to achieve can indeed be done using RelativeLayout, but I think it'll be much easier to use a series of StackLayouts. For example:
<StackLayout
HeightRequest="100"
BackgroundColor="Blue"
Orientation="Horizontal">
<!-- Image -->
<Image
x:Name="dishImageView"
Aspect="AspectFit"
BackgroundColor="Maroon"
Source="pizza1.png" />
<!-- Image/Item Description -->
<StackLayout
HorizontalOptions="FillAndExpand"
Orientation="Vertical">
<Label
Text="Dominoz Pizza"
x:Name="pizzaTitle"/>
<Label
BackgroundColor="Lime"
HeightRequest="60"
Margin="0,0,20,0"
MaxLines="2"
LineBreakMode="WordWrap"
Text="Dominoz Pixxa is great pizza.. come and eat pizza"
x:Name="pizzaDescription"/>
<!-- Add the price label here -->
</StackLayout>
</StackLayout>
And Here I achieved it Finally using Grid Concept.
<?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="UdemyFirst.PizzaPage">
<StackLayout>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
</Grid.RowDefinitions>
<Image
BackgroundColor="Blue"
Grid.Row="0"
Margin="10"
Grid.Column="0"/>
<StackLayout
BackgroundColor="Fuchsia"
Grid.Row="0"
Grid.Column="1">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="25*"/>
<RowDefinition Height="50*"/>
<RowDefinition Height="25*"/>
</Grid.RowDefinitions>
<Label
Text="Pizza"
BackgroundColor="Black"
Grid.Row="0"
Grid.Column="0"
TextColor="White"/>
<Label
Text="Pizza is very bad. You should not eat Pizza. Pizza is very bad."
BackgroundColor="Red"
LineBreakMode="WordWrap"
MaxLines="2"
Grid.Row="1"
Grid.Column="0"
TextColor="White"/>
<Label
Text="10$"
BackgroundColor="Green"
XAlign="End"
Grid.Row="2"
Grid.Column="0"
TextColor="White"/>
</Grid>
</StackLayout>
</Grid>
</StackLayout>
</ContentPage>