如何在UWP中創建對話框？

Question

我正在創建一個聊天應用程序，並希望創建包含每條消息的典型對話框。我創建像這樣在Blend（在XAML）Path對象：

的問題是，該路徑被設計成具有特定的寬度和高度，我想它環繞文本沒有伸展，所以它不會看起來像變形一樣，像邊界一樣。

我該如何讓它表現得像我想要的？

Answer 1

您可以結合使用Polygon與StackPanel：

<StackPanel Orientation="Horizontal" 
      HorizontalAlignment="Left" 
      Padding="6" 
      > 
    <Polygon Points="0,0 15,0 15,15" 
      Fill="LightGray" 
      Margin="0,10,0,0" 
      /> 

    <Border Background="LightGray" 
      CornerRadius="3" 
      Padding="6" 
      VerticalAlignment="Top" 
      > 
     <TextBlock Text="Text" 
        TextWrapping="WrapWholeWords" 
        Width="100" 
        Height="50" 
        /> 
    </Border> 
</StackPanel> 

，看起來像這樣：

編輯：

版本與邊框：

<Grid HorizontalAlignment="Left" 
     Padding="6" 
     > 
    <Polygon Points="0,0 15,0 15,15" 
      Fill="LightGray" 
      Stroke="Black" 
      Margin="0,10,0,0" 
      /> 

    <Border Background="LightGray" 
      BorderBrush="Black" 
      BorderThickness="0.5" 
      CornerRadius="3" 
      Padding="6" 
      Margin="14,0,0,0" 
      VerticalAlignment="Top" 
      > 
     <TextBlock Text="Text" 
        TextWrapping="WrapWholeWords" 
        Width="100" 
        Height="50" 
        /> 
    </Border> 

    <Polygon Points="0,0 15,0 15,15" 
      Fill="LightGray" 
      Margin="0,10,0,0" 
      /> 
</Grid> 

這可能不是最簡單，如何做到這一點的最好辦法，也許Path將更好地做到這一點，但它的工作原理：

Answer 2

下面是聲明瞭一個自定義控制文本的依賴屬性並在其模板（Background，Width，Heigth）中重用基礎控件的某些屬性。

第一類定義：（SpeechBubbleControl.xaml.cs）

[TemplatePart(Name = PartBubbleText, Type = typeof(TextBlock))] 
public sealed partial class SpeechBubbleControl : Control 
{ 
    private const string PartBubbleText = "BubbleText"; 
    public static readonly DependencyProperty TextProperty = DependencyProperty.Register(nameof(Text), typeof(string), typeof(SpeechBubbleControl), new PropertyMetadata("")); 

    public SpeechBubbleControl() 
    { 
     DefaultStyleKey = typeof(SpeechBubbleControl); 
    } 

    public string Text 
    { 
     get { return GetValue(TextProperty).ToString(); } 
     set { SetValue(TextProperty, value); } 
    } 
} 

憑藉其默認模板（SpeechBubbleControl.xaml）：

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        xmlns:local="using:App6" 
        > 

    <Style TargetType="local:SpeechBubbleControl"> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="local:SpeechBubbleControl"> 
        <Grid Background="{TemplateBinding Background}" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}"> 
         <Grid.RowDefinitions> 
          <RowDefinition Height="*"/> 
         </Grid.RowDefinitions> 
         <Rectangle Fill="{TemplateBinding Background}" Stroke="#FF000000" RadiusX="10" RadiusY="10"/> 
         <Path Fill="{TemplateBinding Background}" Stretch="Fill" Stroke="#FF000000" HorizontalAlignment="Left" Margin="-15,-5,0,20" Width="30" Height="40" Data="M0,0 L15,40 30,20 0,0" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False"> 
          <Path.RenderTransform> 
           <CompositeTransform Rotation="-20"/> 
          </Path.RenderTransform> 
         </Path> 
         <Rectangle Fill="{TemplateBinding Background}" RadiusX="10" RadiusY="10" Margin="1"/> 
         <TextBlock Name="BubbleText" HorizontalAlignment="Center" VerticalAlignment="Center" 
            Text="{TemplateBinding Text}" FontSize="20" TextWrapping="Wrap"/> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
</ResourceDictionary> 

你必須使用這樣的事情該資源導入到你的應用程序資源在你的app.xaml：

<Application 
    x:Class="App6.App" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="using:App6" 
    RequestedTheme="Light"> 
    <Application.Resources> 
     <ResourceDictionary> 
      <ResourceDictionary.MergedDictionaries> 
       <ResourceDictionary Source="SpeechBubbleControl.xaml" /> 
      </ResourceDictionary.MergedDictionaries> 
     </ResourceDictionary> 
    </Application.Resources> 
</Application> 

最後是一個示例測試頁面，它使用此控件綁定寬度，高度（基於滑塊）和必須顯示的文本。

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition /> 
      <ColumnDefinition /> 
     </Grid.ColumnDefinitions> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="40"/> 
      <RowDefinition Height="40"/> 
      <RowDefinition /> 
     </Grid.RowDefinitions> 
     <TextBox x:Name="testText" Grid.ColumnSpan="2" PlaceholderText="My text..." /> 
     <Slider x:Name="width" Grid.Row="1" Minimum="50" Maximum="500" Value="200" /> 
     <Slider x:Name="height" Grid.Row="1" Grid.Column="2" Minimum="50" Maximum="500" Value="100" /> 

     <local:SpeechBubbleControl Grid.Row="2" Grid.ColumnSpan="2" 
            Width="{Binding Value, ElementName=width}" 
            Height="{Binding Value, ElementName=height}" 
            Text="{Binding Text, ElementName=testText, FallbackValue=Hello}" 
            Background="Beige" > 
     </local:SpeechBubbleControl> 
    </Grid> 

    <local:SpeechBubbleControl Grid.Row="2" Grid.ColumnSpan="2" 
     Width="{Binding Value, ElementName=width}" Height="{Binding Value, ElementName=height}" 
           Text="{Binding Text, ElementName=testText, FallbackValue=Hello}" 
           Background="Beige" > 

    </local:SpeechBubbleControl> 
</Grid> 

下面是結果：

請注意，我的回答是從這個改編：WPF speech bubble