My page has following hierarchy.
<Grid>
<AbsoluteLayout Grid.Row = 0>
// Contains header
</AbsoluteLayout>
<AbsoluteLayout Grid.Row = 1>
<Scrollview>
<Grid>
<AbsoluteLayout Grid.Row = 0>
// Contains Image
</AbsoluteLayout>
<Grid>
<ListView Grid.Row = 0>
// I know its not good thing to use listview inside scrollview but I have to use it.
</ListView>
<Button Grid.Row = 1 Text = "Add Item1"/>
</Grid>
<Grid>
<ListView Grid.Row = 0>
</ListView>
<Button Grid.Row = 1 Text = "Add Item2"/>
</Grid>
</Grid>
</Scrollview>
</AbsoluteLayout>
<AbsoluteLayout Grid.Row = 2>
// Contains Footer
</AbsoluteLayout>
</Grid>
Now when I navigate to this page on click of button it takes around 3-4 seconds to load which is I think too much.
I have used only 2 StackLayout in footer because I read that Stacklayout slows down the application.
Is there any other way so that I can speed up my navigation ?
EDIT - It takes 1 second to jump from constructor to OnAppearing(). In OnAppeaeing() I fill the lists shown in code.
Thank you so much.
Related
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>
I'm wondering how we can achieve in Xamarin Forms a title transition in nav bar when user scrolling. For example, the Message app on iOS :
When user scroll :
Title "Messages" transition from page content to navigation bar. Is there a way to accomplish this in the same way on Android and iOS with Xamarin Forms ?
We could define a custom TitleView and set the TextColor of title when scrolling the page .
in Xaml
<NavigationPage.TitleView>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.2*" />
<ColumnDefinition Width="0.6*" />
<ColumnDefinition Width="0.2*" />
</Grid.ColumnDefinitions>
<Label x:Name="TitleLabel" Text="Message" FontSize="22" TextColor="Transparent" Grid.Column="1" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" />
//... you can put any other elements on other two Columns like button and image icon
</Grid>
</NavigationPage.TitleView>
For content I defined a simple ScrollView for show the effect
<ScrollView Scrolled="ScrollView_Scrolled" Orientation="Vertical">
<StackLayout>
<Label Text="Message" FontSize="35" HorizontalTextAlignment="Start" HeightRequest="60" />
<BoxView BackgroundColor="LightBlue" HeightRequest="300" />
<BoxView BackgroundColor="LightGreen" HeightRequest="300" />
<BoxView BackgroundColor="LightPink" HeightRequest="300" />
</StackLayout>
</ScrollView>
In code behind
Note :
60 here is the height of label in content Page . The alpha of title Label will set to 1 when the message label scrolls out of the screen. I didn't used data binding just for demo . Of course you could binding the TextColor to ViewModel .
private void ScrollView_Scrolled(object sender, ScrolledEventArgs e)
{
var scrollView = sender as ScrollView;
var TransY = e.ScrollY;
if(TransY>0)
{
double alpha = TransY / 60;
TitleLabel.TextColor = Color.FromRgba(0.0,0.0,0.0,alpha);
}
}
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>
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
Now that ScrollView ContentSize property is readonly how do I SET
the size of the ScrollView content?
That very same property that is settable in UIScrollView
(but not in xamarin forms)
I have this:
<ScrollView Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" HorizontalOptions="FillAndExpand"
x:Name="attachmentScroller"
>
<StackLayout x:Name="AttachmentsView" Orientation="Horizontal" VerticalOptions="Fill"/>
</ScrollView>
what I've tried is setting AttachmentsView.MinimumWidthRequest to the desired contentWidth;
But that does not seem to expand the parent's scrollview content width
to the desired value.
You can set the set of the content size, by setting the property of the content, instead of the the ScrollView.
Here's it in xaml
<ScrollView>
<StackLayout HeightRequest="100" />
</ScrollView>
To stop the scroll view restricting the size of the contained content to its own size, ensure you set
ScrollView Orientation="Horizontal" or "Both" or "Vertical" respectively.
i.e. for your example -
<ScrollView Orientation="Horizontal" Grid.Row="1"
Grid.Column="0" Grid.ColumnSpan="3"
HorizontalOptions="FillAndExpand"
x:Name="attachmentScroller">
<StackLayout WidthRequest="1000" x:Name="AttachmentsView"
Orientation="Horizontal" VerticalOptions="Fill"/>
</ScrollView>