TreeView SelectedItemChanged

Jan 24, 2011 at 7:48 PM

Hi, I'm using a treeview control to create a navigation menu, I'd added the menu options using the designer by hand (I mean in the item options), and I want to control the the selected option to redirect to a specific view. The problem is that I have a confussion about the method I need in the viewmodel to receive the parameters of the treeview selected option, and the parameter i need to send in the view ($eventArgs, $dataContext, $source). I'm using a trigger to associate the treeview with an event, but I'm not sure what parameter I have to set in the xaml and to get in the viewmodel to know which option I've selected. The code I'm using actually is:

 

TreeView.xaml

<sdk:TreeView Height="302" HorizontalAlignment="Left" Margin="58,121,0,0" Name="treeView1" VerticalAlignment="Top" Width="215">
            
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="SelectedItemChanged">
                    <cal:ActionMessage MethodName="SelectedItem">  

                    </cal:ActionMessage>
                </i:EventTrigger>
            </i:Interaction.Triggers>
            
            <sdk:TreeViewItem Header="Header 1">
                <sdk:TreeViewItem Header="SubItem1" />
                <sdk:TreeViewItem Header="SubItem2" />
            </sdk:TreeViewItem>
        </sdk:TreeView>


TreeViewModel.cs

//What I have to receive in this function and use in the view
//$eventArgs, $dataContext, $source ??

        public void SelectedItem()
        {
 
        }

Coordinator
Jan 24, 2011 at 10:59 PM

Try this: 

<cal:Parameter Value="$this.SelectedItem" />

That assumes that TreeView has a SelectedItem property, which I can't remember if it does...If it doesn't you can use $eventArgs and pull the info out of that.

Jan 24, 2011 at 11:23 PM

Thanks for your reply, but I'm not sure about what parameters I've to receive in the viewmodel if I use a $eventArgs in the view for the selected item, it will work with a

        public void SelectedItem(EventArgs e)
{
//TODO: Code here
}

in the ViewModel?

Coordinator
Jan 24, 2011 at 11:38 PM

Yes, that will work.

Jan 25, 2011 at 1:19 PM

Hi, I've a problem with the solution you propose, if I use <cal:Parameter Value="$this.SelectedItem" /> the value sended to the viewModel is "$this.SelectedItem" which don't give me info about the selected item, and if I use $eventArgs by the code:

<sdk:TreeView Height="302" HorizontalAlignment="Left" Margin="58,121,0,0" Name="treeView1" VerticalAlignment="Top" Width="215">
           
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="SelectedItemChanged">
                    <cal:ActionMessage MethodName="SelectedItem($eventArgs)">
                    </cal:ActionMessage>
                </i:EventTrigger>
            </i:Interaction.Triggers>
           
            <sdk:TreeViewItem Header="Header 1">
                <sdk:TreeViewItem Header="SubItem1" Tag="1" x:Uid="1" x:Name="name1"/>
                <sdk:TreeViewItem Header="SubItem2" Tag="2" x:Uid="2" x:Name="name2" />
            </sdk:TreeViewItem>
        </sdk:TreeView>

 

The method in the Viewmodel:

        public void SelectedItem(EventArgs e)
{
//TODO: Code here
}

doesn't seem to be finded, and the view redirect to a blank page, there is some additional property I've to add to bind to the method in the ViewModel?
Jan 25, 2011 at 1:31 PM
Edited Jan 25, 2011 at 1:31 PM

Have you tried using Message.Attach attached property directly?

 
<sdk:TreeView Height="302"
              HorizontalAlignment="Left"
              Margin="58,121,0,0" Name="treeView1"
              VerticalAlignment="Top"
              Width="215"
              cal:Message.Attach="[Event SelectedItemChanged] = [Action SelectedItem($eventArgs)]">
    <sdk:TreeViewItem Header="Header 1">
        <sdk:TreeViewItem Header="SubItem1" />
        <sdk:TreeViewItem Header="SubItem2" />
    </sdk:TreeViewItem>
</sdk:TreeView>

I could be wrong, but the $this parameter is processed only if using the 'compact' syntax. If you are using the extended one, you can use a Binding directly.

<sdk:TreeView Height="302"
              HorizontalAlignment="Left"
              Margin="58,121,0,0"
              x:Name="treeView1"
              VerticalAlignment="Top"
              Width="215">
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="SelectedItemChanged">
            <cal:ActionMessage MethodName="SelectedItem">
                <cal:Parameter Value="{Binding Path=SelectedItem, ElementName=treeView1}" />
            </cal:ActionMessage>
        </i:EventTrigger>
    </i:Interaction.Triggers>
    <sdk:TreeViewItem Header="Header 1">
        <sdk:TreeViewItem Header="SubItem1" />
        <sdk:TreeViewItem Header="SubItem2" />
    </sdk:TreeViewItem>
</sdk:TreeView>

 

Coordinator
Jan 25, 2011 at 2:21 PM

Oops! Good catch. That is correct.