I have this in 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"
xmlns:local="clr-namespace:project"
x:Class="project.MainPage">
<StackLayout Padding="0,0,0,15" Spacing="0"> <!-- multiple things in a page -->
<Button Text="first" HorizontalOptions="Center" VerticalOptions="CenterAndExpand"/>
<Label Text="title"
VerticalOptions="CenterAndExpand"
HorizontalOptions="Center" />
<!--<Entry Text="Registrarse" VerticalOptions="CenterAndExpand"
HorizontalOptions="Center"/>
<Entry Text="Iniciar Sesion"
HorizontalOptions="Center" VerticalOptions="Start"/>-->
<Button Text="Registrarse" HorizontalOptions="Center" VerticalOptions="Center" Margin="0,0,0,0" />
<Button Text="Iniciar Sesion" HorizontalOptions="Center" VerticalOptions="Center" Margin="0,0,0,0" />
</StackLayout>
I want to know why the the buttons always are separated vertically and aren't one above the other
Related
I need to display a list with about 30 to 40 items that the user has to choose from, and I don't wont to use a combobox, so a Listview seems the way to go.
However, once I put a listview on the page, the listview grows so much in height that it goes off the screen, how can I prevent that ?
I need something like this
<gttCompound:PageBase xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:gttCompound="clr-namespace:gttCompound.Pages"
x:Class="gttCompound.Pages.PageDamageSelectFromList">
<gttCompound:PageBase.ChildStackLayoutContent>
<StackLayout Orientation="Vertical" VerticalOptions="FillAndExpand" Margin="5, 5">
<StackLayout VerticalOptions="Start" Orientation="Horizontal" HorizontalOptions="Center">
<Label Text="SELECT THE DAMAGE LOCATION" FontAttributes="Bold" FontSize="{StaticResource FontSizeLabelSmall}" TextColor="{StaticResource TextColor}" ></Label>
</StackLayout>
<StackLayout x:Name="entirePage" BackgroundColor="Yellow">
<ListView x:Name="listView" ItemsSource="{Binding Items}" Margin="0" BackgroundColor="Red">
<!-- ListView Stuff -->
</ListView>
</StackLayout>
<StackLayout HorizontalOptions="FillAndExpand" Orientation="Horizontal" VerticalOptions="EndAndExpand">
<Button x:Name="ButtonDamageBack" WidthRequest="150" FontAttributes="Bold" HorizontalOptions="Start" TextTransform="Uppercase" Text="{Binding Back}" BackgroundColor="{StaticResource ElementBackgroundColor}" TextColor="{StaticResource ElementTextColor}" FontSize="{StaticResource FontSizeButtonLittle}" />
<Button x:Name="ButtonDamageNext" WidthRequest="150" FontAttributes="Bold" HorizontalOptions="EndAndExpand" TextTransform="Uppercase" IsEnabled="False" Text="{Binding Next}" BackgroundColor="{StaticResource ElementDisabledBackgroundColor}" TextColor="{StaticResource ElementTextColor}" FontSize="{StaticResource FontSizeButtonLittle}" />
</StackLayout>
</StackLayout>
</gttCompound:PageBase.ChildStackLayoutContent>
I gave some elements a noticable background color so I can see how much space they take
The listview takes way to much space.
Might it be because the page is an inherited page ?
The base page looks like 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"
x:Class="gttCompound.Pages.PageBase"
xmlns:helpers="clr-namespace:gttCompound.Pages.Helpers">
<ContentPage.Resources>
<ResourceDictionary>
<helpers:StringNewLineConverter x:Key="StringNewLineConverter"/>
<helpers:StringToTitleCaseConverter x:Key="StringToTitleCaseConverter"/>
<helpers:StringSubstringConverter x:Key="StringSubstringConverter"/>
</ResourceDictionary>
</ContentPage.Resources>
<!-- All the stuff about the AbsoluteLayout is to get a WaitCursor that can show in the center of the screen, see this url
https://stackoverflow.com/questions/48295792/xamarin-forms-how-to-fix-activity-indicator-in-centre-of-screen-in-scrollview
-->
<AbsoluteLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<ScrollView AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<StackLayout>
<StackLayout x:Name="TopStackLayout" VerticalOptions="Start" BackgroundColor="{StaticResource HeaderColor}" Orientation="Horizontal">
<Frame VerticalOptions="Center" Padding="0" BackgroundColor="{StaticResource HeaderColor}" BorderColor="Transparent" WidthRequest="40">
<Button x:Name="ButtonBack" VerticalOptions="Start" Text="" Image="Back.png" BackgroundColor="{StaticResource HeaderColor}" TextColor="{StaticResource TextColor}" FontSize="8" HeightRequest="14" />
</Frame>
<Frame VerticalOptions="CenterAndExpand" Padding="0" BackgroundColor="{StaticResource HeaderColor}" BorderColor="Transparent">
<Label Text="{Binding AppName}" HorizontalOptions="Start" HorizontalTextAlignment="Center" TextColor="White" FontSize="{StaticResource FontSizeLabelBig}" Padding="0" x:Name="Page_Title" />
</Frame>
</StackLayout>
<StackLayout x:Name="ChildStackLayout" VerticalOptions="FillAndExpand" Orientation="Vertical" Margin="0,-6">
</StackLayout>
<StackLayout x:Name="BottomStackLayout" VerticalOptions="End" Orientation="Horizontal" BackgroundColor="{StaticResource HeaderColor}">
<Label x:Name="LabelUser" Text="" TextColor="White" FontSize="{StaticResource FontSizeLabelTiny}" BackgroundColor="{StaticResource HeaderColor}" Margin="0,0,0,-6" HorizontalTextAlignment="Start" IsVisible= "True" />
<Label x:Name="LabelVersion" Text="" HorizontalOptions="CenterAndExpand" TextColor="White" FontSize="{StaticResource FontSizeLabelTiny}" BackgroundColor="{StaticResource HeaderColor}" Margin="0,0,0,-6" HorizontalTextAlignment="Center" IsVisible= "True" />
<Label Text="{Binding CopyRight}" HorizontalOptions="EndAndExpand" BackgroundColor="{StaticResource HeaderColor}" HorizontalTextAlignment="End" TextColor="White" FontSize="{StaticResource FontSizeLabelTiny}" />
</StackLayout>
</StackLayout>
</ScrollView>
<AbsoluteLayout x:Name="LayoutWaitCursor" BackgroundColor="#22000000" AbsoluteLayout.LayoutBounds="0.5,0.5,1,1" AbsoluteLayout.LayoutFlags="All" IsVisible="false">
<ActivityIndicator IsVisible="true" IsRunning="True" Color="{StaticResource TextColor}" AbsoluteLayout.LayoutBounds="0.5,0.5,0.1,0.1" AbsoluteLayout.LayoutFlags="All" />
</AbsoluteLayout>
</AbsoluteLayout>
</ContentPage>
Here is how the form looks like at runtime
And without the listview it looks like this
I changed just this
<StackLayout x:Name="entirePage" BackgroundColor="Yellow">
<!--
<ListView x:Name="listView" ItemsSource="{Binding Items}" Margin="0" BackgroundColor="Red">
</ListView>
-->
</StackLayout>
What I want is that the listview is visible and scrollable, but the 2 buttons should always stay visible. The listview must only occupy the space between the label on top of the page and the 2 buttons on the bottom of the page.
How can I do that ?
1) REMOVE ScrollView.
2) <StackLayout x:Name="ChildStackLayout" VerticalOptions="FillAndExpand" .... Try different VerticalOptions. Try Center. Also try CenterAndExpand..
3) If still wrong, change the outer StackLayout to Grid, and use RowDefinitions="Auto,*,Auto", with the 3 sections marked Grid.Row="0" / "1" / "2".
ChildStackLayout is "1" (numbered from 0), so gets the * in RowDefinitions.
I want to display title, text content ( approx 300 characters) from database in an Updates.xaml page. The title, text content should display in a rectangle blocks. When ever user submit a new update the latest one should automatically display on top of the page and each should be properly spaced between one another.
<?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"
x:Class="soccerapp.UpdatesNews" BackgroundColor="#aa49e3" Title="Updates"
mc:Ignorable="d">
<StackLayout>
<!-- Place new controls here -->
<Button x:Name="plusButton"
Text="+"
WidthRequest="60"
HeightRequest="60"
CornerRadius ="30"
VerticalOptions="Start"
HorizontalOptions="EndAndExpand"
Clicked="OnPlusButtonClicked" />
<Label
HorizontalOptions="Center"
Text="News!"
VerticalOptions="CenterAndExpand" />
<ListView x:Name="LstTest" ItemTapped="LstTest_ItemTapped">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Label Text="{Binding .}" />
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage>
<ViewCell>
<Frame>
<StackLayout>
<Label Text="{Binding Title}" />
<Label Text="{Binding Text}" />
<Label Text="{Binding Content}" />
</StackLayout>
</Frame>
</ViewCell>
I have this code:
<?xml version="1.0" encoding="utf-8"?>
<StackLayout xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:Japanese;assembly=Japanese"
x:Class="Japanese.Templates.HeaderTemplate"
x:Name="this" BackgroundColor="#efeff4" HorizontalOptions="FillAndExpand" Orientation="Vertical" Spacing="0" Margin="0">
<StackLayout HeightRequest="50" >
<Label Text="ABC" HorizontalOptions="Start" VerticalTextAlignment="End" Margin="20, 0, 0, 0" />
</StackLayout>
</StackLayout>
When it runs the text ABC appears at the top of the cell and not the bottom.
Can someone explain to me why it does not appear at the bottom when I use VerticalTextAlighment="End"
I also tried this but it still puts the text at the top of the StackLayout:
<?xml version="1.0" encoding="utf-8"?>
<StackLayout xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:Japanese;assembly=Japanese"
x:Class="Japanese.Templates.HeaderTemplate"
x:Name="this" BackgroundColor="#efeff4" HorizontalOptions="FillAndExpand" Orientation="Vertical" Spacing="0" Margin="0">
<StackLayout HeightRequest="50" >
<Label Text="ABC" HorizontalOptions="Start" VerticalTextAlignment="End"
VerticalOptions="End" Margin="20, 0, 0, 0" />
</StackLayout>
</StackLayout>
<ContentPage BackgroundColor="Purple" xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:test3" x:Class="test3.MainPage">
<StackLayout BackgroundColor="Yellow">
<!-- Place new controls here -->
<Label BackgroundColor="Pink" Text="I'm at the bottom!" HorizontalOptions="Center" VerticalOptions="EndAndExpand" />
</StackLayout>
</ContentPage>
My application calls two templates that create something similar to two ViewCells:
<StackLayout Orientation="Horizontal" Padding="10">
<template:DataGridTemplate Text="Updated" Label="{Binding Updated}" />
<template:DataGridTemplate Text="Version" Label="{Binding Version}" />
</StackLayout>
Here's the template XAML
<?xml version="1.0" encoding="utf-8"?>
<Grid Padding="20,0" xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:Japanese;assembly=Japanese"
x:Class="Japanese.Templates.DataGridTemplate"
x:Name="this">
<local:StyledLabel Text="{Binding Text, Source={x:Reference this}}" HorizontalOptions="Start" VerticalTextAlignment="Center" />
<local:StyledLabel Text="{Binding Label, Source={x:Reference this}}" HorizontalOptions="End" VerticalTextAlignment="Center" />
</Grid>
I would like the height of the template to be 50 and also to have a line created between the two templates to simulate something like I would find in a ViewCell that's inside a TableSection.
Does anyone have any suggestions how I can do this? I tried setting the height of the Grid to 50 but it tells me that it's a read only property.
StackLayout
<StackLayout Orientation="Vertical" Padding="10" Spacing="0">
<template:DataGridTemplate Text="Updated" Label="07/21/2018" />
<template:DataGridTemplate Text="Version" Label="1.0.0" />
</StackLayout>
DataGridTemplate (the line separator is in here, but could be added directly to the StackLayout instead)
<?xml version="1.0" encoding="utf-8"?>
<Grid Padding="20,0" HeightRequest="50" xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:Sof2"
x:Class="Sof2.Templates.DataGridTemplate"
x:Name="this">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<local:StyledLabel Grid.Column="0" Text="{Binding Text, Source={x:Reference this}}" VerticalTextAlignment="Center" />
<local:StyledLabel Grid.Column="1" Text="{Binding Label, Source={x:Reference this}}" TextColor="Silver" VerticalTextAlignment="Center" />
<!-- Separator -->
<BoxView Grid.ColumnSpan="2" BackgroundColor="Silver" HeightRequest="1" VerticalOptions="End" />
</Grid>
Result
If interactivity is needed, then you could add TapGestureRecognizers as appropriate.
I've created an app using xamarin.forms. I just began testing the iOS side and my background image on the login screen looks zoomed in. On android the image displays correctly. Is there anything I need to change to get it to display correctly?
Mainpage.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="LoyaltyWorx.MainPage"
BackgroundImage="bk3.jpg"
>
<StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<StackLayout Orientation="Horizontal" VerticalOptions="Start">
<!-- top controls -->
</StackLayout>
<StackLayout VerticalOptions="CenterAndExpand">
<!-- middle controls -->
<BoxView HeightRequest="430"></BoxView>
<Button Text="Continue with Facebook" x:Name="LoginBtn" BackgroundColor="#4867aa" TextColor="White" FontFamily="Klavika" HorizontalOptions="CenterAndExpand" Clicked="LoginBtn_Clicked" />
</StackLayout>
<StackLayout Orientation="Horizontal" VerticalOptions="End" HorizontalOptions="Center">
<!-- bottom controls -->
<Frame OutlineColor="White" HorizontalOptions="StartAndExpand">
<StackLayout Orientation="Horizontal" VerticalOptions="End" HorizontalOptions="Center">
<!-- bottom controls -->
<StackLayout Grid.Row="1" Orientation="Horizontal" Spacing="0">
<Label
Text="Terms and conditions"
FontSize="13"
TextColor="#71757a"
FontAttributes="Bold"
x:Name="LblTerms"/>
<Label
Text=" and"
FontSize="13"
TextColor="#71757a"
/>
<Label
Text=" privacy policy"
FontSize="13"
TextColor="#71757a"
FontAttributes="Bold"
x:Name="LblPrivacy"/>
</StackLayout>
</StackLayout>
</Frame>
</StackLayout>
</StackLayout>
</ContentPage>
Screenshots in both iOS and Android.
You can not play much on ContentPage Background image in In IOS its not picking up correctly. i will propose 2 solutions for you to get rid of this situation...
try both and get what matched to you
Solution 1
<?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="LoyaltyWorx.MainPage" >
<RelativeLayout>
<Image Source="bk3.jpg"
RelativeLayout.WidthConstraint=
"{ConstraintExpression Type=RelativeToParent, Property=Width}"
RelativeLayout.HeightConstraint=
"{ConstraintExpression Type=RelativeToParent, Property=Height}"/>
<PUT YOUR REST OF CODE HERE>
</RelativeLayout>
</ContentPage>
Solution 2
<?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="LoyaltyWorx.MainPage"
Padding="0">
<Grid>
<Image Source="bk3.jpg" Aspect="AspectFill" />
<StackLayout>
<PUT YOUR REST OF CODE HERE>
</StackLayout>
</Grid>
</ContentPage>
Update me with which suites you best....