WPF自定义控件和样式 [英] WPF Custom Controls and Styling

问题描述

我创建了一个扩展UserControl的自定义控件.该控件有一个图形和一些用作标签的文本.单击后还执行某些功能.所有这一切都完美地工作.
问题是这样，我以编程方式将我的自定义控件添加到堆栈面板中.在我的应用程序的xaml标记中，我为此控件设置了一种样式，该样式可以根据我的需要进行渲染，除非它确实显示在我的标签和图像上，从而使其不可见.我在这里做错什么了?

这是我在XAML标记中设置的样式.

I''ve created a custom control that extends UserControl. The control has a graphic and some text which serves as a label. It also perform some function upon being clicked. All this works perfectly.
The problem is this, I add my custom control in a stack panel programatically. In the xaml markup of my application I have set a style for this control, the style renders as I want, except when it does it appears to be layered over top of my label and image making them not visible. What am I doing wrong here?

Here is the style I am setting in the XAML markup

<Style TargetType="{x:Type NDIControl:ServiceItem}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="NDIControl:ServiceItem">
                    <Border Name="ServiceBorder"

                                Background="Transparent"

                                BorderBrush="Black"

                                BorderThickness="1"

                                CornerRadius="6"

                                Margin="15,5,0,0">
                    </Border>
                  </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

推荐答案

最好这样编写contentpresenter标记:
< contentpresenter content ="{TemplateBinding Content}" Horizo​​ntalAlignment ="Center" VerticalAlignment ="Center"/>

ContentPresenter比TextBlock效率高得多，并且是专门为ControlTemplates设计的.

并在控件模板后提供一个网格并删除xaml中提供的u边距.

It would be better if you write contentpresenter tag as this :
<contentpresenter content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center"/>

ContentPresenter is much more efficient than TextBlock and was designed specifically for ControlTemplates.

and provide a grid after the control template and remove the margin that u provided in the xaml.

您可以查看控件的z index属性.将标签的zindex设置为高于堆栈面板.可能会为您解决问题.

You could look at the zindex property of a control. Set the zindex of the label to be higher than the stack panel. Might fix things for you.

好吧，我可以通过在我的样式的XAML标记中进行此操作来实现它

< pre lang ="xml">< Style x:Key ="ServiceItemStyle"
TargetType ="{x:Type NDIControl:ServiceItem}">
< Setter Property ="Template">
< Setter.Value>
< ControlTemplate TargetType ="NDIControl:ServiceItem">
< Border Name ="Border"
BorderThickness ="1"
BorderBrush ="Black"
CornerRadius ="6"
Background =#1F2025">
< Grid>
< ContentPresenter></ContentPresenter>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style></pre>


所以您看到我添加了< Grid>标签和< ContentPresenter>我的边框样式声明后添加标签.完成此操作后，我可以看到控件的动态内容.这是应该完成的方式还是我仍然缺少某些东西?

感谢塔伦(Tarun)的帮助.

Okay I got it working by doing this in the XAML markup of my style

<pre lang="xml"><Style x:Key="ServiceItemStyle"
TargetType="{x:Type NDIControl:ServiceItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="NDIControl:ServiceItem">
<Border Name="Border"
BorderThickness="1"
BorderBrush="Black"
CornerRadius="6"
Background="#1F2025">
<Grid>
<ContentPresenter></ContentPresenter>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style></pre>


So you see I added the <Grid> tag and <ContentPresenter> tag after my border style declaration. After doing this I can see the dynamic content of my control. Is this the way it should be done or am I still missing something?

Thanks to Tarun for the help.

这篇关于WPF自定义控件和样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！