原理同 android .9.png， 将一个图片切成 9 个部分，进行显示
# Viewbox 取源图片中的哪一部分进行显示 x, y, width, height
# Viewport 显示在目标元素的哪一部分 x, y, width, height
<ImageBrush ImageSource="/Resource/Images/chatpop.png" Viewbox="0.6 0 0.4 0.2" ViewboxUnits="RelativeToBoundingBox" Viewport="0 0 1 1 " ViewportUnits="RelativeToBoundingBox" />XAML
<UserControl
x:Class="WpfDemoApp.MessageChatCtrls.ChatPopControl"
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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:messageChatCtrls="clr-namespace:WpfDemoApp.MessageChatCtrls"
d:DesignHeight="300" d:DesignWidth="300" SnapsToDevicePixels="True"
mc:Ignorable="d">
<UserControl.Resources>
<!-- 根据是否自身发言判断左对齐或是右对齐 -->
<messageChatCtrls:ChatPopHorizontalAlignmentValueConverter x:Key="ChatPopHorizontalAlignmentValueConverter" />
<!-- 根据是否自身发言聊天的小尖尖朝向哪里 -->
<messageChatCtrls:BoxOrientationValueConverter x:Key="BoxOrientationValueConverter" />
<!-- 根据是否自身发言设置消息内容边距 -->
<messageChatCtrls:MessageMarginValueConverter x:Key="MessageMarginValueConverter" />
<!-- 将消息内容设置为整个宽度的 0.85 -->
<messageChatCtrls:ChatPopMaxWidthValueConverter x:Key="ChatPopMaxWidthValueConverter" />
<Thickness
x:Key="MessageDefaultMargin"
Bottom="24" Left="24" Right="46" Top="30" />
</UserControl.Resources>
<!-- 1. 将一个泡泡图片切成 9 份填充到 grid 的 9 格中 -->
<!-- 2. 添加一个 IsMine 属性，根据 IsMine 消息背景的方向，使用 Grid.LayoutTransform.(ScaleTransform.ScaleX) BoxOrientationValueConverter -->
<!-- 3. 添加一个 IsMine 属性，根据 IsMine 属性设置消息内容的边框，使用 MessageMarginValueConverter -->
<!-- 4. 添加一个 IsMine 属性, 根据 IsMine 属性设置消息水平对齐方向 使用 ChatPopHorizontalAlignmentValueConverter -->
<!-- 5. 使用 ChatPopMaxWidthValueConverter 设置消息框最大占父宽度的 0.85 -->
<Grid MaxWidth="{Binding RelativeSource={RelativeSource AncestorType=UserControl}, Path=ActualWidth, Converter={StaticResource ChatPopMaxWidthValueConverter}, ConverterParameter=0.85}" HorizontalAlignment="{Binding RelativeSource={RelativeSource AncestorType=UserControl}, Path=IsMine, Converter={StaticResource ChatPopHorizontalAlignmentValueConverter}}">
<Border HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<!-- 第一行 -->
<Grid
Grid.Row="0" Grid.Column="0"
Width="64" Height="32">
<Grid.Background>
<ImageBrush
ImageSource="/Resource/Images/chatpop.png" Viewbox="0 0 0.4 0.2" ViewboxUnits="RelativeToBoundingBox" Viewport="0 0 1 1 "
ViewportUnits="RelativeToBoundingBox" />
</Grid.Background>
</Grid>
<Grid
Grid.Row="0" Grid.Column="1"
Height="32">
<Grid.Background>
<ImageBrush
ImageSource="/Resource/Images/chatpop.png" Viewbox="0.4 0 0.1 0.2" ViewboxUnits="RelativeToBoundingBox" Viewport="0 0 1 1 "
ViewportUnits="RelativeToBoundingBox" />
</Grid.Background>
</Grid>
<Grid
Grid.Row="0" Grid.Column="2"
Width="64" Height="32">
<Grid.Background>
<ImageBrush
ImageSource="/Resource/Images/chatpop.png" Viewbox="0.6 0 0.4 0.2" ViewboxUnits="RelativeToBoundingBox" Viewport="0 0 1 1 "
ViewportUnits="RelativeToBoundingBox" />
</Grid.Background>
</Grid>
<!-- 第二行 -->
<Grid
Grid.Row="1" Grid.Column="0"
Width="64">
<Grid.Background>
<ImageBrush
ImageSource="/Resource/Images/chatpop.png" Viewbox="0 0.2 0.4 0.2" ViewboxUnits="RelativeToBoundingBox" Viewport="0 0 1 1 "
ViewportUnits="RelativeToBoundingBox" />
</Grid.Background>
</Grid>
<Grid Grid.Row="1" Grid.Column="1">
<Grid.Background>
<ImageBrush
ImageSource="/Resource/Images/chatpop.png" Viewbox="0.4 0.2 0.1 0.2" ViewboxUnits="RelativeToBoundingBox" Viewport="0 0 1 1"
ViewportUnits="RelativeToBoundingBox" />
</Grid.Background>
</Grid>
<Grid
Grid.Row="1" Grid.Column="2"
Width="64">
<Grid.Background>
<ImageBrush
ImageSource="/Resource/Images/chatpop.png" Viewbox="0.6 0.2 0.4 0.2" ViewboxUnits="RelativeToBoundingBox" Viewport="0 0 1 1"
ViewportUnits="RelativeToBoundingBox" />
</Grid.Background>
</Grid>
<!-- 第三行 -->
<Grid
Grid.Row="2" Grid.Column="0"
Width="64" Height="64">
<Grid.Background>
<ImageBrush
ImageSource="/Resource/Images/chatpop.png" Viewbox="0 0.6 0.4 0.4" ViewboxUnits="RelativeToBoundingBox" Viewport="0 0 1 1 "
ViewportUnits="RelativeToBoundingBox" />
</Grid.Background>
</Grid>
<Grid
Grid.Row="2" Grid.Column="1"
Height="64">
<Grid.Background>
<ImageBrush
ImageSource="/Resource/Images/chatpop.png" Viewbox="0.4 0.6 0.1 0.4" ViewboxUnits="RelativeToBoundingBox" Viewport="0 0 1 1"
ViewportUnits="RelativeToBoundingBox" />
</Grid.Background>
</Grid>
<Grid
Grid.Row="2" Grid.Column="2"
Width="64" Height="64">
<Grid.Background>
<ImageBrush
ImageSource="/Resource/Images/chatpop.png" Viewbox="0.6 0.6 0.4 0.4" ViewboxUnits="RelativeToBoundingBox" Viewport="0 0 1 1"
ViewportUnits="RelativeToBoundingBox" />
</Grid.Background>
</Grid>
<Grid.LayoutTransform>
<ScaleTransform ScaleX="{Binding RelativeSource={RelativeSource AncestorType=UserControl}, Path=IsMine, Converter={StaticResource BoxOrientationValueConverter}, FallbackValue=1, TargetNullValue=1}" />
</Grid.LayoutTransform>
</Grid>
<!-- '24,30,46,24' -->
<TextBlock
Margin="{Binding RelativeSource={RelativeSource AncestorType=UserControl}, Path=IsMine, Converter={StaticResource MessageMarginValueConverter}, FallbackValue={StaticResource MessageDefaultMargin}}"
FontSize="18" Foreground="White"
Text="{Binding RelativeSource={RelativeSource AncestorType=UserControl}, Path=Message, FallbackValue='如果你想不同主题的名言，比如关于成功、学习、人生、爱情等，也可以告诉我，我可以为你定制推荐 😊 '}"
TextWrapping="WrapWithOverflow" />
</Grid>
</Border>
</Grid>
</UserControl>