Develop Reference

Xamarin Forms Tap Gesture Click Effect on Stack layout

Please i will like to know how to achieve a click effect on a stacklayout. I have my design, i use stacklayout and tap gesture to navigate to other pages. However, when i click it feels static and i need to see a click effect.
Below is my design
I want the effect to show when i click any of these options (falut, outage etc) just like when i click on a button control.
Thanks

There are many solutions which can implement it . For example ,you could set the BackgroundColor of the StackLayout in tap directly .
private async void TapGestureRecognizer_Tapped(object sender, EventArgs e)
{
var stack = sender as StackLayout;
stack.BackgroundColor = Color.Black;
await Task.Delay(100); // delay 0.1s
stack.BackgroundColor = Color.LightBlue; // set it to the default color that you define in xaml
//do something you want
}
Solution 2
You could use the plugin XamEffects from nuget .
Usage
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:XamEffects.Sample"
xmlns:xe="clr-namespace:XamEffects;assembly=XamEffects"
x:Class="xxx.MainPage">
<StackLayout HorizontalOptions="Center"
VerticalOptions="Center"
HeightRequest="100"
WidthRequest="200"
xe:TouchEffect.Color="Red">
//put content of StackLayout here
</StackLayout >
</ContentPage>

Can Radio Buttons be used in Xamarin.Forms?

I read the Xamarin docs https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/radiobutton and tried to follow the exact syntax given in the doc to include a radiobutton in my project. The code is as follows :
<StackLayout Grid.Column="1" Grid.Row="2">
<widget:RadioButton Text="Cat" />
</StackLayout>
The error I get here is 'invalid type: expected type is 'View', actual type is 'RadioButton' Is there a way to solve this ?

I think what your looking for in Xamarin.Forms is the control <RadioButton../> without the widgetpart.This will create a radiobutton in the native controls for UWP, iOS and Android.
This is the code I use to display radiobuttons.
<?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="TestButton.MainPage">
<StackLayout HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">
<RadioButton Text="test radio button"/>
</StackLayout>
</ContentPage>
Beware it is experimental and you will need to add the build flag for it.
build flag for experimental XamarinForms controls
If you want to add the experimental flag for the RadioButton, you have to do so in all your projects (iOS, Android and UWP).I've added images to clarify where exactly (they need to be before the Xamarin.Forms.Forms.Init). This is the code to add:
global::Xamarin.Forms.Forms.SetFlags(new string[] { "RadioButton_Experimental" });
Here's where to add the code in the Android project. MainActivity.cs
Here's where to add the code in the iOS project. AppDelegate.cs
Here's where to add the code in the UWP project. App.xaml.cs

Can't show the icon for a button in Toolbar Items with UWP

I'm working on an app for the UWP and Android platforms. I want to set an icon for a button in the navigation toolbar. This is my code in XAML:
<ContentPage.ToolbarItems>
<ToolbarItem x:Name="btnAbout" Text="ABOUT" Order="Primary" Clicked="OnNextPageButtonClicked"/>
</ContentPage.ToolbarItems>
and this is the code in the associated .cs file:
protected override void OnAppearing()
{
base.OnAppearing();
btnAbout.IconImageSource = ImageSource.FromResource("Monk.about.ico");
}
Everything works just fine on Android, but in UWP, even though I can click the button, I can't see the icon.
Where did I go wrong?

I found the solution, I write it for those who need it:
it was necessary to define the path of the icons according to the type of OS destination for compilation.
For Android I had to copy the image to all the "drawable ..." folders and set its compilation property as "AndroidResource".
For UWP I had to copy the png file to the Assets folder and then set its compilation property as "Content".
Finally, you must indicate in the XAML file which paths to use depending on the type of compilation. The code is as follows:
<ContentPage.ToolbarItems>
<ToolbarItem Text="ABOUT" Clicked="OnNextPageButtonClicked" Priority="0">
<ToolbarItem.IconImageSource>
<OnPlatform x:TypeArguments="FileImageSource">
<On Platform="Android">info</On>
<On Platform="UWP">Assets/info.png</On>
</OnPlatform>
</ToolbarItem.IconImageSource>
</ToolbarItem>
</ContentPage.ToolbarItems>

I can confirm that while UWP can display an .ico file in a Image element, it does not work with the BitmapIcon, which Xamarin.Forms uses underneath for ToolbarItem. Therefore you will unfortunately not be able to use this very file on UWP. However, you can convert your icon to a .png image and that will display on all platforms without problems.

Do the change of the code below and set the .ico file Properties> Build Action to Content.
Change:
btnAbout.IconImageSource = ImageSource.FromResource("Monk.about.ico");
To:
btnAbout.IconImageSource = ImageSource.FromFile("Monk.about.ico");
Or you could set the IconImageSource in XAML.
<ContentPage.ToolbarItems>
<ToolbarItem Order="Primary"
Text="Icon Item"
Priority="0"
IconImageSource="Monk.about.ico"
Clicked="OnItemClicked" />
My .ico file:
My result:

Xamarin forms button with both text and vector image on iOS

In my Xamarin.Forms PCL project, I'm trying to create a button with a text shown below an image. But as soon as I add the image (which is a Vector image - and no way of specifying size?) - the text disappears. Only the image is displayed.
Any ideas on why the text is disappearing when the image is shown?
My code:
<?xml version="1.0" encoding="UTF-8"?>
<Button xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MyProj.Views.ToolbarButtonView"
Text="hello"
Image="myvectorimage"
ContentLayout="Top,1" >
</Button>
I appreciate the help!

Here(Kevin) is a better answer to explain the image and text on Button.
I think it is better to use a StackLayout(adding TapGesture) with Image and Label instead of Button. It is more controllable.

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