Develop Reference

Xamarin Forms FontAwesome button text and normal text

I want to create a button using fontawesome library in xamarin
(expected output)
(this is mine)
<Button Text=" Bireysel"
TextColor="Black"
VerticalOptions="Start"
HorizontalOptions="Start"
FontSize="30"
Margin="15,0,0,0"
FontFamily="{StaticResource FontAwesomeSolid}"
BackgroundColor="Transparent"/>
I wanna change text style how can i do that?

Button can have both text and image with FontImageSource:
<Button Text="Left">
<Button.ImageSource>
<FontImageSource Glyph=""
FontFamily="{StaticResource FontAwesomeSolid}" />
</Button.ImageSource>
</Button>

Try this TextTransform="None"
<Button Text=" Bireysel"
TextColor="Black"
VerticalOptions="Start"
HorizontalOptions="Start"
FontSize="30"
Margin="15,0,0,0"
FontFamily="{StaticResource FontAwesomeSolid}"
BackgroundColor="Transparent"
TextTransform="None"/>

Button not clickable due to overlapping view

This might be an easy solution but for some reason I couldn't find the solution online.
I have two views. One view is a grid and the other is a button. The Grid View is showing different views (boxview, label, etc..)
But underneath it is a button view. But this view is not included in the Grid View. I cannot put it inside the Grid View because of reasons. I just wanted to know if there's a possibility for it to be clickable without moving the views or even if there's a view on top of it?
Here's how it looks like:
<?xml version="1.0" encoding="UTF-8" ?>
<ContentView
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="PlayUIArea.NotificationConfirmView">
<ContentView.Content>
<Grid BackgroundColor="Blue">
<BoxView
WidthRequest="100"
VerticalOptions="Fill"
HorizontalOptions="Start"
BackgroundColor="Black" />
<Button Text="Confirm"
OnClick="Button_Click"
VerticalOptions="Start"
HorizontalOptions="Center" />
<Grid BackgroundColor="Red" Margin="100,0,0,0" Padding="-100,0,0,0">
<Label Text="Label Here"
HorizontalOptions="Center"
VerticalOptions="Center" />
</Grid>
</Grid>
</ContentView.Content>
</ContentView>
Is there anyway to make this clickable?

I am a bit late but I think I found a solution to this.
<Grid>
<WebView Grid.Row ="1" Source="[insert random embedded youtube source]"/>
<RelativeLayout Grid.Row ="1" InputTransparent="True" CascadeInputTransparent="False">
<Button CornerRadius="0" Command="{Binding GoToVideoFullscreen}"
RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.8}"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.9}"
RelativeLayout.HeightConstraint="{ConstraintExpression Type=Constant, Constant=17}"
RelativeLayout.WidthConstraint="{ConstraintExpression Type=Constant, Constant=17}"/>
</RelativeLayout>
</Grid>
I had a similar problem, where I wanted to overlap a WebView with a custom button. But my RelativeLayout, which I used to place the button was eating all the inputs and the WebView could not be used anymore.
So I added InputTransparent="True" and CascadeInputTransparent="False" to the RelativeLayout. The InputTransparent="True" makes it invisible to inputs, the CascadeInputTransparent="False" prevents the InputTransparent value from inheriting to the children (in this case my button).
Documentation:
https://learn.microsoft.com/de-de/dotnet/api/xamarin.forms.visualelement.inputtransparent?view=xamarin-forms
https://learn.microsoft.com/en-us/dotnet/api/xamarin.forms.layout.cascadeinputtransparent?view=xamarin-forms

Agree with #G.Mich , you should put all of elements in one layout . For example you can put them in a StackLayout
<ContentPage.Content>
<StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Button Onclick="Button_Clicked" /> <!-- This isn't clickable -->
<Grid>
your code here
</Grid>
</StackLayout>
</ContentPage.Content>

place the button on top of the Grid by placing it after the Grid in the XAML
<ContentPage.Content>
<Grid>
My code here
</Grid>
<Button Onclick="Button_Clicked" /> <!-- This isn't clickable -->
</ContentPage.Content>

Xamarin Images sometimes not downloaded inside ListView

I have a ListView with two columns, the leftmost of which contains an <Image> like this:
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.5*" />
<ColumnDefinition Width="0.5*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
</Grid.RowDefinitions>
<AbsoluteLayout Grid.Column="0" Grid.Row="0">
<Image
HeightRequest="130"
Aspect="AspectFill"
Source="{Binding DynamicOfferImage}"
local:ImageBinding.URL="{Binding DynamicOfferURL}"
AbsoluteLayout.LayoutBounds="1,1,1,1"
AbsoluteLayout.LayoutFlags="All">
<Image.Aspect>
<OnPlatform x:TypeArguments="Aspect">
<On Platform="iOS">AspectFit</On>
<On Platform="Android">AspectFit</On>
</OnPlatform>
</Image.Aspect>
<Image.GestureRecognizers>
<TapGestureRecognizer
Tapped="OnImageTapGestureRecognized"
NumberOfTapsRequired="1" />
</Image.GestureRecognizers>
</Image>
<StackLayout IsVisible="{Binding IsRedeemed}" Margin="20" AbsoluteLayout.LayoutBounds="1,1,1,1" AbsoluteLayout.LayoutFlags="All">
<ContentView Padding="3" BackgroundColor="#d9534f">
<Label Text="{loc:_ S=LoginIsRedeemed}" FontSize="Medium" TextColor="#ffffff" HorizontalOptions="Center"></Label>
</ContentView>
</StackLayout>
</AbsoluteLayout>
<StackLayout Grid.Column="1" Grid.Row="0">
<!-- Text here, irrelevant to question -->
</StackLayout>
</Grid>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
The <Image>'s Source property is bound to a URL of a JPEG image hosted on Amazon S3. The problem is most of the time these images are downloaded fine, however sometimes one image, or even all images, won't download (or won't display?)
This issue doesn't go away until the user re-installs the app. Even restarting the app doesn't count, it has to be an actual re-installation.
Below is a mockup of what this ends up looking like in some scenarios:
Any help much appreciated!
NOTE: This is not a duplicate of Xamarin Forms ListView Images Sometimes Displays, Sometimes Doesn't (UWP), as that scenario described is different.

I ended up taking G.hakim's advice and decided to employ FFImageLoading (via NuGet package) for the images. It was pretty simple although I had to use a slightly older version for Xamarin.Android. Some weird linker error occurs with the latest version (2.4.4.859) and had to go back to 2.4.1. Either way it works really well and even adds a little animation to the images on Xamarin.iOS.
Here was my code before:
<Image
HeightRequest="130"
Aspect="AspectFill"
Source="{Binding ImageURL}"
local:ImageBinding.URL="{Binding LinkURL}"
AbsoluteLayout.LayoutBounds="1,1,1,1"
AbsoluteLayout.LayoutFlags="All">
<Image.Aspect>
<OnPlatform x:TypeArguments="Aspect">
<On Platform="iOS">AspectFit</On>
<On Platform="Android">AspectFit</On>
</OnPlatform>
</Image.Aspect>
<Image.GestureRecognizers>
<TapGestureRecognizer
Tapped="OnImageTapGestureRecognized"
NumberOfTapsRequired="1" />
</Image.GestureRecognizers>
</Image>
In order to get FFImageLoading to work you have to add this to the root <ContentPage> element:
xmlns:ffimageloading="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"
xmlns:fftransformations="clr-namespace:FFImageLoading.Transformations;assembly=FFImageLoading.Transformations"
Then I was able to do this:
<ffimageloading:CachedImage
AbsoluteLayout.LayoutBounds="1,1,1,1"
AbsoluteLayout.LayoutFlags="All"
HeightRequest="130"
DownsampleToViewSize="true"
Source="{Binding ImageURL}"
local:ViewBinding.URL="{Binding LinkURL}">
<ffimageloading:CachedImage.GestureRecognizers>
<TapGestureRecognizer
Tapped="OnViewTapGestureRecognized"
NumberOfTapsRequired="1" />
</ffimageloading:CachedImage.GestureRecognizers>
</ffimageloading:CachedImage>
In order for it to work with my TapGestureRecognizer I changed the ((Image)sender) cast in the method to a ((View)sender) cast because the CachedImage class in FFImageLoading doesn't actually inherit from Image, it inherits from View. Something to keep in mind if you have gestures or even custom bindings.
Aside from that it is very plug-and-play and I'm very happy with the outcome.

How to add fontAwesome icon to toolbar menu

How can I add a icon(fontAwesome) to my toolbar item? Referring to this link, I managed to set a fontawesome to my label. But how do I do that for toolbar itrm?
My code:
ToolbarItem Save = new ToolbarItem();
Save.Text = FontAwesome.FAFloppyO;
Save.Order = ToolbarItemOrder.Primary;
I also tried adding icon attribute to my toolbarItem but doesn't work.

I have managed to achieve this out-of-box using Iconize library for Xamarin Forms. It is quite easy to set up.
Now, to save you extra hours of frustrations, you need to:
Use IconNavigationPage as parent instead of NavigationPage.
Use IconToolbarItem instead of ToolbarItem.
The Icon property should be set, not the Text property (i.e. Icon="fa-user")
Let me know if this solves your issue.

You can use NavigationPage.TitleView instead of Toolbar or Toolbar item.
All you have to do is just adding fontawesome libraries to each platform and than set font familiy property according of target platform.
<NavigationPage.TitleView>
<StackLayout Orientation="Horizontal">
<Button HorizontalOptions="EndAndExpand" Text="">
<Button.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<On Platform="iOS" Value="Font Awesome 5 Free" />
<On Platform="Android" Value="fa-solid-900.ttf#fa-solid" />
</OnPlatform>
</Button.FontFamily>
</Button>
</StackLayout>
this is the one of the basic usage. For better usage you can create your own static resources and apply to button or what ever other items.
This is a code sample from one of my project:
<!-- Toolbar -->
<NavigationPage.TitleView>
<Grid HeightRequest="50" BackgroundColor="{StaticResource DarkBackgroundColor}" Margin="0" Padding="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="50"></ColumnDefinition>
<ColumnDefinition Width="50"></ColumnDefinition>
<ColumnDefinition Width="50"></ColumnDefinition>
</Grid.ColumnDefinitions>
<!-- Title -->
<Label Text="Inventory" Style="{StaticResource TitleViewTitleLabel}"/>
<Button Grid.Column="1" Text=""
Style="{StaticResource FontAwesomeButtonRegularTitleViewButton}"
Command="{Binding SyncDataCommand}"/>
<Button Grid.Column="2" Text=""
Style="{StaticResource FontAwesomeButtonRegularTitleViewButton}"
Command="{Binding ShowFunctionalityCommand}"/>
<Button Grid.Column="3" Text=""
Style="{StaticResource FontAwesomeButtonRegularTitleViewButton}"
Command="{Binding AddNewInventoryCommand}"/>
</Grid>
</NavigationPage.TitleView>

WPF Blurry borders

I've added a progress bar to my workspace in WPF project. I've set BorderBrush color and Background color. In editor view is everything alright. But when I try to run my app the borders are getting blurry and I really don't know why.
Here is code of StackPanel that contains the progress bar:
<StackPanel Width="570px" Height="70px" HorizontalAlignment="Left" Margin="10,0,0,0">
<ProgressBar Name="DownloadProgress" Width="570px" Height="30px"
Opacity="1" Background="#434551" BorderBrush="#2C2C38" BorderThickness="1"
VerticalAlignment="Top" HorizontalAlignment="Left"/>
<Label Name="Status" Content="Updated to version 0.0.1567" Foreground="#6B7E7F"
Margin="0,5,0,0" HorizontalAlignment="Right" VerticalAlignment="Bottom">
</Label>
</StackPanel>
Here is how it looks in editor:
And here is how it looks after run:

All you have to do is set SnapsToDevicePixels to true in stackpanel.
<StackPanel Width="570px" Height="70px"
HorizontalAlignment="Left"
Margin="10,0,0,0" SnapsToDevicePixels="True">
Also look here