[英]WPF XAML ListView - Make TextBlock Text wrap
I have a ListView with ListView.ItemTemplate like this 我有一个这样的ListView与ListView.ItemTemplate
<ListView
x:Name="myList"
BorderBrush="Transparent"
ItemsSource="{Binding MyItems}"
SelectedIndex="0"
ScrollViewer.CanContentScroll="True"
ScrollViewer.VerticalScrollBarVisibility="Auto">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="Padding" Value="0" />
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<Grid Margin="5,5,5,5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200"/> <--THIS WILL FORCE WRAPPING
<ColumnDefinition Width="50"/>
</Grid.ColumnDefinitions>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Text="{Binding FilePath}"
Grid.Row="0" Margin="3,3,3,3"
Style="{StaticResource MyFilePathTextLabel}"
TextWrapping="WrapWithOverflow"/> <-- THIS WILL NOT WRAP TEXT
<StackPanel Orientation="Horizontal" Grid.Row="1" Margin="3,3,3,3">
<TextBlock Text="Lab location: "/>
<TextBlock Text="{Binding LabLocation}"
Style="{StaticResource MyLabLocationTextLabel}"/>
</StackPanel>
...
...
</DataTemplate>
</ListView.ItemTemplate>
...
...
</ListView>
This will show ListView items like this: 这将显示ListView项目,如下所示:
----------------------------------
C:/samples/folderA/myfile1.txt <-- NO WRAP AS IT FITS
Lab location: Chemistry Lab 301
----------------------------------
C:/samples/folderA/folderB/fold
erC/folderD/folderE/folderF/myf
ile2.txt <-- WRAP SINCE NOT FITTING
Lab location: Chemistry Lab 301
----------------------------------
C:/samples/folderA/folderB/myfi
le3.txt <-- WRAP SINCE NOT FITTING
Lab location: Chemistry Lab 301
----------------------------------
C:/samples/folderA/folderB/fold
erC/folderD/folderE/folderF/fol
derG/folderH/folderI/folderJ/fo
lderK/myfile4.txt <-- WRAP SINCE NOT FITTING
Lab location: Chemistry Lab 301
----------------------------------
C:/samples/myfile5.txt <-- NO WRAP AS IT FITS
Lab location: Chemistry Lab 301
----------------------------------
Above, each item show file location as wrapped if it does not fit the width of the ListView. 在上方,如果每个项目都不适合ListView的宽度,则显示文件位置为已包装。
UPDATE: Updated XAML 更新:更新了XAML
UPDATE 2: Setting the column Width of grid container to hardcoded value of will force wrapping (see above commented line). 更新2:将网格容器的列宽度设置为的硬编码值将强制换行(请参见上面的注释行)。 But since form is resizable, the grid and ListView is also resizable.
但是由于表单是可调整大小的,因此网格和ListView也可以调整大小。 Therefore, I can not hardcode width.
因此,我无法对宽度进行硬编码。 It needs to wrap according to the current size of the form.
它需要根据表单的当前大小进行包装。
Set the HorizontalContentAlignement="Stretch"
on the ListView object itself to tell it to stretch it's Content horizontally to fit available space, and set the HorizontalScrollBarVisiblilty
to Disabled to make sure horizontal scrolling is disabled. 在ListView对象本身上设置
HorizontalContentAlignement="Stretch"
,以告诉它水平拉伸其Content以适应可用空间,然后将HorizontalScrollBarVisiblilty
设置为Disabled以确保禁用水平滚动。
<ListView x:Name="myList" ...
HorizontalContentAlignment="Stretch"
ScrollViewer.HorizontalScrollBarVisibility="Disabled">
If you use a Grid
and set <ColumnDefinition Width="*">
, the GridColumn
enlarges as much as possible to fill all the available space. 如果使用
Grid
并设置<ColumnDefinition Width="*">
,则GridColumn
尽可能扩大以填充所有可用空间。 Only and only after that, other operations like wrapping take place. 仅在此之后 ,其他操作(例如包装)才会发生。
In this case, the GridColumn
becomes large enough to contain all the text on a single line. 在这种情况下,
GridColumn
变得足够大,可以在一行上包含所有文本。 And that's the reason why the text doesn't wrap: it doesn't need to wrap! 这就是为什么文本不自动换行的原因:它不需要自动换行! It has all the space it needs to stay on a single line!
它具有留在一行上所需的所有空间!
SOLUTION: Set a fixed column width, as 200, or 100, or anyway try a smaller width, and see the result. 解决方案:将固定的列宽设置为200或100,或者尝试使用较小的宽度,然后查看结果。 At some point the text MUST wrap, with a
GridColumn
thin enough. 在某些时候,文本必须换行,并使用足够薄的
GridColumn
。
SOLUTION FOR FLEXIBLE WIDTH: 灵活宽度的解决方案:
You have to bind the Width
of the inner Grid
(the one with the RowDefinitions
) to the ActualWidth
of the outer Grid
(the one with the ColumnDefinitions
). 您必须将内部
Grid
的Width
(具有RowDefinitions
) RowDefinitions
到外部Grid
(具有ColumnDefinitions
的RowDefinitions
)的ActualWidth
。
Create a converter like this: 创建一个这样的转换器:
public class OuterGridToInnerGridWidthConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
return ((double)value) / 2;
}
}
In this example I suppose that the inner Grid
has half the Width
of the outer. 在此示例中,我假设内部
Grid
的Width
是外部Grid
一半。 If instead you have the column of the Grid
with Width="*"
and the second column with a fixed width of - for example - 50
, the converter can be: 相反,如果您的
Grid
列的Width="*"
,第二列的宽度为固定值-例如50
,则转换器可以是:
public class OuterGridToInnerGridWidthConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
return ((double)value) - 50;
}
}
Made this, add this attribute to the inner Grid
: 为此,将此属性添加到内部
Grid
:
Width="{Binding ActualWidth,
RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Grid}},
Converter={StaticResource OuterGridToInnerGridWidthConverter}}"
Finally, set HorizontalContentAlignment="Stretch"
for the ListView
. 最后,为
ListView
设置HorizontalContentAlignment="Stretch"
。
This works both when you make the window smaller or bigger: the TextBlock
resizes and wraps correctly. 当您
TextBlock
或缩小窗口时,这都可以使用: TextBlock
调整大小并正确包装。
Can you try to have the first RowDefinition like : 您可以尝试拥有第一个RowDefinition:
<RowDefinition Height="Auto"/>
instead of 代替
<RowDefinition Height="*"/>
? ?
If no success, try temporarily removing the 如果没有成功,请尝试暂时删除
Style="{StaticResource MyFilePathTextLabel}"
also. 也。 You did not share its code, so I'm thinking it might break the wrapping.
您没有共享其代码,因此我认为它可能会破坏包装。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.