Why doesn't my text inside a StackLayout wrap around? - xamarin

I have this code that appears inside a <TableSection>
<?xml version="1.0" encoding="UTF-8"?>
<ViewCell
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Japanese.CategoryGroupCommentViewCell">
<StackLayout
Orientation="Horizontal"
Padding="20,10"
BackgroundColor="#EAEAF1">
<Label
Style="{DynamicResource ListItemDetailTextStyleStyle}"
TextColor="#59595F"
LineBreakMode="WordWrap"
Text="Click on the Category Groups and then select one or more Categories from the page that appears"
VerticalOptions="Center"/>
</StackLayout>
</ViewCell>
When it displays I see the words:
Click on the Category Groups and then select
The rest is cut off.
I also tried this and it's the same:
<ViewCell
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Japanese.CategoryGroupCommentViewCell">
<Grid
VerticalOptions="CenterAndExpand"
Padding="20,10"
BackgroundColor="#EAEAF1">
<Label
Style="{DynamicResource ListItemDetailTextStyleStyle}"
TextColor="#59595F"
Text="Click on the Category Groups and then select one or more Categories from the page that appears"
HorizontalOptions="FillAndExpand"
VerticalOptions="CenterAndExpand"/>
</Grid>
</ViewCell>
Can anyone tell me what I might be doing wrong?

Please remove Orientation property and try it
EDITED
Remove RowHeight in your ListView if you put there and Add HasUnevenRows="true" in your ListView

Related

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

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{ ... };

Command-Binding (with RelativeSourceExtension) within a StackLayout using BindableLayout.ItemsSource

I am trying to bind a command (with RelativeSourceExtension) to a button within a StackLayout using BindableLayout.ItemsSource in an Xamarin.Forms App.
Not working version of MyControl.xaml:
<?xml version="1.0" encoding="UTF-8"?>
<Grid xmlns="http://xamarin.com/schemas/2014/forms"
...
x:Class="MyApp.Views.MyControl">
<StackLayout Orientation="Horizontal"
BindableLayout.ItemsSource="{Binding Data}">
<Button Command="{Binding Source={RelativeSource AncestorType={x:Type views:MyControl}}, Path=BindingContext.RemoveCommand}"
CommandParameter="{Binding}"
Text="Remove"/>
</StackLayout>
</Grid>
Unfortunately the button is "inactive" and does not let you "click".
The same command binding works fine in a ListView with ItemsSource.
Working version of MyControl.xaml:
<?xml version="1.0" encoding="UTF-8"?>
<Grid xmlns="http://xamarin.com/schemas/2014/forms"
...
x:Class="MyApp.Views.MyControl">
<ListView ItemsSource="{Binding Data}"
HasUnevenRows="true">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Button Command="{Binding Source={RelativeSource AncestorType={x:Type views:MyControl}}, Path=BindingContext.RemoveCommand}"
CommandParameter="{Binding}"
Text="Remove"/>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
Control Usage in MainPage.xmal:
<Grid BindingContext="{Binding Cart}">
...
<views:MyControl/>
....
</Grid>
Am I generally doing something wrong? Or is there a trick to make this work?
You missed using StackLayout.ItemTemplate and after DataTemplate in you xaml. Your button is not wrapped in a good way. That's it.

Show contentview on frame tapgesture

I am developing a cross platform app using xaml forms and have yet to figured out how to call a ContentView ontapGesture. I am able to call ContentView on xaml forms using <local:MailRoomList/> but I cant show a view ontap or on click event.
I have tried to show view on stacklayout using StackLayoutID.Children.Add(new MailRoomList()); but thats not what I want. I want to show full contentview on content page with back button enabled.
Please advise. Thank you
MailRoomList
<?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="xx.xxxx.xx.Views.MailRoomList">
<ContentView.Content>
<StackLayout>
<Label Text="This is my MailRoom List" />
</StackLayout>
</ContentView.Content>
</ContentView>
OnTapGesture
<Frame.GestureRecognizers>
<TapGestureRecognizer Tapped="OnRegisterMail" NumberOfTapsRequired="1"/>
</Frame.GestureRecognizers>
CodeBehind
async void OnRegisterMail(object sender, EventArgs e)
{
await Navigation.PushAsync(new MailRoomList());
}
Edit:
Home Page
<?xml version="1.0" encoding="utf-8" ?>
<xf1:BottomBarPage
xmlns:xf1="clr-namespace:xx.xxxx.xx.BottomBar"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:xx.xxxx.xx.Views"
x:Class="xx.xxxx.xx.Views.Home">
<ContentPage x:Name="MailRoomPage" Title="MailRoom" Icon="mailroom.png" xf1:BottomBarPageExtensions.TabColor="Orange" xf1:BottomBarPageExtensions.BadgeCount="5">
<local:MailRoom/>
</ContentPage>
<ContentPage Title="Transport" Icon="transport.png" xf1:BottomBarPageExtensions.TabColor="Green" xf1:BottomBarPageExtensions.BadgeCount="10">
<Label VerticalOptions="Center" HorizontalTextAlignment="Center" Text="Transport" FontSize="Large"/>
</ContentPage>
<ContentPage Title="Communication" Icon="communication.png" xf1:BottomBarPageExtensions.TabColor="Blue" xf1:BottomBarPageExtensions.BadgeCount="3">
<Label VerticalOptions="Center" HorizontalTextAlignment="Center" Text="Communication" FontSize="Large"/>
</ContentPage>
<ContentPage Title="HSE" Icon="hse.png" xf1:BottomBarPageExtensions.TabColor="Red" xf1:BottomBarPageExtensions.BadgeCount="2">
<Label VerticalOptions="Center" HorizontalTextAlignment="Center" Text="HSE" FontSize="Large"/>
</ContentPage>
<ContentPage Title="Meeting" Icon="meeting.png" xf1:BottomBarPageExtensions.TabColor="DarkCyan" xf1:BottomBarPageExtensions.BadgeCount="5">
<Label VerticalOptions="Center" HorizontalTextAlignment="Center" Text="Meeting" FontSize="Large"/>
</ContentPage>
From homepage above I am calling my view <local:MailRoom/> which is calling another view MailRoomList. This is where I need your advice on how to call a content view from another content view.
ContentView is a View not a Page. Change your MainRoomList Xaml to 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="xx.xxxx.xx.Views.MailRoomList">
<StackLayout>
<Label Text="This is my MailRoom List" />
</StackLayout>
</ContentPage>
View's dont support navigation, they can only be navigated to if they belong to a Page which are the objects that contain the navigation infrastructure.
IF you want to mantain your MailRoomList as a ContentView, then you need to include her in some other page, and perform the navigation ( inside the tap method ) to that other page

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">

How do I alternate a label and a custom view in a StackLayout?

I am trying to create a layout for a group edit page that contains 3 custom views and a label for each one:
<?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:vm="clr-namespace:...;assembly=..."
xmlns:view="clr-namespace:...;assembly=..."
x:Class="..."
Title="Configure Group">
<ScrollView>
<StackLayout Padding="20">
<Label Text="Person 1" Font="Large"/>
<view:EditPersonView/>
<Label Text="Person 2" Font="Large"/>
<view:EditPersonView/>
<Label Text="Person 3" Font="Large"/>
<view:EditPersonView/>
</StackLayout>
</ScrollView>
</ContentPage>
EditPersonView.cs
<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:vm="clr-namespace:...;assembly=..."
x:Class="...EditPersonView">
<ContentView.BindingContext>
<vm:PersonViewModel/>
</ContentView.BindingContext>
<StackLayout>
<StackLayout HorizontalOptions="FillAndExpand">
<Label Text="Date of Birth"/>
<DatePicker Date="{Binding DateOfBirth, Mode=TwoWay}"/>
</StackLayout>
<StackLayout HorizontalOptions="FillAndExpand">
<Label Text="Gender"/>
<Picker x:Name="GenderPicker"
SelectedIndex="{Binding SelectedGenderIndex, Mode=TwoWay}"/>
</StackLayout>
<StackLayout HorizontalOptions="FillAndExpand">
<Label Text="Smoking Habit"/>
<Picker x:Name="SmokingHabitPicker"
SelectedIndex="{Binding SelectedSmokingHabitIndex, Mode=TwoWay}"/>
</StackLayout>
</StackLayout>
</ContentView>
When this is rendered I get all 3 labels at the top followed by the 3 custom views and not the expected Label then custom view pattern. How do I get the alternating pattern that I am expecting?

Resources