Question

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

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

这是按比例缩小的代码

<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>

Answer 1

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

Answer 2

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

为了使它工作，你必须让你的第一个项目有点不同......我选择将我的第一个项目的标记设置为＆＃34; First＆＃34;为了触发扳机。（TabControl.Item [0] .Tag =＆＃34; First＆＃34;填充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>

合并ListBox中包含的Items的边框

2 个答案: