WrapPanel 隐藏每行最后一个 uiElement 的一半

Question

我在一个stackPanel中的每个UserControl都有一个WrapPanel，而这个WrapPanel中的每个UserControl都是一个单词（因此它们的大小彼此不同，取决于单词的长度），这样就出现了一句话.

这里有一张图片可以帮助您更好地理解：

粉红色的是 UserControl“句子”，每个都包含一个 wrapPanel
在绿色中，所有用户控件“字”根据字长具有不同的大小。

这是用户控件“word”：

<UserControl x:Class="Coran_seul.UC.UserControl_WordInVerse"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:local="clr-namespace:Coran_seul.UC"
         mc:Ignorable="d" Margin="5,0,5,0">

<StackPanel>
    <TextBlock x:Name="textBlock_arabic" Text="ٱلْأَنفَالُ " FontSize="20" HorizontalAlignment="Center" FontFamily="Noto Naskh Arabic" MouseEnter="textBlock_arabic_MouseEnter" MouseLeave="textBlock_arabic_MouseLeave" Cursor="Hand" MouseDown="textBlock_arabic_MouseDown"/>
    <TextBlock x:Name="textBlock_french" Text="Les surplus (de bénéfice)" FontSize="20" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</StackPanel>

这里是 UserControl“句子”（wrapPanel 我有问题）

<UserControl x:Name="userControl" x:Class="Coran_seul.UC.UserControl_VerseInSurah"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:local="clr-namespace:Coran_seul.UC"
         mc:Ignorable="d" Margin="0,5,0,5" 
         >
<Border x:Name="Border_Verse"  >
    <StackPanel Orientation="Horizontal" x:Name="grid">
        <Label x:Name="Label_VersetNum"  Content="2" Height="{Binding ActualHeight, ElementName=WrapPanel_Mots, Mode=OneWay}" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" VerticalAlignment="Stretch" HorizontalAlignment="Left" MouseDown="Label_VersetNum_MouseDown"/>

        <WrapPanel   x:Name="WrapPanel_Mots" Width="{Binding ActualWidth, ElementName=userControl, Mode=OneWay}" />
    </StackPanel>
</Border>

问题：

现在我已经输入了代码，这是我的 wrapPanel 遇到的问题：

每行的最后一个字不换行，即使它大于 space 左边（= 因此 hidden/cut 在 wrapPanel 的边缘关闭）

我有一个视频可以更好地解释问题：

https://streamable.com/lpdf38

我不知道这是什么原因，从昨天开始我一直在拼命寻找不再有这个问题，因为我知道包含所有 userControl 的 stackPanel 的右边距为 20，因此它不会隐藏在滚动条。

请帮我找到一个解决方案，让只要隐藏一个像素的单词就换行到下一行。

谢谢，

Answer 1

问题是您将 WrapPanel 的宽度绑定到它的 UserControl 父级的宽度，而没有减去 Label 元素的宽度。

当您使用合适的面板元素时，您根本不需要绑定任何宽度，例如Grid 或 DockPanel 而不是 StackPanel。

<Border x:Name="Border_Verse">
    <DockPanel>
        <Label x:Name="Label_VersetNum" DockPanel.Dock="Left" .../>
        <WrapPanel x:Name="WrapPanel_Mots">
    </DockPanel>
</Border>

<Border x:Name="Border_Verse">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Label x:Name="Label_VersetNum" Grid.Column="0" .../>
        <WrapPanel x:Name="WrapPanel_Mots" Grid.Column="1">
    </DockPanel>
</Border>

您也可以考虑使用 ItemsControl 来显示一个句子。它将使用 WrapPanel 作为其 ItemsPanel 并在其 ItemTemplate 中使用 UserControl 一词：

<ItemsControl ItemsSource="{Binding Words}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
           <uc:UserControl_VerseInSurah/>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

其中Words是视图模型中word数据项对象的集合，即视图DataContext中的对象。 Word UserControl 中的两个 TextBlock 会将其 Text 属性绑定到 word 数据项 class.

上的适当属性

您甚至可能根本不需要 UserControl 这个词，因为您可以简单地将元素从其 XAML 移动到用作 ItemTemplate 的 DataTemplate 中。

详情见Data Templating Overview。

WrapPanel 隐藏每行最后一个 uiElement 的一半

WrapPanel hides half of the last uiElement of each line

c#

wpf

windows

wrappanel