RulesManager を C1ListView と統合する方法

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

Set Up Application

Create a WPF application
Drag and drop ListView and RulesManager on the form
Bind the data using ItemsSource property

Define Value Converters

Use the following code to implement value converter.

ScoreConverter

XAML	コードのコピー
<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.

XAML	コードのコピー
<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>

XAML

コードのコピー

<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.

XAML	コードのコピー
<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>

XAML

コードのコピー

<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.

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

XAML

コードのコピー

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