Vertical text align on side menu xamarin.forms - xaml

I have been trying to centralize the text- "Hello Janine Alexander" on this side menu but to no avail. I have tried YAlign="Center" and also VerticalTextAlignment="Center" but neither have moved it even an inch down. Any help will be appreciated. I do think its in the navigation bar resulting in it not moving vertically down.How do i fix this
Here is the complete xaml code:
<?xml version="1.0" encoding="utf-8" ?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="loyaltyworx1.Profile">
<MasterDetailPage.Master>
<ContentPage Title="Menu"
BackgroundColor="#2196F3">
<StackLayout Orientation="Vertical">
<Label x:Name="lblMessage" FontSize="Medium" HorizontalOptions="Center" TextColor="White" />
<!--
This StackLayout you can use for other
data that you want to have in your menu drawer
-->
<StackLayout BackgroundColor="#2196F3"
HeightRequest="150">
<Label Text=""
FontSize="20"
VerticalOptions="CenterAndExpand"
TextColor="White"
HorizontalOptions="Center"/>
</StackLayout>
<ListView x:Name="navigationDrawerList"
RowHeight="60"
SeparatorVisibility="None"
BackgroundColor="White"
ItemSelected="OnMenuItemSelected">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<!-- Main design for our menu items -->
<StackLayout VerticalOptions="FillAndExpand"
Orientation="Horizontal"
Padding="20,10,0,10"
Spacing="20">
<Image Source="{Binding Icon}"
WidthRequest="40"
HeightRequest="40"
VerticalOptions="Center"
/>
<Label Text="{Binding Title}"
FontSize="Medium"
VerticalOptions="Center"
TextColor="#343f42"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage>
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<NavigationPage>
</NavigationPage>
</MasterDetailPage.Detail>
</MasterDetailPage>

It looks like you're adding it to the Navigation bar of the MasterDetailPage. If so, you're not going to be able to move it down. What I did on my app was to remove the navigationbar in the MasterDetailPage and in the content page I added the label with binding to add the name of the logged in user.
MainPage.xaml
<?xml version="1.0" encoding="utf-8" ?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:MyApp"
x:Class="MyApp.MainPage"
NavigationPage.HasNavigationBar="False">
<MasterDetailPage.Master>
<local:MasterPage x:Name ="masterPage"/>
</MasterDetailPage.Master>
</MasterDetailPage>
MasterPage.xaml
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MyApp.MasterPage"
Padding="0,10,0,0"
Icon="hamburger.png"
Title="Menu">
<ContentPage.Content>
<StackLayout>
<StackLayout Orientation="Horizontal" Padding="10,10,0,0">
<Label Text="" FontSize="40" FontFamily="FontAwesome" />
<Label x:Name="Username" Text="{Binding UserFullName}" VerticalOptions="CenterAndExpand"/>
</StackLayout>
.....
Screen shot
If that's not the issue please add the code that is wrapping the label to get a better idea of what could be happening.

Related

Center text on NavigationPage's TitleView: it is slightly offset due to back button at left

hi i am trying to center the text in the navigation bar but it is centered in relation to this feedback button
here is my code
<?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="Paypal.profile">
<NavigationPage.TitleView>
<Label Text="Préférences" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"/>
</NavigationPage.TitleView>
<ContentPage.Content>
<StackLayout>
<Label Text="Welcome to Xamarin.Forms!"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
there is my problem
enter image description here
and what i want :
enter image description here
You can remove the back button and add a custom back button.
1.remove the back button with code:
NavigationPage.HasBackButton="False"
2.Add a custom image and add TapGestureRecognizer event for the back button.
<NavigationPage.TitleView>
<AbsoluteLayout>
<Image AbsoluteLayout.LayoutBounds="0, 0.5" AbsoluteLayout.LayoutFlags="PositionProportional" WidthRequest="20" HeightRequest="20"
Source="back.png">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
</Image.GestureRecognizers>
</Image>
<Label Text="MyTitle" FontSize="20" AbsoluteLayout.LayoutBounds="0.5, 0.5" AbsoluteLayout.LayoutFlags="PositionProportional" />
</AbsoluteLayout>
</NavigationPage.TitleView>
The whole sample code is:
<?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="FormApp0706.TestPage"
NavigationPage.HasBackButton="False"
>
<NavigationPage.TitleView>
<AbsoluteLayout>
<Image AbsoluteLayout.LayoutBounds="0, 0.5" AbsoluteLayout.LayoutFlags="PositionProportional" WidthRequest="20" HeightRequest="20"
Source="back.png">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
</Image.GestureRecognizers>
</Image>
<Label Text="MyTitle" FontSize="20" AbsoluteLayout.LayoutBounds="0.5, 0.5" AbsoluteLayout.LayoutFlags="PositionProportional" />
</AbsoluteLayout>
</NavigationPage.TitleView>
<ContentPage.Content>
<StackLayout>
<Label Text="Welcome to Xamarin.Forms!"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand" />
</StackLayout>
</ContentPage.Content>
</ContentPage>

Xaml Button too small

I am writing a mobile app in Visual Studio 2019 for Mac.
I have a xaml ContentPage. I have some labels and a ListView.
Here is my xaml:
<?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="MyView.Views.ItemDetailPage"
Title="{Binding Title}">
<ContentPage.Resources>
<ResourceDictionary>
<!--Page Level Resources: Compatibile with Xamarin Live Player -->
<Color x:Key="Primary">#2196F3</Color>
<Color x:Key="Accent">#96d1ff</Color>
<Color x:Key="LightTextColor">#999999</Color>
</ResourceDictionary>
</ContentPage.Resources>
<StackLayout Spacing="20" Padding="15">
<Label Text="Text:" FontSize="Medium" />
<Label Text="{Binding Item.Text}" FontSize="Small"/>
<Label Text="Description:" FontSize="Medium" />
<Label Text="{Binding Item.Description}" FontSize="Small"/>
<Label Text="Commands:" FontSize="Medium" />
<ListView ItemsSource="{Binding Item.CommandList}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Padding="10">
<Button Margin="0,10,0,0" Text="Reset Pairing" Command="{Binding}" BackgroundColor="{StaticResource Primary}" TextColor="White" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<Label Text="Something below" FontSize="Medium" />
</StackLayout>
</ContentPage>
Here is what the page looks like in the Android simulator:
Why is the button so skinny and how do I fix it? I have tried putting Height in the parents where it is allowed. I have also tried HeightRequests. I can't figure it out.
Set HasUnevenRows="True" property in your listview.
<?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="MyView.Views.ItemDetailPage"
Title="{Binding Title}">
<ContentPage.Resources>
<ResourceDictionary>
<!--Page Level Resources: Compatibile with Xamarin Live Player -->
<Color x:Key="Primary">#2196F3</Color>
<Color x:Key="Accent">#96d1ff</Color>
<Color x:Key="LightTextColor">#999999</Color>
</ResourceDictionary>
</ContentPage.Resources>
<StackLayout Spacing="20" Padding="15">
<Label Text="Text:" FontSize="Medium" />
<Label Text="{Binding Item.Text}" FontSize="Small"/>
<Label Text="Description:" FontSize="Medium" />
<Label Text="{Binding Item.Description}" FontSize="Small"/>
<Label Text="Commands:" FontSize="Medium" />
<ListView ItemsSource="{Binding Item.CommandList}" HasUnevenRows="True">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Padding="10">
<Button Margin="0,10,0,0" Text="Reset Pairing" Command="{Binding}" BackgroundColor="{StaticResource Primary}" TextColor="White" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<Label Text="Something below" FontSize="Medium" />
</StackLayout>
</ContentPage>
Result :

Space around in xamarin forms

Im using xamarin forms.
i wanna design my xaml files but i realized something strange.
left and right of entry has space that i couldnt remove even with custom renderer.
is there any idea what is might be?
i tried padding,margin,HorizontalOption none of them effected.
even i tried to setPadding to 0 from custom renderer in android but it didnt work.
the first one is label as you can see filled out all the space but entry has an space around it .
Update:
this is my xaml codes and im using android emulator to test.
<StackLayout BackgroundColor="White" Spacing="15">
<Label Text="fds" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="Red"/>
<Entry BackgroundColor="Red" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"/>
</StackLayout>
don't know how is your implementation but this what I tried:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
xmlns:bases="clr-namespace:WhiteSolution.Views.Bases"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:viewModelBase="clr-namespace:WhiteSolution.ViewModels.Bases"
viewModelBase:ViewModelLocator.AutoWireViewModel="True"
x:Class="WhiteSolution.Views.HomePage">
<ContentPage.Content>
<Grid VerticalOptions="FillAndExpand"
BackgroundColor="WhiteSmoke">
<StackLayout Padding="0"
Spacing="0"
BackgroundColor="Blue">
<Label Text="no space label"
Margin="0"
HorizontalOptions="FillAndExpand"
HorizontalTextAlignment="Center"
BackgroundColor="Yellow"
FontSize="Large"/>
<Entry Text="no space entry"
Margin="0"
BackgroundColor="Red"
HorizontalOptions="FillAndExpand"
HorizontalTextAlignment="Center"
FontSize="Large"/>
</StackLayout>
</Grid>
</ContentPage.Content>
</ContentPage>
and i get this result
if you share your code it will be more useful
Try this, Padding Property should be 0 in main StackLayout.
<?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="SampleApp.Views.DashboardView">
<ContentPage.Content>
<StackLayout Padding="0" BindingContext="{Binding Dashboard}">
<!-- Controls -->
</StackLayout>
</ContentPage.Content>
I realized that entry has Default margin value. so i set it to 0 and everything worked.
here is my code
<StackLayout>
<Entry Margin="0" Text="fd" BackgroundColor="Red" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"/>
<Label Text="fd" BackgroundColor="Red" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"/>
</StackLayout>

Xamarin.Forms: Not visible ToolbarItems in ContentPage

I am using Xamarin.Forms for my project & I need to have Toolbar at the top of the page.
I am trying to get it along with Tabbed pages at bottom.
My code is
<?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:edTheSIS"
x:Class="edTheSIS.ParentDashboard">
<ContentPage.ToolbarItems>
<ToolbarItem Name="MenuItem1" Order="Primary" Text="Item 1" Priority="0" />
<ToolbarItem Name="MenuItem2" Order="Primary" Text="Item 2" Priority="1" />
</ContentPage.ToolbarItems>
<AbsoluteLayout>
<StackLayout BackgroundColor="Teal" AbsoluteLayout.LayoutBounds="0, 5, 0, 0" AbsoluteLayout.LayoutFlags="All">
<StackLayout Margin="0,200,0,0" HorizontalOptions="Center">
<Label Text="Xamarin.Forms" HorizontalTextAlignment="Center" TextColor="White"></Label>
<Label Text="Bottom NavigationBar" HorizontalTextAlignment="Center" TextColor="White"></Label>
</StackLayout>
</StackLayout>
<StackLayout AbsoluteLayout.LayoutBounds=".20,1,1,.1" AbsoluteLayout.LayoutFlags="All" BackgroundColor="White" HorizontalOptions="FillAndExpand" Orientation="Horizontal">
<StackLayout Style="{StaticResource ButtonNavigationBarStackLayoutStyle}" x:Name="stckHome">
<Image Margin="0,10,0,10" x:Name="imgHome" Style="{StaticResource ButtonNavigationBarImageStyle}" />
<Label Text="Dairy" Style="{StaticResource ButtonNavigationBarLabelStyle}"></Label>
</StackLayout>
<StackLayout Style="{StaticResource ButtonNavigationBarStackLayoutStyle}" x:Name="stckAlarm">
<Image Margin="0,10,0,10" x:Name="imgAlarm" Style="{StaticResource ButtonNavigationBarImageStyle}" />
<Label Text="Alarm" Style="{StaticResource ButtonNavigationBarLabelStyle}"></Label>
</StackLayout>
</StackLayout>
</AbsoluteLayout>
</ContentPage>
After executing the code only tabs are showing up, not ToolbarItems.
Wrap your page in a NavigationPage.
I'm guessing you're setting your MainPage in the App.xaml.cs now like: MainPage = new ParentDashboard();
Set this to be: MainPage = new NavigationPage(new ParentDashboard());

Xamarin Forms stacklayout fill screen on landscape

How can I do stacklayout take all screen width when device is in Landscape?
in Landscape mode stacklayout does not fill parent
here is my Xaml:
<?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:ListView"
x:Class="ListView.MainPage">
<ContentPage.Content>
<AbsoluteLayout BackgroundColor="Silver" HorizontalOptions="FillAndExpand">
<StackLayout Orientation="Vertical" HorizontalOptions="StartAndExpand" BackgroundColor="Maroon" VerticalOptions="StartAndExpand">
<Button Text="Reload data" Clicked="reloadData" x:Name="btnReload"/>
<ListView x:Name="listView">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout BackgroundColor="#eee" Orientation="Vertical">
<StackLayout Orientation="Horizontal" VerticalOptions="FillAndExpand">
<Image Source="{Binding Imagen}" HeightRequest="100" WidthRequest="120"/>
<Label Text="{Binding Titulo}" TextColor="Gray"/>
<Label Text="{Binding Fecha}" HorizontalOptions="EndAndExpand"/>
</StackLayout>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
<ActivityIndicator BackgroundColor="Green" AbsoluteLayout.LayoutBounds=".5,.5,.2,.2" AbsoluteLayout.LayoutFlags="All" Color="Blue"
IsRunning="True" IsVisible="False" x:Name="overlay"/>
</AbsoluteLayout>
</ContentPage.Content>
I want stacklayout take screen width on landscape; but only on portrait is work.
When controls are direct children of an AbsoluteLayout setting HorizontalOptions and VerticalOptions has no effect. All of the sizing must come from setting AbsoluteLayout.LayoutBounds and AbsoluteLayout.LayoutFlags. So try changing your StackLayout to this:
<AbsoluteLayout BackgroundColor="Silver"
HorizontalOptions="FillAndExpand">
<StackLayout Orientation="Vertical"
BackgroundColor="Maroon"
AbsoluteLayout.LayoutBounds="0,0,1,1"
AbsoluteLayout.LayoutFlags="All">
...
Then you also may need to set your ListView.HorizontalOptions to FillAndExpand but try without that first.