Как создать пользовательский элемент управления WPF, например, пузырь с постоянными углами - PullRequest
Новая
       11

Как создать пользовательский элемент управления WPF, например, пузырь с постоянными углами

21 голосов
/ 03 декабря 2008

Мне нужно создать прямоугольный пузырь с закругленными углами с текстом внутри, как речевой пузырь из мультфильма. Мне нужно, чтобы пузырь расширялся по горизонтали и вертикали в зависимости от размера текста, который он содержит. Мне бы хотелось, чтобы речевая стрелка и радиус закругленных углов оставались постоянными.

Я мог бы просто использовать путь для создания своего пузыря, но я не могу изменить размер пузыря и сохранить радиус углов и константу стрелки ... это весь путь, который будет изменен.

Я был бы признателен, если бы кто-то указал мне правильное направление.

удалена мертвая ссылка ImageShack

Вот окончательная версия мультяшного пузырькового пользовательского контроля. Я добавил прямоугольник без обводки в версию Джоби Джоя, чтобы скрыть линии конца пути, вместо того чтобы пытаться сделать так, чтобы они появлялись заподлицо с прямоугольником. 

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

Ответы [ 2 ]

25 голосов
/ 03 декабря 2008

Используйте этот XAML. Вы можете создать PopUp или ContentControl и предоставить эту сетку в качестве шаблона элемента управления для получения согласованного вида. 

<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

Я сделал сообщение в блоге на этом

1 голос
/ 03 декабря 2008

Закругленные углы могут быть просто набором Border with Corner Aliasing.

Стрелка константы / речи может быть путем, который расположен в сетке вместе с границей.

Посмотрите на шаблон элемента управления для GroupBox и посмотрите, как содержимое «Заголовка» расположено так, что оно перемещается по границе поля группы.

Вы бы сделали то же самое, за исключением того, что вы разместите путь внизу, а не вверху.

...