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, где я поместил этикетку и текстовое поле. В коде я добавил некоторое событие к операции над меткой и текстовым полем, упомянутым выше. Этот элемент управления имеет основную форму прямоугольника. Однако сегодня я узнал, что для этого элемента было бы лучше иметь форму ромба или более сложного, а затем случайного прямоугольника. Можно ли настроить мой контроль на другую форму, сохранить всю функциональность (все события, которые я написал в файле кода) и сохранить содержание (текстовое поле и ярлык) intanct?

Я дал попробовать с этим кодом

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

Однако, когда я использую этот стиль в моем контроле, все элементы (TextBox и этикетки и т.д.) являются укрыты этим стилем.

Answer 1

Использование Border 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. Установите контроль пользователя Фоновое свойство {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>