WrapPanel ListBox没有换行

Posted 2021-04-18

我正在尝试使用此样式创建一个带有Button DataTemplate的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>

在主窗口中，它引用如下：

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

但它不想妥善包装。这是一个截图：

答案

所以诀窍是将宽度，高度和对齐设置器移出边框并进入按钮本身。我做了一些其他的更改，但是这个列表框的工作版本发布在下面（请注意，由于绑定问题，我必须将所有内容移出样式并插入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>