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!
Related
I am trying to Create a Button with Gradient Border Color in Xamarin Forms, i find the solution below to IOS but I can't find anything for android, can someone help me?
Gradient as a Buttons BorderColor?
You could use the PancakeView which provides border with gradients, and add a touch gesture recognizer:
<yummy:PancakeView
BackgroundColor="#e2e885"
BorderGradientStops="{StaticResource Rainbow}"
HeightRequest="150"
CornerRadius="40,10,40,10"
BorderThickness="4"
BorderColor="#456287">
<yummy:PancakeView.GestureRecognizers>
<TapGestureRecognizer Command="{Binding OnTapCommand}" NumberOfTapsRequired="1" />
</yummy:PancakeView.GestureRecognizers>
<Label Text="Button text" HorizontalOptions="Center" VerticalOptions="Center" />
</yummy:PancakeView>
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());
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.
I´m looking to create the classic circular button on a ListView to add items. I´ve done that by using AbsoluteLayout just fine. But the problem I have is that I cannot make the Button to go with rounded border. No matter what I´ve set it just stays square. For what I´ve read it just seems that Xamarin overrrides the border behaviour. I cannot believe there is not a simple way to solve this.
Can anyone help me out with this?.
EDIT: I´ve tried https://github.com/wilsonvargas/ButtonCirclePlugin but I´m still getting the button with an erratic behaviour:
<local:CircleButton
Text="+"
FontSize="Medium"
FontAttributes="Bold"
AbsoluteLayout.LayoutBounds="0.9,0.9,50,50"
AbsoluteLayout.LayoutFlags="PositionProportional"
HeightRequest="70"
WidthRequest="70"/>
This is a problem only in Android 6.0 but it is solved by adding the BorderRadius property and assigning it the same value as the height of the button. something like this:
<local:CircleButton Icon="ic_directions_bike"
FontSize="30" TextColor="Black"
HeightRequest="70" WidthRequest="70"
BorderRadius="70" BackgroundColor="#DCDCDC"/>
<!--This button is not exactly circular-->
<local:CircleButton FontSize="30" TextColor="Black"
HeightRequest="70" WidthRequest="200"
BorderRadius="20" BackgroundColor="#DCDCDC"/>
This property allows you to create buttons that are not exactly circular, as seen in the image.
I can get the background button using Xamarin.Forms. If you are writing Xamarin.Forms you can try.
<StackLayout Orientation="Horizontal">
<Image Margin="10,10" HeightRequest="50" WidthRequest="50" Source="backButton.png">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="btnSetting_Clicked"/>
</Image.GestureRecognizers>
</Image>
<Image HorizontalOptions="EndAndExpand" Margin="0,0,10,10" HeightRequest="50" WidthRequest="50" Source="settingsButton.png">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="btnSetting_Clicked"/>
</Image.GestureRecognizers>
</Image>
</StackLayout>
It should be simple but somehow I am getting problems to do it in a more generic way (without width and height properties).
I have a button and an image inside this button but when I insert an image I see the it is not 100% filled.
This is my code:
<Button Grid.Row="0" Grid.Column="1"
Style="{StaticResource BrowseButtonStyle}"
Click="ChangeLogo_Click">
<Image x:Name="imageControl" />
</Button>
How can I fill it?
If you go take a look at a copy of the default Button template you'll see the ContentPresenter has its Margin Template bound via a Setter with a "Padding" of 12,4 by default.
So easiest answer, just specify a zero padding.
<Button Grid.Row="0" Grid.Column="1"
Style="{StaticResource BrowseButtonStyle}"
Click="ChangeLogo_Click"
Padding="0">
<Image x:Name="imageControl" />
</Button>
Hope this helps.