You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

WinUI3中ItemsView搭配LinedFlowLayout时项收缩而非换行问题求助

WinUI3 ItemsView + LinedFlowLayout 实现空间不足直接换行

要解决窗口调整时项先收缩再换行的问题,只需调整两个关键设置:

  1. 禁用ItemContainer的内容拉伸:默认情况下ItemsView的ItemContainer会将内容拉伸以填充行宽,导致空间不足时内容被压缩。通过设置ItemContainerStyle,将HorizontalContentAlignment设为Left,让项保持自身固有宽度。
  2. 设置LinedFlowLayout的间距行为:将ItemSpacingBehavior设为AlwaysEqual,确保行内间距始终保持MinItemSpacing,空间不足时直接换行,而非先缩小间距。

修改后的完整XAML代码:

<ItemsView Grid.Row="1" ItemsSource="{x:Bind ViewModel.Tags}">
    <!-- 添加ItemContainerStyle,禁止内容拉伸 -->
    <ItemsView.ItemContainerStyle>
        <Style TargetType="ListViewItem">
            <Setter Property="HorizontalContentAlignment" Value="Left"/>
        </Style>
    </ItemsView.ItemContainerStyle>
    <ItemsView.ItemTemplate>
        <DataTemplate x:DataType="local:Tag">
            <Border BorderThickness="1" BorderBrush="Black" CornerRadius="12" Padding="8,2">
                <StackPanel Orientation="Horizontal" Spacing="4">
                    <TextBlock Text="{x:Bind TagName}"/>
                    <AppBarSeparator/>
                    <TextBlock Text="{x:Bind WordCount}"/>
                </StackPanel>
            </Border>
        </DataTemplate>
    </ItemsView.ItemTemplate>
    <ItemsView.Layout>
        <!-- 设置ItemSpacingBehavior为AlwaysEqual -->
        <LinedFlowLayout LineSpacing="8" MinItemSpacing="8" ItemSpacingBehavior="AlwaysEqual"/>
    </ItemsView.Layout>
</ItemsView>

注:原模板中的ItemContainer标签可移除,ItemsView会自动生成ListViewItem作为项容器,直接在DataTemplate内放置内容即可。

内容的提问来源于stack exchange,提问作者Vytautas Valiukonis

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.12 22:42:36