Cómo creo un control WPF personalizado como una burbuja de dibujos animados con esquinas constantes

Question

Necesito crear una burbuja rectangular con esquinas redondeadas con texto dentro, como un bocadillo de diálogo de dibujos animados. Necesito que la burbuja se expanda horizontal y verticalmente según el tamaño del texto que contenga. Me gustaría que la flecha de la voz y el radio de las esquinas redondeadas permanezcan constantes.

Podría simplemente usar un camino para crear mi burbuja, pero no puedo cambiar el tamaño de la burbuja y mantener el radio de las esquinas y la flecha constante ... es la ruta completa la que se redimensionará.

Agradecería que alguien pudiera señalarme en la dirección correcta.

eliminado enlace ImageShack muertos

Aquí está la versión final de la facilidad de control de la burbuja de dibujos animados. He agregado un rectángulo sin un trazo a la versión de Jobi Joy para ocultar el final de las líneas de trazado, en lugar de intentar hacer que aparezca al ras con el rectángulo.

<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> 

Answer 1

Utilice esta XAML, puede crear una ventana emergente o una ContentControl y puede dar a esta cuadrícula como la plantilla de control en él para conseguir un aspecto uniforme

<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> 

eliminado ImageShack vínculo roto

I han hecho un blog post on this

Answer 2

Las esquinas redondeadas pueden simplemente ser una frontera con conjunto Corner Aliasing.

La flecha constante/habla puede ser una ruta que se coloca en una cuadrícula junto con el borde.

Eche un vistazo a la plantilla de control para GroupBox y vea cómo el contenido "Encabezado" se posiciona para flotar sobre el borde del cuadro de grupo.

Haría lo mismo, excepto que colocaría una ruta en la parte inferior en lugar de la parte superior.