2015-12-17 30 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>