Hello,

Responce, true.

To achieve this you have to create a style for the RecordSelector. You can see the base/default style in the DefaultStyles directory installed together with out products in the Infragistics folder. You have to retemplate the record selector to change + and - signs.

Hope this helps.

Alex.

I finally have time to look at this and I do not think it is the RecordSelector but the DataRecordPresentor - ExpansionIndicator I want to re-style.  This appears to be to the left of the RecordSelector when there are child records for a datarecord.

I looked in the DataPresenterGeneric_Express.Xaml to see if I could find the default styles and hope this is the correct file.  I see a <!-- Expansion Checkbox -->  and <igWindows:ExpansionIndicator entry.  I am having trouble understanding where I could replace the icons used for Expanded or Collapsed.  Maybe my XAML is what it should be but I would think it would be easy to replace these two icons with a little help.

Thank You

Hello,

Here is what I have created ( a custom Expansion Indicator ) with Blend. You can it as a base to create your own ( really a lot of xaml code, I apologize :) )

<Style TargetType="{x:Type igWindows:ExpansionIndicator}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type igWindows:ExpansionIndicator}">
                        <ControlTemplate.Resources>
                            <Storyboard x:Key="Storyboard2">
                                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="plusHorizontal" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">
                                    <SplineDoubleKeyFrame KeyTime="00:00:01" Value="44.04"/>
                                </DoubleAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="plusVert" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">
                                    <SplineDoubleKeyFrame KeyTime="00:00:01" Value="-44.846"/>
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                        </ControlTemplate.Resources>
                        <Grid Background="#00FFFFFF">
                            <Grid RenderTransformOrigin="0.5,0.5" SnapsToDevicePixels="True" x:Name="grdExpansionIndicatorClosed" Margin="41.5,21.5,33.119,14.643">
                                <Grid.RowDefinitions>
                                    <RowDefinition/>
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition/>
                                </Grid.ColumnDefinitions>
                                <Border RenderTransformOrigin="0.5,0.5" x:Name="outerBorder" Background="{TemplateBinding BorderBrush}" CornerRadius="2,2,2,2"/>
                                <Border RenderTransformOrigin="0.5,0.5" Margin="1,1,1,1" x:Name="innerFill" Width="Auto" Height="Auto" Background="{TemplateBinding Background}" CornerRadius="1.5,1.5,1.5,1.5"/>
                                <Ellipse RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Stretch" Margin="2,4,2,4" x:Name="plusHorizontal" VerticalAlignment="Stretch" Width="Auto" Height="1" Fill="{TemplateBinding Foreground}">
                                    <Ellipse.RenderTransform>
                                        <TransformGroup>
                                            <ScaleTransform ScaleX="1" ScaleY="1"/>
                                            <SkewTransform AngleX="0" AngleY="0"/>
                                            <RotateTransform Angle="0"/>
                                            <TranslateTransform X="0" Y="0"/>
                                        </TransformGroup>
                                    </Ellipse.RenderTransform>
                                </Ellipse>
                                <Ellipse RenderTransformOrigin="0.5,0.5" Margin="4,2,4,2" x:Name="plusVert" Width="1" Height="Auto" Fill="{TemplateBinding Foreground}">
                                    <Ellipse.RenderTransform>
                                        <TransformGroup>
                                            <ScaleTransform ScaleX="1" ScaleY="1"/>
                                            <SkewTransform AngleX="0" AngleY="0"/>
                                            <RotateTransform Angle="0"/>
                                            <TranslateTransform X="0" Y="0"/>
                                        </TransformGroup>
                                    </Ellipse.RenderTransform>
                                </Ellipse>
                            </Grid>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <MultiTrigger>
                                <MultiTrigger.EnterActions>
                                    <BeginStoryboard Storyboard="{StaticResource Storyboard2}" x:Name="Storyboard2_BeginStoryboard"/>
                                </MultiTrigger.EnterActions>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsChecked" Value="True"/>
                                </MultiTrigger.Conditions>
                            </MultiTrigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

Alex.

Thank you for the post but as you state there is a lot of XAML here and I still cannot see how I replace the + (Collapsed) and - (Expanded) images with my own images for Collapsed and Expanded.  I struggle with my XAML and Curtis tried to get me to us Blend for creating these custom templates and controls but I don't have the time to learn EB right now.

Your sample still has the + and - sign, can you include the XAML that would replace these images?  I am sorry that it is not obvious to me.  Your sample does not change the image back to the + sign when collapsed.  I am guessing it is because you have a Trigger for IsChecked = True and not trigger for IsChecked = False?

Maybe I am asking for too much and need to keep digging myself.  Maybe I cannot replace just the images and not change anything else about the Expansion Indicator?

Hello,

For your convenienice I have created an example with images (This should do the trick)

<Style x:Key="ExpansionIndicatorStyle1" TargetType="{x:Type igWindows:ExpansionIndicator}">
            <Setter Property="Background">
                <Setter.Value>
                    <LinearGradientBrush EndPoint="1,1" StartPoint="0,0">
                        <GradientStop Color="sc#1, 0.57900393, 0.57900393, 0.57900393" Offset="1"/>
                        <GradientStop Color="#FFFFFFFF" Offset="0.36153846153846259"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="BorderBrush" Value="#FF999999"/>
            <Setter Property="Foreground" Value="#FF000000"/>
            <Setter Property="Cursor" Value="Hand"/>
            <Setter Property="ClipToBounds" Value="False"/>
            <Setter Property="Margin" Value="5,0,3,0"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type igWindows:ExpansionIndicator}">
                        <ControlTemplate.Resources>
                            <Storyboard x:Key="Storyboard2" AutoReverse="False">
                                <DoubleAnimation To="0" BeginTime="00:00:00" Storyboard.TargetName="plusVert" Storyboard.TargetProperty="Opacity">
                                </DoubleAnimation>
                            </Storyboard>
                            <Storyboard x:Key="Storyboard3" AutoReverse="False">
                                <DoubleAnimation To="1" BeginTime="00:00:00" Storyboard.TargetName="plusVert" Storyboard.TargetProperty="Opacity">
                                </DoubleAnimation>
                            </Storyboard>
                        </ControlTemplate.Resources>
                        <Grid Background="#00FFFFFF">
                            <Grid RenderTransformOrigin="0.5,0.5" SnapsToDevicePixels="True" x:Name="grdExpansionIndicatorClosed" Margin="41.5,21.5,33.119,14.643">
                                <Grid.RowDefinitions>
                                    <RowDefinition/>
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition/>
                                </Grid.ColumnDefinitions>
                                <Border RenderTransformOrigin="0.5,0.5" x:Name="outerBorder" Background="{TemplateBinding BorderBrush}" CornerRadius="2,2,2,2"/>
                                <Border RenderTransformOrigin="0.5,0.5" Margin="1,1,1,1" x:Name="innerFill" Width="Auto" Height="Auto" Background="{TemplateBinding Background}" CornerRadius="1.5,1.5,1.5,1.5"/>
                                <Image Opacity="1" Source="indic.jpg" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Stretch" Margin="2,4,2,4" x:Name="plusHorizontal" VerticalAlignment="Stretch" Width="Auto" Height="10"/>
                                <Image Opacity="1" Source="indicC.jpg" RenderTransformOrigin="0.5,0.5" Margin="4,2,4,2" x:Name="plusVert" Width="10" Height="Auto" />
                            </Grid>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <EventTrigger RoutedEvent="FrameworkElement.Loaded"/>
                            <MultiTrigger>
                                <MultiTrigger.EnterActions>
                                    <BeginStoryboard x:Name="Storyboard2_BeginStoryboard" Storyboard="{StaticResource Storyboard2}"/>
                                </MultiTrigger.EnterActions>
                                <MultiTrigger.ExitActions>
                                    <BeginStoryboard x:Name="Storyboard3_BeginStoryboard" Storyboard="{StaticResource Storyboard3}"/>
                                </MultiTrigger.ExitActions>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsChecked" Value="True"/>
                                </MultiTrigger.Conditions>
                                <Setter Property="Opacity" TargetName="plusVert" Value="0">                   
                                </Setter>
                            </MultiTrigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

Alex.

Thank Alex. It is working Except collapse scenario.

When expanding the image changed.

When collapsed the image not changed the old image still appear. (Suppose i collapse the top node and expand again,

It will display the correct image) .

Hello David,

Thank you for your post. I have been looking into it and I have modified the sample that Alex uploaded in the forum thread you provided, so now it works as you want. If you group by the second field the expansion indicators will be different. Basically I used converters in the Images’ Source Properties to set a different picture depending on which Fields is grouped and whether it is grouped at all.

Hope this helps you.

Hi Alex, I know that this post (http://community.infragistics.com/forums/p/18938/81442.aspx#81442) was some time ago now, but it would be really useful if this example could be extended to show how the plus/minus images could be different depending on which field was grouped...so that I can do something like explorer where the icon displayed is different depending on the folder type that is being expanded.

Thanks,

David 

Hello,

Yes, the best way to do this is in the InitializeRecord event set 

e.Record.IsExpanded = true;

Alex.

Hi,