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. Conf Buddy Contacts List

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.

Win8_Download (2)


jesseLiberty
About the Author

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

Comments

Comments are disabled in preview mode.