The property 'Content' is set more than once - XAML - xamarin

Every time i try to implement <maps:Map IsShowingUser="True" x:Name="Mapa" /> in my mainPage show's "The property 'Content' is set more than once". Every time I put in this place gives me 'The property 'Content' is set more than once'.
If anyone could explain in simple terms where the Content property is set that would be most helpful.
<ContentPage xmlns:maps="clr-namespace:Xamarin.Forms.GoogleMaps;assembly=Xamarin.Forms.GoogleMaps"
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="Pap.MainPage">
<maps:Map IsShowingUser="True" x:Name="Mapa" />
<AbsoluteLayout VerticalOptions="FillAndExpand" x:Name="Main">
<StackLayout AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" x:Name="main" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Image Source="C:\Users\david\Desktop\Pap\Pap\Pap.Android\Resources\drawable\User.png" Aspect="AspectFill" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"></Image>
</StackLayout>
<StackLayout x:Name="body" AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All"
Orientation="Vertical" VerticalOptions="FillAndExpand" Spacing="0">
<!--<StackLayout VerticalOptions="End" BackgroundColor="Red">
<Label Text="Titulo" />
</StackLayout>-->
<StackLayout VerticalOptions="FillAndExpand">
<Label Text="Slider-Example" HorizontalOptions="Center" VerticalOptions="Center"/>
<Image Source="C:\Users\david\Desktop\Pap\Pap\Pap.Android\Resources\drawable\User.png" Aspect="AspectFill"></Image>
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Tapped="Handle_Tapped">
</TapGestureRecognizer>
</StackLayout.GestureRecognizers>
</StackLayout>
</StackLayout>
</AbsoluteLayout>
</ContentPage>

ContentPage has an implicit Content property that can contain a single child element. If you want to include more than one piece of content on your page, you need to use a Layout container, like a StackLayout
<ContentPage ... >
<StackLayout>
... multiple children can go here
</StackLayout>
</ContentPage>
if you were using C# instead of XAML, you would explicitly set the Content property
myPage.Content = new StackLayout{ ... };

Related

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 do I bind to MasterPage viewmodel inside a BindableLayout

I am trying to bind my Command property to the Command in my MasterDetailPage view model. I tried defining the name property for the master page and setting that as the reference source, but it does not seem to bind to the viewmodel. For context, the List MenuItems is a property in the same Viewmodel and the Title binds just fine. I believe I am not setting the Source for the command correctly, but not sure how to fix it. Also, I am using Prism, so the viewmodel is mapped in app.xaml already.
<MasterDetailPage
x:Class="MasterDetailPrism.Views.MainPage"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:prism="http://prismlibrary.com"
prism:ViewModelLocator.AutowireViewModel="True"
x:Name="menuMasterPage">
<MasterDetailPage.Master>
<ContentPage Title="Menu">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="225" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<StackLayout Grid.Row="0" BackgroundColor="Aqua" />
<StackLayout Grid.Row="1" BindableLayout.ItemsSource="{Binding MenuItems}">
<BindableLayout.ItemTemplate>
<DataTemplate>
<StackLayout>
<Button
Command="{Binding NavigateAsync, Source={x:Reference menuMasterPage}}"
CommandParameter="{Binding NavPath}"
Text="{Binding Title}" />
</StackLayout>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
</Grid>
</ContentPage>
</MasterDetailPage.Master>
I was able to figure it out - I had to name the StackLayout, and then bind to the root of that as the source, not the contentpage or masterpage. In the code below, ItemsList.
<StackLayout Grid.Row="1" BindableLayout.ItemsSource="{Binding MenuItems}" x:Name="ItemsList">
<BindableLayout.ItemTemplate>
<DataTemplate>
<StackLayout>
<Button
Command="{Binding BindingContext.NavigateAsync, Source={x:Reference ItemsList}}"
CommandParameter="{Binding NavPath}"
Text="{Binding Title}" />
</StackLayout>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>

Display title, text content in an xaml in rectangle shape

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>

How can get text from XfxEntry?

I have used Xamrin with vs 2017 professional.
I want to use a floating text view in the cross-platform application.
I have used below link but it not describe how can get a text from it.
[link] https://github.com/XamFormsExtended/Xfx.Controls
Main.xaml
<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"
x:Class="Reports_Rpt.Signup">
<NavigationPage.TitleView>
<StackLayout Orientation="Horizontal" VerticalOptions="Center" Spacing="10" BackgroundColor="#4B8CA8">
<Image Source="iconXamagon.png">
</Image>
</StackLayout>
</NavigationPage.TitleView>
<ContentPage.Content>
<StackLayout Padding="2,2,2,2" BackgroundColor="White">
<StackLayout Orientation="Horizontal" VerticalOptions="Start" HorizontalOptions="FillAndExpand">
<xfx:XfxEntry
Placeholder="Enter your name"
Text="{Binding Name}"
ErrorText="{Binding NameErrorText}" />
</StackLayout>
</StackLayout>
</ContentPage.Content>
</ContentPage>
You have bound the Text property to Name, so the Name property of your model should contain the text.
Alternatively, you can assign a name to the control and reference it that way
<xfx:XfxEntry x:Name="myEntry" Placeholder="Enter your name"
Text="{Binding Name}"
ErrorText="{Binding NameErrorText}" />
then in your code-behind
var value = myEntry.Text;

Adding a background image to a list view Xamarin.Forms

I have been struggling with this for a while. I have a simple list view that uses a data model to pull data. All I want is to put an image the size of the screen in the background
<ContentPage Padding="0,-20,0,0" xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="xxxxxxxx.Pages.PrayersByCategory">
<ContentPage.Content>
<ListView RowHeight="55" x:Name="lv_prayers_categories_page" VerticalOptions="FillAndExpand" HasUnevenRows="false" SelectedItem="Handle_ItemSelected" BackgroundColor="Transparent" SeparatorVisibility="None">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid x:Name="cellGrid" Padding="15">
<Grid.ColumnDefinition></Grid.ColumnDefinition>
<Label x:Name="lblPrayerCategory" Text = "{Binding prayerCategory}" FontSize="16" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"/>
<Label x:Name="lblPrayerCount" Text = "{Binding prayerCategoryID}" FontSize="16" Grid.Row="0" Grid.Column="2" Grid.ColumnSpan="2"/></Grid></ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage.Content>
If your list view fills the page, you can set the ContentPage background color :
<ContentPage Padding="0,-20,0,0"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="xxxxxxxx.Pages.PrayersByCategory"
BackgroundImage="star_outline.png">

Resources