2014-02-10 77 views
0

我已經創建了一個UserControl,該用戶控件提供了一個帶有圓角和各邊陰影效果的邊框面板。它的工作正常,除了當我在控件的實例上設置背景畫筆屬性時,它不僅填充內部邊框元素,而且還應用到網格,因此我鬆散了圓角效果。如何僅將屬性應用於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> 

我需要能夠改變只是邊境元素的背景刷來填充圓形面板內,控制不同的情況下會有不同的顏色,所以我不想讓刷子硬編碼。我似乎可以實現這一目標的唯一方法是在後面的代碼中爲控件添加一個新的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}" /> 

這工作得很好,但似乎這樣做的一個相當混亂的方式(是整潔以某種方式能夠覆蓋現有的背景屬性只適用於邊界元素)。有沒有更好的方式來做到這一點,我失蹤或這是正確的方法?

回答

0

你可以簡單地從一個RelativeSource BindingUserControl,就像這樣:

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

UPDATE >>>

噢,對不起,我完全錯過了最後一段你的問題。

我不知道的任何方式,你可以用它來從着色其Background停止UserControl ...你可以重用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

相關問題