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

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

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

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

удалена неработающая ссылка на ImageShack

Вот финальная версия пользовательского элемента управления Cartoon Bubble. Я добавил прямоугольник без обводки в версию 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>

.net wpf custom-controls
person Frederic    schedule 03.12.2008    source источник

Ответы (2)


arrow_upward
25
arrow_downward

Используйте этот 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

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

person Jobi Joy    schedule 03.12.2008

arrow_upward
1
arrow_downward

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

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

Взгляните на шаблон управления для GroupBox и посмотрите, как содержимое «Header» размещается так, чтобы плавать над границей группового поля.

Вы бы сделали то же самое, но поместили бы Path внизу, а не вверху.

person Bogdan Varlamov    schedule 03.12.2008