C＃WPF - 使多邊形封裝文本

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> 

的消息應該是什麼樣子，但它應該更集中

時，有沒有分身

文字換行甚至更少居中文本，也注意到多邊形不縮水水平（當列表框項目較大時也不水平增長）

Answer 1

您的多邊形不會與文本水平縮放，因爲這實際上是一個不同的多邊形，我認爲一個選項是水平或垂直縮放多邊形或兩者都可能需要一些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> 

添加您的捲曲事左側。

Answer 2

你可以做什麼，是使用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>