Develop Reference

ToolbarItems icon not showing up

how to add an icon before the text "Share"?
below code only displays text and not icon. I have added icon into drawable folder
<ContentPage.ToolbarItems>
<ToolbarItem Name="Share" Order="Secondary" IconImageSource="icon_share.png" Icon="icon_share.png" Priority="0" />
<ToolbarItem Name="Delete" Order="Secondary" IconImageSource="icon_delete.png" Icon="icon_delete.png" Priority="1" />
</ContentPage.ToolbarItems>

The icon for Secondary Toolbar item is hidden by design .
Check the threads :
How to change icon of Secondary Toolbaritem Xamarin Forms.
https://forums.xamarin.com/discussion/47989/icon-for-toolbaritem-with-order-secondary.
I create the workaround that mentioned in the links, it works fine .
Xaml
<ContentPage.ToolbarItems>
<ToolbarItem Order="Primary" Icon="dots.png" Priority="1" Clicked="ToolbarItem_Clicked" />
</ContentPage.ToolbarItems>
<RelativeLayout>
<ListView x:Name="SecondaryToolbarListView"
VerticalOptions="Start"
HorizontalOptions="Start"
WidthRequest="150" IsVisible="False"
ItemTapped="SecondaryToolbarListView_ItemTapped"
RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1, Constant=-160}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal" Spacing="10" Padding="5,5,5,5">
<Image HeightRequest="30" HorizontalOptions="Start" VerticalOptions="Center" Source="{Binding ImagePath}" />
<Label FontSize="15" VerticalOptions="Center" HorizontalOptions="Start" Text="{Binding MenuText}"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</RelativeLayout>
Code behind
public class ToolbarItemModel
{
public string ImagePath { get; set; }
public string MenuText { get; set; }
}
public Page2()
{
InitializeComponent();
var items = new List<ToolbarItemModel>
{
new ToolbarItemModel {ImagePath = "dog.png", MenuText = "First Item"},
new ToolbarItemModel {ImagePath = "dog.png", MenuText = "Second Item"}
};
SecondaryToolbarListView.ItemsSource = items;
}
private void ToolbarItem_Clicked(object sender, EventArgs e)
{
SecondaryToolbarListView.IsVisible = !SecondaryToolbarListView.IsVisible;
}
private void SecondaryToolbarListView_ItemTapped(object sender, ItemTappedEventArgs e)
{
}

The Images aren't appearing because you have incorrectly added icon_share.png and icon_delete.png to your project.
Here is Microsoft's recommendations on how to add images to your Xamarin.Forms project:
Image files can be added to each application project and referenced from Xamarin.Forms shared code. This method of distributing images is required when images are platform-specific, such as when using different resolutions on different platforms, or slightly different designs.
To use a single image across all apps, the same filename must be used on every platform, and it should be a valid Android resource name (i.e. only lowercase letters, numerals, the underscore, and the period are allowed).
iOS - The preferred way to manage and support images since iOS 9 is to use Asset Catalog Image Sets, which should contain all of the versions of an image that are necessary to support various devices and scale factors for an application. For more information, see Adding Images to an Asset Catalog Image Set.
Android - Place images in the Resources/drawable directory with Build Action: AndroidResource. High- and low-DPI versions of an image can also be supplied (in appropriately named Resources subdirectories such as drawable-ldpi, drawable-hdpi, and drawable-xhdpi).
Universal Windows Platform (UWP) - By default, images should be placed in the application's root directory with Build Action: Content. Alternatively, images can be placed in a different directory which is then specified with a platform-specific. For more information, see Default image directory on Windows.
Recommendations
Permanently Remove Icon; Icon was deprecated in favor of IconImageSource
Temporarily remove IconImageSource, replacing it with Text="Share" and Text="Delete":
This will confirm that ContentPage.ToolbarItems is working properly and that you have incorrectly added your png images to the Xamarin.Forms project
<ContentPage.ToolbarItems>
<ToolbarItem Name="Share" Order="Secondary" Text="Share" />
<ToolbarItem Name="Delete" Order="Secondary" Text="Delete" />
</ContentPage.ToolbarItems>

Xamarin.Forms: how to set background image of NavigationPage bar

I'm building a Xamarin.Forms app and I need to set the background of the nav bars to an image. Is this possible without creating something super custom? If not, what's the best way to go about it? Has anyone else done it already?
Here's what I need to do. Note the nav bar area with the back button, messaging icon, and "COMMENTARY" text.
Any ideas?

It's not possible with xamarin to change the navigation background image. You have to do that in native for each platform.
Android :
in Ressources/layout/Toolbar.axml remove background color and add :
android:background="#drawable/yourImage"
2. iOS
in AppDelegate.cs add :
UINavigationBar.Appearance.BarTintColor=UIColor.FromPatternImage(UIImage.FromFile("YOURIMAGE.png"));
// To change Text Colors to white here
UINavigationBar.Appearance.TintColor=UIColor.White;
// To change Title Text colors to white here
UINavigationBar.Appearance.SetTitleTextAttributes(new UITextAttributes() { TextColor = UIColor.White});
Images
Don't forget to put your images in different ressources folders.
Hope this help you !

You can add a background image and buttons to Navigation bar. element can be used to customise the element. You could use AbsoluteLayout to achieve what you want (button, Text ...etc)
<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"
mc:Ignorable="d"
x:Class="MobileApp.Views.PhotoUploadPage">
<NavigationPage.TitleView>
<StackLayout>
<Image Source="background_image.jpg"></Image>
</StackLayout>
</NavigationPage.TitleView>
<ContentPage.Content>
<StackLayout>
<Label Text="Welcome to Multiple Photo Upload!"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
https://forums.xamarin.com/discussion/139894/putting-an-image-on-navigation-bar

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.forms - uniquely identify controls in listview in XAML

I am new to xamarin.forms
I have a listview that is filled from backend c# code.
I have one label and one image defined in it. And I have given x:Name property in XAML.
Now, my question is I want to access those two labels in backend c# code. But both the labels are not accessible because they are in listview. If I put label outside listview, I can access it in the code.
Please avoid syntax errors. My code works fine. I want to access these elements so that I can change style for phone and tablet.
My XAML code :
// ...
<ListView x:Name="DentistList">
<Listview.ItemTemplate>
<DataTemplate>
<ViewCell>
<Image Source="{Binding ImagePath}" x:Name="DoctorImage"/>
<Label Text="{Binding Name}" x:Name="DoctorName" />
</ViewCell>
</DataTemplate>
</Listview.ItemTemplate>
</ListView>
My c# code :
......
DentistList.ItemSource = new List<Doctor>
{
// List of items defined here like...
Name = "ABC",
ImagePath = "img1.jpg"
// Etc...
};
Now, Below this list, I want to change style(like, fontsize etc...) of label and image. But I can not access them.
I tried to access them with FindByName() method but could not do that.
So, can anyone please answer ?
Thank you in advance.

From Jason's comment, you can change the Label.FontSize and Label.TextColor using OnIdiom like so:
<Label Text="{Binding Name}" x:Name="DoctorName">
<Label.TextColor>
<OnIdiom x:TypeArguments="Color"
Phone="Yellow"
Tablet="Blue"/>
</Label.TextColor>
<Label.FontSize>
<OnIdiom x:TypeArguments="NamedSize"
Phone="Small"
Tablet="Large"/>
</Label.FontSize>
</Label>
*Edit: Example using regular integer:
<Label.FontSize>
<OnIdiom x:TypeArguments="x:Double"
Phone="20"
Tablet="30"/>
</Label.FontSize>
*Edit #2:
If you plan to use your Label.FontSize and Label.TextColor on multiple pages I would suggest adding the values into your App.xaml and then referencing them from your ContentPages (you could also just add the value to the ContentPage's ResourceDictionary if you are using the values multiple times but only on a single page):
App.xaml:
<Application xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MyApp.App">
<Application.Resources>
<ResourceDictionary>
<Color x:Key="MyTextColor">
<Color.Accent>
<OnIdiom x:TypeArguments="Color"
Phone="Yellow"
Tablet="Blue"/>
</Color.Accent>
</Color>
<x:Double x:Key="MyFontSize">
<OnIdiom x:TypeArguments="x:Double"
Phone="20"
Tablet="30"/>
</x:Double>
</ResourceDictionary>
</Application.Resources>
</Application>
Now in your ContentPages:
<Label x:Name="DoctorName"
Text="{Binding Name}"
TextColor="{StaticResource MyTextColor}"
FontSize="{StaticResource MyFontSize}"/>
If you want to use NamedSize instead you might need to use converter that I have seen on the Xamarin Forums. Let me know if you cannot find it and I can try to look around.

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!