Блог

У меня есть элемент управления элементами WPF, в котором я хочу группировать элементы с помощью расширителя.

У меня есть следующая разметка…

         <Window x:Class="ItemsControlGrouped.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:local="clr-namespace:ItemsControlGrouped"
            mc:Ignorable="d"
            Title="MainWindow" Height="450" Width="800">
      <Window.Resources>
        <Style x:Key="ContainerStyle" TargetType="{x:Type GroupItem}">
          <Setter Property="Template">
            <Setter.Value>
              <ControlTemplate>
                <Expander IsExpanded="True" HorizontalAlignment="Stretch">
                  <Expander.Header>
                    
                    <StackPanel Orientation="Horizontal" Background="LightGray" HorizontalAlignment="Stretch">
                      <TextBlock Text="{Binding Name}"  />
                      <TextBlock Margin="5,0,0,0" Text="{Binding ItemCount}" />
                      <TextBlock Text=" item(s)"  />
                    </StackPanel>
                    
                  </Expander.Header>
                  <ItemsPresenter />
                  </Expander>
              </ControlTemplate>
            </Setter.Value>
          </Setter>
        </Style>
      </Window.Resources>
      <ItemsControl Name="list">
        <ItemsControl.GroupStyle>
          <GroupStyle ContainerStyle="{StaticResource ContainerStyle}"/>
        </ItemsControl.GroupStyle>
        <ItemsControl.ItemTemplate>
          <DataTemplate>
            <Border Margin="5" Padding="0" BorderThickness="1"  Background="LightBlue" CornerRadius="4">
              <TextBlock Padding="5" Text="{Binding Name}"/>
            </Border>
          </DataTemplate>
        </ItemsControl.ItemTemplate>

        <ItemsControl.ItemsPanel>
          <ItemsPanelTemplate>
            <WrapPanel Orientation="Horizontal"></WrapPanel>
          </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
      </ItemsControl>
    </Window>
  

Я хочу оформить панель расширителя, например, я хотел бы, чтобы вся строка расширителя имела цвет фона и, возможно, немного отступов и т.д.

Глядя в визуальный проводник, кажется, что все это находится в определенной области HeaderSite , как мы можем видеть ниже…

Итак, область, выделенную красным, я хотел бы также добавить фоном (не только текстовое поле, как я мог бы сделать в шаблоне).

Есть ли какой-либо способ сделать это?

Да, вы правы. Чтобы оформить эту часть расширителя, вам нужно довольно глубоко разобраться в ControlTemplate. Ниже показан базовый пример, аналогичный пользовательскому стилю кнопки переключения и расширителя, которые я использую в течение нескольких лет.

     <Style x:Key="ExpanderToggleButton"
             TargetType="{x:Type ToggleButton}">
        <Setter Property="UseLayoutRounding"
                    Value="True"/>
        <Setter Property="SnapsToDevicePixels"
                    Value="True"/>
        <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ToggleButton}">
                        <Grid Height="24" Width="24">
                            <Border x:Name="border"
                                            CornerRadius="12"
                                            Background="Black"/>
                            <Path x:Name="arrow" Fill="White"
                                        Data="M4.5 9 l4 0 l3.5 4.6667 l3.5 -4.6667 l4 0 l-7.5 10 z"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver"
                                             Value="True">
                                <Setter TargetName="border"
                                                Property="Background"
                                                Value="DarkGray"/>
                                <Setter TargetName="arrow"
                                                Property="Fill"
                                                Value="LightGray"/>
                            </Trigger>
                            <Trigger Property="IsChecked"
                                             Value="True">
                                <Setter TargetName="border"
                                                Property="Background"
                                                Value="White"/>
                                <Setter TargetName="arrow"
                                                Property="Fill"
                                                Value="Black"/>
                                <Setter TargetName="arrow"
                                                Property="Data"
                                                Value="M4.5 15 l4 0 l3.5 -4.6667 l3.5 4.6667 l4 0 l-7.5 -10 z"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
    </Style>

    <Style TargetType="{x:Type Expander}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Expander}">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition x:Name="ContentRow" Height="0" />
                        </Grid.RowDefinitions>
                        <Border x:Name="Border"
                                    Grid.Row="0"
                                    BorderThickness="0"
                                    CornerRadius="2,2,0,0"
                                    Background="White">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="25" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <ToggleButton Grid.Column="0" OverridesDefaultStyle="True"
                                                Style="{StaticResource ExpanderToggleButton}"
                                                IsChecked="{Binding IsExpanded, Mode=TwoWay,
                                RelativeSource={RelativeSource TemplatedParent}}">

                                </ToggleButton>
                                <!--This is the border that puts the styling around the Expander Header-->
                                <!--Add more detail here for a fancier header.-->
                                <Border Grid.Column="1" Background="DarkRed">
                                    <ContentPresenter Margin="4" 
                                            ContentSource="Header"
                                            TextBlock.Foreground="White"
                                            RecognizesAccessKey="True"/>
                                </Border>

                            </Grid>
                        </Border>
                        <Border x:Name="Content"
                                    Grid.Row="1"
                                    BorderThickness="0"
                                    CornerRadius="0,0,2,2">
                            <ContentPresenter Margin="4" />
                        </Border>
                    </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsExpanded"
                                     Value="True">
                                <Setter TargetName="ContentRow"
                                        Property="Height"
                                        Value="{Binding DesiredSize, ElementName=Content}" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
  

В стиле, который я использую, кнопка переключения почти отделена от текста и фона «заголовка», но довольно легко расширить фон заголовка под кнопкой переключения, если вы тоже хотите выглядеть таким образом. Как только вы настолько углубитесь в ControlTemplate, у вас практически будет полный контроль над тем, как все выглядит.