Список XAML в стиле группы переключателей с заголовком

Question

У меня есть этот стиль:

<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>

Используется как это:

        <ListBox                     
            Grid.Column="2"
            Style="{StaticResource RadioButtonList}" 
            ItemsSource="{Binding ModosConsultaSaldos}" 
            DisplayMemberPath="Description"
            SelectedItem="{Binding ModoConsultaSaldos,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"/>

Показывает что-то вроде этого:

Но теперь я хочу добавить заголовок, используя тот же стиль,

Это возможно? Как?

Answer 1

Это можно сделать несколькими способами. Самый простой - просто прикрепить метку перед ListBox в XAML всякий раз, когда вы ее используете. Но если вы хотите обеспечить последовательный стиль, вам нужно что-то лучше, чем это.

Мы могли бы добавить свойства в ListBox, написав подкласс ListBox, который добавляет свойство Header (я собираюсь назвать его Header вместо Title, потому что именно так его будет называть встроенный элемент управления WPF). ).

Но чуть более гибкий вариант - записать свойство Header как присоединенное свойство. Мы также добавим HeaderTemplate присоединенное свойство, чтобы вы могли соответствующим образом стилизовать содержимое заголовка. Это обычная практика WPF в элементах управления с заголовками, такими как MenuItem или GroupBox. Эти элементы управления WPF также имеют свойства HeaderTemplateSelector и HeaderStringFormat; Я оставлю это в качестве упражнения для студента.

Во-первых, прикрепленные свойства: это все шаблоны, кроме названий и типов.

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 });
}

Теперь мы добавим их в шаблон:

...
<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>

И мы дадим вашему стилю еще один установщик, чтобы создать шаблон заголовка по умолчанию, который подчеркивает то, что вы имели на скриншоте:

        <Setter Property="local:ListBoxEx.HeaderTemplate">
            <Setter.Value>
                <DataTemplate>
                    <Label 
                        Content="{Binding}"
                        BorderBrush="Black"
                        BorderThickness="0,0,0,1"
                        HorizontalAlignment="Left"
                        />
                </DataTemplate>
            </Setter.Value>
        </Setter>

И мы используем это так:

    <ListBox
        Style="{StaticResource RadioButtonList}"
        ItemsSource="{Binding ModosConsultaSaldos}"
        local:ListBoxEx.Header="Saldos"
        ...
        />