---
lang: ja-jp
breaks: true
---
# WPF を使用した SpeechBubbles（💭会話の吹き出し） の試作　2021-04-28

## １．Rectangle を使用したバージョン

            <Canvas HorizontalAlignment="Left" Height="77" Margin="96,62,0,0" VerticalAlignment="Top" Width="132">
                <Rectangle Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="36" Stroke="Black" VerticalAlignment="Top" Width="107" RadiusX="10.625" RadiusY="10.625" StrokeThickness="2.5" Canvas.Left="6" Canvas.Top="20" />
                <Label Content="こんにちは。。" HorizontalAlignment="Left" VerticalAlignment="Top" Padding="0,0,0,0" Canvas.Left="14" Canvas.Top="23" FontFamily="Meiryo UI"/>
                <Label Content="15:33:40" HorizontalAlignment="Left" VerticalAlignment="Top" Padding="0,0,0,0" FontSize="8" Canvas.Left="68" Canvas.Top="42" FontFamily="Meiryo UI"/>
            </Canvas>


## ２．Polygon を使用したバージョン

    <Grid>
        <StackPanel Orientation="Vertical" HorizontalAlignment="Left">
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
                <Polygon Points="0,0 100,0 100,30" Fill="LawnGreen" Margin="0, 10, 0, 0" />
                <Border Background="LawnGreen" CornerRadius="10" Padding="10" VerticalAlignment="Top" >
                    <TextBox TextWrapping="Wrap" FontSize="50" Background="LawnGreen">
                        あああああああああああああああああああいいいいいいいいいいいい
                    </TextBox>
                </Border>
            </StackPanel>
        </StackPanel>
    </Grid>


## ３．Canvas に Path を使って描画したバージョン

    <Grid>
        <Canvas Margin="18,19,20,78">
            <Canvas.LayoutTransform>
                <ScaleTransform
                    CenterX="0" CenterY="0"
                    ScaleX="{Binding ElementName=uiScaleSlider,Path=Value}"
                    ScaleY="{Binding ElementName=uiScaleSlider,Path=Value}"
                />
            </Canvas.LayoutTransform>

            <Canvas Height="81" Canvas.Left="30" Canvas.Top="20" Width="293">

                <Path Stroke="Black" StrokeThickness="1" Canvas.Left="10" Canvas.Top="10.083" Stretch="Fill" Width="242.083" Height="57.917">
                    <Path.Fill>
                        <LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
                            <GradientStop Color="#FFA7F958" Offset="0.5"/>
                            <GradientStop Color="White"/>
                        </LinearGradientBrush>
                    </Path.Fill>

                    <Path.Effect>
                        <DropShadowEffect BlurRadius="5" RenderingBias="Quality" ShadowDepth="3" Opacity="0.5"/>
                    </Path.Effect>

                    <Path.Data>
                        <!-- Combines two geometries using the exclude combine mode. -->
                        <CombinedGeometry GeometryCombineMode="Union">

                            <CombinedGeometry.Geometry1>
                                <PathGeometry 
                                Figures="M111.56805,181.95457 C208.37539,226.01166 409.50003,204.49945 444.50004,194.49933 L413.64389,-121.86963 C366.54966,48.418345 324.07336,148.13777 111.56805,181.95457 z"
                                >
                                    <PathGeometry.Transform>
                                        <TransformGroup>
                                            <ScaleTransform ScaleX="0.10" ScaleY="0.2"/>
                                            <SkewTransform/>
                                            <RotateTransform/>
                                            <TranslateTransform X="70" Y="65"/>
                                        </TransformGroup>
                                    </PathGeometry.Transform>
                                </PathGeometry>
                            </CombinedGeometry.Geometry1>

                            <CombinedGeometry.Geometry2>
                                <RectangleGeometry Rect="100,10,300,100" RadiusX="15" RadiusY="15">
                                </RectangleGeometry>
                            </CombinedGeometry.Geometry2>

                        </CombinedGeometry>
                    </Path.Data>
                </Path>
                <TextBox Canvas.Left="35" Canvas.Top="18" Background="Transparent" FontFamily="Meiryo UI" Padding="0,0,0,0" Height="34" Width="213" TextWrapping="WrapWithOverflow" FontSize="12" BorderThickness="0">
                    はぁ～びっくりしました！！いや、今日も仕事だったのかと思っちゃって...暇ですよー
                </TextBox>
                <TextBlock Canvas.Left="153" Canvas.Top="52" Background="Transparent" FontFamily="Meiryo UI" Padding="0,0,0,0" Height="16" Width="95" TextWrapping="WrapWithOverflow" FontSize="8" TextAlignment="Right"><!--15:33:52--></TextBlock>
            </Canvas>

            <Canvas Height="55" Canvas.Left="246" Canvas.Top="87" Width="129">

                <Path Stroke="Black" StrokeThickness="1" Canvas.Left="20" Canvas.Top="11.208" Stretch="Fill" Width="88.25" Height="28.584" RenderTransformOrigin="0.5,0.5">
                    <Path.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform ScaleX="-1"/>
                            <SkewTransform/>
                            <RotateTransform/>
                            <TranslateTransform/>
                        </TransformGroup>
                    </Path.RenderTransform>
                    <Path.Fill>
                        <LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
                            <GradientStop Color="LightGray" Offset="0.5"/>
                            <GradientStop Color="White"/>
                        </LinearGradientBrush>
                    </Path.Fill>

                    <Path.Effect>
                        <DropShadowEffect BlurRadius="5" RenderingBias="Quality" ShadowDepth="3" Opacity="0.5"/>
                    </Path.Effect>

                    <Path.Data>
                        <!-- Combines two geometries using the exclude combine mode. -->
                        <CombinedGeometry GeometryCombineMode="Union">

                            <CombinedGeometry.Geometry1>
                                <PathGeometry 
                                Figures="M111.56805,181.95457 C208.37539,226.01166 409.50003,204.49945 444.50004,194.49933 L413.64389,-121.86963 C366.54966,48.418345 324.07336,148.13777 111.56805,181.95457 z"
                                >
                                    <PathGeometry.Transform>
                                        <TransformGroup>
                                            <ScaleTransform ScaleX="0.10" ScaleY="0.2"/>
                                            <SkewTransform/>
                                            <RotateTransform/>
                                            <TranslateTransform X="70" Y="65"/>
                                        </TransformGroup>
                                    </PathGeometry.Transform>
                                </PathGeometry>
                            </CombinedGeometry.Geometry1>

                            <CombinedGeometry.Geometry2>
                                <RectangleGeometry Rect="100,10,300,100" RadiusX="30" RadiusY="30">
                                </RectangleGeometry>
                            </CombinedGeometry.Geometry2>

                        </CombinedGeometry>
                    </Path.Data>
                </Path>
                <TextBox Canvas.Left="26" Canvas.Top="14" Background="Transparent" FontFamily="Meiryo UI" Padding="0,0,0,0" Height="20" Width="84" TextWrapping="WrapWithOverflow" FontSize="12" BorderThickness="0">
                    びっくり？
                </TextBox>
                <TextBlock Canvas.Left="37" Canvas.Top="27" Background="Transparent" FontFamily="Meiryo UI" Padding="0,0,0,0" Height="16" Width="62" TextWrapping="WrapWithOverflow" FontSize="8" TextAlignment="Right"><Run><!--15:34:03--></Run></TextBlock>
            </Canvas>


            <Canvas Height="55" Canvas.Left="24" Canvas.Top="115" Width="130">

                <Path Stroke="Black" StrokeThickness="1" Canvas.Left="17" Canvas.Top="10.208" Stretch="Fill" Width="93" Height="32.792" RenderTransformOrigin="0.5,0.5">
                    <Path.Fill>
                        <LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
                            <GradientStop Color="#FFA7F958" Offset="0.5"/>
                            <GradientStop Color="White"/>
                        </LinearGradientBrush>
                    </Path.Fill>

                    <Path.Effect>
                        <DropShadowEffect BlurRadius="5" RenderingBias="Quality" ShadowDepth="3" Opacity="0.5"/>
                    </Path.Effect>

                    <Path.Data>
                        <!-- Combines two geometries using the exclude combine mode. -->
                        <CombinedGeometry GeometryCombineMode="Union">

                            <CombinedGeometry.Geometry1>
                                <PathGeometry 
                                Figures="M111.56805,181.95457 C208.37539,226.01166 409.50003,204.49945 444.50004,194.49933 L413.64389,-121.86963 C366.54966,48.418345 324.07336,148.13777 111.56805,181.95457 z"
                                >
                                    <PathGeometry.Transform>
                                        <TransformGroup>
                                            <ScaleTransform ScaleX="0.10" ScaleY="0.2"/>
                                            <SkewTransform/>
                                            <RotateTransform/>
                                            <TranslateTransform X="70" Y="65"/>
                                        </TransformGroup>
                                    </PathGeometry.Transform>
                                </PathGeometry>
                            </CombinedGeometry.Geometry1>

                            <CombinedGeometry.Geometry2>
                                <RectangleGeometry Rect="100,10,300,100" RadiusX="30" RadiusY="30">
                                </RectangleGeometry>
                            </CombinedGeometry.Geometry2>

                        </CombinedGeometry>
                    </Path.Data>
                </Path>
                <TextBox Canvas.Left="26" Canvas.Top="14" Background="Transparent" FontFamily="Meiryo UI" Padding="0,0,0,0" Height="20" Width="84" TextWrapping="WrapWithOverflow" FontSize="12" BorderThickness="0">
                    あわてた～笑
                </TextBox>
                <TextBlock Canvas.Left="37" Canvas.Top="27" Background="Transparent" FontFamily="Meiryo UI" Padding="0,0,0,0" Height="16" Width="62" TextWrapping="WrapWithOverflow" FontSize="8" TextAlignment="Right"><Run><!--15:34:03--></Run></TextBlock>
            </Canvas>

        </Canvas>

        <Slider
            x:Name="uiScaleSlider"
            HorizontalAlignment="Left"
            VerticalAlignment="Bottom"
            ToolTip="Determines the UI scale factor. Double-click to revert scaling back to 100%."
            Height="118"
            Value="1" Minimum="0.1" Maximum="10.0"
            Orientation="Vertical"
            Ticks="1"
            IsSnapToTickEnabled="true"
            TickPlacement="BottomRight"
            AutoToolTipPlacement="BottomRight"
            AutoToolTipPrecision="2" Width="32"
            Padding="0,0,0,0" Margin="0,0,485,0"
        />

    </Grid>


## ４．「Microsoft.Expression.Drawing.dll」を利用したバージョン

<Window
～・・・～
        xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing" 
～・・・～
            <Grid Margin="45,96,602,323">
                <ed:Callout AnchorPoint="-0.075,0.864" CalloutStyle="RoundedRectangle" FontSize="14.667" HorizontalAlignment="Left" Height="24" Margin="31,10,0,0" Stroke="Black" VerticalAlignment="Top" Width="117" FontFamily="Meiryo UI">
                    <ed:Callout.Fill>
                        <LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
                            <GradientStop Color="LightGray" Offset="1"/>
                            <GradientStop Color="White"/>
                        </LinearGradientBrush>
                    </ed:Callout.Fill>
                    <ed:Callout.Effect>
                        <DropShadowEffect BlurRadius="5" RenderingBias="Quality" ShadowDepth="2" Opacity="0.5"/>
                    </ed:Callout.Effect>
                </ed:Callout>
                <TextBlock Text="こんにちは。" FontFamily="Meiryo UI" FontSize="12" Height="17" Width="79" Margin="40,14,68,29"/>
                <TextBlock Text="15:00" FontFamily="Meiryo UI" FontSize="8" Height="20" Width="30" Margin="118,18,39,22"/>
            </Grid>
～・・・～
            <ed:Callout AnchorPoint="1.095,0.758" CalloutStyle="RoundedRectangle" FontSize="14.667" HorizontalAlignment="Left" Height="24" Margin="136,171,0,0" Stroke="Black" VerticalAlignment="Top" Width="97" FontFamily="Meiryo UI">
                <ed:Callout.Fill>
                    <LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
                        <GradientStop Color="LawnGreen" Offset="1"/>
                        <GradientStop Color="White"/>
                    </LinearGradientBrush>
                </ed:Callout.Fill>
                <ed:Callout.Effect>
                    <DropShadowEffect BlurRadius="5" RenderingBias="Quality" ShadowDepth="1" Opacity="0.5"/>
                </ed:Callout.Effect>
                <ed:Callout.Content>
                    何か？？
                </ed:Callout.Content>
            </ed:Callout>
～・・・～


###### tags: `WPF` `XAML` `SpeechBubbles` `💭会話の吹き出し`