I getting a conception problem to display correctly the page. I want to have on the bottom of the page a button. I used to do it, AbsoluteLayout.
For some of the screens that are small, all the information doesn't appear so I had to activate the ScrollView.
But the ScrollView doesn't make the job as I would like, a part of the information is still "eaten" by the bottom button. (See the image)
There is the code :
<ContentPage.Content>
<AbsoluteLayout>
<ScrollView AbsoluteLayout.LayoutBounds="0, 0, 1, 1"
AbsoluteLayout.LayoutFlags="All">
<StackLayout>
**** Some code *****
</StackLayout>
</ScrollView>
<Button AbsoluteLayout.LayoutBounds="0, 1, 1, 40"
AbsoluteLayout.LayoutFlags="PositionProportional, WidthProportional"
... some more code .../>
</AbsoluteLayout>
</ContentPage.Content>
I think the way I want to make it is not correct. what can I do to make it display correctly?
Just as Steve said, using Grid is better than AbsoluteLayout. I made a demo and it works well.
<Grid>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition Height="40"></RowDefinition>
</Grid.RowDefinitions>
<ScrollView Grid.Row="0" >
<StackLayout>
<Label></Label>
</StackLayout>
</ScrollView>
<Button Grid.Row="1" />
</Grid>
Related
I am trying to achieve the effect, cross-platform(ios, android and uwp), as shown in the image below:
Clicking "More" normally would open a page, as normal behaviour for a tab bar item. Not sure how to override that behaviour and reveal the sliding master page instead. To the left of the "More" tab bar item, theres another tab bar item, when clicked it refreshes the data on (or reloads) the MainPage.
SettingsPage.xaml (master page, the sliding settings page)
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:MyProject.Classes"
xmlns:views="clr-namespace:MyProject.Views"
x:Class="MyProject.Views.SettingsMasterPage"
IconImageSource="menu.png"
Padding="0,40,0,0"
Title="Menu">
<StackLayout>
<ListView x:Name="listView" x:FieldModifier="public">
<ListView.ItemsSource>
<x:Array Type="{x:Type local:MasterPageItem}">
<local:MasterPageItem Title="Settings Link 1" />
<local:MasterPageItem Title="Settings Link 2" />
<local:MasterPageItem Title="Settings Link 3" />
</x:Array>
</ListView.ItemsSource>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid Padding="5,10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"/>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Source="{Binding IconSource}" />
<Label Grid.Column="1" Text="{Binding Title}" />
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage>
MyTabbedPage.xaml
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
xmlns:views="clr-namespace:MyProject.Views;assembly=MyProject"
x:Class="Xamarin.Sigma01.Views.LoggerDetectionTabbedPage"
android:TabbedPage.ToolbarPlacement="Bottom"
BarBackgroundColor="White"
SelectedTabColor="Black"
BarTextColor="Black">
<TabbedPage.Children>
<views:MainPage IconImageSource="tab_icon_mainpage.png" />
<!-- second link should be the sandwhich button that brings up the settings page -->
</TabbedPage.Children>
</TabbedPage>
MainPage.xaml (the main page, navigated to by the left TabBar link icon, to the left of the sandwhich icon with title "More")
<ContentPage.Content>
<StackLayout>
<Label Text="Welcome to the Main page!"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand" />
</StackLayout>
</ContentPage.Content>
An easy way I can achieve the effect is to use Shell. It's released for months and just check your VS version for the correct template.
Create a new Xamarin.Forms project using VS2019.
You can use Shell out of the box if you can see the following screen.
Find "ItemsPage.xaml" in the Views folder.
Add one line in the ContentPage at the top
<ContentPage
...
Shell.TabBarIsVisible="False">
Add a StackLayout to contain the existing CollectionView and add your bottom buttons.
<RefreshView ...>
<!-- new StackLayout -->
<StackLayout>
<CollectionView ..... />
<!-- new Buttons -->
<StackLayout
HeightRequest="52"
Orientation="Horizontal"
BackgroundColor="#2196F3"
Visual="Material">
<Button
WidthRequest="200"
BackgroundColor="Transparent"
Text="Refresh"
Command="{Binding LoadItemsCommand}" />
<Button
BackgroundColor="Transparent"
Text="More"
Clicked="Button_Clicked" />
</StackLayout>
</StackLayout>
Go to "ItemsPage.xaml.cs" to complete the button event, add a method:
private void Button_Clicked(object sender, EventArgs e)
{
Shell.Current.FlyoutIsPresented = true;
}
Set startup project and deploy, check the effect and play around.
Additionally, in the latest Xamarin.Forms, UWP Shell is an experimental feature, and so does in XF 5.0. But the flyout things will probably work fine (not too sure about this).
An alternative, following the idea from #Shaw, but without Shell is to use the good old MasterDetail Page (which supports UWP) and add two buttons at the bottom to provide the "More" and "Refresh" functionality.
If this sounds like a good option for you, keep reading:
Add a Master-Detail Page to your Solution
On Visual Studio 2019 adding a Master-Detail to your solution is pretty straight forward. You only need to right click the Xamarin.Forms Project in the Solution Explorer and go to Add -> New Item (or simply use the shortcut Ctrl+Shift+A):
in the window that appears, select Master-Detail Page, give it a cool name (MasterDetailPage1 in this example!) and click Add:
By doing this you successfully have added a Master Detail to your solution. Now just go to App and set MainPage to it as follows:
MainPage = new MasterDetailPage1();
Add the bottom buttons
Now we want two buttons at the bottom of our Detail page. This is simply done by adding a stack of two buttons that locate at the end. Our newly added MasterDetailPage1Detail.xaml will then look like:
<?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="MasterTabRefresh.MasterDetailPage1Detail"
Title="Detail">
<StackLayout>
<Label Text="This is a detail page. To get the 'triple' line icon on each platform add a icon to each platform and update the 'Master' page with an Icon that references it."
Padding="10"/>
<StackLayout Orientation="Horizontal"
VerticalOptions="EndAndExpand"
Spacing="0">
<Button BackgroundColor="CornflowerBlue"
Text="Refresh"
TextColor="White"
CornerRadius="0"
HorizontalOptions="FillAndExpand"/>
<Button BackgroundColor="CornflowerBlue"
Text="More"
TextColor="White"
CornerRadius="0"
HorizontalOptions="FillAndExpand"
Clicked="MoreClicked"/>
</StackLayout>
</StackLayout>
</ContentPage>
which should look like:
And in the code behind (MasterDetailPage1Detail.xaml.cs ) we add the "More" functionality:
private void MoreClicked(object sender, EventArgs e)
{
((MasterDetailPage)Application.Current.MainPage).IsPresented = !((MasterDetailPage)Application.Current.MainPage).IsPresented;
}
Add a nice X (close) button to your menu/master
This could be achieved by adding a label with an "X" at the top right of the menu.
Simply modify your MasterDetailPage1Master.xaml to look like (note Label at Column 2 Row 0!)
<?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="MasterTabRefresh.MasterDetailPage1Master"
Title="Master">
<StackLayout>
<ListView x:Name="MenuItemsListView"
SeparatorVisibility="None"
HasUnevenRows="true"
ItemsSource="{Binding MenuItems}">
<ListView.Header>
<Grid BackgroundColor="#03A9F4">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="30"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="80"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="10"/>
</Grid.RowDefinitions>
<Label Grid.Column="2"
Grid.Row="0"
Text="X"
FontAttributes="Bold"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center">
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="X_Tapped"/>
</Label.GestureRecognizers>
</Label>
<Label
Grid.Column="1"
Grid.Row="2"
Text="My wonderful App"
Style="{DynamicResource SubtitleStyle}"/>
</Grid>
</ListView.Header>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Padding="15,10" HorizontalOptions="FillAndExpand">
<Label VerticalOptions="FillAndExpand"
VerticalTextAlignment="Center"
Text="{Binding Title}"
FontSize="24"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage>
Which should look like this:
And then add the "Close" functionality to that "X" Label in the code behind (MasterDetailPage1Master.xaml):
private void X_Tapped(object sender, EventArgs e)
{
((MasterDetailPage)Application.Current.MainPage).IsPresented = false;
}
And that is it! This should get you going. Happy coding!
i have this:
<StackLayout VerticalOptions="FillAndExpand">
<LineEntry />
<ScrollView VerticalOptions="FillAndExpand">
<StackLayout x:Name="stack" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
</StackLayout>
</ScrollView>
</StackLayout>
But it does not scroll, except if you are into the LineEntry, because the keyboard is up. I think it's because the content page has less height than the scrollView, but don't know how to fix this.
I will update some mockups(can't use the real images) for more information, in the first one, does not works, in the second one, it works:
the content page has less height than the scrollView
This should be the first reason , and the send reason is the Content should exists some things , not a empty layot in ScrollView :
The follow code can work , just for reference :
<StackLayout VerticalOptions="FillAndExpand">
<Entry Text="First Entry"/>
<ScrollView HeightRequest="100" BackgroundColor="Beige" VerticalScrollBarVisibility="Always">
<StackLayout x:Name="stack"
HorizontalOptions="FillAndExpand"
HeightRequest="200">
<Entry Placeholder="Second Entry"/>
</StackLayout>
</ScrollView>
</StackLayout>
I have an image slider and I want to position a search box on top of the image slider.
Here is my code:
<StackLayout HeightRequest="200" >
<cv:CarouselView Margin="0" ItemsSource="{Binding Zoos}" x:Name="CarouselZoos">
<cv:CarouselView.ItemTemplate>
<DataTemplate>
<Image Grid.RowSpan="1" Grid.Row="0" Aspect="AspectFill" Source="{Binding ImageUrl}"/>
</DataTemplate>
</cv:CarouselView.ItemTemplate>
</cv:CarouselView>
</StackLayout>
<StackLayout>
<SearchBar FontAttributes="Bold"
FontFamily="Raleway.ttf#Raleway"
FontSize="11"
Placeholder="SEARCH FOR MEDICINE AND PRODUCTS"
HorizontalOptions="Center" VerticalOptions="CenterAndExpand"
Focused="SearchBar_Focused"/>
</StackLayout>
The easiest way to do this is to wrap your element into a grid and placing the second one into the same grid.
The grid layout will put all elements inside the same cell over each other with the last one being added laying topmost.
<Grid>
<Image ... />
<Label VerticalOptions="Center" HorizontalOptions="Center" />
</Grid>
This example would put the label in the mid over the image.
When using interactive elements, keep in mind that they have to be the last ones added in order to be clickable.
So for instance, if you had
<Grid>
<Button ... />
<Image ... />
</Grid>
the button would end up being overlayed by the image and therefore not be clickable.
I have a Button in a ViewCell...
<?xml version="1.0" encoding="UTF-8"?>
<ViewCell xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="ConnectionCrew.UI.Shared.Appointments.CompletionFormMain">
<ViewCell.View>
<Grid Margin="8, 16, 8, 16">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<StackLayout BackgroundColor="#bdbdbd" Padding="1">
<Editor x:Name="txtBxShiftNotes" BackgroundColor="White" Grid.Row="0" HeightRequest="100" />
</StackLayout>
<Button x:Name="btnSubmit" VerticalOptions="End" Grid.Row="1" HorizontalOptions="FillAndExpand" Text="Confirm Attendence" BackgroundColor="Lime" TextColor="White" HeightRequest="50" />
</Grid>
</ViewCell.View>
</ViewCell>
Two undesirable things are happening.
1) The bottom of the containing ViewCell is just beneath the button's text - it's as if the baseline of the text is aligned to the bottom of the cell.
2) If I click on the button, its click event doesn't fire and the whole cell flashes. Except if I click just above the text - in which case there is no flashing and the click event is raised.
How can I fix these issues? I'd prefer no flashing, correct alignment and proper hit testing.
I don't know about your problem, but I suggest to:
Add "ColumnDefinition" property to your Grid (Rows_and_Columns)
Add Grid.Row and Grid.Column property to StackLayout control
Remove Grid.Row property from Editor control (it's inside a StackLayout, so StackLayout should have Row and Column property)
Add Grid.Column property to Button control
Post images of your actual problems
Do you have the problem on iOS, Android, UWP?
A repo on GitHub could be useful
I moved the margins to the child elements...
<?xml version="1.0" encoding="UTF-8"?>
<ViewCell xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="ConnectionCrew.UI.Shared.Appointments.CompletionFormMain">
<ViewCell.View>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<StackLayout Margin="8, 8, 8, 0" Grid.Row="0" BackgroundColor="#bdbdbd" Padding="1">
<Editor x:Name="txtBxShiftNotes" BackgroundColor="White" HeightRequest="100" />
</StackLayout>
<Button Margin="8, 0, 8, 8" x:Name="btnSubmit" VerticalOptions="CenterAndExpand" Grid.Row="1" HorizontalOptions="FillAndExpand" Text="Confirm Attendence" BackgroundColor="Lime" TextColor="White" HeightRequest="50" />
</Grid>
</ViewCell.View>
</ViewCell>
newbie here. I remember in Win10, there is a PopUp UI which can contains many controls like Dropdown box, DatePciker and others. This PopUp can be constructed in Xaml.
I am developing an app for Tablet.
It is possible to use such PopUp in Xamarin forms which contains Dropdown List, DatePicker, Time Picker? It is advisable to do such complex UI ? will it cause problem in Android and iOS?
Problem : How to create PopUp in Xaml
so ,I can use a button to open or close it.
var button = new Button {Text = "Show Popup"};
button.Clicked += (s, e) => popup.Show();
Update
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MyApp.View.PopUpDemo"
Title="PopUp Demo"
Icon="itemIcon3">
<Grid>
<Grid>
<!--Your Page xaml-->
<Button x:Name="btnPopUp" Click="ShowPopUp"/>
</Grid>
<Grid HorizontalOptions="Fill" BackgroundColor="##60000000" IsVisible="{Binding GridVisibility}">
<Grid VerticalOptions="CenterAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".5*"/>
<ColumnDefinition Width="9*"/>
<ColumnDefinition Width=".5*"/>
</Grid.ColumnDefinitions>
<Frame Grid.Column="1" Padding="0" HasShadow="True" OutlineColor="#e6e6e6">
<Grid BackgroundColor="White" RowSpacing="0" ColumnSpacing="0">
<!--content for popup-->
</Grid>
</Frame>
</Grid>
</Grid>
</Grid>
</ContentPage>
I would like to know :
I am using a normal ContentPage.
1) In it, i place your MarkUp <Grid> ,I remove <ContentPage.Content>. Is this correct?
2) Is Frame will be the PopUp ?
3) what code to use in btnPopUp to show the PopUp?
Thanks
Yes you can achieve it without any performance issue. Either you can use an overlay to show pop up as shown below
<Grid>
<Grid>
<!--Your Page xaml-->
</Grid>
<Grid HorizontalOptions="Fill" BackgroundColor="##60000000" IsVisible="{Binding GridVisibility}">
<Grid VerticalOptions="CenterAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".5*"/>
<ColumnDefinition Width="9*"/>
<ColumnDefinition Width=".5*"/>
</Grid.ColumnDefinitions>
<Frame Grid.Column="1" Padding="0" HasShadow="True" OutlineColor="#e6e6e6">
<Grid BackgroundColor="White" RowSpacing="0" ColumnSpacing="0">
<!--content for popup-->
</Grid>
</Frame>
</Grid>
</Grid>
</Grid>
This one is quite simple. Here i have added grid to achieve this. You can also use other layouts. But for performance grid is better as per xamarin team.
For the second grid i have added Visibility property so that you can wire up with any event.
Here i have added backgroundcolor for popup ##60000000 so that when popup appears background will be transparent with light black color effect.
If you need to have same pop up in multiple screens you can use 3rd party plugin https://github.com/rotorgames/Rg.Plugins.Popup which will make you work easier. For this you have to make a new contentpage, replace the contentpage with
<pages:PopupPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"
xmlns:animations="clr-namespace:Rg.Plugins.Popup.Animations;assembly=Rg.Plugins.Popup"
x:Class=""
BackgroundColor="##60000000"
InputTransparent="True"
HasSystemPadding="True"
CloseWhenBackgroundIsClicked="False">
<pages:PopupPage.Animation>
<animations:MoveAnimation
PositionIn="Bottom"
PositionOut="Bottom"/>
</pages:PopupPage.Animation>
<Grid>
<!--your xaml code-->
</Grid>
Note:Replace contentPage with PopupPage in youpage.xaml.cs. To get popup effect your layout should be like 1st example i shown. Here you can also get nice animation effects. More details you can see in their site.
Now you can call the pop up by calling:navigation.PushPopupAsync(new YourContentPage());
And remove the popup by calling await PopupNavigation.RemovePageAsync(this);
Hope this will be useful for you