4

I have a ContentPage with two ContentViews on it and i want to set the binding context for each of them each to their own respective ViewModel (this is my preferred soultion over one massive ViewModel for them combined)

MainPage

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="MVVMFramework.VVMs.Main.MainPage"
             xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:MVVMFramework"
             xmlns:nav="clr-namespace:MVVMFramework.Navigation.NavigationHeader"
             xmlns:vm="clr-namespace:MVVMFramework.VVMs.Main">
  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition Height="20" />
      <RowDefinition Height="200" />
    </Grid.RowDefinitions>

    //ContentView For Header
    <ContentView Grid.Row="0"
                 HorizontalOptions="Start"
                 VerticalOptions="Start">
Content="{Binding NavHeader}"
      <!--<ContentView.BindingContext>
        <nav:NavigationHeaderViewModel />
      </ContentView.BindingContext>-->
    </ContentView>

    //ContentView For Body of the app
    <ContentView Grid.Row="1"
                 Content="{Binding DisplayedView}"
                 HorizontalOptions="Center"
                 VerticalOptions="Center">
      <!--<ContentView.BindingContext>
        <vm:MainPageViewModel />
      </ContentView.BindingContext>-->
    </ContentView>

  </Grid>


</ContentPage>

When I uncomment both bindingcontext attributes the App compiles, and starts to run and then crashes when loading the MainPage.

Am i not implementing this correctly ?, is there another way to do it ?

Brandon Minnick
  • 13,342
  • 15
  • 65
  • 123
Jungle_Jon
  • 57
  • 1
  • 7

1 Answers1

17

Answer

You can specify the source for each view's binding using its BindingContext property like so:

BindingContext="{Binding Source = {Your Binding Source}}"

Sample App

Here's a sample app that shows how to reference multiple view models from the same ContentPage: https://github.com/brminnick/MultipleViewModelSample/

Code

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="MVVMFramework.VVMs.Main.MainPage"
             xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:MVVMFramework"
             xmlns:nav="clr-namespace:MVVMFramework.Navigation.NavigationHeader"
             xmlns:vm="clr-namespace:MVVMFramework.VVMs.Main">

    <Grid>
    <Grid.RowDefinitions>
      <RowDefinition Height="20" />
      <RowDefinition Height="200" />
    </Grid.RowDefinitions>


    <ContentView 
        Grid.Row="0"
        Content="{Binding NavHeader}"
        HorizontalOptions="Start"
        VerticalOptions="Start"
        BindingContext="{Binding Source = {nav:NavigationHeaderViewModel}}"/>

    <ContentView 
        Grid.Row="1"
        Content="{Binding DisplayedView}"
        HorizontalOptions="Center"
        VerticalOptions="Center"
        BindingContext="{Binding Source = {vm:MainPageViewModel}}"/>

  </Grid>

</ContentPage>
Community
  • 1
  • 1
Brandon Minnick
  • 13,342
  • 15
  • 65
  • 123
  • Thank you, how do i accept your answer as the correct one ? – Jungle_Jon May 16 '18 at 09:02
  • You’re welcome @Jungle_Jon! Hover the mouse near my answer’s score and a check mark will appear. Once you see the check mark, click it, and it will mark the answer as accepted. After you’ve accepted the answer, click on the up arrow next to the score to upvote it. This helps future developers with the same question to quickly find the correct answer! – Brandon Minnick May 16 '18 at 13:20
  • I did up vote your comment but my reputation is sadly less than 15.what would be the syntaxs for setting BindingContext in the Xaml Page header? ( where the x:class and xml name spaces defined) – Jungle_Jon May 16 '18 at 13:42
  • Hey @Jungle_Jon! Yea, you need at least 15 points to upvote an answer which is kind of silly. – Brandon Minnick May 16 '18 at 13:46
  • For the other binding context question, open a new question and send me the link! We’ll answer the question there to help out fellow devs who have a similar question. – Brandon Minnick May 16 '18 at 13:47
  • Ok, will do now. – Jungle_Jon May 16 '18 at 13:50
  • Can't PM / Chat so here: https://stackoverflow.com/questions/50373015/how-to-set-page-wide-bindingcontext-in-a-xaml-page-header – Jungle_Jon May 16 '18 at 14:09
  • Type vm:viewmodel1 is used like a markup extension but does not derive from markupextension. Any clue what causes that? – Gertjan Brouwer Apr 14 '21 at 14:14