How to use TemplateSelector for Xamarin Forms TemplatedView? - forms

I need to use a TemplateSelector for the ControlTemplate in TemplatedView. Is there any way to handle ControlTemplateSelector, similar to how DataTemplateSelector is done?
<ContentPage.Resources>
<ResourceDictionary>
<data:MediaTemplateSelector x:Key="headerTemplateSelector"
VideoTemplate="{StaticResource VideoHeaderTemplate}"
ImageTemplate="{StaticResource ImageHeaderTemplate}" />
</ResourceDictionary>
</ContentPage.Resources>
<ContentPage.Content>
<TemplatedView ControlTemplate="{StaticResource headerTemplateSelector}"/>
</ContentPage.Content>

ControlTemplate and DataTemplate works in a different manner.
I started with ControlTemplates trying to do something similar to DataTemplateSelector but defining an item appearance at page level instead at item in a collection like a ListView or CollectionView. So confusing at the beginning because it works totally different... first: forget the concept of DataTempateSelector, has nothing to do with ControlTemplates.
The code i will present has some properties/class names in spanish, hope you understand the idea anyway. First, suppose you have a property on your ViewModel that needs to be presented in a different manner depending on the same or other ViewModel property.
First, define a ContentView class that later you will put as a part of your page (could be a TemplatedView, but, i'm getting an exception when i try to put the templatedView directly on a page, so, i use a ContentView):
<?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:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:local1="clr-namespace:MrWaiter.Resources;assembly=MrWaiter"
x:Class="MrWaiter.Views.ComandaControlTemplate"
ControlTemplate="{StaticResource ComandaPropia}">
<ContentView.Resources>
<ResourceDictionary>
<ControlTemplate x:Key="ComandaPropia">
<Frame BackgroundColor="{x:StaticResource Key=pLight}" CornerRadius="10" HasShadow="True" HeightRequest="32"
Padding="0" Margin="0">
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<Label FontSize="Large"
HorizontalOptions="StartAndExpand"
TextColor="White"
Margin="5,0,0,0"
BindingContext="{TemplateBinding BindingContext}"
Text="{TemplateBinding Parent.BindingContext.Comanda.Numero, StringFormat='Comanda {0}'}">
<Label.GestureRecognizers>
<TapGestureRecognizer NumberOfTapsRequired="2"
BindingContext="{TemplateBinding BindingContext}"
Command="{TemplateBinding Parent.BindingContext.MostrarComandasCommand}" >
</TapGestureRecognizer>
</Label.GestureRecognizers>
</Label>
<Button FontFamily="{StaticResource MaterialFontFamily}"
HorizontalOptions="End" x:Name="botonExpandir"
Text="{x:Static local1:IconFont.Play}" BackgroundColor="Transparent"
Rotation="-90" FontSize="32" TextColor="White"
WidthRequest="55"
Margin="0,0,0,0"
Padding="0,0,0,0"
Command="{TemplateBinding MaximizeCommand}"
VerticalOptions="CenterAndExpand"
>
</Button>
</StackLayout>
</Frame>
</ControlTemplate>
<ControlTemplate x:Key="ComandaInvitaA" >
<Frame BackgroundColor="DarkGray" CornerRadius="10" HasShadow="True" HeightRequest="32"
Padding="0" Margin="0">
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<Label FontSize="Large"
HorizontalOptions="StartAndExpand"
TextColor="White"
Margin="5,0,0,0"
BindingContext="{TemplateBinding BindingContext}"
Text="{TemplateBinding Parent.BindingContext.Comanda.Numero, StringFormat='Comanda {0}'}">
<Label.GestureRecognizers>
<TapGestureRecognizer NumberOfTapsRequired="2"
BindingContext="{TemplateBinding BindingContext}"
Command="{TemplateBinding Parent.BindingContext.MostrarComandasCommand}" >
</TapGestureRecognizer>
</Label.GestureRecognizers>
</Label>
<Button FontFamily="{StaticResource MaterialFontFamily}"
HorizontalOptions="End" x:Name="botonExpandir" x:FieldModifier="Public"
Text="{x:Static local1:IconFont.Play}" BackgroundColor="Transparent"
Rotation="-90" FontSize="32" TextColor="White"
WidthRequest="55"
Margin="0,0,0,0"
Padding="0,0,0,0"
BindingContext="{TemplateBinding BindingContext}"
Command="{TemplateBinding Parent.BindingContext.MaximizeCommand}"
VerticalOptions="CenterAndExpand"
>
</Button>
</StackLayout>
</Frame>
</ControlTemplate>
<ControlTemplate x:Key="ComandaInvitadaPor">
<Frame BackgroundColor="{x:StaticResource Key=sColor}" CornerRadius="10" HasShadow="True" HeightRequest="32"
Padding="0" Margin="0">
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<Label FontSize="Large"
HorizontalOptions="StartAndExpand"
TextColor="White"
Margin="5,0,0,0"
BindingContext="{TemplateBinding BindingContext}"
Text="{TemplateBinding Parent.BindingContext.Comanda.Numero, StringFormat='Comanda {0}'}">
<Label.GestureRecognizers>
<TapGestureRecognizer NumberOfTapsRequired="2"
BindingContext="{TemplateBinding BindingContext}"
Command="{TemplateBinding Parent.BindingContext.MostrarComandasCommand}" >
</TapGestureRecognizer>
</Label.GestureRecognizers>
</Label>
<Switch IsToggled="{Binding MostrarDetallado}"
IsVisible="False"
OnColor="{StaticResource Key=sLight}"
ThumbColor="{StaticResource Key=sDark}"
></Switch>
<Button FontFamily="{StaticResource MaterialFontFamily}"
HorizontalOptions="End" x:Name="botonExpandir"
Text="{x:Static local1:IconFont.Play}" BackgroundColor="Transparent"
Rotation="-90" FontSize="32" TextColor="White"
WidthRequest="55"
Margin="0,0,0,0"
Padding="0,0,0,0"
Command="{TemplateBinding MaximizeCommand}"
VerticalOptions="CenterAndExpand"
>
</Button>
</StackLayout>
</Frame>
</ControlTemplate>
</ResourceDictionary>
</ContentView.Resources>
</ContentView>
The important stuff is this property of contentView, that defines a kind of ControlTemplate default value:
ControlTemplate="{StaticResource ComandaPropia}"
And pay attention on how the Data Binding is defined inside the ControlTemplates, using TemplatedBindings instead Bindings:
<Label FontSize="Large"
HorizontalOptions="StartAndExpand"
TextColor="White"
Margin="5,0,0,0"
BindingContext="{TemplateBinding BindingContext}"
Text="{TemplateBinding Parent.BindingContext.Comanda.Numero, StringFormat='Comanda {0}'}">
On the ContentView Code Behind you must create a BindableProperty to allow DataBinding between a property on View and a property on ViewModel (maybe it could be done with DataTriggers, but im's learning Xamaring and i want to practice with BindableProperties). That Property, will be responsible to select the ControlTemplate, pay attention to Method HandleTipoComandaPropertyChanged, its where we select the ControlTemplate on propertyChanged:
public partial class ComandaControlTemplate : ContentView
{
public static BindableProperty TipoComandaProperty = BindableProperty.Create(
propertyName: "TipoComanda",
returnType: typeof(Controls.TipoComandaEnum),
declaringType: typeof(ComandaControlTemplate),
defaultValue: Controls.TipoComandaEnum.Propia,
defaultBindingMode: BindingMode.TwoWay,
propertyChanged: HandleTipoComandaPropertyChanged);
private static void HandleTipoComandaPropertyChanged(BindableObject bindable, object oldValue, object newValue)
{
var targetView = (ComandaControlTemplate)bindable;
if (targetView != null)
{
if ((Controls.TipoComandaEnum)newValue != (Controls.TipoComandaEnum)oldValue)
{
if ((Controls.TipoComandaEnum)newValue== Controls.TipoComandaEnum.Propia)
targetView.ControlTemplate =(ControlTemplate)targetView.Resources["ComandaPropia"];
else if ((Controls.TipoComandaEnum)newValue == Controls.TipoComandaEnum.Invitada)
targetView.ControlTemplate = (ControlTemplate)targetView.Resources["ComandaInvitadaPor"];
else if ((Controls.TipoComandaEnum)newValue == Controls.TipoComandaEnum.Invitacion)
}
}
}
public Controls.TipoComandaEnum TipoComanda
{
get
{
return Controls.TipoComandaEnum)base.GetValue(TipoComandaProperty);
}
set
{
base.SetValue(TipoComandaProperty, value);
}
}
public ComandaControlTemplate()
{
InitializeComponent();
}
}
Finally, in your page, place your templated ContentView whenever you need and bind the BindableProperty we created in View to the property on ViewModel that will determine the ControlTemplate presented:
<views:ComandaControlTemplate TipoComanda="{Binding BindingContext.TipoComanda}"></views:ComandaControlTemplate>
Note that TipoComanda is the BindableProperty we created on templatedView, and it as an equivalent property on ViewModel.
Note: that's a general idea on how can we use ControlTemplates, it works, but maybe there are better ways to acomplish.

Related

How do I get the Maui ListView ContextMenu to bind to my viewmodel command

I have the following XAML
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
x:Class="MyApp.Pages.Locations.LocationsList"
xmlns:mvvm="clr-namespace:MvvmHelpers;assembly=MvvmHelpers"
xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui">
<ContentPage.ToolbarItems>
<ToolbarItem Text="Add" Command="{Binding AddCommand}" />
</ContentPage.ToolbarItems>
<ContentPage.Behaviors>
<toolkit:EventToCommandBehavior EventName="Appearing" Command="{Binding LoadCommand}" />
</ContentPage.Behaviors>
<ContentPage.Resources>
<ResourceDictionary>
<toolkit:SelectedItemEventArgsConverter x:Key="SelectedItemEventArgsConverter" />
</ResourceDictionary>
</ContentPage.Resources>
<ListView BackgroundColor="Transparent"
CachingStrategy="RecycleElement"
ItemsSource="{Binding Locations}"
SelectedItem="{Binding SelectedLocation, Mode=TwoWay}"
SeparatorVisibility="None"
HasUnevenRows="True">
<ListView.Behaviors>
<toolkit:EventToCommandBehavior
EventName="ItemSelected"
EventArgsConverter="{StaticResource SelectedItemEventArgsConverter}"
Command="{Binding SelectCommand}"/>
</ListView.Behaviors>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.ContextActions>
<MenuItem Text="Delete" IsDestructive="True"
Command="{Binding DeleteCommand}"
CommandParameter="{Binding .}" />
<MenuItem Text="Edit" Command="{Binding EditCommand}"
CommandParameter="{Binding .}" />
</ViewCell.ContextActions>
<Grid Padding="10">
<Frame>
<StackLayout Orientation="Horizontal">
<Image Source="map.png" WidthRequest="40" />
<StackLayout Orientation="Vertical" Padding="10,0,0,0">
<Label VerticalOptions="Center"
FontSize="Medium"
Text="{Binding Name}" />
<Label VerticalOptions="Center"
FontSize="Micro"
Text="This is where the address will go." />
</StackLayout>
</StackLayout>
</Frame>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage>
My ViewModel uses the Maui Community Toolkit and has 4 AsyncCommands defined
LoadCommand
SaveCommand
DeleteCommand
EditCommand
The LoadCommand and SaveCommand work perfectly but the DeleteCommand and EditCommand do not fire. I assume it's something to do with the commands being on the viewmodel and NOT on the item source model. How do I get it to trigger the AsyncCommands on the viewmodel?
Thanks
For this, you can check document Define MenuItem behavior with MVVM.
The MenuItem class supports the Model-View-ViewModel (MVVM) pattern through BindableProperty objects and the ICommand interface. The following XAML shows MenuItem instances bound to commands defined on a viewmodel:
<?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"
xmlns:viewmodels="clr-namespace:MenuItemDemos.ViewModels"
mc:Ignorable="d"
x:Class="MenuItemDemos.MenuItemXamlMvvmPage"
x:Name="myContentpage"
Padding="10"
Title="MenuItem XAML MVVM Demo"
>
<ContentPage.BindingContext>
<viewmodels:ListPageViewModel />
</ContentPage.BindingContext>
<StackLayout>
<Label Text="Reveal the context menu by right-clicking (UWP), long-pressing (Android), or swiping (iOS) an item in the following list." />
<Label Text="{Binding Message}"
TextColor="Red"
HorizontalOptions="CenterAndExpand"
VerticalOptions="Start" />
<ListView ItemsSource="{Binding Items}"
HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.ContextActions>
<MenuItem Text="Edit"
IconImageSource="icon.png"
Command="{Binding Source={x:Reference myContentpage}, Path=BindingContext.EditCommand}"
CommandParameter="{Binding .}"/>
<MenuItem Text="Delete"
Command="{Binding Source={x:Reference myContentpage}, Path=BindingContext.DeleteCommand}"
CommandParameter="{Binding .}"/>
</ViewCell.ContextActions>
<Label Text="{Binding .}" />
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage>
The viewmodel(ListPageViewModel.cs) contains the commands referenced in the XAML:
public class ListPageViewModel : INotifyPropertyChanged
{
...
public ICommand EditCommand => new Command<string>((string item) =>
{
Message = $"Edit command was called on: {item}";
});
public ICommand DeleteCommand => new Command<string>((string item) =>
{
Message = $"Delete command was called on: {item}";
});
}

Xamarin.Forms DataTemplateSelector not working for HeaderTemplate in CollectionView

I have declared some Datatemplates for my Collectionviews Header to use as an Template.
<ResourceDictionary>
<!--#region HeaderTemplates-->
<DataTemplate x:Key="translationHeaderTemplate">
<Frame x:Name="translationDropTarget" Margin="5">
<Label Style="{x:StaticResource boldLabelStyle}" Text="{Binding SolutionDisplay}" FontSize="Medium" HorizontalOptions="Center" HeightRequest="50" VerticalOptions="Center" x:Name="FrameLabel"></Label>
<Frame.GestureRecognizers>
<DropGestureRecognizer AllowDrop="True" DropCommand="{Binding DropOverCommand}">
</DropGestureRecognizer>
</Frame.GestureRecognizers>
</Frame>
</DataTemplate>
<DataTemplate x:Key="pictureHeaderTemplate">
<Frame x:Name="pictureDropTarget" Margin="5">
<Image Source="{Binding SolutionIconString}" HorizontalOptions="FillAndExpand" MinimumWidthRequest="50" HeightRequest="100" VerticalOptions="CenterAndExpand" x:Name="FrameImage"></Image>
<Frame.GestureRecognizers>
<DropGestureRecognizer AllowDrop="True" DropCommand="{Binding DropOverCommand}">
</DropGestureRecognizer>
</Frame.GestureRecognizers>
</Frame>
</DataTemplate>
<DataTemplate x:Key="ttsHeaderTemplate">
<Frame x:Name="ttsDropTarget" Margin="5">
<forms:AnimationView x:Name="XAnim" AutoPlay="true" VerticalOptions="CenterAndExpand" RepeatMode="Infinite" HorizontalOptions="CenterAndExpand" Animation="soundIcon.json"
Clicked="XAnim_Clicked" ></forms:AnimationView>
<Frame.GestureRecognizers>
<DropGestureRecognizer AllowDrop="True" DropCommand="{Binding DropOverCommand}">
</DropGestureRecognizer>
</Frame.GestureRecognizers>
</Frame>
</DataTemplate>
<!--#endregion-->
<DataTemplate x:Key="translationTemplate">
<Frame HasShadow="True" CornerRadius="15" VerticalOptions="Start" HeightRequest="70">
<StackLayout>
<Label
Text="{Binding DisplayString}"
Style="{x:StaticResource mediumlabelStyle}"
VerticalOptions="CenterAndExpand"
HorizontalOptions="Center"
FontSize="Small">
</Label>
</StackLayout>
<Frame.GestureRecognizers>
<DragGestureRecognizer
DragStartingCommand="{Binding Path=BindingContext.DragStartingCommand, Source={x:Reference ViewCollection}}"
DragStartingCommandParameter="{Binding .}"/>
</Frame.GestureRecognizers>
</Frame>
</DataTemplate>
<vokabelmodul:VocabularyViewTemplateSelector
x:Key="vocViewTemplateSelector"
TranslationTemplate="{StaticResource translationHeaderTemplate}"
PictureTemplate="{StaticResource pictureHeaderTemplate}"
TTSTemplate="{StaticResource ttsHeaderTemplate}"/>
</ResourceDictionary>
</ContentPage.Resources>
And I'm trying to consume it within my CollectionView with the templateselector :
<ContentPage.Content>
<AbsoluteLayout>
<StackLayout
AbsoluteLayout.LayoutBounds="0,0,1,1"
AbsoluteLayout.LayoutFlags="All">
<Frame>
<StackLayout>
<Label Style="{x:StaticResource labelStyle}" FontSize="Small" x:Name="TimerLabel" Text="{Binding Remaining}"></Label>
<ProgressBar x:Name="Progress" Progress="{Binding Progress}" ProgressColor="Blue"></ProgressBar>
</StackLayout>
</Frame>
<StackLayout x:Name="InnerStack">
<CollectionView
x:Name="ViewCollection"
ItemsSource="{Binding ViewObjects}"
VerticalOptions="Center"
Margin="5"
ItemTemplate="{StaticResource translationTemplate}"
HeaderTemplate="{StaticResource vocViewTemplateSelector}"
Header="{Binding .}"
>
<CollectionView.EmptyView>
<Label Text="No VocabularyItems!" Style="{x:StaticResource boldLabelStyle}"></Label>
</CollectionView.EmptyView>
<CollectionView.ItemsLayout>
<GridItemsLayout
Orientation="Vertical"
HorizontalItemSpacing="5"
VerticalItemSpacing="5"
Span="2"/>
</CollectionView.ItemsLayout>
</CollectionView>
</StackLayout>
</StackLayout>
</AbsoluteLayout>
</ContentPage.Content>
But when I run the Programm I'm always getting "System.InvalidOperationException: 'LoadTemplate should not be null'".
When I'm binding my HeaderTemplate directly like this:
HeaderTemplate="{StaticResource someHeaderTemplate}"
it works just fine.
I've added a log and breakpoint to my TemplateSelector Class but OnSelectTemplate doesn't even get called.
I've also used another Templateselector for my ItemTemplate and that one worked just fine.
Any Help would be appreciated.
In your xaml page, your DataTemplate tag does not add any data or styles, you need to add styles to each DataTemplate tag.
You have not bound the Header data of the CollectionView. You need to add Header="{Binding ViewObjects}" to your CollectionView tag.
This is my xaml code for your reference, I hope it can solve your problem:
<ContentPage.Resources>
<ResourceDictionary>
<DataTemplate x:Key="someHeaderTemplate">
<Label Text="aaa" BackgroundColor="LightPink"></Label>
</DataTemplate>
<DataTemplate x:Key="someOtherHeaderTemplate">
<Label Text="bbb" BackgroundColor="Green"></Label>
</DataTemplate>
<DataTemplate x:Key="someThirdHeaderTemplate">
<Label Text="ccc" BackgroundColor="Yellow"></Label>
</DataTemplate>
<nameSpace:templateSelector x:Key="templateSelector"
first="{StaticResource someHeaderTemplate}"
second="{StaticResource someOtherHeaderTemplate}"
third="{StaticResource someThirdHeaderTemplate}"/>
</ResourceDictionary>
</ContentPage.Resources>
<StackLayout>
<CollectionView
x:Name="ViewCollection"
Header="{Binding ViewObjects}"
ItemsSource="{Binding ViewObjects}"
VerticalOptions="Center"
Margin="5"
HeaderTemplate="{StaticResource templateSelector}">
<CollectionView.ItemTemplate>
<DataTemplate>
<Label></Label>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>

how to bind popup page button to viewmodel command property in xamarin forms

I'm new to MVVM and xamarin forms. I want to implement custom popup in mvvm and following is my code
My Viewmodel is:
public class PopupVM
{
public ICommand CancelCommand => new Command(async () =>{await
Application.Current.MainPage.Navigation.PopModalAsync();});
}
My Popuppage Xaml:`
<pages:PopupPage.Animation>
<animations:ScaleAnimation DurationIn="400"
DurationOut="300"
EasingIn="SinOut"
EasingOut="SinIn"
HasBackgroundAnimation="True"
PositionIn="Center"
PositionOut="Center"
ScaleIn="1.2"
ScaleOut="0.8" />
</pages:PopupPage.Animation>
<Grid Margin="12"
Padding="24"
BackgroundColor="White"
HorizontalOptions="Center"
VerticalOptions="Center">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<StackLayout Orientation="Vertical">
<Picker Grid.Row="0" Grid.Column="0">
<Picker.Items>
<x:String>....</x:String>
</Picker.Items>
</Picker>
<StackLayout Orientation="Vertical" Grid.Column="0" Grid.Row="1">
<StackLayout Orientation="Horizontal" >
<Label Text="A"/>**strong text**
<Picker>
<Picker.Items>
<x:String>Item1</x:String>
<x:String>Item2</x:String>
<x:String>Item3</x:String>
</Picker.Items>
</Picker>
</StackLayout>
<StackLayout Orientation="Horizontal" >
<Label Text="B"/>
<Picker>
<Picker.Items>
<x:String>....</x:String>
</Picker.Items>
</Picker>
</StackLayout>
<StackLayout Orientation="Horizontal" >
<Label Text="C"/>
<Picker>
<Picker.Items>
<x:String>....</x:String>
</Picker.Items>
</Picker>
</StackLayout>
</StackLayout>
<Button Text="Ok"/>
<Button Text="Cancel" x:Name="cnclBtn" />
</StackLayout>
</Grid>
My Popupxaml.cs page is:
public partial class MyPopupPage
{
static PopupVM vm;
public MyPopupPage ()
{
InitializeComponent ();
if (vm==null)
{ vm = new PopupVM(); }
BindingContext = vm;
}
}
I'm not getting where im making mistake. and also i need custom popup not the default display alert
<Button Text="Cancel" x:Name="cnclBtn" Command="{binding CancelCommand}" />
For more info with commands and binding go to this

Telerik Xamarin RadListView weird behavior

In Xamarin Forms (Portable) project when I place RadlistView in first page I got binded list which not render template in Android. I not checked other platforms. In this case the RadListView in second page is rendered ok.
First page with RadListView
Second page with RadListView
But if I replace radlistview in first page with Xamarin.Forms.ListView, it showed normal but in the second page RadListView showed without template.
The first page with Xamarin ListView
Second page with RadListView losted template
First page code below :
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Name="Page"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:telerikPrimitives="clr-namespace:Telerik.XamarinForms.Primitives;assembly=Telerik.XamarinForms.Primitives"
xmlns:telerikListView="clr-namespace:Telerik.XamarinForms.DataControls.ListView;assembly=Telerik.XamarinForms.DataControls"
xmlns:telerikDataControls="clr-namespace:Telerik.XamarinForms.DataControls;assembly=Telerik.XamarinForms.DataControls"
xmlns:viewmodels="clr-namespace:InRestoApp.ViewModels"
xmlns:behaviors="clr-namespace:InRestoApp.Behaviors"
xmlns:helpers="clr-namespace:InRestoApp.Helpers"
x:Class="InRestoApp.Views.HallsPage">
<ContentPage.Padding>
<OnPlatform x:TypeArguments="Thickness">
<On Platform="iOS" Value="10, 20, 10, 0" />
<On Platform="Android, UWP" Value="10, 0" />
</OnPlatform>
</ContentPage.Padding>
<ContentPage.Resources>
<helpers:InvertBoolConverter x:Key="invertBoolConverter"/>
</ContentPage.Resources>
<Grid HeightRequest="800">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<telerikDataControls:RadListView x:Name="ItemsListView" SelectionMode="Single" HeightRequest="800"
ItemsSource="{Binding Halls}"
ItemTapped="ListView_OnItemTapped">
<telerikDataControls:RadListView.LayoutDefinition>
<telerikListView:ListViewLinearLayout VerticalItemSpacing="0" />
</telerikDataControls:RadListView.LayoutDefinition>
<telerikDataControls:RadListView.ItemTemplate>
<DataTemplate>
<telerikListView:ListViewTemplateCell>
<telerikListView:ListViewTemplateCell.View>
<Frame CornerRadius="5" HasShadow="True" OutlineColor="#4488F6" Padding="10" Margin="10">
<StackLayout Orientation="Horizontal">
<Label Text="{Binding HallCode}" FontSize="Large" VerticalOptions="StartAndExpand" />
<Label Text="{Binding HallName}" FontSize="Medium" VerticalOptions="CenterAndExpand" />
</StackLayout>
</Frame>
</telerikListView:ListViewTemplateCell.View>
</telerikListView:ListViewTemplateCell>
</DataTemplate>
</telerikDataControls:RadListView.ItemTemplate>
</telerikDataControls:RadListView>
</Grid>
</ContentPage>
Second view XAML below (Used ContentView because it is openening as slide drawer)
<?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:flv="clr-namespace:DLToolkit.Forms.Controls;assembly=DLToolkit.Forms.Controls.FlowListView"
xmlns:telerikListView="clr-namespace:Telerik.XamarinForms.DataControls.ListView;assembly=Telerik.XamarinForms.DataControls"
xmlns:helpers="clr-namespace:InRestoApp.Helpers"
xmlns:telerikDataControls="clr-namespace:Telerik.XamarinForms.DataControls;assembly=Telerik.XamarinForms.DataControls"
xmlns:ffimageloading="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"
xmlns:telerikInput="clr-namespace:Telerik.XamarinForms.Input;assembly=Telerik.XamarinForms.Input"
x:Name="productView"
x:Class="InRestoApp.Views.ProductsView">
<ContentView.Resources>
<helpers:ImageBytesConverter x:Key="imageBytesConverter"/>
<helpers:TempConverter x:Key="tempConverter"/>
<helpers:ImageFileToImageSourceConverter x:Key="imageFileToImageSourceConverter"/>
</ContentView.Resources>
<ContentView.Content>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="4*"/>
<ColumnDefinition Width="6*"/>
</Grid.ColumnDefinitions>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Frame CornerRadius="2" HasShadow="True" OutlineColor="Aquamarine" Padding="10" Margin="2">
<Image x:Name="btnClear" Source="clear_icon.png" HeightRequest="50" WidthRequest="50" >
<Image.GestureRecognizers>
<TapGestureRecognizer Command="{Binding Path=BindingContext.ClearProductsFilterCommand, Source={x:Reference productView}}" CommandParameter="{Binding .}" />
</Image.GestureRecognizers>
</Image>
</Frame>
<telerikDataControls:RadListView x:Name="CategoriesListView" Grid.Row="1" SelectedItem="{Binding SelectedProductCategory, Mode=TwoWay}" SelectionMode="Single"
ItemsSource="{Binding ProductCategories}">
<telerikDataControls:RadListView.LayoutDefinition>
<telerikListView:ListViewLinearLayout VerticalItemSpacing="0" />
</telerikDataControls:RadListView.LayoutDefinition>
<!--<telerikDataControls:RadListView.ItemStyle>
<telerikListView:ListViewItemStyle BackgroundColor="Transparent" BorderLocation="None"/>
</telerikDataControls:RadListView.ItemStyle>-->
<telerikDataControls:RadListView.ItemTemplate>
<DataTemplate>
<telerikListView:ListViewTemplateCell>
<telerikListView:ListViewTemplateCell.View>
<Frame CornerRadius="10" HasShadow="True" OutlineColor="#4488F6" Padding="10" Margin="10" >
<StackLayout Orientation="Horizontal">
<StackLayout>
<ffimageloading:CachedImage HeightRequest="70" Aspect="AspectFill" WidthRequest="70" Margin="5"
DownsampleHeight="70" DownsampleUseDipUnits="false"
LoadingPlaceholder="image_loading.png" ErrorPlaceholder="image_error.png"
Source="{Binding FileName, Converter={StaticResource imageFileToImageSourceConverter}}"/>
<Label Text="{Binding ProductCategoryName}" FontSize="Medium" VerticalOptions="CenterAndExpand" />
</StackLayout>
</StackLayout>
</Frame>
</telerikListView:ListViewTemplateCell.View>
</telerikListView:ListViewTemplateCell>
</DataTemplate>
</telerikDataControls:RadListView.ItemTemplate>
</telerikDataControls:RadListView>
</Grid>
<telerikDataControls:RadListView x:Name="ProductsListView" Grid.Column="1" SelectedItem="{Binding SelectedProduct, Mode=TwoWay}" SelectionMode="Single"
ItemsSource="{Binding Products}">
<telerikDataControls:RadListView.LayoutDefinition>
<telerikListView:ListViewLinearLayout VerticalItemSpacing="0" />
</telerikDataControls:RadListView.LayoutDefinition>
<telerikDataControls:RadListView.ItemTemplate>
<DataTemplate>
<telerikListView:ListViewTemplateCell>
<telerikListView:ListViewTemplateCell.View>
<Frame CornerRadius="10" HasShadow="True" OutlineColor="#4488F6" Margin="5" HeightRequest="110" >
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="70"/>
<RowDefinition Height="20"/>
<RowDefinition Height="20"/>
</Grid.RowDefinitions>
<ffimageloading:CachedImage HeightRequest="70" Aspect="AspectFit" WidthRequest="70" Margin="2"
DownsampleHeight="50" DownsampleUseDipUnits="false"
LoadingPlaceholder="image_loading.png" ErrorPlaceholder="image_error.png"
Source="{Binding FileName, Converter={StaticResource imageFileToImageSourceConverter}}"/>
<Label Text="{Binding RestProductNameEntity.ProductName}" FontSize="Medium" VerticalOptions="CenterAndExpand" Grid.Row="1" />
<telerikInput:RadNumericInput Value="{Binding Quantity, Mode=TwoWay}" Grid.Row="2" HeightRequest="20" />
</Grid>
</Frame>
</telerikListView:ListViewTemplateCell.View>
</telerikListView:ListViewTemplateCell>
</DataTemplate>
</telerikDataControls:RadListView.ItemTemplate>
</telerikDataControls:RadListView>
</Grid>
</ContentView.Content>
</ContentView>
c# file not providing because it used web api from another project, also using dummy source has same effect. As source used
ObservableCollection
I forgot add that before issue I updated Telerik Xamarin platform. After clean solution, deleting bin and obj folders and rebild project it solved.

array list databind xaml windows 8 unsuccesss

Binding Data to Grid View finding it difficult
if (response.StatusCode == HttpStatusCode.OK)
{
List<dashboard1> variable1 = new List<dashboard1>();
var jsonString = await response.Content.ReadAsStringAsync();
dynamic arr = JsonParser.Parse(jsonString);
var items2 = arr[0].items;
foreach (var item3 in items2)
{
variable1.Add(item3.sectionName);
variable1.Add(item3.procedureName);
variable1.Add(item3.reportName);
variable1.Add(item3.templateName);
}
itemGridView.ItemsSource = variable1;
}
parsed json and stored it in list
now i don't know how to bind these values to User Interface please can u help me to continue and pass values to Grid view .
You have to bind properties of class dashboard1 with the UI controls. Suppose you are showing all the properties , in TextBlock then bind textbox's text property with property of class dashboard1.
So code will be like this.
<TextBlock Text={Binding sectionName} />
<GridView Grid.Row="2"
x:Name="itemGridView"
SelectionMode="Multiple"
SelectionChanged="itemGridView_SelectionChanged" >
<GridView.ItemTemplate >
<DataTemplate >
<Border BorderThickness="1" BorderBrush="#7b579b" Tapped="Border_Tapped_1" >
<Grid Name="tile" Background="{Binding SubjectTilebackGround}" Height="150" Width="150" Tapped="tile_Tapped_1" >
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock x:Name="hello2" Text="{Binding SubjectName}" Foreground="White" FontSize="15" Grid.Row="0" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="8" FontWeight="ExtraLight" Visibility="{Binding isTopSubjectTextVisible}"/>
<TextBlock Text="{Binding SubjectName}" Foreground="White" FontSize="15" Grid.Row="1" VerticalAlignment="Bottom" HorizontalAlignment="Left" Margin="8" FontWeight="ExtraLight" Visibility="{Binding isBottomSubjectTextVisible}" />
</Grid>
</Border>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal" Margin="98,0,0,0"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate >
<DataTemplate >
<Grid Margin="0,0,0,6" >
<Button
AutomationProperties.Name="Group Title"
Style="{StaticResource TextPrimaryButtonStyle}">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding CategoryName}" Margin="2" FontSize="30" Foreground="White" FontWeight="Light" />
<TextBlock Text="( 17 Apps )" Margin="10,2,2,2" FontSize="25" Foreground="White" FontWeight="ExtraLight" VerticalAlignment="Bottom" />
</StackPanel>
</Button>
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,80,0" MaximumRowsOrColumns="3" />
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</GridView.GroupStyle>
</GridView>
in this example i have added some more useful properties of gridview..and wherever i have used binding like this.
Background="{Binding SubjectTilebackGround}"
it means "SubjectTilebackGround" is a property present in the class of which objects you have made your list ..means in your case is is DASHBOARD1..so any properties available in your dashboard that you can bind them as i did. hope this will help.