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>