I have a Button inside a StackLayout.
<StackLayout>
<Button
Text="Button text"
Command="{Binding SelectClubCommand}" />
</StackLayout>
When clicking the button, SelectClubCommand is executed.
To have an indication that StackLayout was clicked, I want to add a TouchEffect (Xamarin.CommunityToolkit.Effects.TouchEffect) like so:
<StackLayout effects:TouchEffect.PressedScale="0.97">
<Button
Text="Button text"
Command="{Binding SelectClubCommand}" />
</StackLayout>
This effect needs to be on the StackLayout as I will add borders and BackgroundColor on it.
However, adding the TouchEffect disables the Command, it is never executed. Is there a way to prevent this?
Related
I'm displaying a button with image and text. I want to display the image first. For that, I used the content layout. But the text is displaying first. And the text is cutting off.
XAML code:
<StackLayout Orientation="Horizontal" Margin="12,20,12,20">
<Button Text="Daily Tasks" TextColor="{DynamicResource SecondaryTextColor}"
ContentLayout="Left,30" Image="{x:Static fontawesome:FontAwesomeIcons.Bars}" FontFamily="
{StaticResource FontAwesomeSolid}" FontAttributes="Bold" WidthRequest="150" BackgroundColor="
{DynamicResource ButtonBackgroundColor}" BorderRadius="20" HorizontalOptions="StartAndExpand">
</Button>
</StackLayout>
The button is displaying like below:
I need to display image first like below.
I would like to know if it is possible to set the width and height of the image inside this button:
<Button Image="ic_music_white.png" BorderWidth="1" BorderColor="White" HeightRequest="56" BackgroundColor="PowderBlue" HorizontalOptions="Center" Clicked="Button_Clicked">
</Button>
Any solution?
You could always create an Image control and add a tap gesture recognizer to it. That way you have more control over the image size and placement.
XAML
<Image x:Name="myImage" Source="ic_music_white.png" HeightRequest="56" BackgroundColor="PowderBlue" HorizontalOptions="Center"/>
XAML.CS
TapGestureRecognizer tapEvent = new TapGestureRecognizer();
tapEvent.Tapped += Button_Clicked;
myImage.GestureRecognizers.Add(tapEvent);
On an iOS project, padding can adjust the size of the image within the button. If you have a width of 50, padding 10, the resulting image width will be 30.
No,you can't manage the height/width of image inside button .
The better option would be to create a stacklayout and then put text and image inside it.
The way i did it:
<StackLayout Grid.Row="2" Orientation="Horizontal" HorizontalOptions="FillAndExpand" VerticalOptions="End" HeightRequest="60">
<Label Text="Review task" HorizontalOptions="EndAndExpand" VerticalOptions="CenterAndExpand" FontSize="25" FontAttributes="Bold"/>
<Image Source="nextarrow_white.png" HorizontalOptions="StartAndExpand" VerticalOptions="CenterAndExpand" HeightRequest="32" Margin="20,4,0,0"/>
</StackLayout>
This is not possible from the Xamarin.Forms project but you can create custom renderers which will allow you to modify the properties of the native control.
In the case of the iOS you will be changing the ImageEdgeInsets.
For Android you might want to take a look at the Button renderer so you can get any ideas.
Hope this helps.-
Use <ImageButton Source"yourImage" Padding=10 Aspect="AspectFit"/>
You can controle the image size with the padding ;)
If you just want to place buttons inside a screen without adding text or other content, you could place your buttons inside a Grid layout as following
<Grid RowDefinitions="auto"
ColumnDefinitions="auto"
Margin="40 40 40 40">
<ImageButton Grid.Row="1"
Grid.Column="1"
Source="Resources/Images/installations.png"
HorizontalOptions="Center"
VerticalOptions="Center"/>
</Grid>
There, you apply a margin to the grid layout, this case images will automatically adjust their sizes to fit the available space.
You can now use scale to change the size of the content.
And padding to add the border around the image.
Example
<Button
Image="ic_music_white.png"
BorderWidth="1"
BorderColor="White"
HeightRequest="56"
BackgroundColor="PowderBlue"
HorizontalOptions="Center"
Clicked="Button_Clicked"
Scale = "0.7",
Padding = "10"
>
</Button>
You have missed to add WidthRequest. Can you add WidthRequest like below
<Button Image="ic_music_white.png" BorderWidth="1" BorderColor="White" HeightRequest="56" WidthRequest="56" BackgroundColor="PowderBlue" HorizontalOptions="Center" Clicked="Button_Clicked">
</Button>
I want to add a logo in the middle of the navigation bar like this:
<ContentPage.ToolbarItems>
<ToolbarItem Icon="logo.png" Activated="RefButtonClicked"></ToolbarItem>
</ContentPage.ToolbarItems>
I also tried this:
var cancelItem = new ToolbarItem
{
Text = "Cancel",
Icon = "tabalilogo.png",
Order = ToolbarItemOrder.Secondary
};
Everything I tried positioned the logo on the right side of the navigation bar. How can I center it?
Recently After Updating to xamarin forms 3.2, You can customize the title bar using title bar property.
<ContentPage>
<NavigationPage.TitleView>
<StackLayout Orientation="Horizontal" VerticalOptions="Center" Spacing="10">
<Image Source="iconXamagon.png">
<Image.GestureRecognizers>
<Image.TapGestureRecognizer
Tapped="HandleTapped" />
</Image.GestureRecognizers>
</Image>
<Label Text="3.2.0" FontSize="16" TextColor="Black" VerticalTextAlignment="Center" />
</StackLayout>
</NavigationPage.TitleView>
....
For more details https://blog.xamarin.com/xamarin-forms-3-2-0-released-going-big-with-little-things/
I am not sure if that can be implemented using existing toolbar but I had similar requirement and I couldn't figure out how to achieve using the xamarin forms toolbar on a navigation page. therefore I decided to use a modal page and I disabled the navigation page in the code behind with the line of code below.
NavigationPage.SetHasNavigationBar(this, false);
I am using xaml and I created a custom navigator with absolutelayout as below
<AbsoluteLayout x:Name="slToolbar" Grid.Row="0" >
<Button x:Name="Cancel" BackgroundColor="#ADD8E6" Image="cancel.png" Command="{Binding CancelClick}" AbsoluteLayout.LayoutFlags="PositionProportional">
<AbsoluteLayout.LayoutBounds>
<OnPlatform x:TypeArguments="Rectangle" iOS="0, .5, 36, 36" Android="0, .5, 36, 36" WinPhone="0, .5, 50, 50" />
</AbsoluteLayout.LayoutBounds>
</Button>
<StackLayout Orientation="Horizontal" AbsoluteLayout.LayoutFlags="PositionProportional">
<AbsoluteLayout.LayoutBounds>
<OnPlatform x:TypeArguments="Rectangle" iOS="1,.5,110,50" Android="1,.5,50,36" WinPhone="1,.5,110,50" />
</AbsoluteLayout.LayoutBounds>
<ContentView >
<OnPlatform x:TypeArguments="View">
<OnPlatform.iOS>
<Button x:Name="NewIOS" BackgroundColor="#ADD8E6" Image="ic_add.png" Command="{Binding AddNew}" ></Button>
</OnPlatform.iOS>
<OnPlatform.WinPhone>
<Button x:Name="NewWP" BackgroundColor="#ADD8E6" Command="{Binding AddNew}" Image="ic_add.png"/>
</OnPlatform.WinPhone>
</OnPlatform>
</ContentView>
<Button x:Name="btnSave" BackgroundColor="#ADD8E6" Image="check.png" Command="{Binding SaveClick}" HorizontalOptions="End" ></Button>
</StackLayout>
</AbsoluteLayout>
this code will produce something like below. I have the icons in the corners but surely they can be placed anywhere. I used cancel icon instead of back button. Of course, in this case you need to handle back button(cancel button) click yourself. screenshot below is from uwp application but on android and ios I get similar results.
I'm looking to create a specific animation where you start with a collapsed sidebar (still visible, but skinny) and main page content:
and when you pull out the left sidebar, the sidebar expands, and the main content moves with it (so that the right part of the main content slides out of view):
Also, note that the content in the sidebar doesn't move (though there is additional content that appears (button on the bottom)), but rather the width of the sidebar container just expands. Finally, I would like it to slide with my finger, not just be a static animation.
How do I accomplish this in Xamarin.Forms? (Is it possible?)
You can found it in Telerik Xamarin Forms sample (SlideDrawer -> Transitions/Location)
Sign in your account (telerik.com), I thinks it's free ..
Playing with the Xamarin Studio XAML Preview:
It is a matter of binding your expand event to WidthRequest in the first "column" to resize it and push the "right" side over. Depending upon the control settings in the first column, they will either expand to fill the new "column" width or stay a fixed size...
Note: Personally I would do this using ConstraintExpressions in order to make the design truly dynamic and adaptive to orientation changes, different screen sizes, etc...
<StackLayout RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.25}"
RelativeLayout.YConstraint= "{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.75}"
</StackLayout>
Example XAML from preview image above:
<?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="OpenDrawer.TestLayoutPreview">
<ContentPage.Content>
<StackLayout BackgroundColor="Blue" Orientation="Horizontal">
<StackLayout Orientation="Vertical">
<StackLayout Orientation="Vertical" BackgroundColor="Maroon" HorizontalOptions="Start" VerticalOptions="FillAndExpand" MinimumWidthRequest="100" WidthRequest="100">
<Button Text="Left 1" BackgroundColor="Aqua"></Button>
<Button Text="Left 2" BackgroundColor="Aqua"></Button>
<Button Text="Left 3" BackgroundColor="Aqua"></Button>
</StackLayout>
<StackLayout Orientation="Vertical" VerticalOptions="End">
<Button Text="Left Bottom" BackgroundColor="Lime"></Button>
</StackLayout>
</StackLayout>
<StackLayout Orientation="Vertical" BackgroundColor="Red" HorizontalOptions="FillAndExpand">
<Label Text="Right" BackgroundColor="Aqua"></Label>
<ScrollView>
<WebView Source="https://xamarin.com" WidthRequest="1000" HeightRequest="1000" ></WebView>
</ScrollView>
</StackLayout>
</StackLayout>
</ContentPage.Content>
</ContentPage>
I don't how to center the icon inside the button and get it above the text, I didn't find information also about it, I'm asked to do a kind of "tabb" option menu, but below the screen, and I found that it was kind of "hard" because of the "design implications"etc, so I decided that with buttons would be easier, but the problem now is how to center the image and get the text right, If some one could help me, that would be great. This is my code so far:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
BackgroundColor="Silver"
x:Class="XamForm.View.MainPage">
<Label Text="{Binding MainText}" VerticalOptions="Center" HorizontalOptions="Center" />
<StackLayout Padding="30">
<Label x:Name="lblCuantos" Text="No #" TextColor="Gray" FontSize="20"/>
<Label x:Name="lblNombre" Text="" FontSize="20"/>
<Button x:Name="btn1" Text="Oprimir" Clicked="Accion"/>
<Button x:Name="btn2" BackgroundColor="White" Image="iconRes.png" HorizontalOptions="CenterAndExpand" Text="Gridd" TextColor="Gray" Clicked="Accion2"/>
<Button x:Name="btn3" BackgroundColor="White" Image="iconRes.png" HorizontalOptions="CenterAndExpand" TextColor="Gray" Clicked="Accion2"/>
</StackLayout>
</ContentPage>
This is the actual result of the button itself:
http://oi59.tinypic.com/11so9le.jpg
This is what the final result of the menu should look like kind off
http://oi62.tinypic.com/10pzw2f.jpg
Thank you!
You can use ContentLayout="Top,0" in button. For Example in your case use below code
<Button x:Name="btn2" ContentLayout="Top,0" BackgroundColor="White" Image="iconRes.png" HorizontalOptions="CenterAndExpand" Text="Gridd" TextColor="Gray" Clicked="Accion2" />
<Button x:Name="btn3" ContentLayout="Top,0" BackgroundColor="White" Image="iconRes.png" HorizontalOptions="CenterAndExpand" TextColor="Gray" Clicked="Accion2"/>
You could use a StackLayout with Orientation set to Vertical, and in it add Button and Label.
The Button.Image property is of type FileImageSource so any image that is 'local' can be used in a button. This means the following code will work:
someButton.Image = "imageName.png";
or you can write
someButton.Image = ImageSource.FromFile("imageName.png");
if imageName.png is located in each of the application projects (Resources folder in iOS, Resources/Drawable folder in Android, and application root in WinPhone; each with the appropriate build action set).
The Xaml equivalent is:
<Button Text="Has Image" Image="someImage.png" />
See the Working with Images doc for full details of what the build action should be for each platform.