i am trying to create something like this:
so i wrote this 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="alphatrial.MainPage"
BackgroundColor="#ffc40c">
<StackLayout >
<Label Text="ISC - Alpha" TextColor="Black" FontSize="Large" FontAttributes="Bold" FontFamily="MyAwesomeCustomFont" HorizontalOptions="End" Margin="0,50,20,0" />
<Line Stroke="black" X1="0" X2="340" StrokeThickness="2" />
<Label Text="App" TextColor="White" FontSize="Large" FontAttributes="Bold" FontFamily="MyAwesomeCustomFont" HorizontalOptions="End" Margin="0,0,20,0"/>
</StackLayout>
</ContentPage>
but i get this
i can't manage to get the words on the line directly. i don't want this space between the words and the line. what should i do?
thanks in advance
Take into account also the Padding and the Margins of the label.As for the layout spacing
If that is not enough for you, you can even set a negative margin to overlap the components
Related
I have 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:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="NGIC_XAML.Views.Payments.Payments">
<ContentPage.Content>
<FlexLayout Direction="Column" AlignItems="Center" HorizontalOptions="FillAndExpand">
<StackLayout BackgroundColor="Red" HeightRequest="108" HorizontalOptions="FillAndExpand">
<Label Text="Payments" TextColor="#F9F8FA" FontSize="20" Margin="40"
HorizontalTextAlignment="Center" VerticalOptions="Center"
HorizontalOptions="FillAndExpand">
</Label>
</StackLayout>
</FlexLayout>
</ContentPage.Content>
</ContentPage>
I want the outer layout, the FlexLayout, to automatically size the width to the device's maximum. I want the Layout (the StackLayout) and child Control (the Label), to also automatically resize their widths to the FlexLayout. I am stumped as to how to do this. Any suggestions?
In the FlexLayout docs, they mention "The HorizontalOptions property doesn't work for children of a FlexLayout".
If you take a look at the Page layout with FlexLayout section (Holy Grail Layout) you can see an example somewhat similar to what you are trying to accomplish, basically use a nested FlexLayout instead of a StackLayout.
The code would look like:
<ContentPage.Content>
<FlexLayout
BackgroundColor="Yellow"
Direction="Column">
<FlexLayout
HeightRequest="108"
AlignItems="Center"
Direction="Column"
BackgroundColor="Red">
<Label
BackgroundColor="Green"
LineBreakMode="CharacterWrap"
Text="Payments"
TextColor="#F9F8FA"
FontSize="20"
Margin="40"
HorizontalTextAlignment="Center"
VerticalOptions="Center">
</Label>
</FlexLayout>
</FlexLayout>
</ContentPage.Content>
And here is the screenshot:
Notice that the label will grow as needed to use the full width of the row.
To achieve this, please assign HorizontalOptions="FillAndExpand" to StackLayout and Label and other child controls if any.
This will tell the controls to fill all the space available horizontally.
Thanks!
Im using xamarin forms.
i wanna design my xaml files but i realized something strange.
left and right of entry has space that i couldnt remove even with custom renderer.
is there any idea what is might be?
i tried padding,margin,HorizontalOption none of them effected.
even i tried to setPadding to 0 from custom renderer in android but it didnt work.
the first one is label as you can see filled out all the space but entry has an space around it .
Update:
this is my xaml codes and im using android emulator to test.
<StackLayout BackgroundColor="White" Spacing="15">
<Label Text="fds" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="Red"/>
<Entry BackgroundColor="Red" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"/>
</StackLayout>
don't know how is your implementation but this what I tried:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
xmlns:bases="clr-namespace:WhiteSolution.Views.Bases"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:viewModelBase="clr-namespace:WhiteSolution.ViewModels.Bases"
viewModelBase:ViewModelLocator.AutoWireViewModel="True"
x:Class="WhiteSolution.Views.HomePage">
<ContentPage.Content>
<Grid VerticalOptions="FillAndExpand"
BackgroundColor="WhiteSmoke">
<StackLayout Padding="0"
Spacing="0"
BackgroundColor="Blue">
<Label Text="no space label"
Margin="0"
HorizontalOptions="FillAndExpand"
HorizontalTextAlignment="Center"
BackgroundColor="Yellow"
FontSize="Large"/>
<Entry Text="no space entry"
Margin="0"
BackgroundColor="Red"
HorizontalOptions="FillAndExpand"
HorizontalTextAlignment="Center"
FontSize="Large"/>
</StackLayout>
</Grid>
</ContentPage.Content>
</ContentPage>
and i get this result
if you share your code it will be more useful
Try this, Padding Property should be 0 in main StackLayout.
<?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="SampleApp.Views.DashboardView">
<ContentPage.Content>
<StackLayout Padding="0" BindingContext="{Binding Dashboard}">
<!-- Controls -->
</StackLayout>
</ContentPage.Content>
I realized that entry has Default margin value. so i set it to 0 and everything worked.
here is my code
<StackLayout>
<Entry Margin="0" Text="fd" BackgroundColor="Red" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"/>
<Label Text="fd" BackgroundColor="Red" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"/>
</StackLayout>
In a xamarin app, i have created a signature pad , and i have kept margin like
i want to keep a permanent heigh for the signature area irrespective of device and orientation,
i am not xamarin developer, And i dont have idea about xaml, still I tried Margin="200,200,200,200" , but it behaves weirdly when i change orientation.
in ipad in landscape mode the area is not at all visible.
<?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:signaturePad="clr-namespace:Acr.XamForms.SignaturePad;assembly=Acr.XamForms.SignaturePad"
x:Class="watebook.Clients.Mobile.Views.CaptureSignature"
BackgroundColor="{StaticResource PageBackgroundColor}">
<AbsoluteLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<StackLayout AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1">
<ContentView Style="{StaticResource PageHeaderBodySeparator}" />
<signaturePad:SignaturePadView
Margin="200,200,200,200"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand"
x:Name="padView"
BackgroundColor="{StaticResource SignaturePadBackgroundColor}"
CaptionText="Please sign here"
CaptionTextColor="{StaticResource SignaturePadCaptionTextColor}"
PromptText="."
SignatureLineColor="{StaticResource SignaturePadSignatureLineColor}"
StrokeColor="{StaticResource SignaturePadSignatureStrokeColor}"
StrokeWidth="2"
ClearText="" />
<Button Text="SAVE SIGNATURE" Clicked="Button_OnClicked" BackgroundColor="#ffd300" TextColor="Black" x:Name="SaveButton" BorderColor="Black" Margin="0,10,0,300" />
</StackLayout>
<ContentView Style="{StaticResource ProcessIndicatorContentViewStyle}" x:Name="ActivityCameraIndicators" IsVisible="False" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1">
<Label Style="{x:StaticResource ProcessIndicatorLabelStyle}" Text="Processing" x:Name="ActivityIndicatorLable" />
</ContentView>
</AbsoluteLayout>
</ContentPage>
How to keep a permanent height for my signature pad?
use HeightRequest
<signaturePad:SignaturePadView HeightRequest="200" ... />
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 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.