How to bind the contents of a Button to the contents of a selected item in a listbox.

Question

Hey everyone I'm trying to make a custom combobox using Actipro's Popup Button and the items in the popup box basically a listbox. I want to do this using just wpf binding I'm sure there is a way to do this without using c# code in the background.

Basically I want the Button to display the information stored within the currently selected item inside the listbox. I know it's something simple I'm just not getting. 

<ribbon:PopupButton x:Name="pList" Margin="25,5,10,0" DataContext="{Binding Source={StaticResource PrinterListData}}"  StaysOpenOnClick="True" VariantSize="Large" Template="{StaticResource PopupButtonLargeTemplate}" FontSize="11">                                                   
                                                        <StackPanel>
                                                        <ribbon:Menu x:Name="pListMenu" Background="White" ItemsSource="{Binding}" >
                                                                <ribbon:Menu.ItemTemplate >
                                                                    <DataTemplate>
                                                                        <ribbon:Button x:Name="pListItem" Label="{Binding Path=PrinterName, Mode=TwoWay}" MenuItemDescription="{Binding Path=PrinterStatus, Mode=TwoWay}" ImageSourceLarge="{Binding Path=PrinterIcon, Mode=TwoWay}" Template="{StaticResource ButtonMenuItemLargeTemplate}" />
                                                                    </DataTemplate>
                                                                </ribbon:Menu.ItemTemplate>                                                                
                                                            </ribbon:Menu>
                                                            <ribbon:Separator />
                                                            <ribbon:Menu>
                                                                <ribbon:Button Label="Add Printer..."  />
                                                                <ribbon:Button Label="Print to File" />
                                                            </ribbon:Menu>
                                                        </StackPanel>                                                        
                                                  
                                                </ribbon:PopupButton>

PrinterListData is a collection containing the printers name, status, and icon representation. So this is the datasource I want to bind to.

Answer 1

I'd try to bind both controls to the same source, and then set ListBox IsSynchronizedWithCurrentItem="True".

Copied from a similar scenario:

...
<ListBox ItemsSource="{Binding}" IsSynchronizedWithCurrentItem="True" DisplayMemberPath="Something"/>
...
<Button Content="{Binding Something}"/>
...

hth

-Stefan

Answer 2

Hello Troy.

If you have multiple properties displayed in your list, then it would probably be best to bind the button's DataContext to the selectedItem and specify the property in the Content binding.

Like so...

	<Window.Resources>
		<DataTemplate x:Key="ItemTemplate">
			<StackPanel>
				<TextBlock Text="{Binding Property1}"/>
				<CheckBox IsChecked="{Binding Property2}"/>
			</StackPanel>
		</DataTemplate>
	</Window.Resources>
	<Grid x:Name="LayoutRoot" DataContext="{Binding Source={StaticResource SampleDataSource}}">
		<ListBox x:Name="listBox" HorizontalAlignment="Left" Width="207" Margin="0,0,0,8" ItemTemplate="{DynamicResource ItemTemplate}" ItemsSource="{Binding Collection}"/>
		<Button Content="{Binding Property1}" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="236,8,0,0" DataContext="{Binding SelectedItem, ElementName=listBox}"/>
	</Grid>

Hope you get it worked out quickly and easily.

~Christine

---

My Gallery