Develop Reference

Resize Image on button

I am creating an app in Xamarin Forms and try to imitate a FloatingActionButton, so I created a round Button that shall have a centered icon. Unfortunately my icon overlaps the Button by far and I have not found any way to properly rescale it. I tried to work around by making the Button that big so it fits to the icon and scale the whole thing down, but it loses it’s quality by that. Is there a way to only resize the image?
The Button could simply look like this, the problem seems to be something general:
<Button x:Name="button" ImageSource="image.png" />

There are 2 scenarios.
If your image is not rounded and transparent
You can force it this way using a Frame:
<Frame CornerRadius="50"
HeightRequest="100"
WidthRequest="100"
Padding="0"
IsClippedToBounds="True">
<Image Source="image.png"
HorizontalOptions="Center"
VerticalOptions="Center">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="MyTappedEvent" />
<!-- or <TapGestureRecognizer Command="{Binding MyCommand}" /> -->
</Image.GestureRecognizers>
</Image>
</Frame>
Just replace HeightRequest, WidthRequest and CornerRadius with your values. You have to make sure that CornerRadius is half the size or WirthRequest/HeightRequest to make it looks like a circle.
Then just use the Tapped event for basic usage or the Command of the TapGestureRecognizer if you use MVVM pattern.
If your png image is already rounded and transparent
Then you can just use the TapGestureRecognizer directly on your image so it behaves like a button:
<Image Source="image.png" HeightRequest="100" WidthRequest="100">
<Image.GestureRecognizers>
<TapGestureRecognizer Command="{Binding AddCommand}" />
</Image.GestureRecognizers>
</Image>
Hope it helps,
Happy coding!

How to handle touch event for a FlexLayout in Xamarin

So Im building an app where I should show multiple products, since I want to show more than just one product in one row, i couldn't use a ListView, so I thought about using a FlexLayout as a Bindable-Layout and use the ItemsSource to display my list of products, whiche was a sucess. So I wanted to add a touch event to each of my products shown in the flexlayout, to do so I created a new Behaviour, this is the link for the code I used :
https://gist.github.com/jtaubensee/96a5e49c66a205e36ff32787f1d2114d
that did work and therefor I can use a Command. my problem is that I want to get the product that was clicked, and I can't figure out how to do ? is there anyone who can possibly help me with that ?

If you are not adverse to xaml, this is how I handle it.
<FlexLayout BindableLayout.ItemsSource="{Binding Abilities}" IsVisible="{Binding HasAbilities}" BindableLayout.ItemTemplate="{DataTemplate attitm:AttachedAbility}"
AlignItems="Center" Wrap="Wrap" JustifyContent="Center"/>
and the template implements the touch gesture, and passes the object as the Command Parameter;
<ContentView.Content>
<StackLayout Padding="20,8" HorizontalOptions="Center">
<Frame BorderColor="{OnPlatform Android=DarkCyan, UWP=Accent}" Padding="4">
<Frame.GestureRecognizers>
<TapGestureRecognizer Command="{Binding DrillIntoCommand}" CommandParameter="{Binding}"/>
</Frame.GestureRecognizers>
<StackLayout HorizontalOptions="Center" Orientation="Horizontal">
<Label x:Name="TitleLabel" Text="{Binding Title}" HorizontalOptions="Center" VerticalOptions="Center"/>
<Label Text="" FontFamily="{StaticResource FontAwesomeSolid}" IsVisible="{Binding IsUserCreated}" TextColor="Orange" HorizontalOptions="Center"/>
</StackLayout>
</Frame>
</StackLayout>
</ContentView.Content>

TapGestureRecognizer no longer working in xamarin.forms

This used to work for me but no longer does. Maybe because of updates? But I am just trying to get a tap event attached to my label called JournalWarning. I was using TapGestureRecognizer.
Before I had the TapGestureRecognizer calling an OnReconnect method in xaml like so
<StackLayout x:Name="Journal" IsVisible="false" VerticalOptions="FillAndExpand" Padding="20, 0, 20, 20" Spacing="10">
<StackLayout Orientation="Horizontal">
<Label x:Name="JournalTitle" FontSize="Micro" />
<Label x:Name="AboutFormat" Text="About Formatted Text" FontSize="Micro" TextColor="{StaticResource InputBackgroundColor}" HorizontalTextAlignment="End" HorizontalOptions="EndAndExpand" />
</StackLayout>
<StackLayout>
<local:DarkKeyboardEditor x:Name="JournalContent" Text="{Binding Source={x:Static local:JournalTracker.Current}, Path=Content}" TextChanged="OnJournalChanged" Focused="OnEdit" Unfocused="OffEdit" FontSize="Small" HeightRequest="{Binding Source={x:Static local:JournalTracker.Current}, Path=EntryHeight}" />
<Label x:Name="JournalWarning" Text="Your device has lost its connection to the journal server. Journals cannot be viewed or edited at this time. Tap here to try and reconnect." FontSize="Medium" Style="{StaticResource warningLabelStyle}" IsVisible="{Binding Source={x:Static local:JournalTracker.Current}, Path=IsConnected, Converter={StaticResource inverser}}" VerticalOptions="EndAndExpand" AutomationProperties.IsInAccessibleTree="true">
<Label.GestureRecognizers>
<TapGestureRecognizer
Tapped="OnReconnect" />
</Label.GestureRecognizers>
</Label>
<BoxView x:Name="spacer" Style="{StaticResource SpacerStyle}" />
</StackLayout>
</StackLayout>
This stopped working so I thought maybe my padding was in the way and started to take away padding and margins but that made no difference so far. I also tried making the TapGestureRecognizer in C# like...
var tapGestureRecognizer = new TapGestureRecognizer();
tapGestureRecognizer.Tapped += (s, e) => {
OnReconnect();
};
JournalWarning.GestureRecognizers.Add(tapGestureRecognizer);
Thought about making a command instead to see if that would make a difference. I'll probably try that next idk, this seems like a really noob question and I'm not sure why this isn't getting hit at all.
Can you see anything that might be an issue? Or did something changed in an update that I missed? Thanks

remove extra space in xamarin forms layout

Hi i'm trying to place 2 image in xamarin forms using stackLayout.But it adds some space at the top of the form.I Used Blank Project.
my code is
<StackLayout>
<Image Source="review.jpg"
BackgroundColor="Transparent"
WidthRequest="300"
HeightRequest="100"
VerticalOptions="Start" HorizontalOptions="FillAndExpand"
FlexLayout.Grow="1">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="Navigate_review"/>
</Image.GestureRecognizers>
</Image>
<Image Source="upload.jpg"
BackgroundColor="Transparent"
WidthRequest="320"
HeightRequest="100"
VerticalOptions="Start" HorizontalOptions="FillAndExpand"
FlexLayout.Grow="1">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="Navigate_upload"/>
</Image.GestureRecognizers>
</Image>
</StackLayout>
i am getting this output:
Output Image 1
Output Image 2
It adds some extra space at the top of the page. how to set the layout to remove this space?

The code you post does not have any issue.
I reckon your app is created with Tabbed template. If that is the case, the empty space at the top is actually the tab. As shown in this image.
If you create a Blank project (not Tabbed nor MasterDetails), it will not have the empty spaces at the top. As shown in this image.

You can use the Margin attribute to remove the excess space on top, bottom, right or left. Let's assume, if we using a table view and it produces the 20 pixel excess space on top of the display. So we can reduce that excess space by using
<TableView Margin="0,-20,0,0" >
<TableVie/>
-20 using for reduce the excess 20pix😀

I think the problem is you are testing on emulators.Real devices will not show this issue I hope.

StackLayout and Grid have default spacing of 6. On StackLayout you can set Spacing. For more details, you can refer to this Document
Try this snippet:
<StackLayout
Spacing="0">
<Image
Source="hintsicon"
BackgroundColor="Transparent"
WidthRequest="300"
HeightRequest="100"
Aspect="Fill"
VerticalOptions="Start"
HorizontalOptions="FillAndExpand">
<Image.GestureRecognizers>
<TapGestureRecognizer
Tapped="Navigate_review" />
</Image.GestureRecognizers>
</Image>
<Image
Source="hintsicon"
BackgroundColor="Transparent"
WidthRequest="320"
HeightRequest="100"
Aspect="Fill"
VerticalOptions="Start"
HorizontalOptions="FillAndExpand">
<Image.GestureRecognizers>
<TapGestureRecognizer
Tapped="Navigate_upload" />
</Image.GestureRecognizers>
</Image>
</StackLayout>

I think you are using like below in your App.xaml.cs page:
MainPage = new NavigationPage(new MainPage());

Format two labels to wrap in Xamarin Forms as single line

I have a xaml user registration page in a Xamarin Forms app where I want the user to accept the terms and conditions of use. I've used two labels in a horizontal stacklayout so that I can make the "terms and conditions" tappable to navigate to the terms and conditions page. It looks fine on an iPhone 6 and up:
But on a 5s it wraps as below:
The xaml for the controls:
<StackLayout Grid.Row="8" Grid.Column="0" Grid.ColumnSpan="2" Orientation="Horizontal" Padding="0,0,0,5">
<Label Text="I agree to the" VerticalOptions="Center" HorizontalOptions="Start" />
<Label Text="terms and conditions" VerticalOptions="Center" HorizontalOptions="Start" LineBreakMode="WordWrap" >
<Label.TextColor>
<OnPlatform x:TypeArguments="Color"
iOS="#0076fa"
Android="#3d5afe" />
</Label.TextColor>
<Label.GestureRecognizers>
<TapGestureRecognizer Command="{Binding TermsCommand}" />
</Label.GestureRecognizers>
</Label>
<Switch IsToggled="{Binding Agree}" HeightRequest="30" WidthRequest="50" HorizontalOptions="Start" VerticalOptions="Center" />
</StackLayout>
Is there anyway to format all the text to wrap as a single sentence would?

I would suggest you create a custom label control to handle this!
There is a very good starting point available up on the blog of Pieter Nijs here https://blog.pieeatingninjas.be/2017/11/05/creating-a-hyperlinklabel-in-xamarin-forms/ which looks like would be enough for your needs.
In short he created a label control that accepts markup text to be displayed on screen, meaning you can have hyperlinks available for only a portion of the text!
Technically it will transform the text on each platform to a control that can handle hyperlinks.