Question

I am going through the Sams book “Teach Yourself WPF in 24 Hours”. At one point the authors show how you can bind a ListBox’s selected-item value to a property. I get that, it’s pretty straightforward. But when I try to create my own ListBox control with my own ListBoxItems, I can’t seem to get it to work.

The ListBox that works uses a system collection as its ItemsSource property:

<ListBox x:Name="FontList"
         DockPanel.Dock="Left"
         ItemsSource="{x:Static Fonts.SystemFontFamilies}"
         Width="160" />

The value selected from this ListBox is then used in a TextBlock as follows:

<TextBlock Text="Test" 
           FontFamily="{Binding ElementName=FontList, Path=SelectedItem}"
           TextWrapping="Wrap"
           Margin="0 0 0 4" />

Notice that the Path is set to SelectedItem.

Now, I wanted to set the FontSize using another ListBox that contains 3 different sizes. Here is what I did:

<ListBox x:Name="Size" >
    <ListBoxItem>10</ListBoxItem>
    <ListBoxItem>15</ListBoxItem>
    <ListBoxItem>20</ListBoxItem>
</ListBox>

And then I added a binding to the Size attribute of the TextBox as follows:

<TextBlock Text="Test" 
           FontFamily="{Binding ElementName=FontList, Path=SelectedItem}"
           Size="{Binding ElementName=Size, Path=SelectedItem}"
           TextWrapping="Wrap"
           Margin="0 0 0 4" />

The Size doesn’t change when I run the program. So I tried to add the binding I was using for Size to the Text attribute–in order to see its value:

<TextBlock Text="{Binding ElementName=Size, Path=SelectedItem}"" 
           FontFamily="{Binding ElementName=FontList, Path=SelectedItem}"
           Size="{Binding ElementName=Size, Path=SelectedItem}"
           TextWrapping="Wrap"
           Margin="0 0 0 4" />

I see that it is changing as I click the Size ListBox, but I also see that the SelectedItem is displaying as this (when I click the 15 entry):
System.Windows.Controls.ListBoxItem:15

My questions:
1) What is the actual value being returned by the Path called SelectedItem? Is it “System.Windows.Controls.ListBoxItem:15” or is it “15”? If it’s not 15, how can I specify a Path that returns just 15 and not System.Windows.Controls.ListBoxItem:15?

2)Why does the FontFamily SelectItem work? I realize that the FontList is coming from a System collection of font names, but it is unclear to me why the ListBox isn’t returning a collection of ListBoxItems as text. If my ListBox’s Path reference is returning a SelectedItem object of type ListBoxItem, then I would think I could use a Path of SelectedItem.Value or something like that–but it doesn’t work and there is no Intellisense to help me.

I want to get THIS example working because it will help clear-up some misunderstandings I have. Please don’t refactor the solution to get it to work some other way unless it’s entirely impossible for me to have a Path reference that will give me just the numeric portion of my Size ListBoxItem that is selected.

Answer 1

What is the actual value being returned by the Path called SelectedItem?

It is System.Windows.Controls.ListBoxItem:15 (you can read this as “ListBoxItem with content set to 15”), that’s why your binding does not work – it expects a numeric value, not ListBoxItem. You can specify Path as SelectedItem.Content to make this work. Also you can set SelectedValuePath of ListBox “Size” to “Content”, and bind to SelectedValue property instead of SelectedItem.

Solution 1:

<TextBlock Size="{Binding ElementName=Size, Path=SelectedItem.Content}" />

Solution 2:

<ListBox x:Name="Size" SelectedValuePath="Content" />
<TextBlock Size="{Binding ElementName=Size, Path=SelectedValue}" />

Why does the FontFamily SelectItem work?

Because that ListBox contains a font collection, not a collection of ListBoxItems (they are still created to represent each item in a collection though). You can achieve the same behavior with font sizes if you define collection of font sizes in code and bind ListBox’es ItemsSource property to that collection or define contents of your ListBox as a collection of System.Double values directly in XAML:

<ListBox x:Name="Size"
         xmlns:system="clr-namespace:System;assembly=mscorlib">
    <system:Double>10</system:Double>
    <system:Double>15</system:Double>
    <system:Double>20</system:Double>
</ListBox>