I have a list of Players
public ObservableCollection<PlayerModel> Players { get; set; }
A flexlayout bindable items is set to players list
<FlexLayout x:Name="playerscollection" Wrap="Wrap" BindableLayout.ItemsSource="{Binding Players}"/>
The items view is a separate content view "PlayerView" with ViewModel "PlayerVieModel" that has a parametrized constructor.
PlayerView =>
<ContentView.Content>
<StackLayout>
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" >
<Entry x:Name="entry" Placeholder="الاسم" HorizontalOptions="FillAndExpand" Text="{Binding PlayerName}" />
<Label TextColor="Black" FontSize="Medium" HorizontalOptions="End" Text="اللاعب" VerticalOptions="Center"/>
</StackLayout>
<views:SportsListView x:Name="sportsList" BindingContext="{Binding ListViewModel}"
HorizontalOptions="FillAndExpand"
Pickervisibility="True"/>
<Label x:Name="payment" Text="{Binding Source={x:Reference sportsList}, Path=BindingContext.SportsTotalPayments, StringFormat='{0:D2}'}" HorizontalTextAlignment="Start" Margin="0,0,10,0" Padding="0" VerticalTextAlignment="Center" HorizontalOptions="CenterAndExpand" FontSize="20"/>
</StackLayout>
</ContentView.Content>
public PlayerViewModel(bool showPicker = true, PlayerModel player = null){}
I need to bind the list view items to the PlayerVieModel
<FlexLayout x:Name="playerscollection" Wrap="Wrap" BindableLayout.ItemsSource="{Binding Players}">
<BindableLayout.ItemTemplate>
<DataTemplate>
<views:PlayerView >
<views:PlayerView.BindingContext>
<viewModels:PlayerViewModel>
<x:Arguments>
<x:Boolean>false</x:Boolean>
<models:PlayerModel/>
</x:Arguments>
</viewModels:PlayerViewModel>
</views:PlayerView.BindingContext>
</views:PlayerView>
</DataTemplate>
</BindableLayout.ItemTemplate>
</FlexLayout>
But PlayerModel is always null. So, I used the biniding for the model
<viewModels:PlayerViewModel>
<x:Arguments>
<x:Boolean>false</x:Boolean>
<models:PlayerModel
PlayerName="{Binding Source={x:Reference playerscollection},Path=PlayerName}"
PlayerPayment="{Binding Source={x:Reference playerscollection},Path=PlayerPayment}"
Sports="{Binding Source={x:Reference playerscollection},Path=Sports}" />
</x:Arguments>
</viewModels:PlayerViewModel>
It Gives Error Missmatch x:argument
Related
How could I achieve the following , it is a list of many items. on it
Design Goal
and this is my code :
<Label Text = "Today Appointments :" TextColor = "#2196f3" WidthRequest = "200"
HeightRequest="50" FontSize = "Small" Margin = "13" FontAttributes = "Bold" ></Label >
<ListView HasUnevenRows="True" ItemsSource="{Binding Appoitments}" RowHeight="5" >
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid RowDefinitions="Auto,Auto,Auto">
<Frame
BorderColor="Gray"
CornerRadius="5"
Padding="8"
HasShadow="True"
>
<StackLayout Orientation="Vertical" Padding="5">
<Label Grid.Row="0" Text="{Binding AppointmentPatientName}" TextColor="Black" FontSize="Small" FontAttributes="Bold" Margin="20" />
<Label Grid.Row="0" Grid.Column="1" Text="{Binding AppointmentDate}" TextColor="Black" FontSize="Small" FontAttributes="Bold" Margin="20" />
</StackLayout>
</Frame>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
A CollectionView offers the option to group your items in the list and create a Header for your group.
Enable IsGrouped property :
<CollectionView IsGrouped="true" />
then add
<CollectionView.GroupHeaderTemplate>
<DataTemplate>
//Your Group Header here...
<Label Text="{Binding AppoitmentsId}"
BackgroundColor="LightGray"
FontSize="Large"
FontAttributes="Bold" />
</DataTemplate>
</CollectionView.GroupHeaderTemplate>
Follow this Link
I have a problem where I can see like 4 items visible only from each list. I tried doing stuff like VerticalOptions Fill/FillandExpand on collection views but still can't see them all. Trying to do HeightRequest = 99999 on the outside collection view and 9999 on the inside seems to expose the items so I know they are 'there'. But this is wrong solution to the problem
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
x:Name="AnimeListPagee"
x:Class="OtakuApp.Pages.AnimeListPage">
<RefreshView x:Name="HomeRefreshView"
IsRefreshing="{Binding IsBusy}"
Command="{Binding RefreshCommand}"
RefreshColor="White"
BackgroundColor="DodgerBlue">
<CollectionView ItemsSource="{Binding AnimListsList}"
VerticalOptions="Start"
BackgroundColor="Transparent"
ItemsLayout="VerticalList"
SelectionMode="None"
x:Name="CollectionView1">
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout>
<Label Text="{Binding name}" FontSize="30">
</Label>
<CollectionView ItemsSource="{Binding entries}"
BackgroundColor="Transparent"
VerticalOptions="Start"
ItemsLayout="VerticalList"
SelectionMode="Single"
SelectedItem="{Binding BindingContext.Entry, Source={x:Reference Name=AnimeListPagee}}"
x:Name="CollectionView2">
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout>
<Label Text="{Binding media.Title.Romaji}"></Label>
<Label Text="{Binding progress}"></Label>
<Frame BackgroundColor="Green">
<StackLayout>
<Frame BackgroundColor="Yellow" xct:TouchEffect.NativeAnimation="True"
xct:TouchEffect.Command="{Binding BindingContext.InfoCommand, Source={x:Reference Name=AnimeListPagee}}"></Frame>
<Frame BackgroundColor="Red" xct:TouchEffect.NativeAnimation="True"
xct:TouchEffect.Command="{Binding BindingContext.InfoCommand2, Source={x:Reference Name=AnimeListPagee}}"></Frame>
</StackLayout>
</Frame>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</RefreshView>
screenshot
I did a test on my side and it seems fine. You can see if it is what you want.
xmal:
<CollectionView x:Name="outcollection"
>
<CollectionView.ItemsLayout>
<LinearItemsLayout Orientation="Vertical"
ItemSpacing="0"/>
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout BackgroundColor="LightBlue"
HeightRequest="200">
<Label Text="{Binding Name}"/>
<CollectionView x:Name="insidecol" ItemsSource="{Binding peoples}">
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout BackgroundColor="LightGreen">
<Label Text="{Binding Name}"/>
<Label Text="{Binding age}"/>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
Model:
public class House
{public string Name { set; get; }
public string Size { set; get; }
public List<People> peoples { set; get; }
public House()
{
}
I am showing a list in FlexLayout by BindableLayout. I want to show some background color when someone selected an item. It seems really difficult in UWP.
<FlexLayout x:Name="FlexTypes" Wrap="Wrap" Margin="0" HorizontalOptions="FillAndExpand" BindableLayout.ItemsSource="{Binding Items}">
<BindableLayout.ItemTemplate>
<DataTemplate>
<StackLayout HeightRequest="120" WidthRequest="150">
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Command="{Binding Source={x:Reference Page}, Path=BindingContext.AddItemCommand}" CommandParameter="{Binding .}"/>
</StackLayout.GestureRecognizers>
<Frame Margin="5" Padding="0" CornerRadius="10" BackgroundColor="#f1f5fb" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Margin="0,20,0,0">
<Label Text="{Binding Name}" FontAttributes="Bold" HorizontalOptions="CenterAndExpand"/>
<Frame BackgroundColor="#ffffff" Padding="0" HeightRequest="30" WidthRequest="50" VerticalOptions="EndAndExpand" Margin="20">
<Label Text="{Binding Price, StringFormat='₹ {0:N}'}" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/>
</Frame>
</StackLayout>
</Frame>
</StackLayout>
</DataTemplate>
</BindableLayout.ItemTemplate>
I am showing a list in FlexLayout by BindableLayout. I want to show some background color when someone selected an item.
For your requirement, we suggest handle it within TapGestureRecognizer Tapped event and make a previous value to record clicked item. Then set it background color as default when next item click. For more please refer the following sample code.
private Layout previous;
private void TapGestureRecognizer_Tapped(object sender, EventArgs e)
{
if (previous != null)
{
previous.BackgroundColor = Color.White;
}
var stacklayout = sender as Layout;
stacklayout.BackgroundColor = Color.Red;
previous = stacklayout;
}
Xaml
<FlexLayout
x:Name="FlexTypes"
Margin="0"
HorizontalOptions="FillAndExpand"
Wrap="Wrap">
<BindableLayout.ItemsSource>
<x:Array Type="{x:Type x:String}">
<x:String>1</x:String>
<x:String>2</x:String>
<x:String>3</x:String>
<x:String>4</x:String>
<x:String>5</x:String>
</x:Array>
</BindableLayout.ItemsSource>
<BindableLayout.ItemTemplate>
<DataTemplate>
<StackLayout HeightRequest="120" WidthRequest="150">
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" />
</StackLayout.GestureRecognizers>
<Label Text="{Binding}" />
</StackLayout>
</DataTemplate>
</BindableLayout.ItemTemplate>
</FlexLayout>
I have got the following xaml code:
<StackLayout Padding="10" x:DataType="model:Light">
<StackLayout HorizontalOptions="FillAndExpand" Grid.Column="0" Grid.Row="1">
<Label Text="{Binding Name}" LineBreakMode="NoWrap" Style="{DynamicResource ListItemTextStyle}" FontSize="24" HorizontalOptions="StartAndExpand" VerticalOptions="StartAndExpand"/>
</StackLayout>
<StackLayout HorizontalOptions="FillAndExpand" Grid.Column="1" Grid.Row="1" >
<Button Text="{Binding Enabled}" Command="{Binding ToggleLight}" CommandParameter="{Binding .}" HorizontalOptions="CenterAndExpand"></Button>
</StackLayout>
</StackLayout>
How do I exclude Command="{Binding ToggleLight}" on my Button form the x:DataType="model:Light" defined on my StackLayout?
Use binding-path.
Define "x:Name" outside the StackLayout (StackLayout, Grid, ListView and etc.)
Add "x:Reference" for your Command binding inside the StackLayout
The command is excluded.
Like:
<Grid x:Name="WhateverParent">
<StackLayout x:DataType="model:Light">
<Button ... Command="{Binding Path=BindingContext.ToggleLight, Source={x:Reference WhateverParent}}" />
</StackLayout>
</Grid>
I have a list view with a DataTemplate and inside it I have a StackLayout that I need set its background but the color of it is inside a variable...When I programmatically set the background of an object using this variable color it works, but when I try to use "binding" in xaml it doesn't work and I can't get this stack programmatically because it's inside a data template...
I really need your answer..
Some help?
<ListView.ItemTemplate>
<DataTemplate>
<!--<DataTemplate.Triggers>
<DataTrigger Binding="{Binding fundoColor}" Value="4">
<Setter TargetName="produtos_stack_color" Property="Background" Value="LawnGreen" />
</DataTrigger>
</DataTemplate.Triggers>-->
<ViewCell>
<StackLayout x:Name="produtos_stack_color" BackgroundColor="{Binding fundoColor}" VerticalOptions="FillAndExpand" Margin="10,10,10,10">
<StackLayout Orientation="Horizontal" Padding="10,10,10,10" BackgroundColor="Black" HorizontalOptions="FillAndExpand">
<Image Source="{Binding imagem}" HeightRequest="80" HorizontalOptions="CenterAndExpand" WidthRequest="160" Aspect="Fill"/>
<StackLayout Orientation="Horizontal" BackgroundColor="Green" VerticalOptions="Center" HorizontalOptions="CenterAndExpand">
<Label Style="{StaticResource labelsfont}" Text="R$" FontSize="Medium" TextColor="White"/>
<Label Style="{StaticResource labelsfont}" Text="{Binding valor}" FontAttributes="Bold" FontSize="Large" TextColor="White"/>
</StackLayout>
</StackLayout>
<StackLayout Margin="0,0,0,10">
<Label Text="{Binding nome}" Style="{StaticResource labelsfont}" FontAttributes="Bold" FontSize="Medium" TextColor="White" VerticalOptions="StartAndExpand" HorizontalOptions="Center"/>
<ContentView BackgroundColor="Chartreuse" HorizontalOptions="FillAndExpand">
<Label Style="{StaticResource labelsfont}" Text="{Binding observacao}" TextColor="White" Margin="10,10,10,10" HorizontalOptions="Center" />
</ContentView>
</StackLayout>
</StackLayout>
</ViewCell>
</DataTemplate>
I heard about triggers...but I really don't know how it works exactly...
I need produtos_stack_color receive the color
My global variable in code behind...It is setted just in construct of my class
InitializeComponent();
fundoColor = Color.FromHex(this.categEscolhida.corFundo);
You can only bind with properties - so you will have to create a property in code-behind class.
public Color FundoColor { get { return fundoColor; } }
Secondly, in order to refer this property in XAML - you can use Reference extension, and specify parent as Source. For e.g.:
<StackLayout x:Name="produtos_stack_color"
BackgroundColor="{Binding FundoColor, Source={x:Reference ParentHost}}" ..>
And, make sure to set x:Name attribute in root node of your XAML. For e.g:
<ContentPage x:Name="ParentHost" .. />