visual studio redondos redondo redondear personalizados net botones boton borde .net wpf custom-controls

.net - studio - ¿Cómo creo un control WPF personalizado como una burbuja de dibujos animados con curvas constantes



redondear boton vb net (2)

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 constante el radio de las esquinas y la flecha ... es la ruta completa la que se redimensionará.

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

eliminado el enlace muerto de ImageShack

Aquí está la versión final del control de usuario 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>


Las esquinas redondeadas pueden ser simplemente un borde con un conjunto de Alias ​​de esquina.

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" está posicionado para flotar sobre el borde del cuadro de grupo.

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


Utilice este XAML, puede crear un PopUp o un ContentControl y puede darle a este Grid la plantilla de control para obtener 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 el enlace muerto de ImageShack

He hecho una publicación de blog sobre esto