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.
Related
I tried to achieve an Editor that don't wrapping text with no succeed
I want that newline be by pressing enter and not by wrapping text
How I can get that.?
I tried this:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MauiApp1.MainPage">
<ScrollView>
<VerticalStackLayout
Spacing="25"
Margin="5"
VerticalOptions="Center" >
<Border Stroke= "Black" StrokeThickness="2" Background="Pink" >
<Editor HeightRequest="300" WidthRequest="380" BackgroundColor="Aqua" />
</Border>
<Image
Source="dotnet_bot.png"
SemanticProperties.Description="Cute dot net bot waving hi to you!"
HeightRequest="200"
HorizontalOptions="Center" />
<Label
Text="Hello, World!"
SemanticProperties.HeadingLevel="Level1"
FontSize="32"
HorizontalOptions="Center" />
<Label
Text="Welcome to .NET Multi-platform App UI"
SemanticProperties.HeadingLevel="Level2"
SemanticProperties.Description="Welcome to dot net Multi platform App U I"
FontSize="18"
HorizontalOptions="Center" />
<Button
x:Name="CounterBtn"
Text="Click me"
SemanticProperties.Hint="Counts the number of times you click"
Clicked="OnCounterClicked"
HorizontalOptions="Center" />
</VerticalStackLayout>
</ScrollView>
</ContentPage>
Thank you very much
You could use a nested ScrollView.
Xaml:
<ScrollView>
<VerticalStackLayout
Spacing="25"
Margin="5"
VerticalOptions="Center" >
<Border Stroke= "Black" StrokeThickness="2" Background="Pink" >
<ScrollView Orientation="Both" HeightRequest="300" WidthRequest="380" >
<Editor BackgroundColor="Aqua" TextChanged="Editor_TextChanged" />
</ScrollView>
</Border>
.............
</VerticalStackLayout>
</ScrollView>
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'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>
Hello I have an app i'm doing in xamrian forms and I have a card styled list view. I want to be able to add 3 buttons underneath the listview one on the left one in the center and one on the right
here's 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="App.HomePage">
<ListView x:Name="listView" HasUnevenRows="true" ItemSelected="OnItemSelected">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Frame Padding="0,0,0,8" BackgroundColor="#d2d5d7">
<Frame.Content>
<Frame Padding="15,15,15,15" OutlineColor="Gray" BackgroundColor="White">
<Frame.Content>
<StackLayout Padding="20,0,0,0" Orientation="Horizontal" HorizontalOptions="CenterAndExpand">
<Image
HorizontalOptions="StartAndExpand"
Source="{Binding Image}" />
<Label Text="{Binding Name}"
TextColor="#69add1"
FontFamily="OpenSans-Light"
FontSize="24"/>
</StackLayout>
</Frame.Content>
</Frame>
</Frame.Content>
</Frame>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage>
How would I go about doing this in xaml?
Thank's in advance! :)
Try this:
<?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:Sandbox_Forms"
x:Class="Sandbox_Forms.MainPage">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ListView Grid.Row="0" BackgroundColor="Aqua">
<!-- Add bindings and data template -->
</ListView>
<StackLayout Orientation="Horizontal" Grid.Row="1">
<Button Text="Button1" HorizontalOptions="FillAndExpand"/>
<Button Text="Button2" HorizontalOptions="FillAndExpand"/>
<Button Text="Button3" HorizontalOptions="FillAndExpand"/>
</StackLayout>
</Grid>
</ContentPage>
This will limit your ListView to only fill the space that your buttons do not occupy. The output should look something like this:
<StackLayout>
<ListView>
...
</ListView>
<StackLayout Orientation="Horizontal">
<Button ... />
<Button ... />
<Button ... />
</StackLayout>
</StackLayout>