Develop Reference

XAML Page Formatting Issue

Im trying to be methodical in my aproach to this school project but I am having XAML difficulties. So far I have been able to get my main page to look exactly how I want it to except for not being able to print any data using a list.view with a basic test string.
Heres the entire page cs file: https://gist.github.com/GermanHoyos/2ffed121e9d9b7026e0b1c6f36c2ce9a
Heres an image of the code in question(specificaly line 85):
Souldnt line 85 appear inside of the List.view as "test".
The reason im trying to get the string "test" to appear in the bottom most box is because eventually I would like to populate an entire list of data in this bottom most section. But I cant begin to even try things like {binding var} if I cant get a basic string to apear first.
Any help would be appreciated!
Heres list code:
<ListView x:Name = "fullViewOfTermsCourses"
BackgroundColor="PowderBlue"
HeightRequest="1"
>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell IsEnabled="True">
<StackLayout Orientation="Horizontal" HorizontalOptions="CenterAndExpand">
<Label Text="test" VerticalOptions="CenterAndExpand" TextColor="Blue"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

Stacklayout doesn't load correctly external page

I'm developing a xamarin.forms app for my company but I have a stranger problem.
When I try to load in a stackLayout another content page, xamarin.forms doesn't load correctly the page. Probably because the page that I try to load is too big, infact if I try to load a smaller page It works correctly. (I Can't load a smaller page because I need to get a lot of data from user).
BigPage bigpage = new BigPage(defaultData);
stackLayout.Children.Clear();
stackLayout.Children.Add(bigpage);
This is what I see
In your opinion, what is the best way to solve this problem?
When the page does not load correctly, if I click on a component that opens the keyboard (like <entry>), the system loads the page correctly even if it is big.

I find a solution. It's not the best solution but it works.
It was my XAML code:
<ScrollView>
<StackLayout>
<StackLayout x:Name="stackLayout" Padding="15" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="GhostWhite" />
</StackLayout>
</ScrollView>
And It is my C# code:
BigPage bigpage = new BigPage(defaultData);
stackLayout.Children.Clear();
stackLayout.Children.Add(bigpage);
In order to solve this problem I add in the end of the page an empty label. In this way I can load the page without problem.
<ScrollView>
<StackLayout>
<StackLayout x:Name="stackLayout" Padding="15" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="GhostWhite" />
<Label Text=" " HorizontalOptions="End"/>
</StackLayout>
</ScrollView>

Action When Clicking an Item of collection

I have FlexLayout that I use to display the contents of the collection. I want to realize the possibility that when you click on an element of the collection, the command is executed. I want to make sure that when you click on an item, another view is loaded that loads data that corresponds to the selected day. How do I get collection items to react to clicks?
<ContentPage.Resources>
<DataTemplate x:Key="ColorItemTemplate">
<Grid Margin="5"
HeightRequest="120"
WidthRequest="105">
<BoxView Color="Azure" />
<Label Text="{Binding Day}"
HorizontalOptions="Center"
VerticalOptions="Center" />
</Grid>
</DataTemplate>
</ContentPage.Resources>
<StackLayout Margin="10">
<Label Text="CollectionView"
FontSize="30"
FontAttributes="Bold"
HorizontalOptions="Center" />
<Label Text="{Binding MyCollection.Count, StringFormat='Count: {0}'}" />
<ScrollView>
<FlexLayout Direction="Row"
Wrap="Wrap"
AlignItems="Center"
AlignContent="Center"
BindableLayout.ItemsSource="{Binding MyCollection}"
BindableLayout.ItemTemplate="{StaticResource ColorItemTemplate}"/>
</ScrollView>
</StackLayout>
but when clicking on an item, where do you want to send data to?
In the screenshot above, you can see 20 objects in the collection. They are created in the class constructor and they display the time at which they were created.
PowerTrainings = new ObservableCollection<PowerTraining>();
for (int i = 0; i < 20; i++)
{
PowerTrainings.Add(new PowerTraining() { DayOfTraining = dateTime });
}
According to my idea, every time a user (in particular, I, because I do it for myself) will choose a particular day from the history, another view will be loaded, which will display the exercises that he did on that day. But how to correctly implement in the XAML code a code that will determine that this particular element of the collection was clicked (in which dates are displayed) and pass this date to another view, which, based on the property DayOfTraining , will make a query to the database with classes on this day and form another collection?

If I represent it by analogy with WPF, then I would create a
MouseDoubleClick event and pass the object to another view through the
SelectedIndex property. But in the case of Xamarin, I don't understand
(yet) how everything works.
I could deploy your app to my emulator, but when clicking on an item, where do you want to send data to?
Depending on the scenario, there are several ways to pass data between two Views.
A simple method is to use Xamarin.Forms MessagingCenter.
The Xamarin.Forms MessagingCenter class implements the publish-subscribe pattern, allowing message-based communication between components that are inconvenient to link by object and type references. This mechanism allows publishers and subscribers to communicate without having a reference to each other, helping to reduce dependencies between them.
Publish a message
Publishers notify subscribers of a message with one of the MessagingCenter.Send overloads. The following code example publishes a Hi message:
MessagingCenter.Send<MainPage>(this, "Hi");
Subscribe to a message
Subscribers can register to receive a message using one of the MessagingCenter.Subscribe overloads.
MessagingCenter.Subscribe<MainPage> (this, "Hi", (sender) =>
{
// Do something whenever the "Hi" message is received
});
Unsubscribe from a message
Subscribers can unsubscribe from messages they no longer want to receive. This is achieved with one of the MessagingCenter.Unsubscribe overloads:
MessagingCenter.Unsubscribe<MainPage>(this, "Hi");
Update:
And I don't understand how you can find out which element the user
clicked on
You can add TapGestureRecognizer for your DataTemplate.
I modified your DataTemplate and add TapGestureRecognizer for it. You can refer the following code：
<ContentPage.Resources>
<DataTemplate x:Key="ColorItemTemplate">
<Frame Margin="5"
HeightRequest="120"
BackgroundColor="Azure"
WidthRequest="105">
<Label Text="{Binding DayOfTraining}"
HorizontalOptions="Center"
VerticalOptions="Center" />
<Frame.GestureRecognizers>
<TapGestureRecognizer Command="{Binding BindingContext.TypeListSelectedCommand, Source={x:Reference flexLayout}}" CommandParameter="{Binding}"></TapGestureRecognizer>
</Frame.GestureRecognizers>
</Frame>
</DataTemplate>
</ContentPage.Resources>
In class TrainingViewModel,add command TypeListSelectedCommand as follows:
public ICommand TypeListSelectedCommand => new Command<PowerTraining>(selectedItem);
void selectedItem(PowerTraining obj)
{
PowerTraining item = obj as PowerTraining;
System.Diagnostics.Debug.WriteLine("clicked item = " + item.DayOfTraining);
}
Note:
1.flexLayout is the x:Name of your FlexLayout:
<FlexLayout x:Name="flexLayout" />
In addition, you can add TapGestureRecognizer like this:
<ContentPage.Resources>
<DataTemplate x:Key="ColorItemTemplate">
<Frame Margin="5"
HeightRequest="120"
BackgroundColor="Azure"
WidthRequest="105">
<Label Text="{Binding DayOfTraining}"
HorizontalOptions="Center"
VerticalOptions="Center" />
<Frame.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"></TapGestureRecognizer>
</Frame.GestureRecognizers>
</Frame>
</DataTemplate>
</ContentPage.Resources>
And in CalendarOfTraining.xaml.cs,add function TapGestureRecognizer_Tapped:
private void TapGestureRecognizer_Tapped(object sender, EventArgs e)
{
Frame boxView = sender as Frame;
PowerTraining SelectedItem = (PowerTraining)boxView.BindingContext;
System.Diagnostics.Debug.WriteLine(" clicked item = " + SelectedItem.DayOfTraining);
}

Xamarin Forms: StackLayout with rounded corners

I am developing an app using Xamarin Forms PCL. I need a StackLayout with rounded corners. I have tried frame as well for rounded corner container but there is no corner radius property available for it. I cannot find renderers for iOS,Android,UWP,Windows 8.1.
Please can any one suggest me how to achieve StackLayout with rounded corners along with corner radius property for all the platforms.

You can use Frame and put StackLayout inside , Note Frame take padding 20 by default :
<Frame CornerRadius="10"
OutlineColor="Red"
Padding="0">
<StackLayout>
</StackLayout>
</Frame>

<!--Curved stack-->
<Frame CornerRadius="5"
HorizontalOptions="Center"
VerticalOptions="Start"
HasShadow="True"
IsClippedToBounds="True"
Padding="0">
<StackLayout Padding="10,5,10,5"
Orientation="Horizontal"
BackgroundColor="White" >
<Image Source="settingsIcon"
HeightRequest="25"
WidthRequest="25"
Aspect="Fill" />
<Label Text="Filter"
FontSize="Medium"
VerticalTextAlignment="Center"
VerticalOptions="Center"/>
</StackLayout>
</Frame>
I just tried to copy BigBasket's filter buttons. See How cool it looks

Since Xamarin has released Effects mechanism, it now can be done by implementing a custom effect on both platforms. An advantage of this approach is that effects are more light-weight, reusable and can be parameterized and applied to any UI element.
After you create a custom RoundCornersEffect inheriting RoutingEffect, declare a CornerRadius attached property and implement PlatformEffect on each platform, it can be applied to any Xamarin.Forms layout or control like this:
<StackLayout effects:RoundCornersEffect.CornerRadius="48"/>
with hardcoded corners radius or a value from resources
<BoxView effects:RoundCornersEffect.CornerRadius="{StaticResource LargeCornerRadius}" />
Here is a link to full implementation and usage examples.

Just use a Frame with CornerRadius and set IsClippedToBounds to True. That should do the trick.
<Frame CornerRadius="30"
HorizontalOptions="Center"
VerticalOptions="Start"
HasShadow="True"
IsClippedToBounds="True"
Padding="0">
<StackLayout></StackLayout>
</Frame>

Use following to achieve your expected output;
Xamarin Forms control:
https://github.com/nitescua/Xamore/blob/master/Xamore.Controls/Border.cs
iOS:
https://github.com/nitescua/Xamore/blob/master/Xamore.Controls.iOS/Renderers/BorderRenderer.cs
Android:
https://github.com/nitescua/Xamore/blob/master/Xamore.Controls.Droid/Renderers/BorderRenderer.cs
https://github.com/nitescua/Xamore/blob/master/Xamore.Controls.Droid/Renderers/BorderRendererVisual.cs
(Note some files in https://github.com/nitescua/Xamore/tree/master/Xamore.Controls.Droid/Renderers have compilation set to None, I was doing some tests, need to remove those)
WinPhone:
https://github.com/nitescua/Xamore/blob/master/Xamore.Controls.WinPhone/Renderers/BorderRenderer.cs

I recently had the same need, so I created a Custom Renderer for both iOS and Android. I released it as a Nuget which you can find here.
The source code is available on GitHub, and here is a little "How-To"
Hope this helps!
It is very easy to use (Same as a ContentView, which it is at it's base), although note this is compile for .NET Standard, but you can also pull the code into your PCL

A lot of valid answers were already given.
I just wanted to add that since Xamarin Forms 5, Shapes control were added.
Now, you can just add a Rectangle which exposes RadiusX and RadiusY.

You can set rounded corner for any Layout or View or Cell (StackLayout, Grid, ListView)
http://venkyxamarin.blogspot.in/2017/12/how-to-set-corner-radius-for-view.html#more

Try using PancakeView Nuget Package. First, install the package in your PCL project. Give the reference in xaml content page.
xmlns:pkView="clr-namespace:Xamarin.Forms.PancakeView;assembly=Xamarin.Forms.PancakeView"
<StackLayout>
<pkView:PancakeView>
CornerRadius="10,0,10,0"
</pkView:PancakeView>
</StackLayout>

Xamarin - Animations StackLayout

Very good morning, I'm trying to implement the functionality when clicking the UserName the StackPanel up so that the keyboard does not hide the information. But what is not the best choice for this, I'm working on iOS and Android. Could you help me.
<?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="BackGround.BackGroundImageDemo" BackgroundImage="Avion.jpg">
<ContentPage.Content >
<StackLayout VerticalOptions="Center" Padding="5, 50, 120, 0" BackgroundColor="White" HorizontalOptions="Center">
<Entry Placeholder="UserName" PlaceholderColor="Gray" TextColor="Navy" />
<Entry Placeholder="Password" IsPassword="true" PlaceholderColor="Gray" TextColor="Navy"/>
</StackLayout>
</ContentPage.Content>
</ContentPage>
Chase application have something similar.
Chase UserName normal -
Chase in mode up stacklayout

This can be achieved using scrollview. This is simple code snippet.
<ContentPage.Content>
<ScrollView x:Name="scr">
Your Stack Layout having entry and click button
Add TapGestureRecognizer to entry control in this case it is username or password whichever you want.
How to add TapGestureRecognizer. You can look at here.
</ScrollView>
</ContentPage.Content>
Then on your code behind
field.GestureRecognizers.Add(new TapGestureRecognizer
{
Command = new Command(async () =>
{
await ScollTest();
}),
NumberOfTapsRequired = 1,
});
private async void ScollTest()
{
// Then adjust your scroll this way.
await scr.ScrollToAsync(100, 1000, true);
}

For what I have understood from your question, you want an approach to make sure that, when the keyboard pops in, it does not cover the entries and / or other relevant information in the screen, right?
The approach for that is to have your content inside a ScrollView, so the user will be able to scroll it if necessary. Also, both Android and iOS will automatically roll the screen up to the entry is visible.
I changed your example to look like this:
<?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="BackGround.BackGroundImageDemo" BackgroundImage="Avion.jpg">
<ScrollView>
<StackLayout VerticalOptions="Center" Padding="5, 50, 120, 0" BackgroundColor="White" HorizontalOptions="Center">
<Entry Placeholder="UserName" PlaceholderColor="Gray" TextColor="Navy" />
<Entry Placeholder="Password" IsPassword="true" PlaceholderColor="Gray" TextColor="Navy"/>
</StackLayout>
</ScrollView>
</ContentPage>

That is not normally how you animate items in Xamarin.Forms. Check out the BikeShare360 app on Github.
It is a beautiful app and uses the 3rd party animation libraries and custom Storyboard XAML to give a great user experience.
For example to fade up an arbitrary element in a control.
Define what you want to do:
<animations:StoryBoard
x:Key="ProfileImageAnimation"
Target="{x:Reference ProfileImage}">
<animations:FadeInAnimation
Direction="Up"
Duration="500" />
</animations:StoryBoard>
What event do you want to trigger the animation:
<ContentPage.Triggers>
<EventTrigger Event="Appearing">
<triggers:BeginAnimation
Animation="{StaticResource ProfileImageAnimation}" />
</EventTrigger>
</ContentPage.Triggers>
The element you are going to effect:
<ctrl:UserProfileImageControl
WidthRequest="105"
HeightRequest="105"
BorderColor="{StaticResource ProfileGrayColorHexString}"
ProfileImage="{Binding Profile.PhotoUrl}"
UpdatePhotoCommand="{Binding UpdatePhotoCommand}"
HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand" />
All the source is available and it is not too hard to get started.
Good luck!