Получение разделителя для заполнения оставшегося пространства

Question

Я уверен, что это очень просто, но я не могу понять это.

У меня есть ListBox для отображения элементов, и они отображаются с помощью DataTemplate. Теперь я хочу сгруппировать эти элементы, поэтому добавила группу на основе свойства производителя. Это сделано в коде позади.

ICollectionView view = CollectionViewSource.GetDefaultView(Items);
PropertyGroupDescription groups = new PropertyGroupDescription("Manufacturer");
view.GroupDescriptions.Add(groups);

Я хотел, чтобы каждая группа была в экспандере, чтобы их можно было скрыть. Я получил эту работу, глядя на GroupTemplates на MSDN. Это включает в себя наличие расширителя, текстового блока, а затем разделителя для исключения дополнительного пространства, как в Windows Vista / 7 Groups. Как ниже.

Проблема в том, что я не могу заставить разделитель правильно заполнить оставшееся пространство. Если я использую значение MinWidth, все мои расширители имеют одинаковую ширину. Если я использую {binding ActualWidth, ElementName = MyListBox}, то разделитель слишком широкий, и его ширина равна элементу управления, в котором он находится. Таким образом, он устанавливает полосы прокрутки, чтобы быть видимым (см. Скриншот ниже). Если я оставлю ширину пустой, то разделитель вообще не рисуется.

У меня такое чувство, что панель стека должна была расширить разделитель, чтобы использовать оставшееся пространство, но это не так. Итак, я попробовал DockPanel, как в XamlCode ниже, но это также не удается. У меня есть несколько других проблем с получением элементов управления, чтобы заполнить оставшееся пространство, используя подходящую ширину, поэтому, если вы можете помочь мне решить эту проблему, было бы здорово.

Моя текущая разметка WPF Xaml. Вам нужно будет добавить элементы, чтобы это отображало что-то.

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">
<ScrollViewer VerticalScrollBarVisibility="Auto">
    <StackPanel x:Name="myStackPanel">
        <ListBox x:Name="MyListBox">
            <ListBox.GroupStyle>
                <GroupStyle>
                    <GroupStyle.ContainerStyle>
                        <Style TargetType="{x:Type GroupItem}">
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="{x:Type GroupItem}">
                                        <Expander IsExpanded="True">
                                            <Expander.Header>
                                                <DockPanel HorizontalAlignment="Stretch" 
                                                            VerticalAlignment="Stretch" 
                                                            Height="Auto" 
                                                            Width="{Binding ActualWidth, ElementName=MyListBox}"
                                                            Margin="10">
                                                    <TextBlock DockPanel.Dock="Left" Margin="0" FontSize="14" FontWeight="Bold" Foreground="Black" Text="{Binding Path=Name}"/>
                                                    <Separator DockPanel.Dock="Right" Margin="4,0,4,0"></Separator>
                                                </DockPanel>
                                            </Expander.Header>
                                            <ItemsPresenter Margin="5,0,0,0" />
                                        </Expander>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </GroupStyle.ContainerStyle>
                </GroupStyle>
            </ListBox.GroupStyle>
            <ListBox.ItemTemplate>
                <DataTemplate>
                   <!-- Data Template Here -->
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </StackPanel>
</ScrollViewer>

Answer 1

Это на самом деле не тривиально, шаблон элемента управления Expander состоит из ToggleButton в качестве заголовка и ContentPresenter для содержимого. Проблема в том, что сам ToggleButton имеет специальный стиль и шаблон, который содержит стрелку, жестко запрограммированную для выравнивания, по умолчанию она выглядит примерно так:

<Style x:Key="ExpanderDownHeaderStyle"
       TargetType="{x:Type ToggleButton}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ToggleButton}">
                <Border Padding="{TemplateBinding Padding}">
                    <Grid Background="Transparent"
                          SnapsToDevicePixels="False">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="19"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <!-- ... -->

                        <!-- The HorizontalAlignment needs to be set to stretch here -->
                        <ContentPresenter Grid.Column="1"
                                          Margin="4,0,0,0"

                                          HorizontalAlignment="Left"

                                          VerticalAlignment="Center"
                                          SnapsToDevicePixels="True"
                                          RecognizesAccessKey="True"/>
                    </Grid>
                </Border>
                <ControlTemplate.Triggers>
                   <!-- ... -->
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Чтобы ваш стиль работал, вам нужно изменить шаблон Expander по умолчанию (получить шаблоны по умолчанию на MSDN - Default WPF Themes ссылка). Не хорошо, но у тебя нет особого выбора.