I have an application in xamarin.form and I want to display image in the title bar.
I have used xamarin.form 3.6.0.2.
When i used navigationpage.titleview and run application it showing error message.
doesn't have property titleview.
[Build output] https://ufile.io/e1rkf
<?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:xfx="clr-namespace:Xfx;assembly=Xfx.Controls"
xmlns:local="clr-namespace:Reports_Rpt;assembly=Reports_Rpt"
x:Class="Reports_Rpt.Signup">
<NavigationPage.TitleView>
<Image Source="{local:ImageResource Reports_Rpt.Images.logo.png}" HorizontalOptions="Start" BackgroundColor="#4B8CA8"></Image>
</NavigationPage.TitleView>
<ContentPage.Content>
<Grid BackgroundColor="White" Padding="2,2,2,2">
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<xfx:XfxEntry
x:Name="txtName"
Placeholder="Enter your name"
HorizontalOptions="Fill"
Grid.Row="0"
/>
<xfx:XfxEntry
x:Name="txtContactNum"
Placeholder="Enter your contact number"
HorizontalOptions="Fill"
Grid.Row="1"
/>
</Grid>
</ContentPage.Content>
</ContentPage>
[1]: https://ufile.io/e1rkf
Error resolved by update nuget package for android.
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
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">
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
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>