1

ItemsPanel として UniformGrid を持つ 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"/>。右または下にある項目は、隣の項目と一致します。一番左と一番上の項目は、1 ピクセルのグリッド マージンを埋めます。

于 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 に答える