locked
Binding BackGround property of a UserControl RRS feed

  • Question

  • Hi there:

    I defined a simple UserControl with a single button inside a grid, then attached the grid's background color to whatever is the background color of the usercontrol. Well, it's not working.

    My UserControl is (the button has a margin of 20):

    <UserControl x:Class="NewUserControlVS.MyNewUserControl"
        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"
        mc:Ignorable="d"
        d:DesignHeight="300" d:DesignWidth="400">
    
       <Grid x:Name="LayoutRoot" Background="{Binding ElementName=btn, Path=Background}" >
          <Button Name="btn" Content="Button" Margin="20" />
       </Grid>
    </UserControl>

    Then , when adding the usercontrol to a page (I expect to have the 20 pixels of margin set with a background color of aqua):

    <UserControl x:Class="NewUserControlVS.MainPage"
        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"
        mc:Ignorable="d"
        d:DesignHeight="300" d:DesignWidth="400" xmlns:my="clr-namespace:NewUserControlVS">
    
        <Grid x:Name="LayoutRoot" Background="Red">
          <my:MyNewUserControl HorizontalAlignment="Left" Margin="70,69,0,0" 
                               x:Name="myNewUserControl1" VerticalAlignment="Top" Background="Aqua" />
       </Grid>
    </UserControl>

    It's not working, the usercontrol has a background color of something like navy.

    Could anybody tell me what am I doing wrong?

    Saturday, June 4, 2011 5:51 PM

Answers

  • Hi Rafael,

    You're almost there - but you're binding the background of the LayoutRoot element to the button's background, which is by default, navy blue. To get this to work as expected, swap the binding around thus:

    <UserControl x:Class="NewUserControlVS.MyNewUserControl"
        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"
        mc:Ignorable="d"
        d:DesignHeight="300" d:DesignWidth="400">
    
       <Grid x:Name="LayoutRoot" Loaded="LayoutRoot_Loaded" >
          <Button Name="btn" Content="Button" Margin="20" Background="{Binding ElementName=LayoutRoot, Path=Background}" />
       </Grid>
    </UserControl>


    Which will get you almost there, we now need LayoutRoot itself to be bound to the Background property of the usercontrol. But there is a gotcha with usercontrols - there are issues if you give the usercontrol itself a name to use in element-to-element binding. So, the workaround is to do the binding in code behind. Add this to the code behind:

    private void LayoutRoot_Loaded(object sender, RoutedEventArgs e)
    {
    	Binding binding = new Binding("Background");
    	binding.Mode = BindingMode.OneWay;
    	binding.Source = this;
    	LayoutRoot.SetBinding(BackgroundProperty, binding);
    }


    Then both the grid and button's background will change with that of the usercontrol's Background property.

    Regards,
    Rob

    Tuesday, June 7, 2011 6:33 AM