Setting the FontWeight of the Selected ListBoxItem to Bold

Bob Bartholomay has a sample here that requires custom ItemTemplates and transitions to change the FontWeight.

Here is an alternative solution using RelativeSource.

Here’s the basic idea:

In the ItemTemplate, we bind the FontWeight to the IsSelected state on its ancestor ListBoxItem. We can use a custom converter to convert from a boolean value to FontWeight.

However- for those who are still on Silverlight 4, due to the absence of FindAncestor construct in Silverlight 4 you need Beat Kiener’s version of FindAncestor.

The only other trick to note is do not use Segoe UI Light as your Font Family, as it doesn’t support other font weights.

Silverlight 5 version

<ListBox>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Grid>
                <TextBlock
                   FontWeight="{Binding RelativeSource={RelativeSource AncestorType=ListBoxItem},
                   Path=IsSelected,
                   Converter={StaticResource BooleanConverter}}"
                   Text="{Binding .}" />
            </Grid>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

Silverlight 4 version

<ListBox>
     <ListBox.ItemTemplate>
         <DataTemplate>
             <TextBlock Style="{StaticResource MenuItemTextStyle}" Text="{Binding SiteName, FallbackValue=Acme Site}">
                 <bind:BindingHelper.Binding>
                     <bind:RelativeSourceBinding AncestorType="System.Windows.Controls.ListBoxItem"
                       Converter="{StaticResource BooleanConverter}"
                       Path="IsSelected"
                       RelativeMode="FindAncestor"
                       TargetProperty="FontWeight" />
                 </bind:BindingHelper.Binding>
             </TextBlock>
         </DataTemplate>
     </ListBox.ItemTemplate>
 </ListBox>

Using ListBoxItem – Note: bind to RelativeSource.Self

<ListBox x:Name="listBox2"
                 Width="227"
                 Height="133"
                 Margin="12,39,0,0"
                 HorizontalAlignment="Left"
                 VerticalAlignment="Top">
            <ListBox.Resources>
                <Style TargetType="ListBoxItem">
                    <Setter Property="FontWeight" 
 Value="{Binding 
   RelativeSource={RelativeSource Self}, 
   Path=IsSelected, 
   Converter={StaticResource BooleanConverter}}" />
                </Style>
            </ListBox.Resources>
            <ListBoxItem>Anna</ListBoxItem>
            <ListBoxItem>Beatrice</ListBoxItem>
            <ListBoxItem>Christine</ListBoxItem>
            <ListBoxItem>Donna</ListBoxItem>
            <ListBoxItem>Esther</ListBoxItem>
            <ListBoxItem>Frances</ListBoxItem>
</ListBox>

Here’s my implementation of BooleanConverter

public class BooleanConverter: IValueConverter
    {

        object IValueConverter.Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            if (targetType.Equals(typeof(Visibility)))
            {
                return ConvertVisibility((bool)value, parameter, culture);
            }
            else if (targetType.Equals(typeof(FontWeight)))
            {
                return ConvertFontWeight((bool)value, parameter, culture);
            }
            else
            {
                return null;
            }
        }

        object IValueConverter.ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }

        Visibility ConvertVisibility(bool value, object parameter, System.Globalization.CultureInfo culture)
        {
            return value ? Visibility.Visible : Visibility.Collapsed;
        }

        object ConvertFontWeight(bool value, object parameter, System.Globalization.CultureInfo culture)
        {
            return value ? FontWeights.Bold : FontWeights.Normal;
        }
    }

Demo