【发布时间】：2019-12-26 02:30:26
【问题描述】：
我在 uwp 应用程序中有一种类似聊天的功能，有些聊天消息可以有很长的文本，因此它们会是多行的，有些会有小文本因此是单行的。
我遇到的问题是带有单行的文本块有底部有多余的空间，可能是因为文本块额外的不必要高度，同时多行文本块具有相同的其上方和下方的边距（如下图所示）。我也想要单行文本块的统一边距。
在下图中，仔细观察多行文本的底部空间较小，而单行文本的底部空间较大。
我尝试通过将 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 中看到的那样混淆高度或垂直对齐。我为此准备了一个示例应用程序，您可以自己进行测试：
【问题讨论】：
标签： c# xaml listview uwp textblock