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，我放置了标签和文本框。在代码中，我向上面提到的标签和文本框中的操作添加了一些事件。此控件具有矩形的基本形状。然而今天我发现这个控件更好的是菱形或者比休闲矩形更复杂。是否可以为我的控件提供不同的形状，保留所有功能（我在代码文件中编写的所有事件）并保留内容（文本框和标签）inanct？

我尝试了这段代码

 <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

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

这实际上比你想象的更简单，不需要控制模板：

将用户控件的Background属性设置为{x：Null}，这会使背景对鼠标“透明”（鼠标事件将由用户控件下方的任何内容处理）。
< / LI>
创建定义控件形状的元素，给它一个非空背景（透明很好）。
如果您可以将控件内容放在元素中（例如，如果它是Border），则将形状和内容放在单个单元格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>

WPF菱形形状自定义控件

2 个答案: