WinUI3中ItemsView搭配LinedFlowLayout时项收缩而非换行问题求助
WinUI3 ItemsView + LinedFlowLayout 实现空间不足直接换行
要解决窗口调整时项先收缩再换行的问题,只需调整两个关键设置:
- 禁用ItemContainer的内容拉伸:默认情况下ItemsView的ItemContainer会将内容拉伸以填充行宽,导致空间不足时内容被压缩。通过设置ItemContainerStyle,将
HorizontalContentAlignment设为Left,让项保持自身固有宽度。 - 设置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
相关产品推荐
相关产品推荐

