Sabit köşelere sahip bir çizgi film balonu gibi özel bir WPF denetimi nasıl oluşturabilirim

Question

Bir konuşma balonu gibi içeride köşeli yuvarlak köşeli dikdörtgen bir kabarcık oluşturmam gerekiyor. İçerdiği metnin boyutuna bağlı olarak yatay ve dikey olarak genişletmek için balonu kullanmalıyım. Konuşma oku ve yuvarlatılmış köşelerin yarıçapının sabit kalmasını isterim.

Kabarcımı oluşturmak için yalnızca bir yol kullanabilirim, ancak balonu yeniden boyutlandıramaz ve köşeleri yarıçapı ve oku sabit tutamam ... Yeniden boyutlandırılacak olan tüm yoldur.

Bazılarının beni doğru yönde gösterebileceğini takdir ediyorum.

kaldırıldı ölü ImageShack bağlantı İşte

karikatür kabarcık kullanıcı denetimi son sürümüdür. Jobi Joy'un sürümüne yol satırlarının sonunu gizlemek için bir kontur olmadan bir dikdörtgen ekledim.

<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

kullanın bu XAML, bir PopUp veya bir ContentControl oluşturabilir ve almak için tutarlı bir görünüşe

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

kaldırıldı ölü ImageShack bağlantı

I kontrolü şablonu olarak Izgara verebilir bir blog post on this

yaptık

Answer 2

Yuvarlatılmış köşeler yalnızca Köşe Aliasing ayarlı bir Sınır olabilir.

Sabit/konuşma oku, kenarlıkla birlikte bir ızgarada konumlandırılmış bir yol olabilir.

GroupBox'un denetim şablonuna bir göz atın ve "Header" içeriğinin, grup kutusunun Kenarlığı üzerinde nasıl kayan şekilde konumlandırıldığını görün.

Aynı yolu, bir yolun en tepede değil, alt kısımda konumlandırmanız dışında yaparsınız.