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

Question

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

下面是一张图像，可以帮助您更好地理解：

• 粉红色的是 UserControl“句子”，其中每个都包含一个 wrapPanel
• 绿色的是所有 UserControl“单词”，根据单词长度具有不同的大小。

这是UserControl“单词”：

<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遇到的问题：

每行的最后一个单词不会换行，即使它比剩余的空间大（=因此它在wrapPanel的边缘被隐藏/切断）

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

https://streamable.com/lpdf38

我不知道什么到期了从昨天开始，我就拼命地希望不再出现这个问题，因为我知道包含所有 userControls 的 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 是视图模型中单词数据项对象的集合，即 DataContext 中的对象> 视图。单词 UserControl 中的两个 TextBlock 将其 Text 属性绑定到单词数据项类上的适当属性。

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

请参阅数据模板概述 了解详情。