I'm having a problem with the orders of the components of my main page, in this case I have her divided into three parts, Top, Boddy and Botton, Y make the search with auto complete and the component ListView Lower my boddy
<StackLayout x:Name="MainContext"
Spacing="0"
RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent,Property=Width,Factor=1,Constant=0}"
RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent,Property=Height,Factor=1,Constant=0}" >
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Tapped="OnSelectMenuTapGestureTap"
NumberOfTapsRequired="1" />
</StackLayout.GestureRecognizers>
<!-- Main manu -->
<!-- Margin IOS-->
<StackLayout HeightRequest="20"
VerticalOptions="Start"
BackgroundColor="#5AC8FA"/>
<!-- end Margin IOS-->
<StackLayout x:Name="TopBar"
BackgroundColor="#5AC8FA"
VerticalOptions="Start"
HeightRequest="50"
Orientation="Horizontal">
<StackLayout x:Name="ContainerTitleLabel"
HorizontalOptions="FillAndExpand"
VerticalOptions="Center"
Orientation="Horizontal">
<Button Command="{Binding MainMenuCmd}"
BackgroundColor="Transparent"
BorderColor="Transparent"
HorizontalOptions="Start"
WidthRequest="{Binding WidthMenuRequest}"
HeightRequest="{Binding HeightMenuRequest}"
Image="icon_menu"
Margin="5,0"/>
<Label x:Name="TitleLb"
Text="{Binding TitleLb}"
VerticalOptions="Center"
HorizontalOptions="CenterAndExpand"
TextColor="Black"/>
<Button HorizontalOptions="End"
VerticalOptions="Center"
Image="icon_search"
Command = "{Binding ShowSearchCmd}"
BorderColor="Transparent"
BackgroundColor="Transparent"/>
</StackLayout>
<StackLayout x:Name="ContainerSearch"
HorizontalOptions="Start"
VerticalOptions="Center"
Orientation="Horizontal"
IsVisible="false">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width = "7*" />
<ColumnDefinition Width = "3*" />
</Grid.ColumnDefinitions>
<MarkupsInterfaces:SearchBarAutoComplet Grid.Column="0"
x:Name="SearchBar"
HorizontalOptions="Start"
TextColor="White"
PlaceholderColor="White"
CancelButtonColor="Black"
Placeholder="{MarkupsInterfaces:TranslateExtension Search}">
</MarkupsInterfaces:SearchBarAutoComplet>
<Button Grid.Column="1"
HorizontalOptions="End"
VerticalOptions="Center"
Text="{MarkupsInterfaces:TranslateExtension Close}"
Command="{Binding CloseSearchCmd}"
FontSize="12"
BackgroundColor="#5AC8FA"/>
</Grid>
</StackLayout>
</StackLayout>
<!--End Main Menu -->
<!--Boddy Context-->
<StackLayout x:Name="Boddy"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
Orientation="Horizontal">
</StackLayout>
<!--End Boddy Context-->
<StackLayout BackgroundColor="White"
VerticalOptions="End"
HorizontalOptions="FillAndExpand">
<!--Botton menu navigation-->
<Grid HorizontalOptions="FillAndExpand"
VerticalOptions="Fill"
ColumnSpacing="-5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<!--Btn Scanner-->
<Button Grid.Column="1"
x:Name="BtnScneer"
Command="{Binding ScannerTabCmd}"
BackgroundColor="White"
Image="icon_scanner"
HorizontalOptions="FillAndExpand"
Margin="{Binding MarginButtons}"/>
<!--Btn Coupons-->
<Button Grid.Column="2"
x:Name="BtnCoupons"
BackgroundColor="White"
Image="icon_coupon"
HorizontalOptions="FillAndExpand"
Margin="{Binding MarginButtons}"/>
<BoxView x:Name="IndicationCoupons"
Grid.Column="2"
VerticalOptions="End"
HorizontalOptions="FillAndExpand"
HeightRequest="8"
BackgroundColor="#5AC8FA"
IsVisible="false"
Margin="5,0"/>
<!--Btn Promotions-->
<Button Grid.Column="3"
x:Name="BtnPromotions"
BackgroundColor="White"
HorizontalOptions="FillAndExpand"
Image="icon_promotions"
Margin="{Binding MarginButtons}"/>
<BoxView x:Name="IndicationPromotions"
Grid.Column="3"
VerticalOptions="End"
HorizontalOptions="FillAndExpand"
HeightRequest="8"
BackgroundColor="#5AC8FA"
IsVisible="false"
Margin="5,0"/>
<!--Btn Maket car -->
<Button Grid.Column="4"
x:Name="BtnMarketCar"
BackgroundColor="White"
VerticalOptions="Center"
HorizontalOptions="FillAndExpand"
Image="icon_market_car"
Margin="{Binding MarginButtons}"/>
<BoxView x:Name="IndicationMarketCar"
VerticalOptions="End"
HorizontalOptions="FillAndExpand"
Grid.Column="4"
HeightRequest="8"
BackgroundColor="#5AC8FA"
IsVisible="false"
Margin="5,0"/>
<!--Btn Favorites-->
<Button Grid.Column="5"
x:Name="BtnFavorites"
BackgroundColor="White"
VerticalOptions="Center"
HorizontalOptions="FillAndExpand"
Image="icon_favorite"
Margin="{Binding MarginButtons}"/>
<BoxView x:Name="IndicationFavorites"
Grid.Column="5"
VerticalOptions="End"
HorizontalOptions="FillAndExpand"
HeightRequest="8"
BackgroundColor="#5AC8FA"
IsVisible="false"
Margin="5,0"/>
</Grid>
<!--End bottom menu navigation-->
</StackLayout>
</StackLayout>
the content of body is dynamic, and my problen is
As a possibility to force the top to always be on the whole context
Related
Hello I got an error while doing login page. I just code Mainpage.xaml file other files are default and I picked "blank" when creating project.
My error is:
" System.InvalidOperationException: "The class, property, or method you are attempting to use ("GradientBrush" is part of GradientBrush; to use it, you must opt-in by calling Forms.SetFlags("Brush_Experimental") before calling Forms.Init()."
I just write one file which is Mainpage.xaml. Does anybody help me how to handle my problem?
<?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="HealthCareApp.MainPage">
<StackLayout>
<StackLayout.Background>
<LinearGradientBrush EndPoint="0,1">
<GradientStop Color="#48b6a6" Offset="0.1" />
<GradientStop Color="#2b78d4" Offset="1.0" />
</LinearGradientBrush>
</StackLayout.Background>
<StackLayout Padding="0" Margin="10,100,10,0" HorizontalOptions="FillAndExpand" >
<Frame BackgroundColor="Transparent" HeightRequest="500" Padding="0" Margin="0">
<StackLayout>
<StackLayout Margin="10">
<Label Text="SIGN IN" TextColor="White" HorizontalOptions="CenterAndExpand" FontAttributes="Bold" ></Label>
</StackLayout>
<StackLayout Padding="0" Margin="15,10">
<Frame BackgroundColor="Transparent" BorderColor="White" Padding="0" HorizontalOptions="FillAndExpand" CornerRadius="30">
<StackLayout Orientation="Horizontal">
<Frame BackgroundColor="SkyBlue" HeightRequest="40" WidthRequest="40" CornerRadius="30" Padding="0" Margin="5">
<Image Source="https://www.findool.com/images/avatars/avatar.png" Aspect="AspectFill" Margin="0"/>
</Frame>
<Entry Placeholder="Email" TextColor="#666666" FontAttributes="None" HorizontalOptions="FillAndExpand" Margin="0,0,20,0"/>
</StackLayout>
</Frame>
<Frame BackgroundColor="Transparent" BorderColor="White" Margin="0,15,0,0" Padding="0" HorizontalOptions="FillAndExpand" CornerRadius="30">
<StackLayout Orientation="Horizontal">
<Frame BackgroundColor="SkyBlue" HeightRequest="40" WidthRequest="40" CornerRadius="30" Padding="0" Margin="5">
<Image Source="https://images.all-free-download.com/images/graphicthumb/lock_icon_6813906.jpg" Aspect="AspectFill" Margin="0"/>
</Frame>
<Entry Placeholder="Password" IsPassword="True" TextColor="White" FontAttributes="None" HorizontalOptions="FillAndExpand" Margin="0,0,20,0"/>
</StackLayout>
</Frame>
<StackLayout Orientation="Horizontal">
<CheckBox IsChecked="False" Color="White" />
<Label Text="Remember me" TextColor="White" FontSize="Small" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" />
<Label Text="Forgot Password" TextColor="White" FontAttributes="Bold" HorizontalOptions="EndAndExpand" FontSize="Small" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" />
</StackLayout>
<Button Text="SIGN IN" BackgroundColor="#2b78d4" TextColor="White" CornerRadius="30" />
<StackLayout Orientation="Horizontal" HorizontalOptions="CenterAndExpand">
<Label Text="Still Not Connected ?" TextColor="White" FontSize="Small"/>
<Label Text="Sign Up" TextColor="White" FontAttributes="Bold" FontSize="Small"/>
</StackLayout>
<StackLayout Margin="0,25,0,0" Padding="0">
<Grid>
<BoxView BackgroundColor="White" HeightRequest="1" WidthRequest="150" HorizontalOptions="Center" VerticalOptions="Center"/>
<Frame BackgroundColor="White" HeightRequest="45" WidthRequest="45" CornerRadius="45" HasShadow="False" BorderColor="White" Margin="0" HorizontalOptions="Center" Padding="0">
<Label Text="OR" TextColor="White" FontSize="Small" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/>
</Frame>
</Grid>
</StackLayout>
<StackLayout Margin="0,25" Orientation="Horizontal" HorizontalOptions="CenterAndExpand">
<Frame BackgroundColor="White" HeightRequest="45" WidthRequest="45" CornerRadius="45" HasShadow="False" BorderColor="White" Margin="0" HorizontalOptions="Center" Padding="0">
<Image Source="https://www.pngitem.com/pimgs/m/44-440455_transparent-background-fb-logo-hd-png-download.png" Aspect="AspectFill" Margin="0"/>
</Frame>
<Frame BackgroundColor="White" HeightRequest="45" WidthRequest="45" CornerRadius="45" HasShadow="False" BorderColor="White" Margin="0" HorizontalOptions="Center" Padding="0">
<Image Source="https://blog.hubspot.com/hubfs/image8-2.jpg" Aspect="AspectFill" Margin="0"/>
</Frame>
</StackLayout>
</StackLayout>
</StackLayout>
</Frame >
</StackLayout>
</StackLayout >
</ContentPage>
According to the documentation you need to set up experimental flags (In your target platforms projects) for some features that the development team is judging still in experimental phase, so that you acknowledge that before using them.
On android in will be in your MainActivity class, on ios in AppDelegate Class:
Forms.SetFlags("Brush_Experimental")
You can set several experimental flags at once like:
Xamarin.Forms.Forms.SetFlags(new string[] { "SwipeView_Experimental", "Shapes_Experimental", "AppTheme_Experimental" });
Note
Make sure to call SetFlags() before Xamarin.Forms.Forms.Init()
In the cross-platform app that I’m developing on Xamarin Forms, I want to achieve a map look where the map covers the whole screen and a semi-transparent control center covers on top of it at a section in the bottom of the screen as in Apple Maps.
My current code looks like this. I have my desired map view and control center view but I can't get to control center to overlap on top of my map.
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:map="clr-namespace:Xamarin.Forms.Maps;assembly=Xamarin.Forms.Maps"
xmlns:pan ="http://xamarin.com/schemas/2014/forms"
xmlns:yummy="clr-namespace:Xamarin.Forms.PancakeView;assembly=Xamarin.Forms.PancakeView"
mc:Ignorable="d"
x:Class="GreenPath.MainPage">
<Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="1.8*"/>
</Grid.RowDefinitions>
<yummy:PancakeView CornerRadius="25,25,0,0" Opacity="0.8" Grid.Row="1" HorizontalOptions="FillAndExpand">
<StackLayout VerticalOptions="FillAndExpand" Orientation="Vertical">
<Image Source="down.png" VerticalOptions="Center" HorizontalOptions="Center" Scale="1"/>
<Label Text="X" TextColor="#3E454F" FontSize="40" FontFamily="segoeui.ttf" Margin="10,0"/>
<SearchBar FontFamily="segoeui.ttf" Text="X" VerticalTextAlignment="Center" VerticalOptions="Fill" HorizontalTextAlignment="Start" IsReadOnly="True" HorizontalOptions="Fill" SearchButtonPressed="SearchBar_SearchButtonPressed" PlaceholderColor="#3E454F" TextColor="#3E454F" CancelButtonColor="#3E454F" Visual="Material" Keyboard="Default" Placeholder="Search a location" IsEnabled="True"/>
<Label Text="X" FontFamily="segoeui.ttf" FontSize="25" VerticalOptions="Center" TextColor="#3E454F" Margin="10,0"/>
<Grid Grid.Row="1" ColumnSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Source="add.png" VerticalOptions="Center" HorizontalOptions="Center" Scale="1" Grid.Column="0" />
<Image Source="add.png" VerticalOptions="Center" HorizontalOptions="Center" Scale="1" Grid.Column="1" />
<Image Source="add.png" VerticalOptions="Center" HorizontalOptions="Center" Scale="1" Grid.Column="2" />
<Image Source="add.png" VerticalOptions="Center" HorizontalOptions="Center" Scale="1" Grid.Column="3" />
<Image Source="add.png" VerticalOptions="Center" HorizontalOptions="Center" Scale="1" Grid.Column="4" />
</Grid>
</StackLayout>
</yummy:PancakeView>
<StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<map:Map MapType="Street" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"/>
</StackLayout>
</Grid>
</ContentPage>
Try putting the StackLayout that contains the map before the yummy:PancakeView (Also remove the Grid.Row="1")
It is similar at this answer.
After reading what David Jesus recomended I did what he said but unfortunately it was't the answer that I was looking for but I followed his advices and did some cahnges myself. In conclusion, I put StackLayout at the top like David said but ı didn't remove Grid.Row="1" and I added the desired height in yummy:PancakeView as TranslationY="550".
My final code is:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:map="clr-namespace:Xamarin.Forms.Maps;assembly=Xamarin.Forms.Maps"
xmlns:pan ="http://xamarin.com/schemas/2014/forms"
xmlns:yummy="clr-namespace:Xamarin.Forms.PancakeView;assembly=Xamarin.Forms.PancakeView"
mc:Ignorable="d"
x:Class="GreenPath.MainPage">
<Grid>
<StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<map:Map MapType="Street" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"/>
</StackLayout>
<yummy:PancakeView CornerRadius="25,25,0,0" Opacity="0.8" HorizontalOptions="FillAndExpand" BackgroundColor="White" TranslationY="550">
<StackLayout VerticalOptions="FillAndExpand" Orientation="Vertical" Margin="5">
<Image Source="down.png" VerticalOptions="Center" HorizontalOptions="Center" Scale="1"/>
<Label Text="X" TextColor="#3E454F" FontSize="40" FontFamily="segoeui.ttf" Margin="10,0"/>
<SearchBar FontFamily="segoeui.ttf" Text="X" VerticalTextAlignment="Center" VerticalOptions="Fill" HorizontalTextAlignment="Start" IsReadOnly="True" HorizontalOptions="Fill" SearchButtonPressed="SearchBar_SearchButtonPressed" PlaceholderColor="#3E454F" TextColor="#3E454F" CancelButtonColor="#3E454F" Visual="Material" Keyboard="Default" Placeholder="Search a location" IsEnabled="True"/>
<Label Text="X" FontFamily="segoeui.ttf" FontSize="25" VerticalOptions="Center" TextColor="#3E454F" Margin="10,0"/>
<Grid Grid.Row="1" ColumnSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Source="add.png" VerticalOptions="Center" HorizontalOptions="Center" Scale="1" Grid.Column="0" />
<Image Source="add.png" VerticalOptions="Center" HorizontalOptions="Center" Scale="1" Grid.Column="1" />
<Image Source="add.png" VerticalOptions="Center" HorizontalOptions="Center" Scale="1" Grid.Column="2" />
<Image Source="add.png" VerticalOptions="Center" HorizontalOptions="Center" Scale="1" Grid.Column="3" />
<Image Source="add.png" VerticalOptions="Center" HorizontalOptions="Center" Scale="1" Grid.Column="4" />
</Grid>
</StackLayout>
</yummy:PancakeView>
</Grid>
</ContentPage>
I created a MasterDetailPage to create menu for my cross platform aplication. Some items of the menu have submenus within. I would like to show these submenus after the user tap in the menu item.
I have a table view with multiple viewcell for each menu item but i dont know how to show submenu items.
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="KiaiDay.Views.Main.HomePage"
xmlns:pages="clr-namespace:KiaiDay.Views.Main"
xmlns:local="clr-namespace:KiaiDay.MarkupExtensions" NavigationPage.HasNavigationBar="False">
<MasterDetailPage.Master>
<pages:HomePageMaster x:Name="MasterPage" Title="Menu" NavigationPage.HasNavigationBar="False" Padding="0">
<StackLayout>
<Grid Padding="10" BackgroundColor="#456f95" HeightRequest="200" VerticalOptions="Center">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="3*"/>
</Grid.ColumnDefinitions>
<Image Grid.Row="1" Grid.Column="0" Grid.RowSpan="2" Source="{local:ImageResource KiaiDay.Images.user.png}" BackgroundColor="Transparent" HorizontalOptions="EndAndExpand"/>
<Label Text="Kelve Neto" Grid.Row="1" Grid.Column="1" BackgroundColor="Transparent" VerticalOptions="EndAndExpand" FontSize="Medium"/>
<Label Text="10 Dias" Grid.Row="2" Grid.Column="1" BackgroundColor="Transparent" VerticalOptions="StartAndExpand" TextColor="BlueViolet" FontSize="Small" FontAttributes="Bold"/>
</Grid>
<StackLayout>
<TableView Intent="Menu">
<TableSection>
<ViewCell>
<StackLayout Padding="30,0,0,0" VerticalOptions="Center">
<StackLayout Orientation="Horizontal">
<Image Source="https://img.icons8.com/ios/50/000000/goal.png" HorizontalOptions="Start"/>
<Label Text="Objectivos" Margin="30,0,0,0" FontAttributes="Bold"/>
<Image Source="https://img.icons8.com/material-rounded/50/000000/expand-arrow.png" HorizontalOptions="EndAndExpand"/>
</StackLayout>
</StackLayout>
</ViewCell>
<ViewCell>
<StackLayout Padding="30,0,0,0" VerticalOptions="Center">
<StackLayout Orientation="Horizontal">
<Image Source="https://img.icons8.com/ios/50/000000/trophy.png" HorizontalOptions="Start"/>
<Label Text="Prémios" Margin="30,0,0,0" FontAttributes="Bold"/>
<Image Source="https://img.icons8.com/material-rounded/50/000000/expand-arrow.png" HorizontalOptions="EndAndExpand"/>
</StackLayout>
</StackLayout>
</ViewCell>
<ViewCell>
<StackLayout Padding="30,0,0,0" VerticalOptions="Center">
<StackLayout Orientation="Horizontal">
<Image Source="https://img.icons8.com/ios/50/000000/task.png" HorizontalOptions="Start"/>
<Label Text="Tarefas" Margin="30,0,0,0" FontAttributes="Bold"/>
</StackLayout>
</StackLayout>
</ViewCell>
<ViewCell>
<StackLayout Padding="30,0,0,0" VerticalOptions="Center">
<StackLayout Orientation="Horizontal">
<Image Source="https://img.icons8.com/ios/50/000000/tasks-filled.png" HorizontalOptions="Start"/>
<Label Text="Notas" Margin="30,0,0,0" FontAttributes="Bold"/>
</StackLayout>
</StackLayout>
</ViewCell>
<ViewCell>
<StackLayout Padding="30,0,0,0" VerticalOptions="Center">
<StackLayout Orientation="Horizontal">
<Image Source="https://img.icons8.com/ios/50/000000/help.png" HorizontalOptions="Start"/>
<Label Text="Suporte" Margin="30,0,0,0" FontAttributes="Bold"/>
</StackLayout>
</StackLayout>
</ViewCell>
<ViewCell>
<StackLayout Padding="30,0,0,0" VerticalOptions="Center">
<StackLayout Orientation="Horizontal">
<Image Source="https://img.icons8.com/ios/50/000000/today.png" HorizontalOptions="Start"/>
<Label Text="Hoje" Margin="30,0,0,0" FontAttributes="Bold"/>
<Image Source="https://img.icons8.com/material-rounded/50/000000/expand-arrow.png" HorizontalOptions="EndAndExpand"/>
</StackLayout>
</StackLayout>
</ViewCell>
<ViewCell>
<StackLayout Padding="30,0,0,0" VerticalOptions="Center">
<StackLayout Orientation="Horizontal">
<Image Source="https://img.icons8.com/ios/50/000000/hourglass-sand-bottom.png" HorizontalOptions="Start"/>
<Label Text="Terminar Dia" Margin="30,0,0,0" FontAttributes="Bold"/>
</StackLayout>
</StackLayout>
</ViewCell>
<ViewCell>
<StackLayout Padding="30,0,0,0" VerticalOptions="Center">
<StackLayout Orientation="Horizontal">
<Image Source="https://img.icons8.com/metro/50/000000/exit.png" HorizontalOptions="Start"/>
<Label Text="Sair" Margin="30,0,0,0" FontAttributes="Bold"/>
</StackLayout>
</StackLayout>
</ViewCell>
</TableSection>
</TableView>
</StackLayout>
</StackLayout>
</pages:HomePageMaster>
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<NavigationPage>
<x:Arguments>
<pages:HomePageDetail />
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
I would like to have something like this : https://imgur.com/a/7OxOvRw
First of all, I would suggest you check the answer here where I have shown the optimized and easy way of creating MasterDetail setup with Xamarin Forms.
Then I would suggest you do something like this for the Expand collapse of this do something like:
<StackLayout> // Parent Menu Item Stacklayout
.
.
<StackLayout IsVisible="{Binding ShowHideBar}">
.
.
</StackLayout>
</StackLayout>
Now either you can write a convertor or just do it through the code. I will do it without a converter.
In your HamburgerMenu's ViewModel add the property :
private bool _showHide;
public bool ShowHideBar { get{return _showHide;}
set{_showHide=value; OnPropertyChanged(nameof(ShowHideBar)); }}
Then on your Items click event add the following line of code:
ShowHideBar= !ShowHideBar;
And it will work like an Expand collapse menu
Goodluck
Revert in case of query
I would like to create a page like this: [1]: https://imgur.com/YreKQi3. But picker comes with underline and i also am not being able to display table separator line.
I tried to use tableview inside a frame but it didnt work. because frame's width is larger than table and seperator becomes invisible.
<?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.Views.PosLogin.ComoTeSentesPage"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
Title="Como te sentes?">
<ContentPage.Content>
<StackLayout Padding="30">
<StackLayout HorizontalOptions="Center">
<Label Text="Como te sentes hoje?" FontAttributes="Bold" FontSize="Medium" TextColor="Black"/>
</StackLayout>
<Frame CornerRadius="10" BackgroundColor="#ECECEC" BorderColor="LightGray" Padding="10" HeightRequest="200">
<TableView Intent="Form" HeightRequest="200">
<TableRoot>
<TableSection>
<ViewCell>
<StackLayout HeightRequest="40">
<StackLayout Orientation="Horizontal">
<Label Text="Energia" TextColor="White" VerticalOptions="Center" HorizontalOptions="Center" WidthRequest="500" Opacity="1"/>
<Picker ItemsSource="{Binding Opcoes}" BackgroundColor="White" WidthRequest="50"/>
</StackLayout>
</StackLayout>
</ViewCell>
<ViewCell>
<StackLayout HeightRequest="40">
<StackLayout Orientation="Horizontal" BackgroundColor="Blue">
<Picker ItemsSource="{Binding Opcoes}" BackgroundColor="White" WidthRequest="50"/>
<Label Text="Mindset" TextColor="White" VerticalOptions="Center" HorizontalOptions="StartAndExpand" FontAttributes="Bold"/>
</StackLayout>
</StackLayout>
</ViewCell>
<ViewCell>
<StackLayout HeightRequest="40">
<StackLayout Orientation="Horizontal" BackgroundColor="Blue">
<Picker ItemsSource="{Binding Opcoes}" BackgroundColor="White" WidthRequest="50"/>
<Label Text="Estratégia" TextColor="White" VerticalOptions="Center" HorizontalOptions="StartAndExpand" FontAttributes="Bold"/>
</StackLayout>
</StackLayout>
</ViewCell>
<ViewCell>
<StackLayout HeightRequest="40">
<StackLayout Orientation="Horizontal" BackgroundColor="Blue">
<Picker ItemsSource="{Binding Opcoes}" TextColor="White" BackgroundColor="White" WidthRequest="50"/>
<Label Text="Acção" TextColor="White" VerticalOptions="Center" HorizontalOptions="StartAndExpand" FontAttributes="Bold"/>
</StackLayout>
</StackLayout>
</ViewCell>
<ViewCell>
<StackLayout HeightRequest="40">
<StackLayout Orientation="Horizontal" BackgroundColor="Blue">
<Picker ItemsSource="{Binding Opcoes}" BackgroundColor="White" WidthRequest="50"/>
<Label Text="Conexão" TextColor="White" VerticalOptions="Center" HorizontalOptions="StartAndExpand" FontAttributes="Bold"/>
</StackLayout>
</StackLayout>
</ViewCell>
</TableSection>
</TableRoot>
</TableView>
</Frame>
</StackLayout>
</ContentPage.Content>
</ContentPage>
´´´
I write a simple demo to achieve the requirement of the image in your answer, I use Frame and Grid:
<StackLayout Padding="30">
<StackLayout HorizontalOptions="Center">
<Label Text="Como te sentes hoje?" FontAttributes="Bold" FontSize="Medium" TextColor="Black"/>
</StackLayout>
<Frame CornerRadius="7" BackgroundColor="Gray" BorderColor="LightGray" Padding="3" HeightRequest="180" HasShadow="False">
<Grid ColumnSpacing="1" RowSpacing="1">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Text="CVC Code:" BackgroundColor="LightGray" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Grid.Row="0" Grid.Column="0" WidthRequest="100" HeightRequest="60"/>
<local:BorderlessPicker BackgroundColor="White" Grid.Row="0" Grid.Column="1" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Picker.ItemsSource>
<x:Array Type="{x:Type x:String}">
<x:String>1321</x:String>
<x:String>3299</x:String>
</x:Array>
</Picker.ItemsSource>
</local:BorderlessPicker>
<Label Text="Card No:" BackgroundColor="LightGray" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Grid.Row="1" Grid.Column="0" WidthRequest="100" HeightRequest="60"/>
<local:BorderlessPicker BackgroundColor="White" Grid.Row="1" Grid.Column="1" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Picker.ItemsSource>
<x:Array Type="{x:Type x:String}">
<x:String>1900</x:String>
<x:String>1233</x:String>
</x:Array>
</Picker.ItemsSource>
</local:BorderlessPicker>
<Label Text="Expiry:" BackgroundColor="LightGray" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Grid.Row="2" Grid.Column="0" WidthRequest="100" HeightRequest="60"/>
<local:BorderlessPicker BackgroundColor="White" Grid.Row="2" Grid.Column="1" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Picker.ItemsSource>
<x:Array Type="{x:Type x:String}">
<x:String>12/4</x:String>
<x:String>11/8</x:String>
</x:Array>
</Picker.ItemsSource>
</local:BorderlessPicker>
</Grid>
</Frame>
</StackLayout>
In code behind, I removed the border of picker by using custom renderer:
AndroDevil mentioned in the comment: xamarin-tip-borderless-picker :
public class BorderlessPicker : Picker
{
}
Here is the result:
I am creating a mobile app using Xamarin form using PCL. A text box always hides from the keyboard in iOS, but this part is working perfectly in Android. Below is 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="MYDriver.List"
WidthRequest="20" BackgroundColor="#ffffff" >
<ContentPage.Content >
<StackLayout x:Name="InBoundlayout">
<StackLayout x:Name="ToolBar" Style="{StaticResource ToolbarOuter}" Padding="0,20,0,0">
<StackLayout Style="{StaticResource ToolbarInner1}">
<Image Source="back3.png" >
<Image.GestureRecognizers>
<TapGestureRecognizer
Tapped="Back_Clicked" />
</Image.GestureRecognizers>
</Image>
</StackLayout>
<StackLayout Style="{StaticResource ToolbarInner1} " >
<Image Source="home3.png">
<Image.GestureRecognizers>
<TapGestureRecognizer
Tapped="Home_Clicked" />
</Image.GestureRecognizers>
</Image>
</StackLayout>
<StackLayout Style="{StaticResource ToolbarInner1}" >
<Image x:Name="PicTorchLight" >
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="TorchLight_Clicked" />
</Image.GestureRecognizers>
</Image>
</StackLayout>
<StackLayout Style="{StaticResource ToolbarInner2}">
<Label x:Name="lblUserName" Style="{StaticResource ToolbarLabel}" />
<Image Source="logout.png">
<Image.GestureRecognizers>
<TapGestureRecognizer
Tapped="Logout_Clicked" />
</Image.GestureRecognizers>
</Image>
</StackLayout>
</StackLayout>
<StackLayout x:Name="layoutHead" Style="{StaticResource HeadColour}" Margin="0,-5">
<StackLayout Spacing="0" Orientation="Horizontal" HorizontalOptions="Start">
<Label Text=" #" Style="{StaticResource HeadForAllorderDetails}" />
</StackLayout>
<StackLayout Spacing="0" Orientation="Horizontal" HorizontalOptions="EndAndExpand">
<Label Text="Order No" Style="{StaticResource HeadForAllorderDetails}" />
</StackLayout>
<StackLayout Spacing="0" Orientation="Horizontal" HorizontalOptions="StartAndExpand">
<Label Text=" Ref" Style="{StaticResource HeadForAllorderDetails}" />
</StackLayout>
<StackLayout Spacing="0" Orientation="Horizontal" HorizontalOptions="EndAndExpand">
<Label Text="Dropoff" Style="{StaticResource HeadForAllorderDetails}" />
</StackLayout>
<StackLayout Spacing="0" Orientation="Horizontal" HorizontalOptions="EndAndExpand">
<Label Text=" Items" Style="{StaticResource HeadForAllorderDetails}" />
</StackLayout>
<StackLayout Spacing="0" Orientation="Horizontal" HorizontalOptions="EndAndExpand">
<Label Text="Status" Style="{StaticResource HeadForAllorderDetails}" />
</StackLayout>
</StackLayout>
<StackLayout x:Name="listViewOredr1">
<ListView x:Name="listViewOredr" ItemTapped="OnActivitySelected" HasUnevenRows="True" >
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Frame HasShadow="True" OutlineColor="Silver" Padding="3">
<Grid BackgroundColor="{Binding RowColour}" ColumnSpacing="2" Padding="2" >
<StackLayout x:Name="rr" Orientation="Horizontal" HeightRequest="35" BackgroundColor="{Binding RowColour}" Padding="10">
<StackLayout Spacing="0" BackgroundColor="{Binding RowColour}" Orientation="Horizontal" HorizontalOptions="Start">
<Label FontSize="10" TextColor="#707070" Text="{Binding DROPROUTEPOS_}" HorizontalOptions="StartAndExpand" VerticalOptions="Center"/>
</StackLayout>
<StackLayout Spacing="0" BackgroundColor="{Binding RowColour}" Orientation="Horizontal" HorizontalOptions="EndAndExpand">
<Label FontSize="10" TextColor="#707070" Text="{Binding ORDERNUM}" HorizontalOptions="StartAndExpand" VerticalOptions="Center"/>
</StackLayout>
<StackLayout Spacing="0" BackgroundColor="{Binding RowColour}" Orientation="Horizontal" HorizontalOptions="EndAndExpand">
<Label FontSize="10" TextColor="#707070" Text="{Binding REF}" HorizontalOptions="StartAndExpand" VerticalOptions="Center" />
</StackLayout>
<StackLayout Spacing="0" BackgroundColor="{Binding RowColour}" Orientation="Horizontal" HorizontalOptions="EndAndExpand">
<Label FontSize="10" TextColor="#707070" Text="{Binding DROPOFF}" HorizontalOptions="StartAndExpand" VerticalOptions="Center" />
</StackLayout>
<StackLayout Spacing="0" BackgroundColor="{Binding RowColour}" Orientation="Horizontal" HorizontalOptions="EndAndExpand">
<Label FontSize="10" TextColor="#707070" Text="{Binding ItemScanStatus}" HorizontalOptions="StartAndExpand" VerticalOptions="Center" />
</StackLayout>
<StackLayout Spacing="0" BackgroundColor="{Binding RowColour}" Orientation="Horizontal" HorizontalOptions="EndAndExpand">
<Image Aspect="AspectFit" HorizontalOptions="StartAndExpand" VerticalOptions="Center" HeightRequest = "20" WidthRequest="20" Source = "{Binding ImageStatus}" />
</StackLayout>
</StackLayout>
</Grid>
</Frame>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
<StackLayout x:Name="layoutouterFrame" BackgroundColor="Green" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Frame Padding = "5" BackgroundColor="#ffffff">
<StackLayout Orientation="Horizontal">
<Grid x:Name="grid">
</Grid>
</StackLayout>
</Frame>
</StackLayout>
<StackLayout x:Name="layoutForBluetooth" HeightRequest = "200" BackgroundColor="#5DCBEE" Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<Frame HorizontalOptions="FillAndExpand" OutlineColor="Black" HasShadow="True">-->
<Grid>
<Label Text="Scan Your Barcode" x:Name="lblDriverNumber" TextColor="Black" FontSize="Medium" HorizontalOptions="FillAndExpand" Margin="0,10" />
<Entry x:Name="txtentry" FontSize="Medium" TextColor="Black" WidthRequest="400" HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand" Margin="0,10" />
</Grid>
</Frame>
</StackLayout>
</StackLayout>
</ContentPage.Content>
</ContentPage>
Can you please tell me how to stop the keyboard to hide the text box that is <Entry x:Name="txtentry" in above XAML.
It's quite a typical problem on iOS and there's a ready nuget plugin which you just need to import to your app and initialize. It will check whether the keyboard is not hiding the edited textbox and move the whole page up if it's needed.
https://www.nuget.org/packages/Xam.Plugins.Forms.KeyboardOverlap/