单行uwp TextBlock高度问题

Question

我在 uwp 应用程序中有一种类似于聊天的功能，一些聊天消息可以有很长的文本，因此它们将是多行的，而有些则有小文本因此是单行的。

我遇到的问题是单行的文本块有 额外的 space 留在它的底部 ，可能由于文本块额外不必要的高度，同时多行文本块在其上方和下方具有相同的边距（如下图所示）。我也想要单行文本块的统一边距。

在下图中，仔细观察多行文本的底边 space 而单行文本的底边多 space.

我试图通过将 ListViewItems 的 VerticalContentAlignment 设置为 Top 来解决这个问题这个问题但造成了垂直边距问题，正如您在下图中看到的项目之间的垂直边距不一致：

下面是相关代码。

主页

<Page
x:Class="ChatMarginBug.MainPage"
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:local="using:ChatMarginBug"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
mc:Ignorable="d">

<Page.Resources>
    <Style x:Key="ChatListViewStyle" TargetType="ListView">
        <Setter Property="HorizontalAlignment" Value="Stretch" />
        <Setter Property="SelectionMode" Value="None" />
        <Setter Property="ItemContainerStyle">
            <Setter.Value>
                <Style TargetType="ListViewItem">
                    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                    <Setter Property="VerticalContentAlignment" Value="Top" />
                    <Setter Property="HorizontalAlignment" Value="Stretch" />
                    <Setter Property="Margin" Value="12,2,12,2" />
                </Style>
            </Setter.Value>
        </Setter>
    </Style>
</Page.Resources>

<Grid>

    <ListView ItemsSource="{x:Bind MyTweets}" Style="{StaticResource ChatListViewStyle}">
        <ListView.ItemTemplate>
            <DataTemplate x:DataType="local:TweetData">
                <Grid HorizontalAlignment="{x:Bind MyTweetType, Converter={StaticResource TweetTypeToHAConverter1}}" x:DefaultBindMode="OneWay">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="{x:Bind MyTweetType, Converter={StaticResource TweetTypeToC1DefConverter1}}" />
                        <ColumnDefinition Width="{x:Bind MyTweetType, Converter={StaticResource TweetTypeToC2DefConverter1}}" />
                    </Grid.ColumnDefinitions>
                    <Grid Grid.Column="{x:Bind MyTweetType, Converter={StaticResource TweetTypeToMetaDataColumnConverter1}}">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <TextBlock
                            Margin="0,0,0,4"
                            HorizontalAlignment="Center"
                            FontSize="{StaticResource TinyFontSize}"
                            FontWeight="Bold"
                            Foreground="{ThemeResource ApplicationSecondaryForegroundThemeBrush}"
                            Text="Name" />
                        <TextBlock
                            Grid.Row="1"
                            HorizontalAlignment="Center"
                            FontSize="{StaticResource TinyFontSize}"
                            Foreground="{ThemeResource ApplicationSecondaryForegroundThemeBrush}"
                            Text="15:00" />
                    </Grid>
                    <Grid
                        Grid.Column="{x:Bind MyTweetType, Converter={StaticResource TweetTypeToMsgColumnConverter1}}"
                        MinWidth="120"
                        Background="{x:Bind MyTweetType, Converter={StaticResource TweetTypeToColorConverter1}}">
                        <TextBlock
                            Margin="16,8,16,8"
                            FontSize="{StaticResource SmallFontSize}"
                            FontWeight="Normal"
                            Text="{x:Bind Text}"
                            TextTrimming="CharacterEllipsis"
                            TextWrapping="WrapWholeWords" />
                    </Grid>
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</Grid>
</Page>

MainPage.xaml.cs

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        InitializeComponent();
        MyTweets = new List<TweetData>
        {
            new TweetData{ Text="abqrwfsddggc", MyTweetType = TweetType.Mine},
            new TweetData{ Text="abqrwfsddggasasasc", MyTweetType = TweetType.Mine},
            new TweetData{ Text="abqrwfsddassqsasacbvretgergggc", MyTweetType = TweetType.Mine},
            new TweetData{ Text="abcalkdjdjjd qdjqwpodwqpodqwjdqwkj qdkjqwkdjqwlkdjqlkdjaslkj   qieoqieowqdjwkjwkj kdwqjqwlk;lqwkd;lkd;laskd;laks;dlkaskld;lakdpoiwdpowqkd;l qwioeqwijdkqwjdlkndlksanlcsmcsa qwkkjeqwjdlkqwjdlksadmasldjl;qkd;asljdlqwkhdlwqk", MyTweetType = TweetType.Mine},
            new TweetData{ Text="abcalkdjkjwkj kdwqjqwlk;lqwkd;lkd;laskd;laks;dlkaskld;lakdpoiwdpowqkd;l qwioeqwijdkqwjdlkndlksanlcsmcsa qwkkjeqwjdlkqwjdlksadmasldjl;qkd;asljdlqwkhdlwqk", MyTweetType = TweetType.Mine},
            new TweetData{ Text="abewqeqweqweqwe", MyTweetType = TweetType.Mine},
            new TweetData{ Text="abcalkdjdjjd qdjqwpodwqpodqwjdqwkj qdkjqwkdjqwlkdjqlkdjaslkj   qieoqieowqdjwkjwkj kdwqjqwlk;lqwkd;lkd;laskd;laks;dlkaskld;lakdpoiwdpowqkd;l qwioeqwijdkqwjdlkndlksanlcsmcsa qwkkjeqwjdlkqwjdlksadmasldjl;qkd;asljdlqwkhdlwqk", MyTweetType = TweetType.Mine},
            new TweetData{ Text="abcalkdjdjjd qdjqwpodwqpodqwjdqwkj qdkjqwkdjqwlkdjqlkdjaslkj   qieoqieowqdjwkjwkj kdwqjqwlk;lqwkd;lkd;laskd;laks;dlkaskld;lakdpoiwdpowqkd;l qwioeqwijdkqwjdlkndlksanlcsmcsa qwkkjeqwjdlkqwjdlksadmasldjl;qkd;asljdlqwkhdlwqk", MyTweetType = TweetType.NotMine},
            new TweetData{ Text="abc", MyTweetType = TweetType.NotMine},
            new TweetData{ Text="abcqdwqdqdqsdqwdwqdsdsaddz", MyTweetType = TweetType.Mine},
            new TweetData{ Text="abc", MyTweetType = TweetType.NotMine},
            new TweetData{ Text="abcscascqwdwwrewr", MyTweetType = TweetType.NotMine},
            new TweetData{ Text="abc", MyTweetType = TweetType.NotMine},
            new TweetData{ Text="abc", MyTweetType = TweetType.NotMine},
            new TweetData{ Text="abcqweqwewqeqweqdsdadqwqw", MyTweetType = TweetType.NotMine},
            new TweetData{ Text="xkwjdwqjdpo", MyTweetType = TweetType.NotMine}
        };
    }

    public List<TweetData> MyTweets { get; }
}

型号

public class TweetData
{
    public string Text { get; set; }
    public TweetType MyTweetType { get; set; }
}

public enum TweetType { Mine, NotMine }

请注意，所有 UI 转换器都用于水平对齐和颜色等，不会影响高度或垂直对齐，正如您在上面的 xaml 中已经看到的那样。我为此准备了一个示例应用程序，您可以自己测试一下：

https://github.com/touseefbsb/ChatMarginBug

Answer 1

您可以设置 ListViewItem 的 MinHeight 以删除文本块底部剩余的额外 space：

<Setter.Value>
                    <Style TargetType="ListViewItem">
                        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                        <Setter Property="VerticalContentAlignment" Value="Stretch" />
                        <Setter Property="HorizontalAlignment" Value="Stretch" />
                        <Setter Property="Margin" Value="12,2,12,2" />
                        <Setter Property="MinHeight" Value="20"></Setter>
                    </Style>
</Setter.Value>

单行uwp TextBlock高度问题

uwp TextBlock height problem in a single line

c#

xaml

listview

textblock

uwp