In Xamarin, I'm having a TabbedPage which sometimes should be displayed and sometimes not.
<ContentPage x:Name="tab_Voeding5" IsEnabled="False">
<StackLayout>
<Label Text="Voeding pagina 5"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand" />
</StackLayout>
</ContentPage>
I tried to disable it at default and enable it like this:
if(Application.Current.Properties["txt_voeding5"].ToString() != "")
{
tab_Voeding5.IsEnabled = true;
tab_Voeding5.Title = Application.Current.Properties["txt_voeding5"].ToString();
}
However, this only disables and enables the title of the tabbed page in the navigation bar, but I want it completely removed/added. How do I do this?
Also, in Tabbar.axml I want app:tabMode="scrollable" only at page A. I want it to be default like app:tabMode="fixed". How do I change app:tabMode programmatically in the page's CS file?
EDIT:
Xaml file
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="TimeToSport.Views.VoedingPage"
Title="Voeding">
<!-- Voeding 1 -->
<ContentPage x:Name="tab_Voeding1">
<StackLayout>
<Label Text="Voeding pagina 1"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand" />
</StackLayout>
</ContentPage>
<!-- Voeding 2 -->
<ContentPage x:Name="tab_Voeding2">
<StackLayout>
<Label Text="Voeding pagina 2"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand" />
</StackLayout>
</ContentPage>
<!-- Voeding 3 -->
<ContentPage x:Name="tab_Voeding3">
<StackLayout>
<Label Text="Voeding pagina 3"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand" />
</StackLayout>
</ContentPage>
<!-- Voeding 4 -->
<ContentPage x:Name="tab_Voeding4">
<StackLayout>
<Label Text="Voeding pagina 4"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand" />
</StackLayout>
</ContentPage>
<!-- Voeding 5 -->
<ContentPage x:Name="tab_Voeding5" IsEnabled="False">
<StackLayout>
<Label Text="Voeding pagina 5"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand" />
</StackLayout>
</ContentPage>
</TabbedPage>
Related
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:
How do i add logo to center of the Xaml Form, i am starting out Xamarin.
My xaml code looks something like this :
<StackLayout Spacing="20" Padding="50" VerticalOptions="Center">
<Entry Placeholder="Mail id"></Entry>
<Entry Placeholder="Password" IsPassword="True"></Entry>
<Button Text="Log In" TextColor="White" BackgroundColor="##ff77D065"></Button> </StackLayout>
</ContentPage>
This works fine, Now i want to see where i can add the logo to the Xaml form, Its cross platform.
I am new to this.
Edit
Trying out something like this
<StackLayout Spacing="20" Padding="50" VerticalOptions="Center">
VerticalOptions="Center" Padding="10">
<Image Source="screenimg2.png" x:Name="imgLogo" HeightRequest="150" WidthRequest="150"/>
<Entry Placeholder="Mail id"></Entry>
<Entry Placeholder="Password" IsPassword="True"></Entry>
<Button Text="Log In" TextColor="White" BackgroundColor="##ff77D065"></Button>
</StackLayout>
You can use an AbsoluteLayout to contain your "background" logo and then the StackLayout, both centered on screen and then place your UI widgets inside the StackLayout to control the order of their placement:
Example (Logo is set to a 25% opacity):
<AbsoluteLayout BackgroundColor="Black">
<Image Source="logo.png" AbsoluteLayout.LayoutBounds=".5,.5,.75,.75" AbsoluteLayout.LayoutFlags="All" Opacity=".25" />
<StackLayout AbsoluteLayout.LayoutBounds="1,1,1,1" AbsoluteLayout.LayoutFlags="All" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" >
<Label Text="INTRO TO THE WORLD" TextColor="Green" />
<Entry Text="Some Entry Text" BackgroundColor="Green" />
</StackLayout>
</AbsoluteLayout>
re: Xamarin.Forms AbsoluteLayout
I'm using xamarin cross-platform.
I want to add same the "floating menu item" in the every .xaml page.(home/logout/view/ account)
I have added below master page.
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="ABCAPP.Views.MasterDetailPage1"
xmlns:pages="clr-namespace:ABCAPP.Views">
<MasterDetailPage.Master>
<pages:MasterDetailPage1Master x:Name="MasterPage" />
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<NavigationPage>
<x:Arguments>
<pages:MasterDetailPage1Detail>
<StackLayout>
<StackLayout Orientation="Horizontal" VerticalOptions="Start">
<!--top controls-->
</StackLayout>
<StackLayout VerticalOptions="CenterAndExpand">
<!--middle controls-->
</StackLayout>
<StackLayout Orientation="Horizontal" VerticalOptions="End">
<Button Text="A" FontAttributes="Bold" BackgroundColor="MediumSlateBlue" BorderRadius="50" TextColor="White"></Button>
<Button Text="B" FontAttributes="Bold" BackgroundColor="MediumSlateBlue" TextColor="White"></Button>
<!--bottom controls-->
</StackLayout>
</StackLayout>
</pages:MasterDetailPage1Detail>
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
How do I add this layout to my other .xaml Content Pages ?
This is my Content Pages
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="ABCAPP.Views.Confirmed">
<ContentPage.Content>
<ScrollView>
<StackLayout Spacing="20" Padding="15" BackgroundColor="Orange">
<Label Text="Thank you!" FontSize="50" FontAttributes="Bold" TextColor="White" HorizontalOptions="Center" />
<Label Text=" confirmed." FontSize="30" FontAttributes="Bold" TextColor="White" HorizontalOptions="Center" />
<Label x:Name="lblMsg" TextColor="Red" IsVisible="False" ></Label>
<Button Text="ADD " Clicked="NewAttend_Clicked" FontAttributes="Bold" BackgroundColor="MediumSlateBlue" BorderRadius="5" TextColor="White"></Button>
<Button Text="RETURN " Clicked="List_Clicked" FontAttributes="Bold" BackgroundColor="MediumSlateBlue" BorderRadius="5" TextColor="White"></Button>
<Image Source="drawable/icon" ></Image>
</StackLayout>
</ScrollView>
</ContentPage.Content>
</ContentPage>
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;