Changing the color fill of an object using Binding and SelectedItem.Content in a combobox

  • Article

Oh boy, thanks for making it to this blog. This entry is going to be a low number, so I customized it just for you. Ok, not really, but since there are likely so few numbers, you can feel unique.

Someone has to write these kinds of blogs. After all I can only write about security issues in Chrome, Apple OS X, etc. so many times. But those blogs really pull in the numbers. Serious numbers.

This is the kind of blog I prefer, but you know, I need the numbers from time to time. 

Reference: https://msdn.microsoft.com/en-us/library/ms742167.aspx

So how do you create XAML that connects or binds a shape fill with a combo box, it is pretty easy to do.

First open C# Express and create a WPF application (or Visual Studio Pro or Visual Studio Ultimate)

Then select the <Grid></Grid> and paste the following over it:

<Canvas>
<ComboBox Name="colorSelector" SelectedIndex="0">
<ComboBoxItem>Red</ComboBoxItem>
<ComboBoxItem>White</ComboBoxItem>
<ComboBoxItem>Blue</ComboBoxItem>
<ComboBoxItem>Black</ComboBoxItem>
</ComboBox>
<Ellipse
Width="82"
Height="51"
Fill="{Binding ElementName=colorSelector, Path=SelectedItem.Content}"

    Canvas.Left="245"

     Canvas.Top="124">
</Ellipse>

</Canvas>

Note that the line:

Fill="{Binding ElementName=colorSelector, Path=SelectedItem.Content}"

does all of the work. 

Fill is the interior color of the Ellipse (or that is how I think about it). When you use the braces ( { } ), this creates a declaration, in this case a binding declaration. So you have {Binding ElementName= …. in this case the ElementName refers to the ComboBox, which has the name “colorSelector”.   Because the comboBox is an object, then you use the Path keyword to the item that you want to get the information from, in this case you want the Content of the SelectedItem (SelectedItem.Content). 

On the other hand, if you specifying the path to a XML data, then you would use XPath. In this case you would still use the SelectedItem.Content. 

Now how would you know to use the SelectedItem.Content? Ummm? See the reference URL for more information, but using a search by google or bing isn’t real helpful.

Reference: https://msdn.microsoft.com/en-us/library/ms742167.aspx

The ComboBox class is described here:

https://msdn.microsoft.com/en-us/library/system.windows.controls.comboboxitem_members(v=VS.85).aspx

And you could sort through the 338 or so methods, properties and so forth to find the Content item.

In the line:

<ComboBox Name="colorBox" SelectedIndex="0">

SelectedIndex=”0” is the item that is selected by default, so try changing the number and see what happens. Smile

Well, the SelectedItem.Content does the trick, not that it is well documented anymore, so if you are starting out, good luck. For some reason, a Bing and Google search returns nothing really useful in the various forums. 

Oh well.

https://msdn.microsoft.com/en-us/library/ms753382(VS.85).aspx