CODEWITHSUNDEEP
c#xamlxamarinxamarin.formsxamarin.android
Masha0307
Masha0307

Reputation: 57

How to make few columns in Listview?

 <ListView x:Name="listview" ItemsSource="{Binding MotorType}"  SelectionMode="None" Margin="0" HeightRequest="220">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <ViewCell>
                                <StackLayout Orientation="Horizontal">
                                    <CheckBox HorizontalOptions="Start" Color="Black" CheckedChanged="CheckBox_CheckedChanged"
                                    IsChecked="{Binding IsSelected}"
                                    />
                                    <Label Text="{Binding Name}" TextColor="Gray"></Label>
                                </StackLayout>
                            </ViewCell>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>

I have listview,please say how to make few columns(I do not to use collectionview)

I have this:

enter image description here

I want this:

enter image description here

Upvotes: 0

Views: 73

Answers (2)

Lucas Zhang
Lucas Zhang

Reputation: 18861

The ListView doesn't support tile view at the moment. Why don't you use CollectionView ? If you do not want to use it , you can install the plugin FlowListView from nuget .

<flv:FlowListView FlowColumnCount="2" FlowItemsSource="{Binding xxx}" >

    <flv:FlowListView.FlowColumnTemplate>
        <DataTemplate>

           //...

        </DataTemplate>
    </flv:FlowListView.FlowColumnTemplate>

</flv:FlowListView>

Upvotes: 3

Visual Sharp
Visual Sharp

Reputation: 3986

You can create an ExtendedFlexLayout to bind your MotorType ItemSource to it

   public class ExtendedFlexLayout : FlexLayout
{
    public static readonly BindableProperty ItemsSourceProperty = BindableProperty.Create(nameof(ItemsSource), typeof(IEnumerable), typeof(ExtendedFlexLayout), propertyChanged: OnItemsSourceChanged);
    public static readonly BindableProperty ItemTemplateProperty = BindableProperty.Create(nameof(ItemTemplate), typeof(DataTemplate), typeof(ExtendedFlexLayout));

    public IEnumerable ItemsSource
    {
        get { return (IEnumerable)GetValue(ItemsSourceProperty); }
        set { SetValue(ItemsSourceProperty, value); }
    }

    public DataTemplate ItemTemplate
    {
        get { return (DataTemplate)GetValue(ItemTemplateProperty); }
        set { SetValue(ItemTemplateProperty, value); }
    }

    static void OnItemsSourceChanged(BindableObject bindable, object oldVal, object newVal)
    {
        IEnumerable newValue = newVal as IEnumerable;
        var layout = (ExtendedFlexLayout)bindable;

        layout.Children.Clear();
        if (newValue != null)
        {
            foreach (var item in newValue)
            {
                layout.Children.Add(layout.CreateChildView(item));
            }
        }
    }

    View CreateChildView(object item)
    {
        ItemTemplate.SetValue(BindableObject.BindingContextProperty, item);
        return (View)ItemTemplate.CreateContent();
    }
}

Code credit & more details from David Britch's blog

Then in the DataTemplate of the ExtendedFlexLayout, set the FlexLayout.Basis=33%, so that the Flexlayout knows to split your items in 3 columns

 <StackLayout Orientation="Horizontal" FlexLayout.Basis="33%">
      <CheckBox HorizontalOptions="Start" Color="Black" CheckedChanged="CheckBox_CheckedChanged" IsChecked="{Binding IsSelected}"/>
      <Label Text="{Binding Name}" TextColor="Gray"></Label>
 </StackLayout>

You also don't need the ViewCell in the ExtendedFlexlayout.

Upvotes: 2

Related Questions