Skip to main content Skip to footer

Implement MultiDataTriggers in C1DataGrid

With this blog, we will see how one can implement MultiDataTrigger in conjunction with C1DataGrid. We will work with MultiDataTriggers in the XAML markup to modify the BackColor of the C1DataGrid cells based on their respective values or on Mouse Hover action. (PS : No Code required ;))

Setting up the C1DataGrid

Bind your C1DataGrid to a ObservableCollection of Class Type 'Person':



public class Person  
{  
  public string Name { get; set; }  
  public string Address { get; set; }  
}  

.......  

person = new ObservableCollection()  
{  
  new Person(){Name="Prabhat",Address="India"},  
  new Person(){Name="Joe",Address="US"},  
  new Person(){Name="John",Address="UK"},  
  new Person(){Name="Victor",Address="Europe"},  
  new Person(){Name="Fuller",Address="UK"},  
  new Person(){Name="Richa",Address="India"},  
  new Person(){Name="Dia",Address="Europe"},  
  new Person(){Name="Smith",Address="US"}  
};  
datagrid.ItemsSource = person;  


Implementing MultiDataTrigger

This section implements the MultiDataTrigger to modify the backColor of the DataGrid cells containing 'India' and 'US' on MouseHover; whereas, backcolor for the cells containing values 'UK' and 'Europe' remain fixed :


<style>  
        <Style.Triggers>  
        <DataTrigger Binding="{Binding Path=Row.DataItem.Address, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=my:DataGridRowPresenter}}" Value="UK">  
            <Setter Property="Background" Value="Yellow" />  
        </DataTrigger>  
        <DataTrigger Binding="{Binding Path=Row.DataItem.Address, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=my:DataGridRowPresenter}}" Value="Europe">  
            <Setter Property="Background" Value="Orange" />  
        </DataTrigger>  
        <MultiDataTrigger>  
            <MultiDataTrigger.Conditions>  
                <Condition Binding="{Binding Path=Row.DataItem.Address, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=my:DataGridRowPresenter}}" Value="India" />  
                <Condition  Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsMouseOver}" Value="True"  />  
            </MultiDataTrigger.Conditions>  
            <Setter Property="Background" Value="Blue" />  
        </MultiDataTrigger>  
        <MultiDataTrigger>  
            <MultiDataTrigger.Conditions>  
                <Condition Binding="{Binding Path=Row.DataItem.Address, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=my:DataGridRowPresenter}}" Value="US" />  
                <Condition  Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsMouseOver}" Value="True"  />  
            </MultiDataTrigger.Conditions>  
            <Setter Property="Background" Value="Green" />  
        </MultiDataTrigger>  

</style>  


Following image shows the final output for our MultiDataTrigger operation. MultiDataTrigger_ChangeBackColor Download Sample CS Download Sample VB

MESCIUS inc.

comments powered by Disqus