WrapPanel ListBox 不换行

Question

我正在尝试使用以下样式创建带有按钮数据模板的 WrapPanel ListBox：

    <Style x:Key="lbxStyle" TargetType="ListBox">
        <Setter Property="Background" Value="{StaticResource primaryBrush}"/>
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="VerticalAlignment" Value="Top"/>
        <Setter Property="VerticalContentAlignment" Value="Top"/>
        <Setter Property="ScrollViewer.CanContentScroll" Value="True"/>
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Hidden"/>
        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
        <Setter Property="Margin" Value="6"/>
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <WrapPanel
                        IsItemsHost="True"
                        Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="ItemTemplate">
            <Setter.Value>
                <DataTemplate>
                    <Button>
                        <Button.Template>
                            <ControlTemplate TargetType="Button">
                                <Border
                                    HorizontalAlignment="Left"
                                    VerticalAlignment="Top"
                                    BorderBrush="White"
                                    Background="Transparent"
                                    BorderThickness="2"
                                    Margin="4,2,0,0">
                                    <Border.Triggers>
                                        <EventTrigger RoutedEvent="Border.MouseEnter">
                                            <EventTrigger.Actions>
                                                <BeginStoryboard>
                                                    <Storyboard>
                                                        <ColorAnimation
                                                            Storyboard.TargetProperty="
                                                                (Border.Background).
                                                                (SolidColorBrush.Color)"
                                                            From="Transparent"
                                                            To="{StaticResource accentColorTwo}"
                                                            Duration="0:0:0.25"/>
                                                    </Storyboard>
                                                </BeginStoryboard>
                                            </EventTrigger.Actions>
                                        </EventTrigger>
                                        <EventTrigger RoutedEvent="Border.MouseLeave">
                                            <EventTrigger.Actions>
                                                <BeginStoryboard>
                                                    <Storyboard>
                                                        <ColorAnimation
                                                            Storyboard.TargetProperty="
                                                                (Border.Background).
                                                                (SolidColorBrush.Color)"
                                                            From="{StaticResource accentColorTwo}"
                                                            To="Transparent"
                                                            Duration="0:0:0.25"/>
                                                    </Storyboard>
                                                </BeginStoryboard>
                                            </EventTrigger.Actions>
                                        </EventTrigger>
                                    </Border.Triggers>
                                    <ContentPresenter
                                        TextBlock.TextAlignment="Center"
                                        TextBlock.Foreground="White"
                                        TextBlock.FontFamily="SegoeUI"
                                        TextBlock.FontSize="14"
                                        Content="{Binding}"
                                        Name="content"/>
                                </Border>
                            </ControlTemplate>
                        </Button.Template>
                    </Button>
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>

在主要的window中，它是这样引用的：

    <ListBox
        x:Name="lbxUninspectedPrints"
        Height="125"
        Margin="16,0"
        Style="{StaticResource lbxStyle}"
        ItemsSource="{Binding UninspectedPrintList}"
        SelectedValue="{
            Binding DiePrintNav.SelectedDiePrintString, 
            Mode=OneWayToSource}"/>

但它不想正确包装。这是屏幕截图：

Answer 1

所以诀窍是将宽度、高度和对齐设置器移出边框并移入按钮本身。我做了一些其他更改，但此列表框的工作版本发布在下面（请注意，由于绑定问题，我不得不将所有内容移出样式并与 ListBox 引用内联）。

        <ListBox
            Name="lbxUninspectedPrints"
            Height="125"
            Margin="16,0"
            Background="{StaticResource primaryBrush}"
            Foreground="White"
            VerticalAlignment="Top"
            VerticalContentAlignment="Top"
            HorizontalContentAlignment="Left"
            ScrollViewer.CanContentScroll="True"
            ScrollViewer.VerticalScrollBarVisibility="Hidden"
            ScrollViewer.HorizontalScrollBarVisibility="Disabled"
            ItemsSource="{Binding UninspectedPrintList}">
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel/>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Button
                        DataContext="{Binding}"
                        Width="44"
                        Height="24"
                        VerticalAlignment="Top"
                        VerticalContentAlignment="Center"
                        HorizontalAlignment="Left"
                        HorizontalContentAlignment="Center"
                        Content="{Binding}"
                        Command="{
                            Binding DataContext.DiePrintNav.UninspectedPrintSelectedCommand,
                            RelativeSource={RelativeSource AncestorType=ListBox}}"
                        CommandParameter="{Binding RelativeSource={RelativeSource Self}, Path=Content}">
                        <Button.Template>
                            <ControlTemplate TargetType="Button">
                                <Border
                                    BorderBrush="White"
                                    BorderThickness="2"
                                    Background="Transparent">
                                    <Border.Triggers>
                                        <EventTrigger RoutedEvent="Border.MouseEnter">
                                            <EventTrigger.Actions>
                                                <BeginStoryboard>
                                                    <Storyboard>
                                                        <ColorAnimation
                                                            Storyboard.TargetProperty="
                                                                (Border.Background).
                                                                (SolidColorBrush.Color)"
                                                            From="Transparent"
                                                            To="{StaticResource accentColorTwo}"
                                                            Duration="0:0:0.25"/>
                                                    </Storyboard>
                                                </BeginStoryboard>
                                            </EventTrigger.Actions>
                                        </EventTrigger>
                                        <EventTrigger RoutedEvent="Border.MouseLeave">
                                            <EventTrigger.Actions>
                                                <BeginStoryboard>
                                                    <Storyboard>
                                                        <ColorAnimation
                                                            Storyboard.TargetProperty="
                                                                (Border.Background).
                                                                (SolidColorBrush.Color)"
                                                            From="{StaticResource accentColorTwo}"
                                                            To="Transparent"
                                                            Duration="0:0:0.25"/>
                                                    </Storyboard>
                                                </BeginStoryboard>
                                            </EventTrigger.Actions>
                                        </EventTrigger>
                                    </Border.Triggers>
                                    <ContentPresenter
                                        TextBlock.TextAlignment="Center"
                                        TextBlock.Foreground="White"
                                        TextBlock.FontFamily="SegoeUI"
                                        TextBlock.FontSize="14"
                                        Content="{TemplateBinding Content}"/>
                                </Border>
                            </ControlTemplate>
                        </Button.Template>
                    </Button>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

WrapPanel ListBox 不换行

WrapPanel ListBox not wrapping

c#

wpf

listbox

button