Dear all,

I'm having a problem to customize the template and style of GroupByAreaMulti in v10.1. I had a style for GroupByArea that works well in v8.1 XamDataGrid, but it no longer works for v10.1 because of many changes made to the GroupByArea in v10.1, i.e., in v10.1, the type of group by area is GroupByAreaMulti, other than GroupByArea.

Below is the style I used in v8.1 (attached picture is what it looks like):

<Style x:Key="CustomGroupByArea"  TargetType="{x:Type igDP:GroupByArea}">

        <Setter x:Uid="Setter_1" Property="FontSize" Value="11"/>

        <Setter x:Uid="Setter_3" Property="Template">

            <Setter.Value>

                <ControlTemplate x:Uid="ControlTemplate_1" TargetType="{x:Type igDP:GroupByArea}">

                    <ControlTemplate.Resources>

                        <Storyboard x:Uid="Storyboard_1" x:Key="TurnOnInsertionPoint">

                            <DoubleAnimationUsingKeyFrames x:Uid="DoubleAnimationUsingKeyFrames_1" BeginTime="00:00:00" Storyboard.TargetName="PART_InsertionPoint" Storyboard.TargetProperty="(UIElement.Opacity)">

                                <SplineDoubleKeyFrame x:Uid="SplineDoubleKeyFrame_1" KeyTime="00:00:00.2500000" Value="1"/>

                            </DoubleAnimationUsingKeyFrames>

                        </Storyboard>

                        <Storyboard x:Uid="Storyboard_2" x:Key="TurnOffInsertionPoint">

                            <DoubleAnimationUsingKeyFrames x:Uid="DoubleAnimationUsingKeyFrames_2" BeginTime="00:00:00" 

Storyboard.TargetName="PART_InsertionPoint" 

Storyboard.TargetProperty="(UIElement.Opacity)">

                                <SplineDoubleKeyFrame x:Uid="SplineDoubleKeyFrame_2" KeyTime="00:00:00.2500000" Value="0"/>

                            </DoubleAnimationUsingKeyFrames>

                        </Storyboard>

                    </ControlTemplate.Resources>

                    <Expander x:Uid="Expander_GroupByArea" Header="Group by" Margin="0,0,0,2" FocusVisualStyle="{x:Null}"  Foreground="Black">

                        <Grid x:Uid="Grid_2" x:Name="outerGrid" Margin="4" ><!--Header="{DynamicResource XamDataGrid_GroupbyHeader}"-->

                            <Grid>

                                <Grid.RowDefinitions>

                                    <RowDefinition Height="0.5*"/>

                                    <RowDefinition Height="5*"/>

                                </Grid.RowDefinitions>

                                <Grid Background="#FF838483" Grid.Row="0" x:Uid="Grid_3" x:Name="PART_GroupedFieldLabelsArea" VerticalAlignment="Top" >

                                    <!-- GroupedFields List -->

                                    <TextBlock x:Uid="TextBlock_GroupByArea" Padding="4,8,0,8"  TextWrapping="NoWrap" MinHeight="28" MaxHeight="30" Margin="4,0,0,2" Opacity="0.8" VerticalAlignment="Center" HorizontalAlignment="Stretch" Foreground="White" FontSize="10.5"

                                                       Text="Drag one or more of the boxes below into this area to group by that attribute.  To reorder the groups, drag the boxes to a different position." /><!--Text="{DynamicResource XamDataGrid_GroupbyContent}"-->

                                    <igDP:GroupByAreaFieldListBox Margin="0,4,0,4" x:Uid="igDP:GroupByAreaFieldListBox_1" x:Name="GroupedFieldList" ItemsSource="{TemplateBinding GroupedFieldLabels}" />

                                </Grid>

                                <!-- End GroupedFieldLabels Area -->

                                <!-- AvailableFieldLabels Area -->

                                <Grid Background="#FFBDBDBD" Grid.Row="1" x:Uid="Grid_4" x:Name="PART_AvailableFieldLabelsArea"  Visibility="Visible" >

                                    <!-- AvailableField List -->

                                    <igDP:GroupByAreaFieldListBox Margin="0,4,0,4" x:Uid="igDP:GroupByAreaFieldListBox_2" ItemsSource="{TemplateBinding AvailableFieldLabels}" />

                                </Grid>

                            </Grid>

                            <!-- End AvailableFieldLabels Area -->

                            <!-- Insertion Point -->

                            <Polygon 

x:Uid="Polygon_1" x:Name="PART_InsertionPoint"

Opacity="0" 

Fill="#FF151C55"

Points="0,0 10,0 5,5"

StrokeEndLineCap="Round" 

StrokeStartLineCap="Round" 

StrokeLineJoin="Round" 

HorizontalAlignment="Left" 

Margin="0,4,0,0" 

VerticalAlignment="Top" />

                        </Grid>

                    </Expander>

                    <ControlTemplate.Triggers>

                        <Trigger x:Uid="Trigger_1" Property="IsExpanded" Value="True"/>

                        <EventTrigger x:Uid="EventTrigger_1" RoutedEvent="igDP:GroupByArea.ShowInsertionPoint">

                            <EventTrigger.Actions>

                                <BeginStoryboard x:Uid="BeginStoryboard_1" x:Name="TurnOnInsertionPoint_BeginStoryboard" Storyboard="{StaticResource TurnOnInsertionPoint}"/>

                            </EventTrigger.Actions>

                        </EventTrigger>

                        <EventTrigger x:Uid="EventTrigger_2" RoutedEvent="igDP:GroupByArea.HideInsertionPoint">

                            <EventTrigger.Actions>

                                <BeginStoryboard x:Uid="BeginStoryboard_2" x:Name="TurnOffInsertionPoint_BeginStoryboard" Storyboard="{StaticResource TurnOffInsertionPoint}"/>

                            </EventTrigger.Actions>

                        </EventTrigger>

                    </ControlTemplate.Triggers>

                </ControlTemplate>

            </Setter.Value>

        </Setter>

    </Style>

Now I want to still use this style in v10.1, but without any idea on how to do. So could anyone have any good idea on how to apply above style to v10.1 or how to customize the style of GroupByAreaMulti? 

Thanks, Corin