Change ListView GridLayout SpanCount
Environment
Product | Author |
---|---|
Telerik UI for .NET MAUI ListView | Dobrinka Yordanova |
Description
This article explains how to use the SpanCount
property of the RadListView GridLayoutDefinition with Binding.
Solution
SpanCount
is a bindable property, just the ListViewGridLayout does not receive the binding context of the ListView directly. You can explicitly set it like this:
<telerik:RadListView.LayoutDefinition>
<telerik:ListViewGridLayout Orientation="Horizontal"
SpanCount="{Binding BindingContext.SpanCountValue, Source={x:Reference listView}}"
HorizontalItemSpacing="15"
ItemLength="120"/>
</telerik:RadListView.LayoutDefinition>
Example
The example below shows how the SpanCount
can be updated according to another value changed from a NumericInput control.
1. Here is the deifnition of the controls in XAML:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="60" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<telerik:RadNumericInput Minimum="1"
Maximum="6"
Value="{Binding SpanCountValue, Mode=TwoWay}"
Step="1"/>
<telerik:RadListView x:Name="listView"
ItemsSource="{Binding Items}"
Grid.Row="1">
<telerik:RadListView.ItemTemplate>
<DataTemplate>
<telerik:ListViewTextCell Text="{Binding Name}"
TextColor="Black" DetailColor="Gray" />
</DataTemplate>
</telerik:RadListView.ItemTemplate>
<telerik:RadListView.LayoutDefinition>
<telerik:ListViewGridLayout Orientation="Horizontal"
SpanCount="{Binding BindingContext.SpanCountValue, Source={x:Reference listView}}"
HorizontalItemSpacing="15"
ItemLength="120"/>
</telerik:RadListView.LayoutDefinition>
</telerik:RadListView>
</Grid>
2. The ViewModel - implements property changed and the DataModel used:
public class ViewModel : NotifyPropertyChangedBase
{
private int span = 3;
public ViewModel()
{
this.Items = new ObservableCollection<Item>();
for (int i = 0; i < 40; i++)
{
var c = 200 - 10 * i;
this.Items.Add(new Item() { Name = "Item " + i, });
}
}
public int SpanCountValue
{
get => this.span;
set
{
if(this.span != value)
{
this.span = value;
OnPropertyChanged();
}
}
}
public ObservableCollection<Item> Items { get; set; }
}
public class Item
{
public string Name { get; set; }
}
3. Set the Bindingcontext
public partial class MainPage : ContentPage
{
ViewModel vm;
public MainPage()
{
InitializeComponent();
this.vm = new ViewModel();
this.BindingContext = vm;
}
}