2015-12-17 32 views
1

我正在尝试创建一个包含几个形状,矩形,椭圆和标签的自定义控件。然而,这种构造感觉像是一种黑客。我的问题....在wpf中设置自定义用户控件

  1. 有没有办法来布局这个内容,以便其更加动感
  2. 使椭圆形状始终保持垂直居中
  3. 设置一个最大宽度矩形
  4. 矩形的高度将增长到适合

    • 如果4不可能文本的内容,我至少可以使文本的长标题显示为节点A有一个...

目前我使用时髦的利润率和诸如此类的东西放置的东西在正确的位置黑客一起。希望你能帮助。多谢你们。

enter image description here

代码:

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

回答

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

完美,这就是我一直在寻找。 – JokerMartini

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