Как применить различные стили к заголовку и элементу ListBox

Question

У меня есть ListBox, который связан с моим пользовательским классом

ObservableCollection<FieldPropertyItem> _fieldOrderCollection`;

internal struct FieldPropertyItem
{
  public string Name { get; set; }
  public string AliasName { get; set; }
}

Код для ListBox:

<ListBox x:Name="FieldOrderListBox" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" HorizontalAlignment="Stretch" 
         VerticalAlignment="Stretch" HorizontalContentAlignment="Stretch" SelectedIndex="0"
         ScrollViewer.VerticalScrollBarVisibility="Auto" SelectionChanged="FieldOrderListBox_SelectionChanged">
    <ListBox.Resources>
        <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="#FF479EF3"></SolidColorBrush>
    </ListBox.Resources>

       <ListBox.ItemTemplate>
        <DataTemplate x:Name="MyTemplate">
            <Grid  Margin="-5,-1,0,0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" SharedSizeGroup="FieldName" MinWidth="5" MaxWidth="300"/>
                    <ColumnDefinition Width="2" />
                    <ColumnDefinition Width="*" MaxWidth="350"/>
                </Grid.ColumnDefinitions>                                

                <Border  BorderBrush="Black" Grid.Column="0" BorderThickness="0.5,0.0,0.5,0.5" IsHitTestVisible="False">
                    <TextBlock Text="{Binding Name}" Grid.Column="0" ToolTip="{Binding Name}" Margin="2,0,2,0" VerticalAlignment="Center"/>
                </Border>
                <GridSplitter Grid.Column="1" Width="2" HorizontalAlignment="Left" Background="Black" Margin="-2,0,-1,0"/>
                <Border BorderBrush="Black" BorderThickness="0,0.0,0.5,0.5" Margin="-2,0,0,0" Padding="0,5,0,0" Grid.Column="2">
                    <TextBlock Text="{Binding AliasName}" Grid.Column="1" ToolTip="{Binding AliasName}" Margin="2,0,2,0" VerticalAlignment="Center" HorizontalAlignment="Stretch"/>
                </Border>
            </Grid>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

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

Answer 1

Вы можете проверить, является ли предыдущий элемент null, используя привязку RelativeSource в триггере, например, это DataTemplate делает первый элемент жирным:

<DataTemplate>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition SharedSizeGroup="A" />
            <ColumnDefinition SharedSizeGroup="B" />
        </Grid.ColumnDefinitions>
        <Grid.Style>
            <Style TargetType="{x:Type Grid}">
                <Style.Triggers>
                    <DataTrigger Binding="{Binding RelativeSource={RelativeSource PreviousData}}" Value="{x:Null}">
                        <Setter Property="TextElement.FontWeight" Value="Bold" />
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </Grid.Style>
        <TextBlock Grid.Column="0" Text="{Binding Name}" />
        <TextBlock Grid.Column="1" Text="{Binding AliasName}" />
    </Grid>
</DataTemplate>

(Используйте общие группы размеров, как показано выше, чтобы выровнять сетки друг с другом, установите Grid.IsSharedSizeGroup в true для элемента ListBox)

Кстати, я бы не советовал делать это, если ваша коллекция элементов содержит заголовок, значит, что-то не так с вашим дизайном данных.

Answer 2

1.) У вас может быть новое свойство IsFirstItem в вашем FieldPropertyItem Всякий раз, когда ваши _fieldOrderCollection изменяются, определяют свойство IsFirtItem элементов в вашей ObservableCollection.

2.) Определите соответствующие шаблоны в XAML (шаблон Normal и FirstItem)

3.) Затем вы можете связать в XAML следующим образом:

<ListBox ItemsSource="{Binding Items}"  >
  <ListBox.ItemTemplate>
    <DataTemplate>
      <ContentControl x:Name="contentControl" Content="{Binding}" ContentTemplate="{StaticResource normalTemplate}"/>
      <DataTemplate.Triggers>
        <DataTrigger Binding="{Binding Path=IsFirstItem}" Value="True" >
          <Setter TargetName="contentControl" Property="ContentTemplate" Value="{StaticResource firstItemTemplate}"></Setter>
        </DataTrigger>
      </DataTemplate.Triggers>
  </ListBox.ItemTemplate>
</ListBox>