Question

我正在聊天客户端，我在使它看起来很漂亮时遇到了一些麻烦。我有一个多边形定义如下：

<Polygon
Points="0,25 5,27 5,35 200,35 200,15 5,15 5,23 0,25"
Stroke="Purple"
Margin="4, 0, 4, 0">
    <Polygon.Fill>
        <SolidColorBrush Color="#e4eef2" />
    </Polygon.Fill>
</Polygon>

此多边形构成一个类似于Skype使用的聊天消息窗口。

在其下方直接使用文本块来显示文本。

<TextBlock FontSize="14" Width="auto" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="12, 0, 4, 0" TextWrapping="WrapWithOverflow" Text="{Binding text}"/>

如果文字太长并且包裹，它会落在多边形之外。此外，可能存在多行文本，其也落在多边形之外。最后，我无法使多边形扩展包含在其中的listitem的整个宽度。

完整的代码如下。

    <ListBox Grid.Column="2" Name="MessageList" ScrollViewer.HorizontalScrollBarVisibility="Disabled"> <!-- Messages -->
        <ListBox.ItemTemplate>
            <DataTemplate>
                <DockPanel Height="Auto" Width="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" LastChildFill="True">
                    <Image Visibility="{Binding visibility}" Height="50" Width="50" Stretch="Fill" Source="sampleavatar.png"/>
                    <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                        <Polygon
                        Points="0,25 5,27 5,35 200,35 200,15 5,15 5,23 0,25"
                        Stroke="Purple"
                        Margin="4, 0, 4, 0">
                            <Polygon.Fill>
                                <SolidColorBrush Color="#e4eef2" />
                            </Polygon.Fill>
                        </Polygon>
                        <TextBlock FontSize="14" Width="auto" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="12, 0, 4, 0" TextWrapping="WrapWithOverflow" Text="{Binding text}"/>
                    </Grid>
                </DockPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

消息应该如何显示，除非它应该更加集中

当没有头像时，甚至更少集中的文字

文本换行，也注意多边形不会水平收缩（当listboxitem较大时，它也不会水平增长）

Answer 1

您可以做的是使用Polygons和TextBox（只读）的组合来实现您的目标。

这里的关键点是，每当文本增长/包装时，您希望polygon增长。为了实现这一点，我们可以使用TextBox's边框和polygons的组合来获取三角形。

见下文：

   <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <Polygon Grid.Column="0"
                 x:Name="Polygon"
                 Points="8,0 0,5, 8,10" 
                 Stroke="Purple" 
                 Fill="#e4eef2"
                 StrokeThickness="2"
                 VerticalAlignment="Center"
                 Margin="2,2,-4,0"/>
        <Polygon Grid.Column="1"
                 Panel.ZIndex="10"
                 Points="8,0 0,5, 8,10" 
                 Stroke="#e4eef2" 
                 Fill="#e4eef2"
                 StrokeThickness="2"
                 VerticalAlignment="Center"
                 HorizontalAlignment="Left"
                 Margin="-2.5,2,0,0"/>
        <TextBox Grid.Column="1"
                 Background="#e4eef2"
                 BorderBrush="Purple"
                 BorderThickness="2,2,2,2" 
                 VerticalAlignment="Center" 
                 Padding="8,0,8,0" 
                 FontSize="14" 
                 Width="auto" 
                 TextWrapping="WrapWithOverflow" 
                 Text="This is a test"
                 IsReadOnly="True"/>
    </Grid>

Answer 2

您的多边形不会随文本水平缩小，因为它实际上是一个不同的多边形，我认为一个选项是水平或垂直缩放多边形或两者都可能需要一些IValueConverters。

从此开始，

   <Border VerticalAlignment="Center" BorderThickness="0,1,1,1" BorderBrush="Purple" CornerRadius="5">
            <TextBlock x:Name="textBlock"
                FontSize="14" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="12, 0, 0, 0" TextWrapping="WrapWithOverflow" Text="blah blah blah blah blah blah blah blah blah "/>
        </Border>

然后将你的卷发物添加到左侧。

C＃WPF - 使Polygon封装文本

2 个答案: