21

漫画の吹き出しのように、角が丸くテキストが入った長方形の吹き出しを作成する必要があります。含まれるテキストのサイズに応じて、バブルを水平方向および垂直方向に拡張する必要があります。スピーチの矢印と丸みを帯びた角の半径を一定に保ちたいです。

単純にパスを使用してバブルを作成することはできますが、バブルのサイズを変更して角の半径と矢印を一定に保つことはできません...サイズが変更されるのはパス全体です。

誰かが私を正しい方向に向けることができれば幸いです。

無効な ImageShack リンクを削除

これは、漫画の吹き出しのユーザー コントロールの最終バージョンです。Jobi Joy のバージョンにストロークのない四角形を追加して、四角形と同じ高さになるようにしようとする代わりに、パス ラインの終点を非表示にしました。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="40"/>
    </Grid.RowDefinitions>
    <Rectangle Fill="#FF686868" Stroke="#FF000000" RadiusX="10" RadiusY="10"/>
    <Path Fill="#FF686868" Stretch="Fill" Stroke="#FF000000" HorizontalAlignment="Left" Margin="30,-5.597,0,-0.003" Width="25" Grid.Row="1" Data="M22.166642,154.45381 L29.999666,187.66699 40.791059,154.54395"/>                  
    <Rectangle Fill="#FF686868" RadiusX="10" RadiusY="10" Margin="1"/>
    <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="25" Text="Hello World" TextWrapping="Wrap"/>                       
</Grid>
4

2 に答える 2

25

この XAML を使用します。PopUp または ContentControl を作成し、この Grid をコントロール テンプレートとして指定して、一貫した外観を得ることができます。

<Grid x:Name="grid">
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="40"/>
    </Grid.RowDefinitions>
    <Rectangle Fill="#FF686868" Stroke="#FF000000" RadiusX="10" RadiusY="10"/>
    <Path Fill="#FF686868" Stretch="Fill" Stroke="#FF000000" HorizontalAlignment="Left" Margin="30,-1.6,0,0" Width="25" Grid.Row="1" 
        Data="M22.166642,154.45381 L29.999666,187.66699 40.791059,154.54395"/>          
    <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="25" Text="Hello World" TextWrapping="Wrap"/>           
</Grid>

無効な ImageShack リンクを削除

私はこれについてブログ記事を作成しました

于 2008-12-03T16:02:06.193 に答える
1

丸みを帯びた角は、コーナー エイリアシング セットを使用した境界線だけにすることができます。

定数/音声矢印は、境界線に沿ってグリッドに配置されるパスにすることができます。

GroupBox のコントロール テンプレートを見て、"Header" コンテンツがグループ ボックスの Border 上にフロートするように配置されていることを確認してください。

上部ではなく下部にパスを配置することを除いて、同じことを行います。

于 2008-12-03T15:52:02.470 に答える