As noted in previous posts, I’m writing a Windows 8 application in XAML and C# named Conference Buddy, that gathers information about contacts we meet at conferences. The application has a number of pages, one of which is the ContactsList page, as shown in the figure. Notice that all of the Company names are in yellow, but the raffle column is in red only if it is set to true, otherwise it is in white.
In my previous post I showed how to set the Company column and the column headers. In this post, I’ll show how to set the Raffle column to red conditionally; that is, only if it is true.
The easiest way to understand how this works, is to examine it upside down, starting with the markup. The Raffle column looks like this,
<
telerikGrid:DataGridTextColumn
PropertyName
=
"raffle"
Header
=
"Raffle?"
SizeMode
=
"Auto"
CellContentStyleSelector
=
"{StaticResource RaffleStyleSelector}"
/>
The key field, of course, is CellContentStyleSelector. This is set to the static resource whose key is RaffleStyleSelector. And that, in turn, is defined in the RadDataGrid Resources,
<
common:RaffleStyleSelector
x:Key
=
"RaffleStyleSelector"
>
<
common:RaffleStyleSelector.NoRaffleStyle
>
<
Style
TargetType
=
"TextBlock"
>
<
Setter
Property
=
"Foreground"
Value
=
"White"
/>
<
Setter
Property
=
"HorizontalAlignment"
Value
=
"Center"
/>
<
Setter
Property
=
"VerticalAlignment"
Value
=
"Center"
/>
</
Style
>
</
common:RaffleStyleSelector.NoRaffleStyle
>
<
common:RaffleStyleSelector.RaffleStyle
>
<
Style
TargetType
=
"TextBlock"
>
<
Setter
Property
=
"Foreground"
Value
=
"Red"
/>
<
Setter
Property
=
"HorizontalAlignment"
Value
=
"Center"
/>
<
Setter
Property
=
"VerticalAlignment"
Value
=
"Center"
/>
</
Style
>
</
common:RaffleStyleSelector.RaffleStyle
>
</
common:RaffleStyleSelector
>
If you strip away all the fluff, what you have are two simple styles: one for when raffle is true (RaffleStyle) and one for when it is false (NoRaffleStyle). So where’s the logic that determines which style to use? That is in the RaffleStyleSelector class that we will write and place in the common folder.
public
class
RaffleStyleSelector : StyleSelector
{
public
Style NoRaffleStyle
{
get
;
set
;
}
public
Style RaffleStyle
{
get
;
set
;
}
Notice that this class derives from StyleSelector. We add two automatic properties: NoRaffleStyle and RaffleStyle. We then override the SelectStyleCore method of the base class.
protected
override
Style SelectStyleCore(
object
item, DependencyObject container )
{
bool
wantsRaffle =
( ( item
as
DataGridCellInfo ).Item
as
Contact ).raffle;
if
( wantsRaffle ==
true
)
{
return
RaffleStyle;
}
else
{
return
NoRaffleStyle;
}
}
The trick here is that the item that is passed in is of type DataGridCellInfo.. That type has an Item property which we know to be of type Contact, and with that we can obtain the raffle property. Once we have the property we can check if it is set to true or false, and return the corresponding style.
That’s all there is to it. As the raffle boolean change, so will change the color of the cell.
Jesse Liberty has three decades of experience writing and delivering software projects. He is the author of 2 dozen books and has been a Distinguished Software Engineer for AT&T and a VP for Information Services for Citibank and a Software Architect for PBS. You can read more on his personal blog or follow him on twitter