0

我有我的自定义控件，看起来像这样

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

但是，当我在控件中使用此样式时，所有元素（文本框和标签等）都被此样式覆盖。

4

2 回答 2

0

使用 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>
于 2010-09-12T22:21:43.687 回答
0

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

  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>
于 2010-09-13T10:01:03.037 回答