Пользовательский контроль формы ромба 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>

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

Answer 1

Это на самом деле проще, чем вы думаете, шаблон управления не требуется:

1. Установите свойство Background пользовательского элемента управления на {x: Null}, это сделает фон "прозрачным" для мыши (события мыши будут обрабатываться всем, что находится ниже пользовательского элемента управления).

2. Создайте элемент, который определил форму элемента управления, задайте ему ненулевой фон (прозрачный - хорошо).

3. если вы можете поместить управляющий контент внутри элемента (например, если это Граница), сделайте это, в противном случае поместите и форму, и ваш контент в одну ячейку Grid и используйте Margin для перемещения контента в форму .

Итак, ваш пользовательский элемент управления в виде эллипса становится:

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

Answer 2

Используйте границы и добавьте то, что вы хотите в шаблон (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>