We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Styling Drag Arrows and Drag Header

Thread ID:

Created:

Updated:

Platform:

Replies:

123728 Apr 14,2016 02:57 PM UTC Apr 18,2016 04:37 AM UTC WPF 3
loading
Tags: SfDataGrid
Thomas Mendez
Asked On April 14, 2016 02:57 PM UTC

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 [Syncfusion]
Replied On April 15, 2016 12:10 PM UTC

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
Replied On April 15, 2016 12:50 PM UTC

This is exactly what I needed. Thank you!

Jayapradha S [Syncfusion]
Replied On April 18, 2016 04:37 AM UTC

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





CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;