• Article

How to: Create an ElementName Data Binding by Using the Silverlight Designer

Microsoft Silverlight will reach end of support after October 2021. Learn more.

You can bind an element's property value to a property on another named element by using the Silverlight Designer for Visual Studio 2010. For example, you can bind a control's Background property to the Background property of its parent element.

To create a data binding to a named element

  1. Create a new Silverlight Application project in Visual Basic or Visual C# named DataBindingDemo. For more information, see How to: Create a New Silverlight Project.

    MainPage.xaml opens in the Silverlight Designer.

  2. In Design view, right-click the root Grid control and select Properties from the shortcut menu.

  3. In the Properties window, locate the Background property.

  4. Use the brush editor to create and assign a brush to the Background property. For more information, see How to: Create a Brush by Using the Brush Editor.

  5. From the Toolbox, drag a ListBox control into the Grid control.

  6. In the Properties window, locate the ListBox control's Background property.

  7. Click the inheritance property marker (property marker inheritance icon).

  8. Click Apply Data Binding.

    The data binding builder appears.

  9. On the Source pane in the left panel, click ElementName.

  10. In the middle panel, click LayoutRoot.

    Source pane of data binding builder

  11. Click the Path pane.

  12. On the Path pane in the left panel, click the Background property.

    The ListBox control's Background property is bound to the grid control's Background property.

    Path pane of data binding builder

  13. Click outside the data binding builder to close the builder.

  14. In XAML view, note the markup extension that was added for the Background property.

    Background="{Binding ElementName=LayoutRoot, Path=Background}"