1

我有一个以 UniformGrid 作为其 ItemsPanel 的 ListBox。基本上，我不想将项目显示为带边框的矩形。我使用 UniformGrid 作为 ItemsPanel，在这里我可以控制通过绑定显示的行数和列数。

我正在使用 ListBox 的 ItemContainerStyle 为每个项目设置边框。我可以指定 BorderThickness，它确实出现在列表中的所有项目周围。问题是相邻项目的边界不会合并，从而为相邻项目提供“双边界”。如何控制每个项目的边框，以使每个项目都具有唯一的厚度，即使它可能有相邻的项目。

这是按比例缩小的代码

<ListBox x:Name="lstGroups" ItemsSource="{Binding Groups}" Grid.Row="1" Style="{StaticResource RelayDispositionStyle}"
                     SelectedItem="{Binding SelectedGroup}" gs:DragDropExtension.ScrollOnDragDrop="True"
                     ItemContainerStyle="{StaticResource ItemContainerStyle}"
                     >
</ListBox>

<Style x:Key="RelayDispositionStyle" TargetType="{x:Type ListBox}" BasedOn="{StaticResource {x:Type ListBox}}">
    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>

    <Setter Property="ItemsPanel">
        <Setter.Value>
            <ItemsPanelTemplate>
                <UniformGrid Rows="{Binding ElementName=Racks, Path=SelectedItem.NoOfRows}" 
                                     Columns="{Binding ElementName=Racks, Path=SelectedItem.GroupsPerRow}"
                                     HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,10,0,0">
                </UniformGrid>
            </ItemsPanelTemplate>
        </Setter.Value>
    </Setter>
</Style>


<Style x:Key="RelayDispositionItemContainerStyle" TargetType="{x:Type ListBoxItem}" BasedOn="{StaticResource {x:Type ListBoxItem}}">
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="BorderBrush" Value="MidnightBlue"/>
</Style>
4

2 回答 2

2

您可以使用负边距的技巧：
1. 将网格边距设置为<UniformGrid Margin="1,11,0,0">。然后它在左侧和顶部有额外的 1px，这是项目边框的厚度。
2. 将项目边距设置为<Setter Property="Margin" Value="-1,-1,0,0"/>。更正确或更向下的项目将与其邻居重合。最左边和最上面的项目填充 1px 的网格边距。

于 2013-04-29T12:59:35.690 回答
0

我在 TabControl/TabItem 上遇到了同样的问题，但问题是一样的。我通过重新模板化 TabItem（在您的情况下它将是 ListBoxItem）添加一个触发器来更改边框来解决它（注意第一个 ControlTemplateTrigger）。

为了让它工作，你必须让你的第一个项目有所不同......我选择将我的第一个项目的标签设置为“第一个”以触发触发器。（TabControl.Item[0].Tag = "First" 在填充 TabControl 后）

<Style x:Key="styleTabItemMetro" TargetType="{x:Type TabItem}">
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="Foreground" Value="Green" />
        <Setter Property="Margin" Value="0 0 0 0" />
        <Setter Property="Padding" Value="5 2" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabItem}">
                    <Grid Margin="{TemplateBinding Margin}"
                          Background="{TemplateBinding Background}">
                        <Border Margin="0 4"
                                Name="borderBorder"
                                BorderBrush="#FF8C8E94" BorderThickness="1 0 0 0" CornerRadius="0" />
                        <Grid Cursor="Hand" Margin="{TemplateBinding Padding}">
                            <ContentPresenter x:Name="ContentSite"
                                              ContentSource="Header"
                                              Margin="12,2"
                                              RecognizesAccessKey="True">
                                <ContentPresenter.Resources>
                                    <Style TargetType="{x:Type TextBlock}">
                                        <Setter Property="Foreground" Value="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type TabItem}}, Path=Foreground}" />
                                    </Style>
                                </ContentPresenter.Resources>
                            </ContentPresenter>
                        </Grid>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <DataTrigger Binding="{Binding Path=Tag, RelativeSource={RelativeSource Mode=Self}}" Value="First">
                            <Setter TargetName="borderBorder" Property="BorderThickness" Value="0"/>
                        </DataTrigger>
                        <Trigger Property="IsSelected" Value="True">
                            <Setter Property="Background" Value="#FFF9F9F9" />
                            <Setter Property="Padding" Value="0 1 0 0" />
                            <Setter Property="Margin" Value="0 0 0 0" />
                            <Setter Property="Panel.ZIndex"  Value="100" />
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" Value="Green" />
                            <Setter Property="Foreground" Value="White"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsSelected" Value="True">
                <Setter Property="Background" Value="{StaticResource ResourceKey=brushHeaderBackground}" />
                <Setter Property="Foreground" Value="White"/>
            </Trigger>
        </Style.Triggers>
    </Style>
于 2015-03-26T14:20:02.597 回答