Question

Folks

I am working in UI design in a project where our team chose to decouple C# and XAML as much as possible.

I’ve been having trouble to create Styles for many common widgets (buttons, etc.) and some UserControls, specially because I don’t-want/don’t-know-how/am-not-supposed to use code-behind.

What I want to do is to be able to change properties of elements that are “deep within” the layout tree of my UserControls.

For example, suppose I have an UserControl that is a Border, which contains a StackPanel, which contains a colorful Ellipse and other things.

I want to be able to instantiate this user control and change only the color of the ellipse, like this:

<MyUserControl Background="Gray" EllipseColor="LightGreen" />

where “EllipseColor” would be some “custom” property defined in the UserControl.

I tried DependencyProperty within styles, but got no success, although I “feel” there must be a simple way to do this.

Any help (links, code snippets) would be much welcome.

Thanks for reading.

Answer 1

The “No Code Behind” rule in MVVM is for keeping the View and the ViewModel completely separate, and should not be used for view-specific code such as DependencyProperties. Its like saying “Build a house out of these square blocks, but I want a rounded roof and you can’t create your own building blocks”. The whole point of DependencyProperties is to create additional Properties for your Views that don’t already exist.

The important bit is that the View doesn’t directly reference the ViewModel, and vise versa.

In your case, I would either create a DependencyProperty in the Code Behind for your UserControl for EllipseColor, or use something like the Background property of the UserControl and bind my Ellipse fill color to that.