Question

这是我的XAML：

    <ListBox Grid.Row="1" x:Name="lstGames" Background="#343434" >
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Grid ShowGridLines="True">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>

                    <Image Grid.Column="0" Source="{Binding ImageUrl}" Width="100"/>
                    <StackPanel Grid.Column="1">
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="Title:" />
                            <TextBlock Text="{Binding Title}" />
                        </StackPanel>
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="Release Date:" />
                            <TextBlock Text="{Binding ReleaseDate}" />
                        </StackPanel>                            
                    </StackPanel>                        
                </Grid>                                        
            </DataTemplate>
        </ListBox.ItemTemplate>            
    </ListBox>

没有放置一个Rectangle并在DataTemplate中给它一个颜色，ListBox是否有某种方式在每个项目之间设置原生内容？

Answer 1

这是一个更好的例子，因为那时你顶部没有分隔符

<ListBox.ItemContainerStyle>                
    <Style TargetType="ListBoxItem">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListBoxItem">
                    <StackPanel>
                        <Separator x:Name="Separator"/>
                        <ContentPresenter/>
                    </StackPanel>
                    <ControlTemplate.Triggers>
                        <DataTrigger Binding="{Binding RelativeSource={RelativeSource PreviousData}}" Value="{x:Null}">
                            <Setter Property="Visibility" TargetName="Separator" Value="Collapsed"/>
                        </DataTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ListBox.ItemContainerStyle>

Answer 2

您可以将分隔符的显示方式移动到ListBoxItem控件模板中，如有意简化的示例所示：

<Grid>
    <Grid.Resources>
        <PointCollection x:Key="sampleData">
            <Point>10,20</Point>
            <Point>30,40</Point>
            <Point>50,60</Point>
        </PointCollection>
    </Grid.Resources>
    <ListBox ItemsSource="{StaticResource sampleData}">
        <ListBox.ItemContainerStyle>
            <Style TargetType="ListBoxItem">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ListBoxItem">
                            <StackPanel>
                                <Separator/>
                                <ContentPresenter/>
                            </StackPanel>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </ListBox.ItemContainerStyle>
        <ListBox.ItemTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding}"/>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
</Grid>

这可以使分隔符远离您的项目模板。权衡的是，您可能需要从默认的ListViewItem控件模板中复制更多内容以满足您的需求。当然，Separator是可视化渲染分隔符的十几种方法之一。

Answer 3

我的解决方案：

 <Style x:Key="STYLE_ListBoxSubItem" TargetType="ListBoxItem">      
    <Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
    <Setter Property="VerticalContentAlignment" Value="Stretch"></Setter>
    <Setter Property="SnapsToDevicePixels" Value="true"/>
    <Setter Property="OverridesDefaultStyle" Value="true"/>

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ListBoxItem}">
                <DockPanel LastChildFill="True">
                    <Separator x:Name="Separator" DockPanel.Dock="Top" BorderBrush="Black" BorderThickness="2"/>
                    <Border x:Name="Border" SnapsToDevicePixels="true">
                        <ContentPresenter VerticalAlignment="Center" />
                    </Border>
                </DockPanel>

                <ControlTemplate.Triggers>
                    <DataTrigger Binding="{Binding RelativeSource={RelativeSource PreviousData}}" Value="{x:Null}">
                        <Setter Property="Visibility" TargetName="Separator" Value="Collapsed"/>
                    </DataTrigger>
                    <Trigger Property="IsSelected" Value="true">
                        <Setter TargetName="Border" Property="Background" Value="Orange"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Foreground" Value="#888888"/>
                    </Trigger>
                    <Trigger Property="Control.IsMouseOver" Value="True">
                        <Setter TargetName="Border" Property="Background" Value="LightGray"></Setter>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<!-- Usage -->
<ListBox ItemContainerStyle="{StaticResource STYLE_ListBoxSubItem}"/>

Answer 4

这建立在@EvaLacy给出的答案的基础上更加完整。

因为该答案取代了ListBoxItem的模板，所以它会禁用选择列表项时发生的内置突出显示（因为突出显示是通过原始模板中的触发器完成的）。要恢复此功能，请将默认触发器放入新模板并稍微调整模板内容：

<ListBox.ItemContainerStyle>                
    <Style TargetType="ListBoxItem">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListBoxItem">
                    <StackPanel>
                        <Separator x:Name="Separator"/>

                        <!-- Bind to parent properties -->
                        <Border BorderThickness="{TemplateBinding Border.BorderThickness}"
                                Padding="{TemplateBinding Control.Padding}"
                                BorderBrush="{TemplateBinding Border.BorderBrush}"
                                Background="{TemplateBinding Panel.Background}"
                                Name="Bd"
                                SnapsToDevicePixels="True">
                            <ContentPresenter Content="{TemplateBinding ContentControl.Content}"
                                              ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}"
                                              ContentStringFormat="{TemplateBinding ContentControl.ContentStringFormat}"
                                              HorizontalAlignment="{TemplateBinding Control.HorizontalContentAlignment}"
                                              VerticalAlignment="{TemplateBinding Control.VerticalContentAlignment}"
                                              SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
                        </Border>
                    </StackPanel>
                    <ControlTemplate.Triggers>
                        <DataTrigger Binding="{Binding RelativeSource={RelativeSource PreviousData}}" Value="{x:Null}">
                            <Setter Property="Visibility" TargetName="Separator" Value="Collapsed"/>
                        </DataTrigger>
                    </ControlTemplate.Triggers>

                    <!-- Original Triggers -->
                    <Trigger Property="Selector.IsSelected" Value="True">
                        <Setter TargetName="Bd" Property="Panel.Background" 
                                Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
                        <Setter Property="TextElement.Foreground"
                                Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
                    </Trigger>

                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="Selector.IsSelected" Value="True" />
                            <Condition Property="Selector.IsSelectionActive" Value="False"/>
                        </MultiTrigger.Conditions>
                        <Setter TargetName="Bd" Property="Panel.Background"
                                Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" />
                        <Setter Property="TextElement.Foreground"
                                Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
                    </MultiTrigger>

                    <Trigger Property="UIElement.IsEnabled" Value="False">
                        <Setter Property="TextElement.Foreground"
                                Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
                    </Trigger>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ListBox.ItemContainerStyle>

我使用旧的但有用的Show Me the Template应用程序检索了这些触发器。

如何在ListBox中的每个ListBoxItem之间放置一个分隔符？

4 个答案: