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.
Related
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{ ... };
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>
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">
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
<?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="Dh.ListPage">
<ContentPage.Content>
<ScrollView>
<StackLayout Style="{StaticResource MainStackLayoutWhenLoggedInStyle}">
<Frame Style="{StaticResource FrameStyle2}">
<StackLayout>
<Label Text="Vragenlijsten" Style="{StaticResource TitelLabelStyle}" />
</StackLayout>
</Frame>
<Frame Style="{StaticResource FrameStyle2}">
<StackLayout>
<Label Text="DRINGENDE VRAGEN: vul deze vragen meteen in!" Style="{StaticResource StandardLabelStyle}"/>
<Frame Style="{StaticResource FrameStyle2}">
<StackLayout Style="{StaticResource ListViewStackLayoutStyle}" >
<ListView ItemTapped="OnItemTapped" ItemsSource="{Binding Question_Lists}" Style="{StaticResource StandardListViewStyle}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<Label Text="{Binding Title}" Style="{StaticResource StandardLabelStyle}" />
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</Frame>
</StackLayout>
</Frame>
</StackLayout>
</ScrollView>
</ContentPage.Content>
When my screen is too small then my listview does not want to scroll. If my screen is not too small then listview does scroll. Can someone help me pls?
Never stack a ListView inside a ScrollView as both implement scrolling on Android at least.
Xamarin.Forms.ScrollView Class documentation says:
Application developers should not nest one ScrollView within another. Additionally, they should refrain from nesting them other elements that can scroll, such as WebView.
ListView.ScrollTo Method Scrolls the ListView to the item.
Put your StackLayout in ListView.Header or ListView.Footer
<ListView ItemsSource="{Binding Comments}">
<ListView.Header>
<StackLayout Padding="30,30,30,0">
<Label Text="Article" />
</StackLayout>
</ListView.Header>
<ListView.Footer>
<StackLayout HeightRequest="85" />
</ListView.Footer>
</ListView>