CODEWITHSUNDEEP
c#.netxamarinxamarin.forms
nix
nix

Reputation: 2285

How to create a custom bindable View in Xamarin Forms?

Say, I want to have an ObservableCollection<SomeModel> to which will correspond a horizontal scrollable list of buttons. How can I do that?

Currently, I'm using the following code, but the problem is that it doesn't fit into MVVM model since, first of all, it lacks binding.

foreach (var item in result.Items)
{
    var button = new Button
    {
        FontSize = Device.GetNamedSize(NamedSize.Small, typeof(Button)),
        HeightRequest = 50,
        WidthRequest = 80,
        Text = item.Id,
    };

    _itemButtons.Add(button);

    var frame = new Frame
    {
        Content = button,
        Padding = new Thickness(0, 0, 0, 10)
    };

    button.Clicked += OnItemClicked;
    Device.BeginInvokeOnMainThread(() => buttonsStack.Children.Add(frame));
}

If list should have been vertical, I would certainly use a ListView, but since it shouldn't (and there is no "normal" way of making ListView horizontal, rotating it and then rotating every item in it feels just wrong), I can't.

I want to have several buttons aligned in a row (I obviously don't know their number in the beginning) like following:

enter image description here

When the user clicks on of the buttons, the rest of the buttons' opacities are set to 0.3 and they become less visible, thus creating the illusion that the button clicked is the selected option of some kind.

Upvotes: 2

Views: 129

Answers (1)

hvaughan3
hvaughan3

Reputation: 11105

With only seeing the code you posted, in my view, what you are doing seems perfectly fine since your code-behind page is only messing with UI elements in regards to your collection of Buttons. So there is no reason to move the collection of UI elements to a ViewModel.

I would suggest that when ever you want to add a button, do exactly like you are doing by calling Add() on the buttonStack children and when you want to remove a Button, get a reference to it and call Remove() on the buttonStack children.

Also, if you want horizontal scrolling action, just put your buttonStack in a ScrollView and set ScrollView.Orientation to ScrollOrientation.Horizontal.

If I missed the point of your questions, definitely let me know.

Upvotes: 2

Related Questions