Настройка пользовательского пользовательского управления в wpf

Question

В настоящее время я пытаюсь создать настраиваемый элемент управления, который содержит несколько фигур, прямоугольник, эллипс и метку. Однако конструкция этого кажется немного взломанной. Мои вопросы ....

1. Есть ли способ, чтобы макет содержимого этого поэтому его более динамичные
2. Сделайте форму эллипса всегда оставаться вертикально по центру
3. Установить максимальную ширину для прямоугольника

4. высота прямоугольника будет расти, чтобы соответствовать содержание текста

   • Если 4 не представляется возможным, я могу по крайней мере, сделать длинные заголовки текста появляются как Узел A имеет l ...?

В настоящее время я взлом вместе с помощью напуганных полеев и этажерки поместить вещи в правильном месте. Надеюсь, ты поможешь. Спасибо, парни.

Код:

<UserControl x:Class="WpfApplication1.VNode" 
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      xmlns:local="clr-namespace:WpfApplication1" 
      mc:Ignorable="d" 
      d:DesignHeight="100" d:DesignWidth="200"> 

    <Grid> 
     <Rectangle x:Name="Backplate" Width="70" Height="24" RadiusX="2" RadiusY="2"> 
      <Rectangle.Effect> 
       <DropShadowEffect ShadowDepth="0" Direction="0" Opacity="0.75"/> 
      </Rectangle.Effect> 
      <Rectangle.Fill> 
       <LinearGradientBrush StartPoint="0,0" EndPoint="0,1" > 
        <GradientStop Color="#db4a38" Offset="0" /> 
        <GradientStop Color="#cf4635" Offset="1.0" /> 
       </LinearGradientBrush> 
      </Rectangle.Fill> 
     </Rectangle> 

     <Ellipse Width="18" Height="18" Margin="68,41,114,41" Fill="sc#1,.02,.02,.02"> 

     </Ellipse> 

     <TextBlock x:Name="Label" Text="Label" TextWrapping="Wrap" 
        Foreground="White" Margin="91,42,-91,-42" FontSize="11"> 
      <TextBlock.Effect> 
       <DropShadowEffect BlurRadius="2" Opacity="0.5" ShadowDepth="2" Direction="-45"/> 
      </TextBlock.Effect> 
     </TextBlock> 
    </Grid> 
</UserControl> 

Answer 1

Можно использовать Border контроль вместо Rectangle как Rectangle управления не имеет Content свойство.

 <Grid> 
      <Border CornerRadius="5" MaxWidth="200"> 
       <Border.Effect> 
        <DropShadowEffect ShadowDepth="0" Direction="0" Opacity="0.75"/> 
       </Border.Effect> 
       <Border.Background> 
        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1" > 
         <GradientStop Color="#db4a38" Offset="0" /> 
         <GradientStop Color="#cf4635" Offset="1.0" /> 
        </LinearGradientBrush> 
       </Border.Background> 
       <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center" Orientation="Horizontal"> 
        <Ellipse Width="18" Height="18" Fill="sc#1,.02,.02,.02"> 
        </Ellipse> 
        <TextBlock Margin="2" MaxWidth="50" Foreground="White" TextWrapping="Wrap">Node A has a long title</TextBlock> 
       </StackPanel> 
      </Border>    
     </Grid> 

Answer 2

<Border CornerRadius="5" Background="#db4a38" MaxWidth="100" VerticalAlignment="Top"> 
    <DockPanel Margin="5"> 
     <Ellipse DockPanel.Dock="Left" Fill="Black" Height="18" Width="18" /> 
     <TextBlock Margin="5,0,0,0" Foreground="White" Text="Node A has a long title" TextWrapping="Wrap"/> 
    </DockPanel> 
</Border>