How to bind Image Button command from a DataTemplate Selector to a ViewModel?

Question

I am working with SyncFusion's TreeView. I have a TreeView with three separate DataTemplate/Custom View Cells. In my main XAML, I have the following tree view code below which binds to my DataTemplates.

SamplePage.xaml

<syncfusion:SfTreeView x:Name="treeView"
       QueryNodeSize="TreeView_QueryNodeSize"
       NodeSizeMode="Dynamic"
       AutoExpandMode="RootNodesExpanded"
       ChildPropertyName="SubFiles"
       ItemsSource="{Binding ImageNodeInfo}" Indentation="0" 
       ItemTemplate="{StaticResource TemplateSelector}">
</syncfusion:SfTreeView>

I am now trying to bind my command from one of my data templates (code below) to my view model connected to my page but I can't seem to connect my data bindings. Most examples online shows the data template on the same xaml page of the view / viewModel. However, my code is using a data template selector which gives me a harder route to bind.

SampleTemplate.xaml

<ViewCell.BindingContext>
    <local:SamplePage x:Key="SamplePage">
    </local:SamplePage>
</ViewCell.BindingContext>



   <ImageButton Aspect="AspectFill"
      Grid.Row="0" Grid.Column="3" 
      HorizontalOptions="End" 
      WidthRequest="90" HeightRequest="90" 
      Source="{xaml:ImageResource plus_Icon}"
      Command="{Binding Path=BindingContext.AddAsJobClickedCommand}, Source={x:Reference SamplePage}" 
      CommandParameter="{Binding treeView}" 
                                 />

Himanshu Dwivedi · Answer 1 · 2019-08-22T06:11:04.167

2

Try this, probably you are missing the x:Reference for the command:

<ImageButton Aspect="AspectFill"
             Grid.Row="0" Grid.Column="3" 
             HorizontalOptions="End" 
             WidthRequest="90" HeightRequest="90" 
             Source="{xaml:ImageResource plus_Icon}"
             Command="{Binding Path=BindingContext.AddAsJobClickedCommand, Source={x:Reference treeView}}"
             CommandParameter="{x:Reference treeView}"/>

Note: Here treeView is the x:Name of SfTreeView

Find Reference here

edited Aug 22 '19 at 06:11

answered Aug 22 '19 at 06:01

Himanshu Dwivedi

7,934
3
31
52

How do you reference tree view from a different .xaml file? I'm trying to handle the action in my SamplePageViewModel. I added code to reference the SamplePage like you mentioned but it still doesn't work =( – Mochi Aug 23 '19 at 19:26
In that case you should give x:name of the SampleTemplate's content page (Parent Content page) as x:reference – Himanshu Dwivedi Aug 24 '19 at 04:56

score 1 · Answer 2 · answered Aug 22 '19 at 04:13

You have probably wanted code from your list data templates to call commands from your view model directly and pass the current item to the view model to perform necessary actions, I suggest you can take a look:

https://doumer.me/xamarin-forms-listview-advanced-guide-with-mvvm/

1.We need to create properties in the list data templates. These properties will contain their’s parent view’s BindingContext and commands will be gotten from them.

2.Pass the Binding context from xaml to the data template

3.Receive the binding context in the data template, bind commands and pass the current item as the command’s parameter.

How to bind Image Button command from a DataTemplate Selector to a ViewModel?

2 Answers2