How can remove margin between items in xaml? - xamarin

This is my xaml 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:TestSalesforce"
x:Class="TestSalesforce.MainPage">
<StackLayout Padding="0,0,0,0">
<!-- Place new controls here -->
<Label Text="LOGIN"
HorizontalOptions="Center" />
<Label Text="Email:" Margin="0,0,0,0"/>
<Entry x:Name="txtEmail" Margin="0,0,0,0"/>
<Label Text="Password:" Margin="0,0,0,0"/>
<Entry x:Name="txtPassword" Margin="0,0,0,0"/>
<Button x:Name="btnLogin" Text="Login"/>
<Button x:Name="btnClose" Text="Close" Clicked="OnClose"/>
</StackLayout>
</ContentPage>
I try using Margin="0,0,0,0" but it not ok:
This is result:
How can remove margin between items in xaml?

StackLayout and Grid have Spacing-Properties. Spacing describes the gap between each child element in the Layout.
I think by default a StackLayouts Spacing-Property is not 0 but something around 2-5.
Try setting Spacing="0" on the stacklayout.

Looks like you have styles that are already gettin applied to the elements. Possibly try settings padding on those elements to 0 (they may not support padding) or if that doesn't work you might need to add a negative margin to counteract the styles.

Try This Code: Using Grid format
<Grid Grid.Row="3">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Controls:Label Grid.Row="0" Font="15" Text="{Binding LabelAddress}"/>
<StackLayout>
<Controls:PlaceholderEditor Grid.Row="1" Text="{Binding TextAddress}" VerticalOptions="FillAndExpand" HorizontalOptions="Fill" Margin="0,20,0,0" Placeholder="Enter Address" PlaceholderColor="{StaticResource LightGray}" AutoSize="TextChanges"/>
</StackLayout>
</Grid>
The result like this:

Add Spacing=0 to your stack layout, so it looks the next:
<StackLayout Spacing=0 Padding="0,0,0,0">

Related

HeightRequest is not honored if content is added below

I am trying to lock the height of a header - or basically any kind of content on the top of a page. However, once scrollable content is added below the height changes. A simple example:
<ContentPage.Content>
<StackLayout Padding="0" Margin="0" Spacing="0">
<Frame Margin="0" HeightRequest="150" BackgroundColor="red" CornerRadius="0" HasShadow="False" Padding="0"></Frame>
</StackLayout>
</ContentPage.Content>
This works fine. However, adding a lot of simple label lines in a scrollview somehow changes the height of the frame.
<ContentPage.Content>
<StackLayout Padding="0" Margin="0" Spacing="0">
<Frame Margin="0" HeightRequest="150" BackgroundColor="red" CornerRadius="0" HasShadow="False" Padding="0"></Frame>
<ScrollView>
<StackLayout>
<Label Text="aaa" /> <!-- Repeated 54 times however removed here for simplicity-->
</StackLayout>
</ScrollView>
</StackLayout>
</ContentPage.Content>
The results end up like this:
Why does it happen and can I do anything to avoid it? And why is the height reduced to exactly that height? Thanks!
It doesn't seem like you're limiting the height of the ScrollView. So considering you're merely doing a HeightRequest, it may change as needed to fit everything.
It's usually safer to use Grids. In this example, something like this could help you:
<ContentPage.Content>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="150" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Frame Grid.Row="0" Margin="0" BackgroundColor="red" CornerRadius="0" HasShadow="False" Padding="0"></Frame>
<ScrollView Grid.Row="1">
<StackLayout>
<Label Text="aaa" /> <!-- Repeated 54 times however removed here for simplicity-->
</StackLayout>
</ScrollView>
</Grid>
</ContentPage.Content>

How to use IndicatorView in CarouselPage?

I am trying to add an Indicator View style dots to my CarouselPage; However, the documentation I have found only shows how to use the new IndicatorView with CarouselView.
Is there anyway to use it with CarouselPage instead? If not, Is there anything similar to IndictorView that's used for CarouselPage? Here's my code:
<?xml version="1.0" encoding="utf-8"?>
<CarouselPage
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"
x:Class="Page.MainPage">
<ContentPage>
<StackLayout Padding="0,20,0,0">
<Image Source="LOGO.png"
HorizontalOptions="Center"
VerticalOptions="Center"
HeightRequest="195"
WidthRequest="205"
/>
<AbsoluteLayout HorizontalOptions="Center" VerticalOptions="Center">
<Image Source="bg.png"
AbsoluteLayout.LayoutBounds="0.35, 0.6, -1, 1"
AbsoluteLayout.LayoutFlags="PositionProportional"
HeightRequest="330"
WidthRequest="200"/>
<Image Source="Device.png"
AbsoluteLayout.LayoutBounds="0.45, 0.4, -1, -1"
AbsoluteLayout.LayoutFlags="PositionProportional"
HeightRequest="252"
WidthRequest="290"/>
</AbsoluteLayout>
<StackLayout>
<Label Text="Welcome"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center"
TextColor="White"
Padding="0,15"
Font="Bold,20"/>
<Label Text="This is page 1"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center"
FontSize="18"
Padding="25,0"
TextColor="White"/>
</StackLayout>
</StackLayout>
</ContentPage>
<ContentPage BackgroundColor="#3e454d">
<StackLayout BackgroundColor="#3e454d">
<AbsoluteLayout>
<Image Source="Map.png"
AbsoluteLayout.LayoutBounds="0.4, 0.7, -1, -1"
AbsoluteLayout.LayoutFlags="PositionProportional"
HeightRequest="330"
WidthRequest="205"/>
<Image Source="Device.png"
AbsoluteLayout.LayoutBounds="0.45, 0.7, -1, -1"
AbsoluteLayout.LayoutFlags="PositionProportional"
HeightRequest="282"
WidthRequest="340"/>
</AbsoluteLayout>
<StackLayout Padding="10,10">
<Label Text="Join US"
TextColor="White"
Padding="0,0,0,15"
Font="Bold,22"/>
<Label Text="This is Page 2"
HorizontalTextAlignment="Center"
FontSize="18"
TextColor="White"/>
</StackLayout>
</StackLayout>
</ContentPage>
</CarouselPage>
Use CarouselView instead of CarouselPage , embedd CarouselPage.Content to CarouselView.ItemLayout as mentioned in the documentation
Note that IndicatorView is different view, its not embedded in CarouselPage , even in CarouselView , you have to give the binding reference to CarouselView in order for it to work.
Also note that IndicatorView is still in Preview mode you need to set the experimental flag in order to make it work
Forms.SetFlags("IndicatorView_Experimental");
Also its showing Carouselview is in preview too(It was not, weird!)
so you may have to set experimental flag for that as well
Forms.SetFlags("CarouselView_Experimental");

How to fill the entire screen with two buttons vertically

I have to fill all the screen with two buttons vertically
I already tried to use fill and expand:
<ContentPage.Content>
<StackLayout>
<Button Text="Histórico"
BackgroundColor="Transparent"
BorderColor="Black"
BorderWidth="1"
Clicked="Timeline"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"/>
<Button Text="Minha Agenda"
BackgroundColor="Transparent"
BorderColor="Black"
BorderWidth="1"
Clicked="MinhaAgenda"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"/>
</StackLayout>
</ContentPage.Content>
It works, but this caused to much lag on the screen, i dont know why
Is there other solution for this?
How about using a Grid, something like:
<ContentPage.Content>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Button Text="History"
Grid.Row="0"
HorizontalOptions="Fill"
VerticalOptions="Fill" />
<Button Text="Agenda"
Grid.Row="1"
HorizontalOptions="Fill"
VerticalOptions="Fill" />
</Grid>
</ContentPage.Content>
This will fill the view with two equally sized buttons.

Can not set the content of button as it doesn't have a contentpropertyattribute on xamarin page

I'm trying to add three button images on the same row inside a StackLayout.
The first button image doesn't show any error, but the problem is with two other buttons.
Here is the code:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="1.5*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="auto"/>
<RowDefinition Height ="auto"/>
</Grid.RowDefinitions>
<StackLayout Grid.Row="0" HorizontalOptions="Center" VerticalOptions="Center">
<Image HorizontalOptions="Center" VerticalOptions="Center" Source="loginlogo.png"/>
</StackLayout>
<StackLayout Padding="5" Spacing="5" Grid.Row="1">
<StackLayout>
<Label Text ="editor is used for collecting text that is expected to take more than one line."
TextColor="Black" BackgroundColor="White" HeightRequest="100" />
</StackLayout>
<StackLayout HorizontalOptions="Center" VerticalOptions="Center"
Orientation="Horizontal">
<Button x:Name="facebook" WidthRequest="50" HeightRequest="50" Image="Fb.png">
<Button.Image Aspect="AspectFit" />
</Button>
<Button WidthRequest="50" HeightRequest="50" Image="LINKEDIN.png">
<Button.Image Aspect="AspectFit" />
</Button>
<Button x:Name="YB" WidthRequest="50" HeightRequest="50" Image="YOUTUBE.png">
<Button.Image Aspect="AspectFit" />
</Button>
</StackLayout>
</StackLayout>
<StackLayout Grid.Row="4" HorizontalOptions="Center" VerticalOptions="End" Orientation="Horizontal" Margin="1" >
<Label Text="sample text" TextColor="Gray" HorizontalOptions="Center" HorizontalTextAlignment="Center"/>
</StackLayout>
</Grid>
This is the exact error I receive:
Position 35:18. Can not set the content of Button as it doesn't have a
ContentPropertyAttribute
Position 35 is the third button named YB
I don't understand where the problem is.
Any advice will be helpful.
Thanks
Xamarin.Forms.Button.Image is an FileImageSource and thus there is no Aspect property to it. This abstract control is converted to a platform native one and full image control of how it appears within that button on each platform is not exposed.
But on Xamarin.Forms.Image there is an Aspect property.
If you need to control the aspect ratio, you could created a custom button renderer and handle it at the platform level, or just use a Xamarin.Forms.Image and set a tab gesture on them.

Xamarin Stacklayout VerticalOptions CenterAndExpand not working

Hi Guys probably very easy question for Xamarin expert I am trying to vertically center align stacklayout control and it is working fine in android mobile but not working in windows mobile device. My code is below
<?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="aa.Views.MainPage">
<ScrollView>
<StackLayout Orientation="Vertical" VerticalOptions="CenterAndExpand"
Padding="20" Spacing="10">
<Entry x:Name="enEmail" Placeholder="Email"></Entry>
<Entry x:Name="enPassword" IsPassword="True" Placeholder="Password"></Entry>
<Button Text="Login" Clicked="OnClicked_btnLogin" x:Name="btnLogin"></Button>
<Button Text="Register" Clicked="OnClicked_btnRegister" x:Name="btnRegister"></Button>
</StackLayout>
</ScrollView>
</ContentPage>
For more details please have a look at the attached images and help me how would i align it in center of screen for windows phone
its StackLayout: puts views consecutive one another. If you want to move buttons to down side use Grid instead like:
<Grid RowSpacing="10"><!--RowSpacing gives some space between rows-->
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/> <!--You can also use constant size also-->
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/> <!--This fill the empty space-->
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Entry Grid.Row="0" Placeholder=" Email"/>
<Entry Grid.Row="1" Placeholder=" Password" IsPassword="True"/>
<Button Grid.Row="3" Text="Login" />
<Button Grid.Row="4" Text="Register" />
</Grid>
Try the code below, it will give you a scroll view plus your fields will be aligned to the center
<ScrollView>
<AbsoluteLayout>
<StackLayout Orientation="Vertical" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All" x:Name="maincontent" Spacing="0">
<StackLayout Orientation="Vertical" VerticalOptions="CenterAndExpand"
Padding="20" Spacing="10">
<Entry x:Name="enEmail" Placeholder="Email"></Entry>
<Entry x:Name="enPassword" IsPassword="True" Placeholder="Password"></Entry>
<Button Text="Login" Clicked="OnClicked_btnLogin" x:Name="btnLogin"></Button>
<Button Text="Register" Clicked="OnClicked_btnRegister" x:Name="btnRegister"></Button>
</StackLayout>
</StackLayout>
</AbsoluteLayout>
</ScrollView>

Resources