I am using a NavigationPage.TitleView control on my home page but it looks like there is a problem filling the whole title section. The HamburgerMenu icon is coming from the menupage.xaml and that background color is not getting set?
Do I need to get a new icon with that background Color I need?
homepage.xaml
<NavigationPage.TitleView>
<StackLayout Orientation="Horizontal" BackgroundColor="#22335c">
<Label Text="N" HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand" BackgroundColor="#22335c" TextColor="White" />
<Image Source="" Aspect="AspectFit" BackgroundColor="#22335c" />
</StackLayout>
</NavigationPage.TitleView>
Menupage.xaml
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MenuPage"
xmlns:telerikPrimitives="clr-namespace:Telerik.XamarinForms.Primitives;assembly=Telerik.XamarinForms.Primitives"
xmlns:telerik="clr-namespace:Telerik.XamarinForms.DataControls;assembly=Telerik.XamarinForms.DataControls"
xmlns:model="clr-namespace:ReimbursementApp.Model"
xmlns:page="clr-namespace:ReimbursementApp.Pages"
Title="Menu" Icon="HamburgerMenu.png" BackgroundColor="Black">
Related
I want to put my text button "login" to the foreground and into the google maps view. The aqua color should not be visible.
This question is related to Xamarin View - How to put TextButton at the end and to the foreground, but actually does not solve my problem with google maps.
<?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="StandApp.Views.MainMapPage"
xmlns:maps="clr-namespace:Xamarin.Forms.GoogleMaps;assembly=Xamarin.Forms.GoogleMaps"
Title="MapsPage1">
<ContentPage.Content>
<StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"
HeightRequest="1" BackgroundColor="Aqua">
<maps:Map x:Name="map" MyLocationEnabled="True" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"/>
<StackLayout Padding="10, 10, 10, 10">
<Button VerticalOptions="Center" Text="Login" />
</StackLayout>
</StackLayout>
</ContentPage.Content>
</ContentPage>
My current state looks like this:
use a Grid with two rows. Make the Map span both rows, then add the Button to only the 2nd row, on top of the map
<Grid RowDefinitions="80*,20*">
<Map Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" ... />
<Button Grid.Row="1" Grid.Column="0" ... />
</Grid>
In Xamarin.Forms, I have a page which contains one Picker control and one TextBox. For that page, I want to display a background image. My problem is that there is no proprietary way to set an aspect ratio for page background images in Xamarin.Forms. The initial code looks like the following:
<?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:controls="clr-namespace:Reserve15.Controls"
mc:Ignorable="d"
x:Class="Reserve15.Views.Bestellen"
Title="Bestellen"
BackgroundImageSource="image_food">
<ContentPage.Content>
<StackLayout HorizontalOptions="Center" VerticalOptions="Center">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<StackLayout HorizontalOptions="Center" VerticalOptions="Center" Grid.Column="0" Grid.Row="1" Margin="20,0,20,0">
<controls:MaterialPicker x:Name="KategoriePicker" Title="Was möchtest du essen?" BackgroundColor="White" />
<controls:MaterialTextBox x:Name="OrtTextBox" Placeholder="Dein Lieferort" BackgroundColor="White" />
</StackLayout>
</Grid>
</StackLayout>
</ContentPage.Content>
</ContentPage>
This results in the following layout:
Now, the problem is actually that the burger in the background image is only displayed partially. So I googled and found several attempts to fix this. They all involved AbsoluteLayout or RelativeLayout.
I tried both, but AbsoluteLayout seemed to work better. XAML is the following:
<?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:controls="clr-namespace:Reserve15.Controls"
mc:Ignorable="d"
x:Class="Reserve15.Views.Bestellen"
Title="Bestellen">
<AbsoluteLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Image AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" Source="image_food" Aspect="AspectFill"/>
<StackLayout AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="1,1,1,1">
<!--Content-->
<StackLayout HorizontalOptions="Center" VerticalOptions="Center">
<StackLayout HorizontalOptions="Center" VerticalOptions="Center" Grid.Column="0" Grid.Row="1">
<controls:MaterialPicker x:Name="KategoriePicker" Title="Was möchtest du essen?" BackgroundColor="White" />
<controls:MaterialTextBox x:Name="OrtTextBox" Placeholder="Dein Lieferort" BackgroundColor="White" />
</StackLayout>
</StackLayout>
</StackLayout>
</AbsoluteLayout>
</ContentPage>
And it results in this:
As you can see, the background image is now properly sized but the former centered controls are at the very top now. How can I fix that?
Change the HorizontalOptions="Center" VerticalOptions="Center" of stacklayout to CenterAndExpand will work:
<AbsoluteLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Image AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" Source="sample.jpg" Aspect="AspectFill"/>
<StackLayout AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="1,1,1,1">
<!--Content-->
<StackLayout HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" >
<Label x:Name="KategoriePicker" Text="Was möchtest du essen?" BackgroundColor="White" />
<Label x:Name="OrtTextBox" Text="Dein Lieferort" BackgroundColor="White" />
</StackLayout>
</StackLayout>
</AbsoluteLayout>
Result:
I have a main Navigation Page that is a Tabbed Page, linking different views.
I've set the in the main Tabbed Page and it works, but I would like to set it different for each page.
This is the Tabbed Page:
<TabbedPage
NavigationPage.HasBackButton="False"
BackgroundColor="Black"
xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="TestProiectLicenta.Views.UserPageForm" xmlns:local="clr-namespace:TestProiectLicenta.Views"
xmlns:controls="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin"
xmlns:refresh="clr-namespace:Refractored.XamForms.PullToRefresh;assembly=Refractored.XamForms.PullToRefresh">
<TabbedPage.Children>
<local:CarsListPage Title="Cars" Icon="new_car_icon"/>
<local:NewCarsListPage Title="New Cars" Icon="new_car_icon"/>
<local:ChooseMethodFormPage Title="Add Car" Icon="new_add_icon" />
<local:UserViewPage Title="New Page Test" Icon="new_user_icon" />
<ContentPage Title="Settings" Icon="new_settings_icon.png">
<StackLayout VerticalOptions="Center" HorizontalOptions="Center">
<StackLayout Orientation="Horizontal">
<StackLayout Orientation="Horizontal">
<Image Source="face_id" />
<Label Text="FaceID Login?" />
</StackLayout>
<Switch IsToggled="false" Toggled="Handle_Toggled" x:Name="Fid" />
</StackLayout>
<Button Text="Sign Out" Clicked="SignOutButton" />
</StackLayout>
</ContentPage>
</TabbedPage.Children>
</TabbedPage>
The views are Content Pages.
I would like to have a Title View for the first page with some controls, like search, delete etc. (it's a list of cars) and the user's picture, and the others with the title and maybe other controls.
Usually what I do is I set the Title property in every ContentPage and it reflects on to the page when I flip through tabs
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
NavigationPage.BackButtonTitle=""
Title="My Demo Title">...
Update:
In your TabbedPage, you can add the NavigationPage's TitleView something like below
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
NavigationPage.BackButtonTitle=""
Title="My Demo Title">
<NavigationPage.TitleView>
<StackLayout Orientation="Horizontal">
<Image x:Name="TitleImage"/>
<Label x:Name="TitleLabel"/>
</StackLayout>
</NavigationPage.TitleView>
Hope you can take care of the alignment and everything else.
So Now using the above names you will be able to access the title image and label whenever you please!!
I have found a solution to my problem. Inside the TabbedPage, for each page that you need to have a special Navigation Bar you declare it like this:
<NavigationPage Title="Schedule" IconImageSource="schedule.png">
<x:Arguments>
<local:SchedulePage />
</x:Arguments>
</NavigationPage>
Then you edit the new page and add the
<NavigationPage.TitleView/>
When I select succes and development the trail screen is the one that follows but in the menu there is no such space, but from the menu to the trial page, in between these two is the masterpage
[
[1
I want remove this space in white, but i did not not add padding in contentpage, I dont know what to do, however I added a NavigationPage.HasNavigationBar=true, but I cant control on top before of NavigationBar.
Also if I add padding to the contentpage it is only modified after the NavigationBar.
I've noticed if changed emulator of api 19 this space in white not exist.
The screenshots are, on the left: 5.2 Marshmallow(6.0.0)XXHDPI Phone (Android 6.0 -Api 23) and right is: 5 Kitkat (4.4) XXHDPI Phone (Andoid 4.4 - API 19)
this is my code xml:
<?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="DefinityFirst.Mobile.Pages.SuccessAndDev.Dashboard"
xmlns:ctrl="clr-namespace:DefinityFirst.Mobile.Pages.SuccessAndDev.Accordion;assembly=DefinityFirst.Mobile"
Title="Trails"
NavigationPage.HasNavigationBar="true"
xmlns:control="clr-namespace:DefinityFirst.Mobile.Pages.SuccessAndDev;assembly=DefinityFirst.Mobile"
>
<!--<ContentPage.Padding>
<OnPlatform x:Key="GeneralPadding2"
x:TypeArguments="Thickness"
iOS="10"
Android="0,10,0,0"
WinPhone="15"/>
</ContentPage.Padding>-->
<!--<ContentPage.Padding>
<OnPlatform x:TypeArguments="Thickness" iOS="20, 40, 20, 20" Android="20, 20, 20, 20" WinPhone="20, 20, 20, 20" />
</ContentPage.Padding>-->
<ContentPage.Content>
<ContentView>
<!--CONTENEDOR TRAIL; LEVEL; PROGRESBAR-->
<StackLayout BackgroundColor="#F5F5F5">
<Frame Padding="3,1,1,2.5" HasShadow="True" Margin="10">
<StackLayout BackgroundColor="#E1E1E1">
<StackLayout Orientation="Vertical" BackgroundColor="#1F549D" Padding="5,0,0,0">
<StackLayout Orientation="Vertical" Padding="5,5,5,5" x:Name="stTrails" BackgroundColor="White">
<Label Text="{Binding Name}" TextColor="#FF020202" FontSize="18" FontAttributes="Bold"/>
<StackLayout Orientation="Horizontal" x:Name="nameLevel">
<Label Text="{Binding Name}" TextColor="#FF020202" FontSize="16" HorizontalOptions="StartAndExpand"/>
<Image Source="mayorq.png" HorizontalOptions="EndAndExpand"/>
</StackLayout>
<StackLayout Orientation="Vertical">
<ProgressBar Progress="{Binding ProgressLevel}" WidthRequest="500" HeightRequest="15" HorizontalOptions="StartAndExpand" x:Name="progresBar"/>
<!--<control:CustomProgressBar x:Name="progressBar2" Progress=".02" />-->
</StackLayout>
</StackLayout>
</StackLayout>
</StackLayout>
</Frame>
<StackLayout Orientation="Horizontal" Padding="4,1,1,2.5">
<Label Text="Item List" FontSize="15.8" HorizontalOptions="StartAndExpand" Margin="10"/>
<Picker x:Name="pickerStatusFilter" Title="Filter by status" HorizontalOptions="EndAndExpand" TextColor="#FF020202"/>
</StackLayout>
<!--<BoxView/>
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" Spacing="50">
<Button Text="a" HorizontalOptions="FillAndExpand" TextColor="{StaticResource MainColor}" BackgroundColor="Aqua"/>
<Button Style="{StaticResource MainButton}" Text="b"/>
<Button Text="c" HorizontalOptions="FillAndExpand"/>
</StackLayout>-->
<!--<StackLayout Orientation="Horizontal">
</StackLayout>-->
<!--ACCORDION-->
<StackLayout Padding="0,0,0,0" BackgroundColor="White">
<ScrollView>
<ctrl:Accordion x:Name="SecOne" FirstExpaned = "true"/>
</ScrollView>
</StackLayout>
</StackLayout>
</ContentView>
</ContentPage.Content>
</ContentPage>
Master Page:
<?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="DefinityFirst.Mobile.Pages.SuccessAndDev.MasterPage"
xmlns:pages="clr-namespace:DefinityFirst.Mobile.Pages.SuccessAndDev;assembly=DefinityFirst.Mobile"
NavigationPage.HasNavigationBar="false">
<MasterDetailPage.Master>
<pages:MenuPage x:Name="menuPage" />
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<NavigationPage x:Name="Navigator" BarBackgroundColor="{StaticResource MainColor}">
<x:Arguments>
<pages:Dashboard/>
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
I can't reproduce this issue using a MasterDetailPage with the latest Xamarin.Forms 2.3.3.175. Both API 19 and API 23+ are not showing any extra space like shown in your images. Try the sample code from here and see if you have the same issue. If not, I suspect something else is wrong in the implementation of the app. An example of using the MD page:
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:MasterDetailPageNavigation;assembly=MasterDetailPageNavigation"
x:Class="MasterDetailPageNavigation.MainPage">
<MasterDetailPage.Master>
<local:MasterPage x:Name="masterPage" />
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<NavigationPage>
<x:Arguments>
<local:ContactsPage />
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
If you can update your post with more code of how you are implementing the MDP, I will take a look and update my answer.
I encountered this problem too,
now i decompile xamarin,and found MasterDetailPageRenderer->SetElement(),
if sdk>=21 it set TopPadding = GetStatusBarHeight();
but i find xamarin's source,it changed.
I think will soon be modified.
I'm developing a Android Apllication with Xamarin Forms. Page files are created in XAML. But Title Font properties changes are not available. My code is:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MasterDetailPageNavigation.ContactsPage"
Title="Home"
BackgroundColor="#ff6600">
<ContentPage.Content>
<StackLayout Padding="110,190,100,80">
<Button BackgroundColor="Transparent" TextColor="White" Image="Button.png"/>
<StackLayout Padding="25">
<Label Text="Button" TextColor="#ffffff" FontSize="Small"></Label>
</StackLayout>
</StackLayout>
</ContentPage.Content>
How to change Title Fontstyle ?
Start from this answer then in the ContentPage add:
<NavigationPage.TitleView>
<Label VerticalOptions="Center" MaxLine="1" FontFamily="/*OUR FONT GOES HERE*/" Text="Our new title" />
</NavigationPage.TitleView>
or:
<Shell.TitleView>
<Label VerticalOptions="Center" MaxLine="1" FontFamily="/*OUR FONT GOES HERE*/" Text="Our new title" />
</Shell.TitleView>
Can you please try this in your MainActivity.cs below the line LoadApplication(new App());
var spannableString = new SpannableString(SupportActionBar.Title);
spannableString.SetSpan(new TypefaceSpan("yourfont.ttf"), 0, spannableString.Length(), SpanTypes.ExclusiveExclusive);
SupportActionBar.TitleFormatted = spannableString;