2014-02-10 3 views
0

Я создал UserControl, который предоставляет панель границы с закругленными углами и эффект тени вокруг всех сторон. Он отлично работает, за исключением проблемы: когда я устанавливаю свойство Background brush на экземпляр элемента управления, он не только заполняет внутренний элемент Border, но также применяется к сетке, поэтому я теряю эффект округленного угла.Как применить свойство только к одному элементу 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, чтобы заполнить внутреннюю часть округлой панели, различные экземпляры элемента управления будут иметь разные цвета, так что я не хочу кисть жестко закодирована. Единственный способ добиться этого - добавить новый 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 CornerRadius="12,12,12,12" VerticalAlignment="Stretch" Background="{Binding InnerBackground, ElementName=userControl}" /> 

Это работает хорошо, но, кажется, довольно грязный способ сделать это (было бы аккуратнее, чтобы каким-то образом быть в состоянии заменить существующую Фоновая свойство применяется только к элементу Border). Есть ли лучший способ сделать это, что мне не хватает или это правильный подход?

ответ

0

Вы можете сделать это просто с RelativeSource Binding из внутриUserControl, как это:

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

UPDATE >>>

Ой извините, я полностью пропустил последний абзац ваш вопрос.

Я не знаю ни одного способа, который вы можете использовать, чтобы остановить 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}" /> 

Пожалуйста, хорошо читать в Control Authoring Overview страницу на MSDN, хотя, перед тем вы думаете об изменении базовый класс вашего контроля.

+0

Спасибо, что ответили Шеридан. Не могли бы вы немного разобраться, я не понимаю, как переход на RelativeSource может устранить необходимость в новом DependancyProperty, чего я действительно хотел бы сделать? Или вы просто ссылаетесь на более чистый способ сделать привязку? – Garry

Смежные вопросы