How to integrate Rules Manager with C1ListView

This is a step-by-step guide for applying conditional formatting to C1ListView by integrating the Rules Manager control.

Set Up Application

1. Create a WPF application
2. Drag and drop ListView and Rules Manager on the form
3. Bind the data using ItemsSource property

Define Value Converters

Use the following code to implement value converter.

• ScoreConverter

  <local:ScoreToIconConverter x:Key="scoreConverter"/>
  

The ScoreConverter converts numeric scores to icons.

Integrate Rules Manager

Use the following code to integrate Rules Manager with ListView and add/edit the rules.

<c1:C1RulesEngine x:Key="rulesEngine" RulesChanged="C1RulesEngine_RulesChanged">
    <c1:RulesEngineSegmentsRule Ranges="[Score]">
        <c1:RulesEngineSegment ValueType="Percent" Value="0.33">
            <c1:RulesEngineStyle IconTemplate="{x:Static c1:C1IconTemplate.TriangleSouth}" IconBrush="Red" Foreground="Black" Background="#FFE7E7"/>
        </c1:RulesEngineSegment>
        <c1:RulesEngineSegment ValueType="Percent" Value="0.66"/>
        <c1:RulesEngineSegment>
            <c1:RulesEngineStyle IconTemplate="{x:Static c1:C1IconTemplate.TriangleNorth}" IconBrush="Green" Foreground="Black" Background="#E8FFED"/>
        </c1:RulesEngineSegment>
    </c1:RulesEngineSegmentsRule>
</c1:C1RulesEngine>

Use the following code to apply cell styling based on rules applied.

<c1:C1ListView x:Name="listView" Grid.Column="0">
    <c1:C1ListView.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal" >
                <TextBlock Text="{Binding Name}" />
                <ContentPresenter Height="12" Width="12" Margin="4 0" VerticalAlignment="Center">
                    <ContentPresenter.ContentTemplate>
                        <MultiBinding Converter="{StaticResource scoreConverter}">
                            <Binding />
                            <Binding RelativeSource="{RelativeSource Mode=FindAncestor, AncestorType=c1:C1ListView}" />
                            <Binding Source="{StaticResource rulesEngine}" />
                            <Binding RelativeSource="{RelativeSource self}" />
                            <Binding RelativeSource="{RelativeSource Mode=FindAncestor, AncestorType=ContentControl}" />
                        </MultiBinding>
                    </ContentPresenter.ContentTemplate>
                </ContentPresenter>
            </StackPanel>
        </DataTemplate>
    </c1:C1ListView.ItemTemplate>
</c1:C1ListView>

Use the following code to add a collapsible panel using C1Expander to show the Rules Manager control.

<c1:C1Expander Header="RulesManager" ExpandDirection="Left" ExpandIconAlignment="Left" HorizontalContentAlignment="Right" BorderThickness="0" Grid.Column="1">
    <c1:C1RulesManager Engine="{StaticResource rulesEngine}" Width="400"/>
</c1:C1Expander>