Question

我创建了一个UserControl，它提供了一个带有圆角的边框面板和四周的阴影效果。它的工作正常，除了我在控件的实例上设置背景画笔属性时它不仅填充内部边框元素而且还应用于网格，因此我松开了圆角效果。

    <UserControl x:Class="MyApp.Controls.RoundedPanel"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         x:Name="userControl" mc:Ignorable="d">
    <Grid>
        <Grid Margin="-6,-5,-12,-13">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="20"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="27"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="20"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="27"/>
            </Grid.RowDefinitions>
            <Image Height="20" Width="20" Source="../Resources/Shadow Top Left.png" Stretch="Fill"/>
            <Image Height="20" Grid.Column="1" Source="../Resources/Shadow Top.png" Stretch="Fill"/>
            <Image Height="20" Width="27" Grid.Column="2" Source="../Resources/Shadow Top Right.png" Stretch="Fill"/>
            <Image Width="27" Grid.Column="2" Grid.Row="1" Source="../Resources/Shadow Right.png" Stretch="Fill"/>
            <Image Width="20" Grid.Row="1" Source="../Resources/Shadow Left.png" Stretch="Fill"/>
            <Image Height="27" Grid.Column="1" Grid.Row="2" Source="../Resources/Shadow Bottom.png" Stretch="Fill" />
            <Image Height="27" Width="20" Grid.Row="2" Source="../Resources/Shadow Bottom Left.png" Stretch="Fill"/>
            <Image Height="27" Width="27" Grid.Column="2" Grid.Row="2" Source="../Resources/Shadow Bottom Right.png" Stretch="Fill" Opacity="0.8" ClipToBounds="True"/>
        </Grid>
        <Border CornerRadius="12,12,12,12" VerticalAlignment="Stretch"/>
    </Grid>

我需要能够更改Border元素的Background画笔以填充圆形面板的内部，控件的不同实例将具有不同的颜色，因此我不希望画笔硬编码。我似乎能够实现这一目标的唯一方法是在控件的代码中添加一个新的DependencyProperty。

    public partial class RoundedPanel : UserControl
{
    public RoundedPanel()
    {
        InitializeComponent();
    }

    /// <summary> 
    /// Identifies the InnerBackground dependency property. 
    /// </summary> 
    public static readonly DependencyProperty InnerBackgroundProperty =
        DependencyProperty.Register(
            "InnerBackground", typeof(Brush), typeof(RoundedPanel));

    /// <summary> 
    /// Gets or sets the InnerBackground assigned to the control. 
    /// </summary> 
    public Brush InnerBackground
    {          
        get { return (Brush)GetValue(InnerBackgroundProperty); }
        set { SetValue(InnerBackgroundProperty, value); }
    }
}

然后我可以将新属性绑定到Border元素Background。

<Border CornerRadius="12,12,12,12" VerticalAlignment="Stretch" Background="{Binding InnerBackground, ElementName=userControl}" />

这样可以正常工作但似乎是一种相当混乱的方式（以某种方式能够覆盖现有的Background属性以仅应用于Border元素会更整洁）。有没有更好的方法来做到这一点，我缺少或这是正确的方法？

Answer 1

您只需使用RelativeSource Binding来自 {/ 1>}内的UserControl，就像这样：

<Border CornerRadius="12" Background="{Binding InnerBackground, RelativeSource={RelativeSource AncestorType={x:Type YourPrefix:RoundedPanel}}}" />

更新＆gt;＆gt;＆gt;

哦对不起，我完全错过了你问题的最后一段。

我不知道您可以用任何方式阻止UserControl为其Background着色......您可以重用Background这样的财产：

<Border CornerRadius="12" Background="{Binding Background, RelativeSource={RelativeSource AncestorType={x:Type YourPrefix:RoundedPanel}}}" />

但UserControl仍然会将其整个 Background的颜色设置为该颜色，因此您不会看到它。但是，如果您已将控件声明为CustomControl，那么可以完成此操作：

<Border CornerRadius="12" Background="{TemplateBinding Background}" />

请仔细阅读MSDN上的Control Authoring Overview页面，之前您考虑更改控件的基类。

如何将属性仅应用于UserControl的一个元素

1 个答案: