Styling Drag Arrows and Drag Header

[Thomas Mendez]

Hello! Is there a way to style the grey drag arrows and orange drag header when re-sizing columns as shown below?

Thanks!

[Jayapradha S]

Hi Thomas,

Thank you for contacting Syncfusion Support.

Yes. It is possible to change the drag indicator and drag header background by customizing the Up and DownIndicatorContentControl and popup presenter.
Please find the customized code below,

Code Snippet:

  <Style TargetType="grid:UpIndicatorContentControl">

            <Setter Property="Template">

                <Setter.Value>

                    <ControlTemplate TargetType="grid:UpIndicatorContentControl">

                        <Border SnapsToDevicePixels="True">

                            <Path x:Name="PART_UpIndicator"

                                  Data="M9.112874,8.0378246E-05 C9.7075377,0.0055089793 10.299755,0.28596777 10.745893,0.84058738 L12.581395,3.1212618 C13.475121,4.2270861 14.93559,6.0423775 15.82582,7.1494956 L17.664116,9.4308643 C18.557789,10.539382 17.810413,11.430925 16.005547,11.415606 L12.535283,11.38336 L12.535283,16.734177 C12.535283,17.66646 11.779409,18.42079 10.848061,18.42079 L7.1915703,18.42079 C6.2608137,18.42079 5.5035992,17.66646 5.5035992,16.734177 L5.5035992,11.323217 L2.0157599,11.290271 C0.2109952,11.275599 -0.51887822,10.368738 0.3929224,9.2768822 L2.2698665,7.0262566 C3.1823502,5.9359593 4.6743135,4.148622 5.5861521,3.0582769 L7.4651861,0.80975246 C7.9211054,0.26425231 8.5182133,-0.005348762 9.112874,8.0378246E-05 z"

                                  Fill="Orange"

                                  RenderTransformOrigin="0.5,0.5"

                                  SnapsToDevicePixels="True"

                                  Stretch="Fill"

                                  Stroke="Orange"

                                  StrokeThickness="1"

                                  UseLayoutRounding="False" />

                        </Border>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>
        </Style>

    <Style TargetType="grid:DownIndicatorContentControl">

            <Setter Property="Template">

                <Setter.Value>

                    <ControlTemplate TargetType="grid:DownIndicatorContentControl">

                        <Border>

                            <Path x:Name="PART_DownIndicator"

                                  Data="M9.112874,8.0378246E-05 C9.7075377,0.0055089793 10.299755,0.28596777 10.745893,0.84058738 L12.581395,3.1212618 C13.475121,4.2270861 14.93559,6.0423775 15.82582,7.1494956 L17.664116,9.4308643 C18.557789,10.539382 17.810413,11.430925 16.005547,11.415606 L12.535283,11.38336 L12.535283,16.734177 C12.535283,17.66646 11.779409,18.42079 10.848061,18.42079 L7.1915703,18.42079 C6.2608137,18.42079 5.5035992,17.66646 5.5035992,16.734177 L5.5035992,11.323217 L2.0157599,11.290271 C0.2109952,11.275599 -0.51887822,10.368738 0.3929224,9.2768822 L2.2698665,7.0262566 C3.1823502,5.9359593 4.6743135,4.148622 5.5861521,3.0582769 L7.4651861,0.80975246 C7.9211054,0.26425231 8.5182133,-0.005348762 9.112874,8.0378246E-05 z"

                                  Fill="Orange"

                                  RenderTransformOrigin="0.5,0.5"

                                  SnapsToDevicePixels="True"

                                  Stretch="Fill"

                                  Stroke="Orange"

                                  StrokeThickness="1"

                                  UseLayoutRounding="False">

                                <Path.RenderTransform>

                                    <TransformGroup>

                                        <RotateTransform Angle="180" />

                                    </TransformGroup>

                                </Path.RenderTransform>

                            </Path>

                        </Border>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>
        </Style>

  <Style TargetType="grid:PopupContentControl">

            <Setter Property="Template">

                <Setter.Value>

                    <ControlTemplate TargetType="grid:PopupContentControl">

                        <Grid Name="PART_PopupPresenter"

                              Margin="10,0,10,0"

                              Background="Gray"

                              RenderTransformOrigin="0.5,0.5">

                            <Grid.RenderTransform>

                                <TransformGroup>

                                    <ScaleTransform />

                                    <SkewTransform />

                                    <RotateTransform />

                                    <TranslateTransform />

                                </TransformGroup>

                            </Grid.RenderTransform>

                            <Grid.ColumnDefinitions>

                                <ColumnDefinition Width="Auto" />

                                <ColumnDefinition Width="*" />

                                <ColumnDefinition Width="Auto" />

                            </Grid.ColumnDefinitions>

                            <Rectangle Grid.ColumnSpan="3"

                                       Margin="4"

                                       Opacity="0.5"

                                       RadiusX="5"

                                       RadiusY="5"

                                       SnapsToDevicePixels="True"

                                       Stroke="Black"

                                       StrokeDashArray="4,4"

                                       StrokeThickness="1" />

                            <Thumb x:Name="PART_LeftThumbGripper"

                                   Grid.Column="0"

                                   Margin="-10,0,0,0"

                                   IsManipulationEnabled="True"

                                   Style="{StaticResource ThumbStyle}"

                                   Visibility="{TemplateBinding LeftResizeThumbVisibility}" />

                            <Border Grid.Column="1"

                                    Margin="2"

                                    SnapsToDevicePixels="True">

                                <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />

                            </Border>

                            <Thumb x:Name="PART_RightThumbGripper"

                                   Grid.Column="2"

                                   Margin="0,0,-10,0"

                                   IsManipulationEnabled="True"

                                   Style="{StaticResource ThumbStyle}"

                                   Visibility="{TemplateBinding RightResizeThumbVisibility}" />

                        </Grid>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>
        </Style>

We have prepared a sample for your requirement and please find the sample from the following location,
Sample Link: http://www.syncfusion.com/downloads/support/forum/123728/ze/DragIndicatorCustomStyle1160237134

Regards,
Jayapradha

[Thomas Mendez]

This is exactly what I needed. Thank you!

[Jayapradha S]

Hi Thomas,

Thank you for your update.

We are glad to know that your requirement has been met.

Please let us know if you require any other assistance.

Regards,
Jayapradha