通过XAML编辑WPF UserControl组件

Question

I have the following code: XAML:

<UserControl x:Class="RBSoft.WPF.RedConsoleViewer"
             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="355" d:DesignWidth="691" Name="ConsoleUI_Control" KeyDown="ConsoleUI_Control_KeyDown">
    <Grid Name="_Layout">
        <Rectangle Name="BackgroundLayout">
            <!--...-->
        </Rectangle>
    </Grid>
</UserControl>

Code:

public Rectangle IBackground
{
    get { return this.BackgroundLayout; }
    set { this.BackgroundLayout = value; }
}

What I'm tying to do is edit the rectangle (BackgroundLayout) from the XAML editor like so:

<Window x:Class="LifeEnvironment.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="1064" Width="910"
        xmlns:my="clr-namespace:RBSoft.WPF;assembly=RBSoft.WPF"
        WindowStyle="None"
        WindowState="Maximized"
        WindowStartupLocation="CenterScreen">
    <Grid>
        <my:userControlTest>
            <my:userControlTest.IBackground>
                <Background ...>
            </my:userControlTest.IBackground>
        </my:userControlTest>
    </Grid>
</Window>

But I have no access to this, what I need to do?

Answer 1

The correct way to do it, is by wrapping up the Rectangle with an User Control, like this:

<UserControl x:Class="RBSoft.WPF.RedConsoleViewer" ...>
    <Grid Name="_Layout">
        <UserControl Name="BackgroundLayout">
            <Rectangle .../>
        </UserControl>
    </Grid>
</UserControl>

and then, change the Content property instead the object itself, so you don't lose the reference( BackgroundLayout ):

public Rectangle IBackground
{
    get { return (Rectangle)this.BackgroundLayout.Content; }
    set { this.BackgroundLayout.Content = value; }
}

and finally, it will work:

<my:userControlTest>
    <my:userControlTest.IBackground>
        <Background ...>
    </my:userControlTest.IBackground>
</my:userControlTest>

Answer 2

• in order to have access to control's property in XAML you need to make it a Dependency Property.

• i think (at least from what I have seen) a more common way to do what you're trying to do is to use a "common" style that controls the inner rectangle's background.

  EDIT

   public static readonly DependencyProperty IBackgroundProperty = DependencyProperty.Register("IBackground", typeof(Rectangle), typeof(NameOfYourUserControl)); public Rectangle IBackground { get { return (Rectangle)GetValue(IBackgroundProperty); } set { SetValue(IBackgroundProperty, value); } } 

changing to dependency property will make your XAML compile, however, you still have to process it in your user control.

Also when you use it, you are trying to set the background to a property of type rectangle! That clearly won't work. You must instantiate what your property is - a rectangle:

<my:userControlTest>
        <my:userControlTest.IBackground>
            <Rectangle  Fill="Orange"/>
        </my:userControlTest.IBackground>
    </my:userControlTest>