WPF菱形自定義控件

Question

我有一個看起來像

<UserControl BorderBrush="#A9C2DE" HorizontalAlignment="Left" x:Class="Block" 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Height="86" Width="151" ToolTip="{DynamicResource BasicTooltip}"> 
<UserControl.Resources> 
    <ResourceDictionary Source="TextBoxStyles.xaml"/> 
</UserControl.Resources> 
<DockPanel LastChildFill="True" Style="{StaticResource PanelStyle}"> 
    <Label DockPanel.Dock="Top" Content="{Binding Path=_Code}" HorizontalAlignment="Stretch" Name="label1" Height="25" VerticalAlignment="Top" Style="{StaticResource LabelStyle}" ></Label> 
    <TextBox Name="txtBox" Style="{StaticResource DefaultStyle}" > 
     <TextBox.Text> 
      <Binding Path="_Name"> 

      </Binding> 
     </TextBox.Text> 
    </TextBox> 

</DockPanel> 

因此，大家可以看到這個控件由一個DockPanel中，我放置標籤和文本框的我的自定義控制。在代碼中，我在上面提到的標籤和文本框上添加了一些事件。該控件具有矩形的基本形狀。但是今天我發現，這個控件的形狀會更好，菱形或者更復雜的休閒矩形。 是否可以賦予我的控件不同的形狀，保留所有功能（我在代碼文件中編寫的所有事件），並保持內容（文本框和標籤）不變？

我給一個嘗試這種代碼

<Style TargetType="{x:Type UserControl}" x:Key="BlockStyle" > 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate> 

        <Ellipse 
          x:Name="Border" 
          Stroke="#FF393785" 
          StrokeThickness="2" 
          Fill="Transparent" 
          > 

        </Ellipse> 
      </ControlTemplate> 
      </Setter.Value> 

     </Setter> 
</Style> 

然而，當我在我的控制使用這種風格，所有元素（文本框和標籤等）通過這種風格coverd。

Answer 1

使用邊境insted的，並添加你想要的模板（TextBlock的等）

<ControlTemplate TargetType="UserControl">       
    <Border x:Name="border" BorderThickness="2" CornerRadius="15" BorderBrush="#FF211c19" RenderTransformOrigin="0.5,0.5"> 
      <!--I use binding to show content of control as a text in TextBlock--> 
     <TextBlock TextWrapping="Wrap" Text="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="10,5"/> 
    </Border> 
</ControlTemplate> 

Answer 2

這實際上是簡單的，那麼你認爲，不需要控制模板：

1. 設置用戶控件的Background屬性爲{x：Null}，這會使背景對鼠標「透明」（鼠標事件將由用戶控件下方的任何內容處理）。

2. 創建定義控件形狀的元素，給它一個非空背景（透明很好）。

3. 如果您可以將控件內容放入元素中（例如，如果它是邊框），則將其放入單元格中並使用「邊距」將內容移動到形狀中。

所以，你的用戶控件爲橢圓形變爲：

<UserControl HorizontalAlignment="Left" x:Class="Block" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Height="86" Width="151" ToolTip="{DynamicResource BasicTooltip}" 
    Background="{x:Null}">       <-- set background to null 
    <UserControl.Resources> 
     <ResourceDictionary Source="TextBoxStyles.xaml"/> 
    </UserControl.Resources> 
    <Grid>           <-- the container grid 
     <Ellipse         <-- the control shape 
      x:Name="Border" 
      Stroke="#FF393785" 
      StrokeThickness="2" 
      Fill="Transparent"/>     <-- with a non-null background 

     <DockPanel         <-- actual content 
      LastChildFill="True" 
      Style="{StaticResource PanelStyle}" 
      Margin="10 18 10 23">     <-- pushed inside the ellipse 

      ... 

     </DockPanel> 
    </Grid> 
</UserControl>