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>
Related
I am using Xamarin and xaml to define my views. I am getting an error that I dont understand.
<?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"
mc:Ignorable="d"
xmlns:telerikDataControls="clr-namespace:Telerik.XamarinForms.DataControls;assembly=Telerik.XamarinForms.DataControls"
xmlns:telerikListView="clr-namespace:Telerik.XamarinForms.DataControls.ListView;assembly=Telerik.XamarinForms.DataControls"
xmlns:telerikPrimitives="clr-namespace:Telerik.XamarinForms.Primitives;assembly=Telerik.XamarinForms.Primitives"
xmlns:telerikInput="clr-namespace:Telerik.XamarinForms.Input;assembly=Telerik.XamarinForms.Input"
xmlns:vm="clr-namespace:WMS.ViewModels"
x:Class="Views.HomePage">
<ContentPage.Content>
<ScrollView>
<Frame x:Name="reprint" Padding="40" IsClippedToBounds="False" CornerRadius="4">
<telerikPrimitives:RadBorder BorderThickness="8" CornerRadius="10">
<StackLayout>
<Label Text=" Label"></Label>
<Label Text="Allows the User to reprint a label."></Label>
<telerikInput:RadButton BackgroundColor="#343C41" TextColor="White" Text="Label Reprint" x:Name="btnLabelReprint" Clicked="BtnLabelReprint_Clicked">
</telerikInput:RadButton>
</StackLayout>
</telerikPrimitives:RadBorder>
</Frame>
<Frame x:Name="warehouseTransferr" Padding="40" CornerRadius="4">
<telerikPrimitives:RadBorder BorderThickness="8" CornerRadius="10">
<StackLayout>
<Label Text="Ware House Transfer"></Label>
<Label Text="Allows users to transfer from warehouse to waehouse"></Label>
<telerikInput:RadButton BackgroundColor="#343C41" TextColor="White" Text="Warehouse Transfer" x:Name="btnWarehouseTransfe" Clicked="BtnWarehouseTransfe_Clicked">
</telerikInput:RadButton>
</StackLayout>
</telerikPrimitives:RadBorder>
</Frame>
</ScrollView>
</ContentPage.Content>
</ContentPage>
Severity Code Description Project File Line Suppression State
Error XLS0501 The property 'Content' is set more than once. HomePage.xaml 36
You cannot have multiple children for a ScrollView, hence the error defining content more than once.
So, to fix this, you can encapsulate your content within a StackLayout:
<ScrollView>
<StackLayout>
<Frame x:Name="reprint" Padding="40" IsClippedToBounds="False" CornerRadius="4">
<telerikPrimitives:RadBorder BorderThickness="8" CornerRadius="10">
<StackLayout>
<Label Text=" Label"></Label>
<Label Text="Allows the User to reprint a label."></Label>
<telerikInput:RadButton BackgroundColor="#343C41" TextColor="White" Text="Label Reprint" x:Name="btnLabelReprint" Clicked="BtnLabelReprint_Clicked">
</telerikInput:RadButton>
</StackLayout>
</telerikPrimitives:RadBorder>
</Frame>
<Frame x:Name="warehouseTransferr" Padding="40" CornerRadius="4">
<telerikPrimitives:RadBorder BorderThickness="8" CornerRadius="10">
<StackLayout>
<Label Text="Ware House Transfer"></Label>
<Label Text="Allows users to transfer from warehouse to waehouse"></Label>
<telerikInput:RadButton BackgroundColor="#343C41" TextColor="White" Text="Warehouse Transfer" x:Name="btnWarehouseTransfe" Clicked="BtnWarehouseTransfe_Clicked">
</telerikInput:RadButton>
</StackLayout>
</telerikPrimitives:RadBorder>
</Frame>
</StackLayout>
</ScrollView>
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"
xmlns:local="clr-namespace:FlexLayout2"
x:Class="FlexLayout2.MainPage">
<FlexLayout
Direction="Column"
JustifyContent="Start"
AlignItems="Stretch">
<FlexLayout
Direction="Row"
JustifyContent="Start"
AlignItems="Stretch">
<BoxView Color="Red"/>
<BoxView Color="Black"/>
</FlexLayout>
<BoxView Color="Yellow"/>
</FlexLayout>
</ContentPage>
What I got:
Image
What I expected:
Image
Question says it all.
What I am missing ?
Xamarin Forms 3.2
If you place your child flex layout inside <ContentView> it will work:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:FlexLayout2"
x:Class="FlexLayout2.MainPage">
<FlexLayout
Direction="Column"
JustifyContent="Start"
AlignItems="Stretch">
<ContentView>
<FlexLayout
Direction="Row"
JustifyContent="Start"
AlignItems="Stretch">
<BoxView Color="Red"/>
<BoxView Color="Black"/>
</FlexLayout>
</ContentView>
<BoxView Color="Yellow"/>
</FlexLayout>
</ContentPage>
It seems that the outer FlexLayout sets the height of the inner one to zero if you rely on the default value. Try the following 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"
xmlns:local="clr-namespace:FlexLayout2"
x:Class="FlexLayout2.MainPage">
<FlexLayout
Direction="Column"
JustifyContent="Start"
AlignItems="Stretch">
<FlexLayout HeightRequest="40"
Direction="Row"
JustifyContent="Start"
AlignItems="Stretch">
<BoxView Color="Red"/>
<BoxView Color="Black"/>
</FlexLayout>
<BoxView Color="Yellow"/>
</FlexLayout>
</ContentPage>
I'm having the same issue as yours. In case you want to have the FlexLayout height to be set automatically, change the first FlexLayout to StackLayout so your code will be as follow:
<StackLayout Orientation="Vertical" Spacing="0">
<FlexLayout Direction="Row" JustifyContent="Start" AlignItems="Stretch">
<BoxView Color="Red"/>
<BoxView Color="Black"/>
</FlexLayout>
<BoxView Color="Yellow"/>
</StackLayout>
I don't know why it's not working when you have FlexLayout inside another FlexLayout unless you specify the height of the inner one. May be it's a bug.
I'm trying to set my image as a background for my app using BackgroundImage = "background.jpg", but I can't seem to scale it in any way in order to fit the whole image into the app, also, it doesn't show up at all on android. Here is the code and background image:
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage Padding="0, 40, 0, 0"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="RoseySports.Login_Page"
BackgroundImage="Background.jpg">
<StackLayout HorizontalOptions="Center" VerticalOptions="Center">
<Label Text="Email" HorizontalOptions="Center"/>
<Entry Keyboard="Email" WidthRequest="300" x:Name="email"/>
<Label Text="Password" HorizontalOptions="Center"/>
<Entry IsPassword="true" WidthRequest="300" x:Name="password"/>
<Button Text="Login" x:Name="login" Clicked="Handle_Clicked" TextColor="Navy"/>
</StackLayout>
</ContentPage>
background.jpg ios adroid
Got it working by using this instead:
<?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="RoseySports.Login_Page">
<AbsoluteLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Image AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0, 0, 1, 1"
Source="background.jpg" Aspect="AspectFill"/>
<ScrollView AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0, 0, 1, 1">
<StackLayout Padding="0, 40, 0, 0" HorizontalOptions="Center" VerticalOptions="Center" Grid.Column="0" Grid.Row="0">
<Label Text="Email" HorizontalOptions="Center" TextColor="White"/>
<Entry Keyboard="Email" WidthRequest="300" x:Name="email"/>
<Label Text="Password" HorizontalOptions="Center" TextColor="White"/>
<Entry IsPassword="true" WidthRequest="300" x:Name="password"/>
<Button Text="Login" x:Name="login" Clicked="Handle_Clicked" TextColor="Navy"/>
</StackLayout>
</ScrollView>
</AbsoluteLayout>
</ContentPage>
1.To use BackgroundImage property BackgroundImage="Background.jpg" in IOS you need to add the required image to an IOS asset catalog. Xamarin.Forms WILL NOT load an image into the BackgroundImage property when it is located in the Resources folder as for versions of IOS pre 7.
Read more for IOS asset catalog here.
2.You can also achieve this using Grid.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
<Grid>
<Image Aspect="AspectFill" x:Name="BGImageLogin" Source="Background.jpg" />
<ScrollView>
<StackLayout >
<Entry Placeholder="Username"/>
<Entry Placeholder="Password"
IsPassword="True"/>
<Button Text="Login""/>
</StackLayout>
</ScrollView>
</Grid>
</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());
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.