XamDataGrid Field value as gradient Background

I have Infragistics XamDataGrid and in it, there are few columns which show data in percentage.

Now I want these columns to show the value as percentage and Background as a 2-color gradient, in which 1st color would be binded to the percentage value, and 2nd color would the left over value.

The workaround for this is Templating cellvaluepresenter, through which you can do styling on a Cell.

You can create a style with TargetType="{x:Type igDP:CellValuePresenter}".

But now the question arises that how can I decide what value is coming from the backend and show the background on the basis of value.

Following is the code. In this code when I use StaticResource in CellValuePresenterStyle. The binding is working fine, but converter in the style is not called. When I use DynamicResource in CellValuePresenterStyle, the Binding breaks and the values in the column are empty.

<igDP:XamDataPresenter x:Name="xamDataPresenter1" Height="300" DataSource="{Binding DV}"    >
        <igDP:XamDataPresenter.FieldLayoutSettings>
            <igDP:FieldLayoutSettings AutoGenerateFields="True" HeaderPrefixAreaDisplayMode="FieldChooserButton" 
                                      />
        </igDP:XamDataPresenter.FieldLayoutSettings>

        <igDP:XamDataPresenter.FieldLayouts>
            <igDP:FieldLayout>
                <igDP:FieldLayout.FieldSettings>
                    <igDP:FieldSettings CellClickAction="SelectCell" AllowEdit="False" />
                开发者_StackOverflow中文版</igDP:FieldLayout.FieldSettings>
                <igDP:FieldLayout.Fields>
                    <!--<igDP:UnboundField Name="ProductID" Label="Product ID" />-->
                    <igDP:Field Name="LocationID" DisallowModificationViaClipboard="True" >
                        <igDP:Field.Settings>
                            <igDP:FieldSettings CellValuePresenterStyle="{DynamicResource myCustomFieldCell}"/>
                        </igDP:Field.Settings>
                    </igDP:Field>
                    <!--You can add more Field objects here-->
                </igDP:FieldLayout.Fields>
            </igDP:FieldLayout>
        </igDP:XamDataPresenter.FieldLayouts>           
    </igDP:XamDataPresenter>

Code for Style

 <local:StringToDoubleConverter x:Key="stringToDoubleConverter" />


    <Style x:Key="myCustomFieldCell" TargetType="{x:Type igDP:CellValuePresenter}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type igDP:CellValuePresenter}">
                    <Grid>                                         
                        <Border Panel.ZIndex="0" Width="{Binding ElementName=textBlock,Path=Text,Converter={StaticResource stringToDoubleConverter}}" HorizontalAlignment="Left">
                            <Border.Background>
                                <LinearGradientBrush>
                                    <GradientStop Color="Red" Offset="0" />
                                    <GradientStop Color="Transparent" Offset="1" />
                                    <GradientStop Color="White" Offset=".99" />
                                </LinearGradientBrush>
                            </Border.Background>
                        </Border>
                          <TextBlock Panel.ZIndex="1"
                                Width="Auto"
                                Height="Auto"
                                Text="{TemplateBinding Content}"                                                                         
                                HorizontalAlignment="Center"
                                Margin="5,0,0,0"                                       
                                VerticalAlignment="Center"                                  
                                x:Name="textBlock" />
                    </Grid>                      
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Can anyone give any workaround for this.

Thanks,

VJ

---

Everything in the above code is right, just change the style with the below code.

<Style x:Key="myCustomFieldCell" TargetType="{x:Type igDP:CellValuePresenter}">
        <Setter Property="OverridesDefaultStyle" Value="True"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type igDP:CellValuePresenter}">
                    <Grid>                            
                        <ContentPresenter Panel.ZIndex="1"                                  
                                Content="{TemplateBinding Content}"                                                                      
                                HorizontalAlignment="Center"
                                Margin="5,0,0,0"                                       
                                VerticalAlignment="Center"                                  
                                x:Name="contentPresenter" />
                        <Border Panel.ZIndex="0" Width="{Binding ElementName=contentPresenter, Path=Content, Converter={StaticResource stringToDoubleConverter}}" HorizontalAlignment="Left">
                            <Border.Background>
                                <LinearGradientBrush>
                                    <GradientStop Color="Red" Offset="0" />
                                    <GradientStop Color="Transparent" Offset="1" />
                                    <GradientStop Color="White" Offset=".99" />
                                </LinearGradientBrush>
                            </Border.Background>
                        </Border>
                    </Grid>                        
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

---

I believe you can create two convertors which will calculate the color of the gradient start/stop keys, and will accept percentage value through data binding.