How to increase DetailsViewDefinition column width

[Corentin Wadin]

Hello,

Someone know how to increase the width of the "+" or "-" from the DetailsViewDefinition

Thank you in advance for your help.

Best regards,

[Elavazhagan Elangovan]

Hi Corentin Wadin,

We have reviewed your query based on the information provided. Your requirement to increase the size of the expander icons (“+” and “–”) can be achieved by override the GridDetailsViewExpanderCell template. To enlarge the expander icons, you need to increase both the row height and the column width. In our customized sample, the icon size can be increased by adjusting the row height and the width of the expander column.

Code Snippet related to change the expander icon size:

<Window.Resources>

        <Style TargetType="syncfusion:GridDetailsViewExpanderCell">

            <Setter Property="Template">

                <Setter.Value>

                    <ControlTemplate TargetType="syncfusion:GridDetailsViewExpanderCell">

                        <Border Background="Transparent"

                        BorderBrush="{TemplateBinding BorderBrush}"

                        BorderThickness="{TemplateBinding BorderThickness}"

                        Padding="{TemplateBinding Padding}">

                            <VisualStateManager.VisualStateGroups>

                                <VisualStateGroup x:Name="ExpansionStates">

                                    <VisualState x:Name="Expanded">

                                        <Storyboard>

                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_CollapseCellPath" Storyboard.TargetProperty="(FrameworkElement.Visibility)">

                                                <DiscreteObjectKeyFrame Value="{x:Static Visibility.Collapsed}" KeyTime="0:0:0"/>

 

                                            </ObjectAnimationUsingKeyFrames>

                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_ExpanderCellPath" Storyboard.TargetProperty="(FrameworkElement.Visibility)">

                                                <DiscreteObjectKeyFrame Value="{x:Static Visibility.Visible}" KeyTime="0:0:0" />

 

                                            </ObjectAnimationUsingKeyFrames>

                                        </Storyboard>

                                    </VisualState>

                                    <VisualState x:Name="Collapsed">

                                        <Storyboard>

                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_CollapseCellPath" Storyboard.TargetProperty="(FrameworkElement.Visibility)">

                                                <DiscreteObjectKeyFrame Value="{x:Static Visibility.Visible}" KeyTime="0:0:0"/>

 

                                            </ObjectAnimationUsingKeyFrames>

                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_ExpanderCellPath" Storyboard.TargetProperty="(FrameworkElement.Visibility)">

                                                <DiscreteObjectKeyFrame Value="{x:Static Visibility.Collapsed}" KeyTime="0:0:0"/>

                                            </ObjectAnimationUsingKeyFrames>

 

                                        </Storyboard>

                                    </VisualState>

                                </VisualStateGroup>

                            </VisualStateManager.VisualStateGroups>

 

                            <Grid Background="{TemplateBinding Background}" Visibility="{TemplateBinding ExpanderIconVisibility}" Margin="{TemplateBinding Padding}">

                                <Path Margin="7" x:Name="PART_CollapseCellPath"

                                Width="{TemplateBinding Width}"

                                Height="{TemplateBinding Height}"

                                HorizontalAlignment="Center"

                                VerticalAlignment="Center"

                                Data="M0,5 L10,5 M5,0 L5,10"

                                Fill="{TemplateBinding Foreground}"

                                SnapsToDevicePixels="True"

                                Stretch="Fill"

                                Stroke="{TemplateBinding Foreground}"

                                UseLayoutRounding="False">

 

                                </Path>

                                <Path x:Name="PART_ExpanderCellPath" Margin="7"

                                Width="{TemplateBinding Width}"

                                Height="{TemplateBinding Height}"

                                HorizontalAlignment="Center"

                                VerticalAlignment="Center"

                                Data="M4,10 H16"

                                Fill="{TemplateBinding Foreground}"

                                SnapsToDevicePixels="True"

                                Stretch="Fill"

                                Visibility="Collapsed"

                                Stroke="{TemplateBinding Foreground}"

                                UseLayoutRounding="False">

 

                                </Path>

                            </Grid>

                        </Border>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

        </Style>

    </Window.Resources>

 

<Grid>

        <syncfusion:SfDataGrid x:Name="dataGrid"

                     AutoGenerateColumns="True" AllowFiltering="True" ExpanderColumnWidth="30" RowHeight="30"

                     AutoGenerateRelations="True"

                     ItemsSource="{Binding Employees}">

            </syncfusion:SfDataGrid>

</Grid>

Image related to increase the Expander icon:



For more information related to styling the MasterDetailsView ExpanderIcon, please refer to the knowledge base article below.

KB link: ApplystylesOnExpandericon

Find the sample demo in the attachment.

Please let me know if you have any concerns.

Regards,
Elavazhagan E.

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

Attachment: DataGridWPFSample_6692f71f.zip