How to adjust margin or padding in AccordianItem
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.
SIGN IN To post a reply.
3 Replies
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.
Please let us know if you need any further assistance.
Regards,
Thirupathi B.
SIGN IN To post a reply.
