如何将任何 UI 元素放在被修剪的文本的末尾

Question

我有一个包含 TextBlock 和 Ellipse 的自定义控件。 我想将此椭圆放置在 TextBlock 结束的位置。如果空间不足，则应修剪文本，椭圆应保留在其位置。我创建了非常简单的示例来说明问题。

MainPage.xaml.cs：

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" x:Name="MainGrid" HorizontalAlignment="Stretch">

    <Grid Height="50">
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>

        <local:TextWithEllipse x:Name="Control1" Grid.Row="0"/>
        <local:TextWithEllipse x:Name="Control2" Grid.Row="1"/>
    </Grid>
</Grid>

MainPage.cs：

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
        SizeChanged += OnSizeChanged;
        Loaded += OnLoaded;
    }

    private void OnLoaded(object sender, RoutedEventArgs routedEventArgs)
    {
        Control1.Text = "One two three four five six seven eight nine ten One two three four five six seven eight nine ten";
        Control2.Text = "Short text";
    }

    private void OnSizeChanged(object sender, SizeChangedEventArgs e)
    {
        Control1.Width = e.NewSize.Width;
        Control2.Width = e.NewSize.Width;
    }
}

做了什么：TextWithEllipse 控件的宽度与应用程序窗口的宽度相同，并且向其中写入了一些文本 - 短文本和长文本。

这是这个控件的样子：

TextWithEllipse.xaml.cs：

<UserControl
x:Class="TextResize.TextWithEllipse"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">

<Grid Height="20" HorizontalAlignment="Stretch" Background="MediumPurple">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="20" MinWidth="20"/>
    </Grid.ColumnDefinitions>

    <TextBlock Grid.Column="0" HorizontalAlignment="Stretch" x:Name="TestTitle"
               TextTrimming="CharacterEllipsis" FontSize="16"/>

    <Ellipse Width="20" Height="20" Fill="Red" Grid.Column="1" HorizontalAlignment="Left"/>

</Grid>

TextWithEllipse.cs：

public sealed partial class TextWithEllipse : UserControl
{
    public TextWithEllipse()
    {
        InitializeComponent();
    }

    public string Text
    {
        get { return TestTitle.Text; }
        set { TestTitle.Text = value; }
    }
}

如果文本宽度小于控件宽度，则可以正常工作。如果文本很长并且占用了更多空间，它将超出窗口，除非您扩展了窗口宽度，否则不会显示椭圆。 当第一列宽改为'*'时：

<ColumnDefinition Width="*"/>
<ColumnDefinition Width="20" MinWidth="20"/>

情况是当文本占用比窗口更大的宽度时，文本正在被修剪并且椭圆位于正确的位置。但是如果文本很短，Ellipse 就不会放在文本之后，而是放在窗口的末尾。

我怎样才能做到这一点？

Answer 1

我对您的代码进行了一些尝试以找到解决方案。正如您发现设置ColumnDefinition Width="Auto" 将不起作用，因为它告诉TextBlock 它拥有所需的空间，因此它永远不会修剪。所以设置ColumnDefinition Width="*" 是正确的方法，但是作为一个小细节，将整个Grid 的HorizontalAlignment 属性更改为Left，因为这样整个Grid 只会在需要时拉伸（这当你有很多文本时会发生）。整个代码是：

<Grid Height="20" HorizontalAlignment="Left" Background="MediumPurple">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="20" MinWidth="20"/>
    </Grid.ColumnDefinitions>

    <TextBlock Grid.Column="0" HorizontalAlignment="Stretch" x:Name="TestTitle"
           TextTrimming="CharacterEllipsis" FontSize="16"/>

    <Ellipse Width="20" Height="20" Fill="Red" Grid.Column="1" HorizontalAlignment="Left"/>

</Grid>

这至少在 XAML 设计器中给了我你想要的行为。

Answer 2

您可以尝试使用RelativePanel：

<RelativePanel HorizontalAlignment="Stretch" Height="20">
    <TextBlock HorizontalAlignment="Stretch" x:Name="TestTitle" TextTrimming="CharacterEllipsis" FontSize="16" Padding="0,0,20,0"/>
    <Ellipse Width="20" Height="20" Fill="Red" RelativePanel.AlignRightWith="TestTitle"/>
</RelativePanel>

您也不需要更改 OnSizeChanged 中的宽度 - 即使没有此事件，它也会自动更改。