How to adjust margin or padding in AccordianItem

[Chris Bentley]

Hello,

I'm trying to change the margin or padding on the left of the accordian content, shown by the red box in the image. 

I've tried setting Margin and Padding to 0 in the style for the AccordianItem and ExpandabledContentControl, but this is not working.

It seems to be coming from here, in SfAccordian.xaml.

[Thirupathi Bala Krishnan]

Hi Chris, 

 

Thanks for contacting Syncfusion support. 

We have analyzed your reported query “How to adjust margin or padding in SfAccordionItem”. You can meet this requirement by overriding the control templates for both SfAccordionItem and AccordionButton. You can obtain the control template by selecting the "Edit template" option in the designer. Then, in the overridden styles, remove the defined Margin value of 12,0,0,0. We create a simple sample to override the styles and remove the margin for both ExpandableContentControl and LayoutTransformer (defined inside the AccordionButton). 

 

Please following code changes in your application. 

 

Description	Code snippet
In xaml, override the SfAccordionItem  template	<ControlTemplate x:Key="SfAccordionItemControlTemplate1" TargetType="{x:Type syncfusion:SfAccordionItem}">    <Border> </Border  </ControlTemplate>    <Style TargetType="syncfusion:SfAccordionItem" BasedOn="{StaticResource SyncfusionSfAccordionItemStyle}">              <Setter Property="Margin" Value="0"/>              <Setter Property="Padding" Value="0"/>              <Setter Property="ExpandableContentControlStyle" Value="{StaticResource SyncfusionExpandableContentControlStyle}" />              <Setter Property="Template" Value="{StaticResource SfAccordionItemControlTemplate1}" />          </Style>
Remove the Margin value in the   ExpandableContentControl.	<syncfusion:ExpandableContentControl x:Name="ExpandSite" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" FontWeight="{TemplateBinding FontWeight}" FontStyle="{TemplateBinding FontStyle}" FontStretch="{TemplateBinding FontStretch}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" IsTabStop="False" Margin="0" Percentage="0" Grid.Row="1" Style="{TemplateBinding ExpandableContentControlStyle}" VerticalAlignment="{TemplateBinding VerticalAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}">                          <syncfusion:ExpandableContentControl.Clip>                              <RectangleGeometry/>                          </syncfusion:ExpandableContentControl.Clip>                      </syncfusion:ExpandableContentControl>
Override the styles for the LayoutTransformer and  AccordionButton	<Style x:Key="SyncfusionLayoutTransformerStyle" TargetType="syncfusion:LayoutTransformer">                      </Style>    <Style x:Key="SyncfusionAccordionButtonStyle" TargetType="{x:Type syncfusion:AccordionButton}">  </Style>
Remove the Margin value in the ContentPresenter	<Style x:Key="SyncfusionLayoutTransformerStyle" TargetType="syncfusion:LayoutTransformer">              <Setter Property="Template">                  <Setter.Value>                      <ControlTemplate TargetType="syncfusion:LayoutTransformer">                          <Grid x:Name="TransformRoot" Background="{TemplateBinding Background}">                              <ContentPresenter                              x:Name="Presenter" Margin="0"                              VerticalAlignment="Center"                              Content="{TemplateBinding Content}"                              ContentTemplate="{TemplateBinding ContentTemplate}">                                  <ContentPresenter.Resources>                                      <Style BasedOn="{x:Null}" TargetType="{x:Type TextBlock}" />                                  </ContentPresenter.Resources>                              </ContentPresenter>                          </Grid>                      </ControlTemplate>                  </Setter.Value>              </Setter>          </Style>

 

Please refer the following screenshot for your reference. 

 

 

 

Sample link: https://www.syncfusion.com/downloads/support/forum/169912/ze/AccordionDemo1070243744  

Please let us know if you need any further assistance.

Regards,
Thirupathi B. 

[Chris Bentley]

This works, thank you.

[Thirupathi Bala Krishnan]

Hi Chris, 

Thanks for confirming that the solution provided resolved your reported scenario.  Please let us know if you need any further assistance on this. As always, we will be happy to assist you. 

Regards, 

Thirupathi B.