I want to create a structure but it's not coming out the way I want it
<?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:App37"
x:Class="App37.MainPage">
<StackLayout BackgroundColor="Aqua" VerticalOptions="Fill" HorizontalOptions="Fill">
</StackLayout>
<StackLayout BackgroundColor="Bisque" VerticalOptions="Fill" HorizontalOptions="Fill">
</StackLayout>
<StackLayout BackgroundColor="BlueViolet" VerticalOptions="Fill" HorizontalOptions="Fill">
</StackLayout>
</ContentPage>
My resolve has to stay this way
enter image description here
One smart way of doing this structure is through Grid layout
<?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:XamarinFormDemo" x:Class="XamarinFormDemo.XamarinFormDemoPage">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackLayout HorizontalOptions="Fill" Grid.Row="0" BackgroundColor="Gray" />
<StackLayout HorizontalOptions="Fill" Grid.Row="1" BackgroundColor="Bisque" />
<StackLayout HorizontalOptions="Fill" Grid.Row="2" BackgroundColor="BlueViolet" />
</Grid>
</ContentPage>
As Jason pointed out, a ContentPage can have only once child element. You can have a parent stacklayout to hold the three child stacks e.g
<?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:App37"
x:Class="App37.MainPage">
<StackLayout>
<StackLayout BackgroundColor="Aqua" VerticalOptions="Fill" HorizontalOptions="Fill">
</StackLayout>
<StackLayout BackgroundColor="Bisque" VerticalOptions="Fill" HorizontalOptions="Fill">
</StackLayout>
<StackLayout BackgroundColor="BlueViolet" VerticalOptions="Fill" HorizontalOptions="Fill">
</StackLayout>
</StackLayout>
</ContentPage>
Related
I'm building a Xamarin Crossplatform App
For drawer menu I'm following this tutorial : https://www.youtube.com/watch?v=aYjK0cPjZMQ
But the problem is when I change my MainPage from ContentPage to MasterDetailPage it shows me this error:
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:Last_MSPL"
x:Class="Last_MSPL.MainPage">
<MasterDetailPage.Master>
<ContentPage Title="Menu">
<Grid BackgroundColor="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="200" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid>
<Image Source="bg.png" Aspect="AspectFill" />
<StackLayout Padding="0,20,0,0" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">
<Image Source="profile.png" Aspect="AspectFill" WidthRequest="85" HeightRequest="85" />
<Label Text="Xam Buddy" TextColor="White" FontSize="Large" />
</StackLayout>
</Grid>
<StackLayout Grid.Row="1" Spacing="15">
<ListView x:Name="navigationDrawerList"
RowHeight="60"
SeparatorVisibility="None"
BackgroundColor="#e8e8e8"
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="Small"
VerticalOptions="Center"
TextColor="Black"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</Grid>
</ContentPage>
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<NavigationPage>
</NavigationPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
Help me through this so I can move forward, Thanks!
I just Clean my project, rebuild and it works
because the generated .g.cs from the xaml has not been refreshed so it was giving this error
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>
I have this template:
<?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.FooterTemplate"
x:Name="this" BackgroundColor="#efeff4"
HorizontalOptions="FillAndExpand"
Orientation="Vertical" Spacing="0" Margin="0">
<StackLayout HeightRequest="1" Orientation="Vertical"
Spacing="0" Margin="0"
IsVisible="{Binding FooterType, Converter={StaticResource Type0BoolConverter}, Source={x:Reference this} }" >
<BoxView HeightRequest="1" HorizontalOptions="FillAndExpand" BackgroundColor="#FF0000" Margin="0" />
<BoxView HeightRequest="1" HorizontalOptions="FillAndExpand" BackgroundColor="#00FF00" Margin="0" />
<BoxView HeightRequest="1" HorizontalOptions="FillAndExpand" BackgroundColor="#0000FF" Margin="0" />
</StackLayout>
</StackLayout>
I would like to have the background colors for the three BoxViews decided with a style that I pass in as a parameter.
Can someone tell me if this is possible and if so give some suggestions as to how I could do this.
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....
Can we create sdk or library in xamarin for android and IOS which. And the library or sdk should also contain some UI (views). Is it possible that library or sdk can contain views that we can use with some other projects of xamarin?
Yes! You can custom Controls with Bindable Properties in Xamarin.Forms then package it in a nuget package.
For example: you can create a ContentView in another folder called MyCustomControl like this
<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="BindablePropertyDemo.Custom.MyCustomControl">
<Grid x:Name="grid"
Padding="10,40,10,10"
HeightRequest="160"
VerticalOptions="Start">
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Image x:Name="image"
HeightRequest="100"
HorizontalOptions="Center"/>
<Label x:Name="title"
Text="BASKETBALL"
Grid.Row="1"
FontSize="20"
VerticalOptions="Center"
TextColor="White"
HorizontalOptions="Center"
FontAttributes="Bold"/>
</Grid>
</ContentView>
And then you can call this control from any page 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"
xmlns:local="clr-namespace:BindablePropertyDemo"
xmlns:custom="clr-namespace:BindablePropertyDemo.Custom"
x:Class="BindablePropertyDemo.MainPage"
BackgroundColor="#33334c">
<ScrollView>
<Grid RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid BackgroundColor="White">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid BackgroundColor="#ff4284" Padding="10">
<Image Source="hamburger.png"/>
</Grid>
<Label Grid.Column="1"
Text="Home"
TextColor="#ff4284"
FontSize="20"
Margin="5,0,0,0"
HorizontalOptions="Start"
VerticalOptions="Center"/>
</Grid>
<StackLayout Spacing="0" Grid.Row="1"><
<!-- SEE HERE!! -->
<custom:MyCustomControl BackgroundColor="#76dab2"
TitleText="BASKETBALL"
Image="basketball.png"/>
<custom:MyCustomControl BackgroundColor="#7c57e4"
TitleText="FOOTBALL"
Image="football.png"/>
<custom:MyCustomControl BackgroundColor="#f1b136"
TitleText="GRIDIRON"
Image="gridiron.png"/>
</StackLayout>
</Grid>
</ScrollView>
</ContentPage>
And you will have a result like this:
I have taken this example of this tutorial, you can continue to have more information.
You can find their source code here: https://github.com/mindofai/BindablePropertyDemo