locked
FlexLayout v CollectionView?? RRS feed

  • Question

  • User245203 posted

    FlexLayout is just a space and it will try to fit as many items on a row as possible. CollectionView you have to specify the number of columns (or rows) and it does the rest. FL "just works" with different sizes and orientations and CV doesn't. Let this be a lesson. I just spent the morning trying to replace a FL with a CV only to find it didn't really do the job. You specify 2 columns in portrait and it looks bad in landscape.

    Anyone else got round this?

    Tuesday, July 21, 2020 2:51 PM

All replies

  • User382871 posted

    You specify 2 columns in portrait and it looks bad in landscape. 1.To avoid this issue, you could create a TemplateSelector to choose a DataTemplate at runtime. It could help to customize the layout for the landscape to improve the appearance.

    ``` public class CustomDataTemplateSelector : DataTemplateSelector { public DataTemplate ValidTemplate { get; set; }

    public DataTemplate InvalidTemplate { get; set; }
    
    protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
    {
        return App.OrienationValue ? ValidTemplate : InvalidTemplate;
    }
    

    } Page.xaml.cs ... ...

    ``` 2.You could also set different items for the layout of the collectionView via setting binding for the Span. Then detect the page's OnSizeAllocated to get the current orientation and specify a value to the Span.

    ViewModel class ``` public class ViewModel : INotifyPropertyChanged { public ObservableCollection<Model> models { get; set; } public ViewModel() { models = new ObservableCollection<Model>(); //add the data }

    private int _value;
    public int _Value
    {
        get
        {
            return _value;
        }
        set
        {
            if (_value != value)
            {
                _value = value;
                NotifyPropertyChanged();
            }
        }
    }
    
    protected virtual void NotifyPropertyChanged([CallerMemberName] string propertyName = "")
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
    public event PropertyChangedEventHandler PropertyChanged;
    

    } Page.xaml

    <CollectionView.ItemTemplate>
        <DataTemplate >
            ...
        </DataTemplate>
    </CollectionView.ItemTemplate>
    

    Page.xaml.cs public partial class MainPage : ContentPage { public _ViewModel model; public MainPage() { InitializeComponent();

        model = new _ViewModel() { _Value = 2 };
    
        BindingContext = model;
    }
    
    protected override void OnSizeAllocated(double width, double height)
    {
        base.OnSizeAllocated(width, height);
    
        if (width > height) // landscape
        {
            //landscape
            model._Value = 3;
        }
        else
        {
            //portrait
            model._Value = 2;
        }
    }
    

    } ```

    In Android, we need to remove the relevant ConfigurationChanges code. This configuration will prevent the activity reloading the application. //[Activity(Label = "Selector.Droid", Icon = "@drawable/icon", Theme = "@style/MainTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)] [Activity(Label = "Selector.Droid", Icon = "@drawable/icon", Theme = "@style/MainTheme", MainLauncher = true)]

    !

    Wednesday, July 22, 2020 6:58 AM
  • User245203 posted

    @YelinZh said:

    @shaunpryszlak Hi, any updates? If the solution helps you to solve the issue, please accept it as the answer. It'll help others who face the similar problem. If you are facing some issues while implementing, try to post the particular error with the corresponding codes here.

    Thanks for your answer. I don't know if it worked as in the end I took the CollectionView out and went back to a FlexLayout. I think the CollectionView is more of a ListView replacement and that wasn't what I wanted. My mistake.

    I tried doing something with OnSizeAllocated and the Span property (from another post) but that didn't work and life is too short to waste time debugging it.

    Monday, July 27, 2020 2:10 PM
  • User382871 posted

    I think the CollectionView is more of a ListView replacement and that wasn't what I wanted. The ListView also supports to use TemplateSelector to select a dataTemplate.

    Tuesday, July 28, 2020 12:27 PM
  • User364173 posted

    Meanwhile, how to add grouped observable data collection in FlexLayout? We have IsGrouped property in CollectionView. Is there anything like that in FlexLayout?

    Thursday, November 12, 2020 11:37 AM