Button Positioning with Image Sizes Changes - xamarin

I am playing with Xamarin Forms and I would like to add a Button programmatically. Nothing easier, but I've noted that the results vary greatly if the button has an Image rather than a Text.
Now I have this XAML that defines a three-layered screen (header, content, footer):
<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:Testing"
x:Class="Testing.MainPage"
Title="MainPage"
NavigationPage.HasNavigationBar="False">
<ContentPage.Content>
<!-- Content -->
<StackLayout x:Name="contentpage" Padding="10,100,10,100">
<!-- Header -->
<StackLayout x:Name="header" Orientation="Horizontal" VerticalOptions="StartAndExpand">
<Button Text="ABCD" VerticalOptions="Center" HorizontalOptions="StartAndExpand"/>
<Button Text="EFGH" VerticalOptions="StartAndExpand" HorizontalOptions="EndAndExpand"/>
</StackLayout>
<!-- /Header -->
<!-- Center -->
<StackLayout x:Name="content" Opacity="1" Orientation="Vertical" VerticalOptions="Start" >
<Button x:Name="test" Text="Fire fire fire" HorizontalOptions="CenterAndExpand" VerticalOptions="Start" />
</StackLayout>
<!-- /Center -->
<!-- Bottom -->
<StackLayout x:Name="buttons" Orientation="Horizontal" VerticalOptions="EndAndExpand">
<Button Text="1" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" />
<Button Text="2" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" />
<Button Text="3" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" />
<Button Text="4" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" />
<Button Text="5" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" />
</StackLayout>
<!-- /Bottom -->
</StackLayout> <!-- Content -->
</ContentPage.Content>
</ContentPage>
And in the corresponding C# source I add a button to the content:
var custombutton = new Button();
custombutton.HorizontalOptions = LayoutOptions.CenterAndExpand;
custombutton.VerticalOptions = LayoutOptions.Start;
custombutton.Image = "mountain.jpg";
//custombutton.Text = "hello";
content.Children.Add(
custombutton
);
As you can see, I want to change the button's properties by setting an image, but the layout changes dramatically.
As you can see, if I add the button with a text everything's ok (left), but as I change the button's image, the button seems to not obey its vertical options (right), or it adds some weird padding. Of course I would like just to add buttons with texts or images without losing the footer StackLayout, but I don't know what's happening here.
Am I missing something here?
Sizes Update
As suggested, I've tried different layouts, however, I ended up with the same results. This last test is with a Grid, and inside a ScrollView with a StackLayout. Different views and arrangements won't change anything in my project.
What matters is the image size as you can see:
Image sizes here are 1668 × 796 and 355 × 190 pixels.
A fully functional source is here available for download: link to the solution.
Controls Update
Using an Image works flawlessly, regardless of the image size. No clue on why a Button adds such a huge space dependent on the image.

Related

Xamarin forms listview - show images full widh, auto height

I have a listview in Xamarin Forms and I have a requirement to maintain aspect ratio but also this:
When an image is taller than it is wide, show the image flush to the left and right with no margins, have the height be auto
When an image is wider than it is tall, the requirement is the same, but this works. In the screenshot it shows how images currently render when they're taller than wide. Changing the aspect property breaks the condition when it is wider than tall. When I copy this template into a blank page, the image displays fine. I think the issue is being able to set the height of each row in the listview to auto. It may not be the issue though. I'm using a SyncFusion listview for Xamarin
Here is the code for the item template of the listview:
<DataTemplate>
<ViewCell>
<StackLayout Margin="0,10,0,10" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<!-- Card Header -->
<!-- Truncated for brevity -->
</Grid>
<StackLayout Grid.Row="1">
<!-- Card title -->
<!-- Truncated for brevity -->
</StackLayout>
<!-- Card Body -->
<StackLayout BindingContextChanged="PostImageStackLayout_BindingContextChanged">
<Grid Grid.Row="2" x:Name="postImageStackLayout" Margin="0,15,0,10">
<!-- Card article image -->
<ffimageloading:CachedImage Grid.Row="0" x:Name="postImage" CacheDuration="1" HeightRequest="300"
Source="{Binding MainIMageURL}" BindingContextChanged="PostImage_BindingContextChanged"
VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"
Margin="0,10,0,10" FadeAnimationEnabled="True" Aspect="AspectFit" >
<ffimageloading:CachedImage.GestureRecognizers>
<TapGestureRecognizer Tapped="PostImageTapped" CommandParameter="{Binding }"/>
</ffimageloading:CachedImage.GestureRecognizers>
</ffimageloading:CachedImage>
</Grid>
</StackLayout>
<!--Likes and comment count-->
<!-- Truncated for brevity -->
Don't put fix height on Grid Row where it have the image element. You can use the "auto" value.
<RowDefinition Height="auto"/>
and change the Aspect to
AspectFill
I use the collectionview from the latest Xamarin.Forms 4.3. Here is my sample code
xaml
<ContentView.Content>
<StackLayout>
<CollectionView x:Name="ImagesCollectionView">
<CollectionView.ItemsLayout>
<ListItemsLayout ItemSpacing="20">
<x:Arguments>
<ItemsLayoutOrientation>Vertical</ItemsLayoutOrientation>
</x:Arguments>
</ListItemsLayout>
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout>
<ffimageloading:CachedImage
HorizontalOptions="FillAndExpand"
Source="{Binding .}"
Aspect="AspectFill"
LoadingPlaceholder="noimg.png"/>
<Label Text="label"
TextColor="Gray"
Opacity="0.8"
Margin="12,0,0,0"
HorizontalOptions="Start"
FontSize="Small"/>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
</ContentView.Content>
c#
public MySecondView()
{
InitializeComponent();
ImagesCollectionView.ItemsSource = new List<string>()
{
"http://insidetema.com/wp-content/uploads/2018/05/170717100550_1_900x600.jpg"
,"https://informationng.com/wp-content/uploads/2014/03/bigstock_Happy_Business_People_With_Han_4049346.jpg"
,"http://www.blt.co.uk/wp-content/uploads/2018/03/Happy-Places.jpg"
};
}
Output
You can set the HeightRequest and WidthRequest of your image to -1 (then it'll fit all the space available)

Why does Xamarin Absolute Layout stacking not respect Children order

I am trying to achieve a layout where the content has an image on background (positioned in bottom left corner, expanding 100% vertically and 60% horizontally)
The whole content is wrapped in an AbsoluteLayout, the main content is then a child to this layout and consists of StackLayout (and some other content inside).
The previewer in Visual Studio (Visual Studio Community 2017) shows the layout correctly - the image is below the content, the content is placed on middle as intended. However, both VS Emulator and Genymotion show the image above the content.
I trimmed the code to be as readable as possible (stripping it of styling)
...
<Frame VerticalOptions="End" AbsoluteLayout.LayoutFlags="All" Margin="0" Padding="0" IsClippedToBounds="True" AbsoluteLayout.LayoutBounds="0,1,0.6,1">
<Image Source="Graphic_Anna.png" />
</Frame>
<!-- Start: Actual Page Content -->
<StackLayout VerticalOptions="Center" AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" x:Name="ApplicationLayoutContentLevel">
<Label Text="This is some text in main content" />
</StackLayout>
<!-- End: Actual Page Content -->
</AbsoluteLayout>
</ContentPage.Content>
...
The expected result is shown on this screenshot (from Previewer): https://i.imgur.com/C8GBMSi.png
However, the result in both emulator seems to do this: https://i.imgur.com/NvJFZan.png
Unfortunately, I don't have the option to test the app on an actual Android phone at this moment
Do you want to achieved like the following screenshot?
I do not know which size that you used, so I cutout the picture from your screenshot.
If so, there is my code.If you want to achieve coveraged effect, I used two stacklayout, the first layout will be covered by the second layout.Notice:If you set the VerticalOptions will affect the AbsoluteLayout.LayoutBounds
<ContentPage.Content>
<AbsoluteLayout>
<StackLayout VerticalOptions="End" AbsoluteLayout.LayoutFlags="All" Margin="0" Padding="0" IsClippedToBounds="True" AbsoluteLayout.LayoutBounds="0,1,0.6,1">
<Image Source="Graphic_Anna.png" />
</StackLayout>
<!-- Start: Actual Page Content -->
<StackLayout AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0.8,0.7,0.5,0.5" x:Name="ApplicationLayoutContentLevel">
<Image Source="start.png" Scale="0.7"/>
<Label Text="10/10" TextColor="Black" FontSize="50" Margin="20,10,0,0"/>
<Label Text="Great job! you got everything" TextColor="Black" Margin="0,10,0,0" />
<Label Text="Back to games" TextColor="red" Margin="25,20,0,0" />
</StackLayout>
<!-- End: Actual Page Content -->
</AbsoluteLayout>
</ContentPage.Content>

Add logo at the middle of Navigation bar?

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.

Xamarin.Forms - How To Make Left Sidebar Swipe Out and Main Page Slide With It

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>

Center Icon and Text in a button Xamarin XAML

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.

Resources