Question

I have a TreeView with nodes, so when I click on one of the nodes I will be updating the ListBox with items bounded to an Observable Collection, which works fine. Next when I click another node in my tree view I will have to update the ListBox with different data(which is also an Obsv.Collection). Any Ideas on how to proceed with this?

<Resources>
    <DataTemplate x:Key="clipsource">
        <StackPanel>
            <Image Name="img" Width="125" Height="70" Margin="1,0" Source="{Binding Path=Path, Converter= {x:Static l:UriToThumbnailConverter.Instance}}"/>
            <TextBlock FlowDirection="LeftToRight" FontFamily="Arial" FontSize="12" Text="{Binding Path = DisplayClipName}"/>
        </StackPanel>
    </DataTemplate>
</Resources>
<Grid  Height="Auto" Grid.Column="2" VerticalAlignment="Stretch"  x:Name="RightPane_grid" Margin="2,0,0,0" KeyboardNavigation.DirectionalNavigation="None">
    <Grid.RowDefinitions>
        <RowDefinition Height="21.205"/>
        <RowDefinition  Height="*"/>
    </Grid.RowDefinitions>
    <Rectangle  Fill="#FF232323" Stroke="#FF000000" RadiusX="3" RadiusY="3" Margin="0,0,0,0" x:Name="Right_Pane_bkg" Grid.ColumnSpan="1" Grid.RowSpan="2" KeyboardNavigation.DirectionalNavigation="None"/>
    <ListBox Name="ListBox1" SelectionMode="Extended" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Auto" Grid.Row="0" Background="#FF3B3B3B"  Margin="2,25,2,2" ItemsSource="{Binding}" ItemTemplate="{StaticResource clipsource}">
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel />
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
        <ListBox.ItemContainerStyle>
            <Style TargetType="{x:Type ListBoxItem}">
                <Setter Property="IsSelected" Value="{Binding Path=IsSelected, Mode=TwoWay}"/>
            </Style>
        </ListBox.ItemContainerStyle>
    </ListBox>
</Grid>

Code Behind:

private void Handle_Click1(object sender, MouseButtonEventArgs e) // tree view Item
{
    ListBox1.DataContext = Clips Items;
    // Clips Items is an Obs v. Collection 
}

I have a another Obs v Collection Still Items which I have to bound it to the List box to show another view

Answer 1

You can try the following:

    <TreeView Name="MyTreeView">
        <TreeView.ItemContainerStyle>
            <Style TargetType="{x:Type TreeViewItem}">
                <Setter Property="Header" Value="{Binding Path=Name}"/>
                <Setter Property="ItemsSource" Value="{Binding Path=SomeItems}"/>
            </Style>
        </TreeView.ItemContainerStyle>
    </TreeView>

    <ListBox ItemsSource="{Binding ElementName=MyTreeView, Path=SelectedItem.SomeItems}">
        <ListBox.ItemContainerStyle>
            <Style TargetType="{x:Type ListBoxItem}">
                <Setter Property="Content" Value="{Binding Path=Name}"/>
            </Style>
        </ListBox.ItemContainerStyle>
    </ListBox>

The Binding will retrieve the items displayed in the ListBox from the SelectedItem in the TreeView using the Path SomeItems. This assumes the SelectedItem is something like this:

public class MyTreeViewItem
{

    public string Name { get; private set; }
    public ObservableCollection<MyTreeViewItem> SomeItems { get; private set; }

    public MyTreeViewItem(string name)
    {
        if (name == null)
            throw new ArgumentNullException("name");

        this.SomeItems = new ObservableCollection<MyTreeViewItem>();
        this.Name = name;
    }

}

When you select an item in the TreeView the children are displayed in the ListBox.

Edit:

To populate the TreeView use the following code:

        MyTreeViewItem a = new MyTreeViewItem("A");
        a.SomeItems.Add(new MyTreeViewItem("A1"));
        a.SomeItems.Add(new MyTreeViewItem("A2"));
        a.SomeItems.Add(new MyTreeViewItem("A3"));

        MyTreeViewItem b = new MyTreeViewItem("B");
        b.SomeItems.Add(new MyTreeViewItem("B1"));
        b.SomeItems.Add(new MyTreeViewItem("B2"));
        b.SomeItems.Add(new MyTreeViewItem("B3"));

        this.MyTreeView.ItemsSource = new MyTreeViewItem[] { a, b };