Picture doesn´t fit ImageButton - xamarin.forms

I want to write an app for Android with Xamarin.Forms and i want an ImageButton like in this question: How to make a Floating Action Button in Xamarin Forms
The problem is as soon as i set the Background of the Button the Image is not displayed correctly. The Button is on the upper left corner of the Image and the Image is super big. The Button is shown correctly.
This is my Xaml with the Button:
<?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:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:android="http://schemas.android.com/apk/res/android"
mc:Ignorable="d"
x:Class="ASUE.Views.ItemsPage"
Title="AllItems"
x:Name="BrowseItemsPage">
<ContentPage.ToolbarItems>
<ToolbarItem Text="Archive" Clicked="Archive_Clicked"/>
</ContentPage.ToolbarItems>
<AbsoluteLayout>
<ScrollView AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1">
<StackLayout>
<ListView x:Name="ItemsListView"
ItemsSource="{Binding Items}"
VerticalOptions="FillAndExpand"
HasUnevenRows="true"
RefreshCommand="{Binding LoadItemsCommand}"
IsPullToRefreshEnabled="true"
IsRefreshing="{Binding IsBusy, Mode=OneWay}"
CachingStrategy="RecycleElement"
ItemSelected="OnItemSelected">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Padding="10" BackgroundColor="{Binding BColor, FallbackValue='White'}">
<Label Text="{Binding Title}"
LineBreakMode="NoWrap"
Style="{DynamicResource ListItemTextStyle}"
FontSize="16" />
<Label Text="{Binding ActionTime}"
LineBreakMode="NoWrap"
Style="{DynamicResource ListItemDetailTextStyle}"
FontSize="13" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ScrollView>
<ImageButton Source="add.png" AbsoluteLayout.LayoutFlags="PositionProportional" AbsoluteLayout.LayoutBounds=".95,.95,80,80" BackgroundColor="Transparent"/>
</AbsoluteLayout>
</ContentPage>
I expect the Image to be the same size as the Button
Update
I tried This
<ImageButton Source="add.png"
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds=".1,.1,80,80"
BackgroundColor="Accent"
CornerRadius="80"/>
This
<ImageButton Source="add.png"
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds=".1,.1,80,80"
BackgroundColor="Accent"
CornerRadius="80"
Padding="0,0,75,75"/>
This
<ImageButton Source="add.png"
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds=".1,.1,80,80"/>
and This
<ImageButton Source="add.png"
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds=".1,.1,80,80"
CornerRadius="80"/>

You need to set CornerRadius to have a circle button. You also need to set the Padding property to make your image smaller:
<ImageButton Source="add.png"
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds=".95,.95,80,80"
CornerRadius="80"
Padding="15"
BackgroundColor="Accent"/>
where add.png is:
You can get it here: https://material.io/resources/icons/?search=add&icon=add&style=baseline
in black or white

i just limit its width and height like this,is it the effect you want ?:
<ImageButton Source="add.png"
HorizontalOptions="Center"
VerticalOptions="Center"
CornerRadius="25"
WidthRequest="50"
HeightRequest="50"
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds=".95,.95,80,80"
BackgroundColor="Accent"/>

Thanks for all your help but nothing of this works sadly.
So i just made a normal button with the picture as ImageSource and resized the picture correctly to fit the button.

Related

Remove CarouselView WhiteSpace

I'm trying to implement a CarouselView to display a set of images on my app. Apparently, I can't remove the Whitespace at the Bottom of the CarouselView no matter what combinations I tried.
I've placed BackgroundColor property for CarouselView [Red], Grid[Green] (inside DataTemplate), and IndicatorView [Blue] to see which of them is consuming the rest of the screen despite the lack of StackLayout and it seems that either CarouselView or Grid is causing the unwanted behaviour.
Here's my XAML Code with roughly nothing on the ViewModel but a Mock Database for the Image Collection:
<ContentPage.Content>
<Grid ColumnDefinitions="*"
RowDefinitions="Auto,Auto,Auto,1*">
<Label Grid.Row="0" Grid.Column="0"
Text="CarouselView Test"
TextColor="Black"
FontAttributes="Bold"
FontSize="20"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand"
Padding="10" />
<CarouselView Grid.Row="1" Grid.Column="0" BackgroundColor="Red" HeightRequest="{Binding ScreenWidth}"
x:Name="TheCarousel"
ItemsSource="{Binding ImageSourceCollection}"
IndicatorView="indicatorView">
<CarouselView.ItemTemplate>
<DataTemplate>
<Grid RowDefinitions="Auto" ColumnDefinitions="Auto" BackgroundColor="Green" HorizontalOptions="Center" VerticalOptions="Center">
<Image Grid.Row="0" Grid.Column="0" Source="{Binding .}" />
</Grid>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
<IndicatorView Grid.Row="2" Grid.Column="0" BackgroundColor="Blue"
x:Name="indicatorView"
IndicatorColor="LightGray"
IndicatorSize="10"
SelectedIndicatorColor="Black" />
</Grid>
</ContentPage.Content>
And here's a screenshot of my current build with the CarouselView/Grid consuming most of the Screen Space:
CarouselView has some weird behaviors on size calculating,in your scenario the only way is get the height it(template) needs in code(viewmodel), and bind it to the HeightRequest on CarouselView .
Xaml
<CarouselView HeightRequest="{Binding xxx}"
View model
public double xxx {
get
{
// calculate the height according to the width by ratio
return height;
}
}
I think you need to set Space between rows and columns to Zero if you want to make your indicatorView stick to your CarouselView
So what actually worked for me.
I set Grid Row Definition to ex.(300) and then Carousel Height Request to 350.
I'm setting Image Width based on Screen Width, but I tried it Manually ex (400) and still worked, don't get confused.
<Grid RowDefinitions="300">
<CarouselView x:Name="carouselView"
Grid.Row="0"
ItemsSource="{Binding HomeCarousel}">
<CarouselView.ItemTemplate>
<DataTemplate>
<StackLayout>
<Frame HasShadow="False"
CornerRadius="0"
Margin="0"
HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand"
HeightRequest="350">
<SwipeView>
<Image Source="{Binding ImageSource}"
Aspect="AspectFill"
WidthRequest="{DynamicResource FullScreenWidth}"
HorizontalOptions="Center" />
</SwipeView>
</Frame>
</StackLayout>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
</Grid>

How to make a semi-transparent background image on xamarin

I have to opacify (make semi-transparent) the background image with a colored veil, I tried adding a frame but I don't get the desired effect`
<?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:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:viewmodels="clr-namespace:GET_SOUND_V2.ViewModels" x:DataType="viewmodels:LoginViewModel"
mc:Ignorable="d"
x:Class="GET_SOUND_V2.Views.LoginPage"
BackgroundImage="maco.jpg">
<ContentPage.Content>
<Frame BorderColor="Transparent" Opacity="0.7">
<Frame.Background>
<LinearGradientBrush StartPoint="0,0"
EndPoint="1,0">
<GradientStop Color="#1d57a8"
Offset="0.1"/>
<GradientStop Color="#1d57a8"
Offset="1.0"/>
</LinearGradientBrush>
</Frame.Background>
<StackLayout Orientation="Vertical" Padding="30" Spacing="40">
<BoxView HeightRequest="30"/>
<StackLayout Orientation="Vertical">
<Entry x:Name="txtUserName" Text="{Binding UserName}" HorizontalTextAlignment="Center" Placeholder="UserName"
PlaceholderColor="White" HeightRequest="40"
Keyboard="Email"
TextColor="White"
Focused="BiometricCredentials" />
<Entry x:Name="txtPassword" Text="{Binding Password}" HorizontalTextAlignment="Center" Placeholder="Password"
PlaceholderColor="White" HeightRequest="40"
IsPassword="True"
TextColor="White"/>
</StackLayout>
<Button Command="{Binding SubmitCommand}" Text="Accedi" TextColor="White" CornerRadius="50"
FontAttributes="Bold" FontSize="Large" HorizontalOptions="FillAndExpand" VerticalOptions="EndAndExpand"
Margin="0,0,0,150" BackgroundColor="#EF7F1A" />
</StackLayout>
</Frame>
</ContentPage.Content>
</ContentPage>
I would like the elements, however, not to be affected by the opacity value (still be fully opaque), any advice on how I could do?
One approach is to "overlay" two elements over each other, using a single-cell Grid.
The "underneath" item is the image (with opacity applied).
The "top" item is the rest of your layout.
.
<Grid>
<Frame ...>
...
</Frame>
<StackLayout ...>
...
</StackLayout>
</Grid>
Notice that StackLayout is no longer inside Frame. Because no Grid.Row or Grid.Column is specified on these two elements, they both are at Row=0, Column=0. Hence, overlaid one on top of the other.
May need to add properties to <Grid> element, to get desired size, etc. But start with what I show, see what happens.

Xamarin Forms ToolbarItem different sizing in android and ios

currently in my project im using Xamarin forms and im using ToolBarItem as part of my app headers
<ContentPage.ToolbarItems>
<ToolbarItem IconImageSource="Archive.png" Command="{Binding ArchiveCommand}" />
<ToolbarItem Command="{Binding InboxCommand}" IconImageSource="Inbox_black.png"/>
<ToolbarItem IconImageSource="plus.png" Command="{Binding AddItemCommand}"/>
<ToolbarItem IconImageSource ="Logout.png" Command="{Binding LogoutCommand}" />
</ContentPage.ToolbarItems>
however, it appears different on ios and android. ive attached images below to show the difference, Android on the left, ios on the right.
what setting do i need to change in my code or Visual Studio for Mac to set them the same
Thanks in advance
Try to give the icons a Widht and Height .Something like this.
<ImageButton Source="close.png" WidthRequest="60" HeightRequest="30" HorizontalOptions="EndAndExpand"/>
<NavigationPage.TitleView>
<StackLayout Orientation="Horizontal">
<Label Text="Admin" FontSize="Large" TextColor="White" VerticalTextAlignment="Center" HorizontalOptions="StartAndExpand"/>
<ImageButton Source="Archive.png" WidthRequest="30" HeightRequest="30" HorizontalOptions="End" Command="{Binding ArchiveCommand}" BackgroundColor="Transparent" />
<Label Padding="5,0 "/>
<ImageButton Source="Inbox_black.png" WidthRequest="30" HeightRequest="30" HorizontalOptions="End" Command="{Binding InboxCommand}" BackgroundColor="Transparent"/>
<Label Padding="5,0 "/>
<ImageButton Source="plus.png" WidthRequest="30" HeightRequest="30" HorizontalOptions="End" Command="{Binding AddItemCommand}" BackgroundColor="Transparent"/>
<Label Padding="5,0 "/>
<ImageButton Source="Logout.png" WidthRequest="30" HeightRequest="30" HorizontalOptions="End" Command="{Binding LogoutCommand}" BackgroundColor="Transparent"/>
<Label Padding="5,0 "/>
</StackLayout>
</NavigationPage.TitleView>
Thanks to Bassies for providing a hint to solve the problem. I changed the ToolBarItems section to a stacklayout nested inside TitleView which gives me more options to customise the UI to how i want it.

Xamarin Forms group controls without modifying layout

I've got following view:
<ContentPage.Content>
<AbsoluteLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<StackLayout AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1">
<StackLayout VerticalOptions="CenterAndExpand" Margin="20, 0, 20, 0">
<StackLayout>
<Label Text="Login" HorizontalOptions="CenterAndExpand" />
<Entry Text="{Binding Login, Mode=OneWayToSource}"></Entry>
</StackLayout>
<StackLayout>
<Label Text="Hasło" HorizontalOptions="CenterAndExpand" />
<Entry IsPassword="True" Text="{Binding Password, Mode=TwoWay}"></Entry>
</StackLayout>
<Button Text="Zaloguj się" Command="{Binding SignInCommand}"></Button>
</StackLayout>
</StackLayout>
<BoxView AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1" BackgroundColor="Gray" Opacity="0.5" InputTransparent="false" IsVisible="{Binding IsBusy}" />
<ActivityIndicator IsRunning="{Binding IsBusy}" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" />
</AbsoluteLayout>
</ContentPage.Content>
I want to move BoxView and ActivityIndicator to external control to make reusable component. The problem is that to achieve this I need to "group" these controls to obtain one child element.
The question is if is there any element I can use to group my controls, but which will not affect the way how controls are displayed? Alternatevlly which element I can use and how to still have effect of overlay over whole page and loading indicator?
I was trying to use AbsoluteLayout, StackLayout etc. but I couldn't position it to persist initial effect (overlay on whole page and loading indicator in the center with opacity = 1).
You can use DependencyService and reuse it in any page.
Check this tutorial.
There is also a working sample.

Xamarin Forms Present a Page from Right to Left

Actually I am trying to show a Master Detail Page with Menu button on right side. I am not getting any option to present a Page modally from right to left and same dismiss also left to right. Can anyone help me on this.
You can use FlowDirection
<MasterDetailPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="RTL.MasterDetailPage"
Padding="25"
FlowDirection="RightToLeft">
<MasterDetailPage.Master>
<ContentPage Title=" ">
<StackLayout>
<Button Text="Menu item" />
</StackLayout>
</ContentPage>
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<ContentPage>
<Label Text="My page"/>
</ContentPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
https://blog.xamarin.com/right-to-left-localization-xamarin-forms/
Better work around is,
Disable Navigation tool bar,
NavigationPage.SetHasNavigationBar(this, false);
Create custom tool bar with Hamburger image,
<StackLayout Orientation="Horizontal" VerticalOptions="Start" HorizontalOptions="FillAndExpand">
<Image Source="hamburger" Margin="2,0,0,0" HeightRequest="35" WidthRequest="25">
<Image.GestureRecognizers>
<TapGestureRecognizer Command="{Binding ToggleMasterCommand}" CommandParameter="1"></TapGestureRecognizer>
</Image.GestureRecognizers>
</Image>
<Label Text="Header text" HorizontalOptions="CenterAndExpand" HorizontalTextAlignment="Center" VerticalOptions="CenterAndExpand" VerticalTextAlignment="Center"/>
<Image Source="notification" HeightRequest="30" WidthRequest="30">
<Image.GestureRecognizers>
<TapGestureRecognizer Command="{Binding NotificationCommand}"></TapGestureRecognizer>
</Image.GestureRecognizers>
</Image>
</StackLayout>
Apply FlowDirection for each page. either Xaml or code behind through Visual Element
You can see a demo for setting Visual Element through code behind here

Resources