Bind an Observable Collection without a ListView

LillvikLillvik SEMember

I have an ObservableCollection of ButtonViewModels with properties that I want to bind to the properties of Buttons that are created based on the ButtonViewModels and placed in a grid.
But the BindingContext on the Page containing the Grid of Buttons is set to the PageViewModel that contains the ObservableCollection.
Is this possible?

Best Answers


  • AndrewMobileAndrewMobile ✭✭✭✭ USMember ✭✭✭✭

    not sure I understand what's the issue.
    what you're asking I think is if you could bind a collection of items to buttons in a Grid.
    is this what you're asking?

  • LillvikLillvik SEMember

    The ViewModel for each Button has a BackgroundColor property that I want to bind to respective button. The Grid of buttons is dynamically created based on the number of buttons.

  • AndrewMobileAndrewMobile ✭✭✭✭ USMember ✭✭✭✭

    are you already creating the buttons in the Grid based on the items from the view-model?

  • LillvikLillvik SEMember

    Yes. I'm doing that in code.

    var predefinedDeliveryTimes = new Grid
        ColumnDefinitions = new ColumnDefinitionCollection
        new ColumnDefinition {Width = new GridLength(1, GridUnitType.Star)},
        new ColumnDefinition {Width = new GridLength(1, GridUnitType.Star)},
        new ColumnDefinition {Width = new GridLength(1, GridUnitType.Star)}
    for (int index = 0; index < model.PredefinedDeliveryTimeSpans.Count; index++)
        var span = model.PredefinedDeliveryTimeSpans[index];
        var button = new Button { Text = span.ButtonText, BackgroundColor = span.ButtonBackgroundColor, Command = span.Command };
        button.SetBinding(BackgroundColorProperty, ???);
        predefinedDeliveryTimes.Children.Add(button, index == 0 ? 0 : index % 3, index == 0 ? 0 : index / 3);
  • AndrewMobileAndrewMobile ✭✭✭✭ USMember ✭✭✭✭
    edited June 2015

    Now I see what you mean.
    Here's how you set binding by code

           button.SetBinding<YourViewModel> (VisualElement.BackgroundColorProperty, vm => vm.ButtonBackgroundColor);
  • LillvikLillvik SEMember

    Thanks @adamkemp
    Completly missed the BindingContext when I looked at the button :blush:
    Here's the code

    var button = new Button {Text = span.ButtonText, BackgroundColor = span.ButtonBackgroundColor, Command = span.Command, BindingContext = span};
    button.SetBinding(BackgroundColorProperty, (PredefinedDeliveryViewModel binding)=> binding.ButtonBackgroundColor);
  • adamkempadamkemp mod USInsider, Developer Group Leader mod

    You should be able to set all those properties other than BindingContext using bindings. That way they can respond to changes.

  • AndrewMobileAndrewMobile ✭✭✭✭ USMember ✭✭✭✭
    edited June 2015

    if instead of a button you are going to have a more complicated UI, you could use a DataTemplate

    <DataTemplate x:Key="MyItemTemplate">
         <Button BackgroundColor="{Binding ButtonBackgroundColor}"
                       Text="{Binding ButtonText}"
                        Command="{Binding Command}"/>

    you can then reference it like

    View view = (View)(App.Resources["MyItemTemplate"] as DataTemplate).LoadContent();
    view.SetBindingContext = span;
    grid.Children.Add(view, row, column);

    this way, you don't need to create and set all the bindings by code

Sign In or Register to comment.