How to Bind a selected Item in a Listbox to a ItemsControl and ItemTemplate in WPF and C#
- by Scott
All,
LowDown: I am trying to create a Document Viewer in WPF.
The layout is this: Left side is a full list box. On the right side is a Collection or an Items control. Inside the items control will be a collection of the "selected documents" in the list box. So A user can select multiple items in the list box and for each new item they select, they can add the item to the collection on the right. I want the collection to look like a image gallery that shows up in Google/Bing Image searches. Make sense?
The problem I am having is I can't get the WPFPreviewer to bind correctly to the selected item in the list box under the itemscontrol.
Side Note: The WPFPreviewer is something Micorosft puts out that allows us to preview documents. Other previewers can be built for all types of documents, but im going basic here until I get this working right.
I have been successful in binding to the list box WITHOUT the items control here:
<Window.Resources>
<DataTemplate x:Key="listBoxTemplate">
<StackPanel Margin="3" >
<DockPanel >
<Image Source="{Binding IconURL}" Height="30"></Image>
<TextBlock Text=" " />
<TextBlock x:Name="Title" Text="{Binding Title}" FontWeight="Bold" />
<TextBlock x:Name="URL" Visibility="Collapsed" Text="{Binding Url}"/>
</DockPanel>
</StackPanel>
</DataTemplate>
</Window.Resources><Grid Background="Cyan">
<ListBox HorizontalAlignment="Left" ItemTemplate="{StaticResource listBoxTemplate}" Width="200" AllowDrop="True" x:Name="lbDocuments" ItemsSource="{Binding Path=DocumentElements,ElementName=winDocument}" DragEnter="documentListBox_DragEnter" />
<l:WPFPreviewHandler Content="{Binding ElementName=lbDocuments, Path=SelectedItem.Url}"/>
</Grid>
Though, once I add in the ItemsControl, I can't get it to work anymore:
<Window.Resources>
<DataTemplate x:Key="listBoxTemplate">
<StackPanel Margin="3" >
<DockPanel >
<Image Source="{Binding IconURL}" Height="30"></Image>
<TextBlock Text=" " />
<TextBlock x:Name="Title" Text="{Binding Title}" FontWeight="Bold" />
<TextBlock x:Name="URL" Visibility="Collapsed" Text="{Binding Url}"/>
</DockPanel>
</StackPanel>
</DataTemplate>
</Window.Resources>
<Grid>
<ListBox HorizontalAlignment="Left" ItemTemplate="{StaticResource listBoxTemplate}" Width="200" AllowDrop="True" x:Name="lbDocuments" ItemsSource="{Binding Path=DocumentElements,ElementName=winDocument}" DragEnter="documentListBox_DragEnter" />
<ItemsControl x:Name="DocumentViewer" ItemsSource="{Binding ElementName=lbDocuments, Path=SelectedItem.Url}" >
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid Background="Cyan">
<l:WPFPreviewHandler Content="{Binding Url}"/>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
Can someone please help me out with trying to bind to the ItemsControl if I select one or even multiple items in the listbox.
