Wpf 用户控件的自定义边框
我对设计知之甚少,无法实现这一目标 我正在尝试创建一个带有特殊边框的用户控件。边界应如下所示: 标题是一个标签(如果必须,则为textblock),其内容在初始化时设置 边框必须在页眉之前停止,并在页眉之后重新开始,页眉的边距如所述。 边框将包含一个框架或网格,该框架或网格必须符合边框形状(可能带有遮罩)。整个背景必须是透明的或透明的(颜色#000000 xx),这一点很重要,因为标题不能通过位于顶部来“隐藏”矩形 我想知道实现这一目标的方向。visual studio 2012中的Blend可用 谢谢你给你 我使用了Wpf 用户控件的自定义边框,wpf,xaml,expression-blend,expression-blend-4,Wpf,Xaml,Expression Blend,Expression Blend 4,我对设计知之甚少,无法实现这一目标 我正在尝试创建一个带有特殊边框的用户控件。边界应如下所示: 标题是一个标签(如果必须,则为textblock),其内容在初始化时设置 边框必须在页眉之前停止,并在页眉之后重新开始,页眉的边距如所述。 边框将包含一个框架或网格,该框架或网格必须符合边框形状(可能带有遮罩)。整个背景必须是透明的或透明的(颜色#000000 xx),这一点很重要,因为标题不能通过位于顶部来“隐藏”矩形 我想知道实现这一目标的方向。visual studio 2012中的Blend
HeaderedContentControl
,它允许您拥有一个标题和一个内容,您可以在自己喜欢的模板中进一步使用这些标题和内容
<HeaderedContentControl x:Class="CSharpWPF.MyUserControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="300"
Header="Header">
<HeaderedContentControl.Template>
<ControlTemplate TargetType="HeaderedContentControl">
<Grid>
<Border BorderBrush="Black"
BorderThickness="4"
CornerRadius="10"
Padding="4"
Margin="10">
<ContentPresenter />
</Border>
<TextBlock Text="{TemplateBinding Header}"
Background="White"
HorizontalAlignment="Left"
VerticalAlignment="Top"
FontSize="13"
Margin="25,0,0,0"
Padding="10,0"/>
</Grid>
</ControlTemplate>
</HeaderedContentControl.Template>
<Grid>
<TextBlock Text="content" />
</Grid>
</HeaderedContentControl>
结果
更新
试试这个模板,我确实试着用纯xaml来实现
<HeaderedContentControl.Template>
<ControlTemplate TargetType="HeaderedContentControl">
<DockPanel x:Name="root"
LastChildFill="True"
Margin="10">
<DockPanel.Resources>
<Style TargetType="Border">
<Setter Property="BorderBrush"
Value="Black" />
<Setter Property="Width"
Value="30" />
<Setter Property="Height"
Value="30" />
<Setter Property="CornerRadius"
Value="10" />
</Style>
</DockPanel.Resources>
<Grid DockPanel.Dock="Top"
Height="20">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20" />
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<Border BorderThickness="4,4,0,0" />
<Border BorderThickness="0,4,0,0"
Grid.Column="2"
Width="auto"
CornerRadius="0" />
<Border BorderThickness="0,4,4,0"
Grid.Column="3"
HorizontalAlignment="Right" />
<TextBlock Text="{TemplateBinding Header}"
FontSize="13"
Grid.Column="1"
Margin="10,-10"
VerticalAlignment="Top" />
</Grid>
<Grid Height="20"
DockPanel.Dock="Bottom">
<Border BorderThickness="4,0,4,4"
Width="auto"
VerticalAlignment="Bottom" />
</Grid>
<Border BorderThickness="4,0,0,0"
DockPanel.Dock="Left"
Height="auto"
Width="20"
CornerRadius="0" />
<Border BorderThickness="0,0,4,0"
DockPanel.Dock="Right"
Width="20"
Height="auto"
CornerRadius="0" />
<ContentPresenter Margin="-10" />
</DockPanel>
</ControlTemplate>
</HeaderedContentControl.Template>
如果不合适,其他方法可能包括一些代码隐藏
结果
看起来您可以只使用标准的
GroupBox
,创建这样的用户控件似乎没有用。@KingKing将添加更多控件和功能,可能会更改边框形状。如果我知道如何使用这个简单的形状,我将学习如何使用任何其他非语言形状的边框。谢谢。我根本没有意识到这一点。我猜有一些东西在压力书中没有描述:)你能告诉我边界元素的用途是什么吗?将显示控件的内容,例如本例中包含文本块的网格
元素。您可以选择将您选择的内容放在上面的示例中,或者在声明控件的新实例时,例如,
解决方案中缺少原始问题的要求。如上所述,背景必须是透明的或alpha-ed。我将标题的背景设置为透明,您可以看到下面的边框。