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.
Related
```
<pages:PopupPage.Resources>
<local1:ChangeFrameBackgroudColor x:Key="ChangeFrameBackgroudColor" />
</pages:PopupPage.Resources>
<pages:PopupPage.Animation>
<animations:ScaleAnimation DurationIn="400"
DurationOut="300"
EasingIn="SinOut"
EasingOut="SinIn"
HasBackgroundAnimation="True"
PositionIn="Center"
PositionOut="Center"
ScaleIn="1.2"
ScaleOut="0.8" />
</pages:PopupPage.Animation>
<StackLayout Margin="12"
BackgroundColor="WhiteSmoke"
HorizontalOptions="Center"
VerticalOptions="Center"
>
<StackLayout>
<ListView x:Name="list" HasUnevenRows="True" ItemsSource="{Binding Firms}" SelectedItem="{Binding FirmId} " Header="{Binding}" ItemTapped="Choose_firm" SelectionMode="Single" Margin="0" >
<ListView.ItemTemplate >
<DataTemplate>
<local:ExtendedViewCell SelectedBackgroundColor="WhiteSmoke" >
<StackLayout Padding="20, 10" >
<Frame x:Name="frameLabel" BorderColor="#2188ff" BackgroundColor="{Binding IsActive, Converter={StaticResource ChangeFrameBackgroudColor}}" CornerRadius="10">
<Label FontAttributes="Bold" FontSize="18" TextColor="Black" Text="{Binding Name}" ></Label>
</Frame>
</StackLayout>
</local:ExtendedViewCell>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.HeaderTemplate>
<DataTemplate>
<ContentView BackgroundColor="#006BE6" >
<Label Margin="10" HorizontalOptions="CenterAndExpand" Text="Choose Firm" TextColor="White" FontSize="20" FontAttributes="Bold"/>
</ContentView>
</DataTemplate>
</ListView.HeaderTemplate>
</ListView>
<StackLayout VerticalOptions="End" Orientation="Horizontal" >
<Label Text="Check Default:" FontSize="18" />
<CheckBox IsChecked="False" Color="#006BE6" ></CheckBox>
</StackLayout>
</StackLayout>
<StackLayout Orientation="Horizontal" VerticalOptions="Center" HorizontalOptions="Center" Margin="0,0,0,10">
<Button Text="CHANGE" BackgroundColor="#006BE6" IsEnabled="{Binding !IsBusy}" TextColor="White" Command="{Binding LoadFirmCommand}" CommandParameter="{Binding FirmId}" CornerRadius="10"></Button>
<Button Text="CANCEL" BackgroundColor="Gray" IsEnabled="{Binding !IsBusy}" TextColor="White" Clicked="ClosePopUp" CornerRadius="10"></Button>
</StackLayout>
</StackLayout>
</pages:PopupPage>
In first StackLayout i got ListView with only 3 elements. After that is lot empty space , and at the bottom of the PopUp are other two StackLayouts. I tried with Margins , Padding but nothing changed. I don't know what is the problem. Why is so much space. The bottom two StackLayouts dont have space between. How to solve this empty space?
I have not ran your code, but, looking at your XAML I can see that for your stack layout in the vertical option we tell it to end
<StackLayout VerticalOptions="End" Orientation="Horizontal" >
<Label Text="Check Default:" FontSize="18" />
<CheckBox IsChecked="False" Color="#006BE6" ></CheckBox>
However, Note how it is wrapped in the parent stack layout. Since it doesn't have a height request, it simply obeys what it was told to do. The parent stacklayout is the one where the list view is defined. So it loads the list view and then it renders the other stack layout at the bottom (End), does causing the massive gap
so in essence:
<StackLayout VerticalOptions="End" Orientation="Horizontal" >
<Label Text="Check Default:" FontSize="18" />
<CheckBox IsChecked="False" Color="#006BE6" ></CheckBox>
</StackLayout>
</StackLayout>
Goes To:
</StackLayout>
<StackLayout VerticalOptions="End" Orientation="Horizontal" >
<Label Text="Check Default:" FontSize="18" />
<CheckBox IsChecked="False" Color="#006BE6" ></CheckBox>
</StackLayout>
I have the following XAML in my Xamarin Forms project
<StackLayout x:Name="slFullPage" Orientation="Vertical" HorizontalOptions="Fill" VerticalOptions="FillAndExpand" Margin="0,0,0,0" BackgroundColor="AliceBlue">
<localapp:PageHeader x:Name="pgHeader" VerticalOptions="Start" HorizontalOptions="Fill" />
<combobox:SfComboBox x:Name="cmbLanguage" DataSource="{Binding LangaugesByAppLanguage}" TextSize="Micro"
TextColor="#283655" SelectionChanged="cmbLanguage_SelectionChanged"
Watermark="{localapp:Translate SelectValue}" DropDownItemHeight="25" WidthRequest="250" HeightRequest="30"
DropDownTextSize="Micro" BackgroundColor="White" HorizontalOptions="Center" VerticalOptions="Start"
DisplayMemberPath="LanguageName" SelectedValuePath="ISO_639_1_Code">
</combobox:SfComboBox>
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" VerticalOptions="End" BackgroundColor="Aqua">
<buttons:SfButton x:Name="btnCancel" Text="{localapp:Translate Cancel}" HorizontalOptions="Start" VerticalOptions="End" Margin="8,0,4,0"/>
<buttons:SfButton x:Name="btnDone" Text="{localapp:Translate Done}" HorizontalOptions="End" VerticalOptions="End" Margin="4,0,8,0"/>
</StackLayout>
<localapp:AppFooter x:Name="pgFooter" VerticalOptions="End" HorizontalOptions="Fill" />
</StackLayout>
Based on my understanding of the horizontal options that can be specified on an object, I would expect the Cancel button to be at the start of my horizontal stack layout and my Done button to be at the end of the same stack layout.
Additionally, based on the vertical options that can be used, I would expect the stacklayout with the buttons in it as well as my appfoot to appear at the bottom of my slFullPage stack layout. However, neither of those things are happening.
Instead what I get can be seen below:
You can see that the entire page stacklayout is going all the way to the bottom of the screen but my buttons and footer are not at the bottom.
Additinally, you can see the horizontal stack layout (aqua) goes all the way across the screen but the buttons are not positioned based on their horizontal options.
Any ideas?? FYI - I am running the project as a UWP app.
Based on my understanding of the horizontal options that can be specified on an object, I would expect the Cancel button to be at the start of my horizontal stack layout and my Done button to be at the end of the same stack layout.
You could use a AbsoluteLayout to make the buttons positioned anywhere within a view.
<AbsoluteLayout BackgroundColor="LightBlue" HeightRequest="60" VerticalOptions="EndAndExpand">
<Button Text="Cancel" Margin="10,10" BackgroundColor="DarkBlue" TextColor="White"/>
<Button Text="Done" Margin="10,10" AbsoluteLayout.LayoutBounds="1, 0, AutoSize, AutoSize" AbsoluteLayout.LayoutFlags="PositionProportional" BackgroundColor="DarkBlue" TextColor="White"/>
</AbsoluteLayout>
And use the VerticalOptions="EndAndExpand" to make it appears at the end of its parent and expands.
Updated:
I do not know what it was before, but for now, it doesn’t actually fill up the space in the StackLayout. It’s only when the fill option is used, that it will expand to that space.
When you expect the Cancel button to be at the start and the Done button to be at the end of the same stack layout, fill option and expend need to be setted. I use simple example to display.
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" VerticalOptions="EndAndExpand" BackgroundColor="Aqua">
<Button x:Name="btnCancel" Text="Cancel" HorizontalOptions="StartAndExpand" Margin="8,0,4,0"/>
<Button x:Name="btnDone" Text="Done" HorizontalOptions="EndAndExpand" Margin="4,0,8,0"/>
</StackLayout>
And if you do not want space between last two lines in the end, you need a nested stacklayout to do that without space.
Simple code:
<StackLayout BackgroundColor="LightGray">
<StackLayout>
<Entry x:Name="pgHeader" Text="pgHeader" HorizontalOptions="FillAndExpand" />
<Entry x:Name="cmbLanguage" Text="cmbLanguage" WidthRequest="250" HeightRequest="30"
BackgroundColor="Red" HorizontalOptions="CenterAndExpand" ></Entry>
</StackLayout>
<StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="EndAndExpand">
<StackLayout Orientation="Horizontal" BackgroundColor="Aqua">
<Button x:Name="btnCancel" Text="Cancel" HorizontalOptions="StartAndExpand" Margin="8,0,4,0"/>
<Button x:Name="btnDone" Text="Done" HorizontalOptions="EndAndExpand" Margin="4,0,8,0"/>
</StackLayout>
<Entry x:Name="pgFooter" Text="pgFooter"/>
</StackLayout>
</StackLayout>
You don't want to use a StackLayout (well 2 StackLayout), but a Grid:
It's more convenient for your layout, and it is way more performant.
<Grid ColumnSpacing="0" RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="40" />
<RowDefinition Height="40" />
</Grid.RowDefinitions>
<Grid.ColumnDefinition>
<ColumnDefinition Width="80" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="80" />
</Grid.ColumnDefinition>
<localapp:PageHeader Grid.Row="0" x:Name="pgHeader" />
<combobox:SfComboBox Grid.Row="1" x:Name="cmbLanguage" DataSource="{Binding LangaugesByAppLanguage}" TextSize="Micro"
TextColor="#283655" SelectionChanged="cmbLanguage_SelectionChanged"
Watermark="{localapp:Translate SelectValue}" DropDownItemHeight="25" WidthRequest="250"
DropDownTextSize="Micro" BackgroundColor="White" HorizontalOptions="Center"
DisplayMemberPath="LanguageName" SelectedValuePath="ISO_639_1_Code">
</combobox:SfComboBox>
<buttons:SfButton Grid.Row="2" Grid.Column="0"
x:Name="btnCancel" Text="{localapp:Translate Cancel}" Margin="8,0,4,0"/>
<buttons:SfButton Grid.Row="2" Grid.Column="2"
x:Name="btnDone" Text="{localapp:Translate Done}" Margin="4,0,8,0"/>
</Grid>
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.
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
I am trying to create layout similar to Android cardview.
My progress for now.
image1
As you can see It looks guide well. However when I change Image property Aspect="Fill" to Aspect="AspectFill" images would lost round corners.
image2
My code
<Frame
VerticalOptions="Start"
Margin="8"
CornerRadius="10"
Padding="0"
BackgroundColor="White"
IsClippedToBounds="False">
<StackLayout Spacing="0">
<Image
HeightRequest="150"
Source="{Binding ImageUrl}"
Aspect="AspectFill"
/>
<StackLayout
Spacing="1"
Margin="8"
>
<Label
FontFamily="{StaticResource MontserratMedium}"
TextColor="Black"
Text="{Binding Title}">
</Label>
<StackLayout
Orientation="Horizontal"
>
<Label
FontFamily="{StaticResource MontserratMedium}"
FontSize="13"
TextColor="{StaticResource TextColorDate}"
Text="Price">
</Label>
<Label
FontFamily="{StaticResource MontserratBold}"
FontSize="13"
HorizontalOptions="EndAndExpand"
TextColor="{StaticResource TextColorCash}"
Text="{Binding Price,StringFormat='{0}K'}">
</Label>
</StackLayout>
</StackLayout>
</StackLayout>
</Frame>
Is there solution to have Image with property Aspect="AspectFill" and with rounded corners?