XAML Listbox Styled as radio button group with Title - wpf

Question

I have this style:
<Style x:Key="RadioButtonList" TargetType="{x:Type ListBox}">
<!-- ControlTemplate taken from MSDN http://msdn.microsoft.com/en-us/library/ms754242.aspx -->
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
<Setter Property="MinWidth" Value="120"/>
<Setter Property="MinHeight" Value="80"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBox">
<Border
Name="Border"
Background="Transparent"
BorderBrush="Transparent"
BorderThickness="0"
CornerRadius="2">
<ScrollViewer
Margin="0"
Focusable="false">
<StackPanel Margin="2" IsItemsHost="True" />
</ScrollViewer>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter TargetName="Border" Property="Background" Value="Transparent" />
<Setter TargetName="Border" Property="BorderBrush" Value="Transparent" />
</Trigger>
<Trigger Property="IsGrouping" Value="true">
<Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="ItemContainerStyle">
<Setter.Value>
<Style TargetType="{x:Type ListBoxItem}" >
<Setter Property="Margin" Value="2" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Border Name="theBorder" Background="Transparent">
<RadioButton Focusable="False"
IsHitTestVisible="False"
IsChecked="{TemplateBinding IsSelected}">
<ContentPresenter />
</RadioButton>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
</Style>
Used as this :
<ListBox
Grid.Column="2"
Style="{StaticResource RadioButtonList}"
ItemsSource="{Binding ModosConsultaSaldos}"
DisplayMemberPath="Description"
SelectedItem="{Binding ModoConsultaSaldos,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"/>
Shows something like this:
But now I want to add a Title using the same Style,
Is this posible? How ?

Answer 1

This could be done in a number of ways. The easiest is simply to stick a label in front of the ListBox in the XAML whenever you use it. But if you want to enforce a consistent style, you'll want something better than that.
We could add properties to ListBox by writing a subclass of ListBox that adds a Header property (I'm going to call it Header instead of Title because that's what a built-in WPF control would call it).
But a slightly more flexible option is to write the Header property as an attached property. We'll also throw in a HeaderTemplate attached property as well, so you can style the header content appropriately. This is common WPF practice in controls that have headers, such as MenuItem or GroupBox. Those WPF controls have HeaderTemplateSelector and HeaderStringFormat properties as well; I'll leave those as an exercise for the student.
First, the attached properties: This is all boilerplate except for the names and types.
public static class ListBoxEx
{
public static Object GetHeader(ListBox obj)
{
return (Object)obj.GetValue(HeaderProperty);
}
public static void SetHeader(ListBox obj, Object value)
{
obj.SetValue(HeaderProperty, value);
}
public static readonly DependencyProperty HeaderProperty =
DependencyProperty.RegisterAttached("Header", typeof(Object), typeof(ListBoxEx),
new FrameworkPropertyMetadata(null) { AffectsMeasure = true, AffectsParentMeasure = true });
public static Object GetHeaderTemplate(ListBox obj)
{
return (Object)obj.GetValue(HeaderTemplateProperty);
}
public static void SetHeaderTemplate(ListBox obj, Object value)
{
obj.SetValue(HeaderTemplateProperty, value);
}
public static readonly DependencyProperty HeaderTemplateProperty =
DependencyProperty.RegisterAttached("HeaderTemplate", typeof(Object), typeof(ListBoxEx),
new FrameworkPropertyMetadata(null) { AffectsMeasure = true, AffectsParentMeasure = true });
}
Now we'll add these to the Template:
...
<Setter.Value>
<ControlTemplate TargetType="ListBox">
<Border
Name="Border"
Background="Transparent"
BorderBrush="Transparent"
BorderThickness="0"
CornerRadius="2"
>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ContentControl
Content="{TemplateBinding local:ListBoxEx.Header}"
ContentTemplate="{TemplateBinding local:ListBoxEx.HeaderTemplate}"
/>
<ScrollViewer
Margin="0"
Focusable="false"
Grid.Row="1"
>
<StackPanel Margin="2" IsItemsHost="True" />
</ScrollViewer>
</Grid>
</Border>
And we'll give your Style another setter, to create a default header template that does the underlining you had in your screenshot:
<Setter Property="local:ListBoxEx.HeaderTemplate">
<Setter.Value>
<DataTemplate>
<Label
Content="{Binding}"
BorderBrush="Black"
BorderThickness="0,0,0,1"
HorizontalAlignment="Left"
/>
</DataTemplate>
</Setter.Value>
</Setter>
And we use it like this:
<ListBox
Style="{StaticResource RadioButtonList}"
ItemsSource="{Binding ModosConsultaSaldos}"
local:ListBoxEx.Header="Saldos"
...
/>