|
| 1 | +--- |
| 2 | +layout: post |
| 3 | +title: Customization in .NET MAUI Accordion control | Syncfusion |
| 4 | +description: Learn here all about Customization support in Syncfusion® Toolkit for .NET MAUI Accordion control and more details. |
| 5 | +platform: maui-toolkit |
| 6 | +control: SfAccordion |
| 7 | +documentation: ug |
| 8 | +--- |
| 9 | + |
| 10 | +# Customization in .NET MAUI Accordion (SfAccordion) |
| 11 | + |
| 12 | +## Animation easing |
| 13 | + |
| 14 | +You can customize the rate of change of a parameter over time or the animation style of an accordion item by using the `AnimationEasing` property. By default, the animation easing is set to `Linear`. |
| 15 | + |
| 16 | +{% tabs %} |
| 17 | +{% highlight xaml hl_lines="2" %} |
| 18 | + <syncfusion:SfAccordion x:Name="accordion" |
| 19 | + AnimationEasing="SinOut" /> |
| 20 | +{% endhighlight %} |
| 21 | +{% highlight c# %} |
| 22 | + accordion.AnimationEasing = ExpanderAnimationEasing.SinOut; |
| 23 | +{% endhighlight %} |
| 24 | +{% endtabs %} |
| 25 | + |
| 26 | +## Auto scroll position |
| 27 | + |
| 28 | +The `SfAccordion` allows you to customize the scroll position of the expanded accordion item using the `AutoScrollPosition` property. By default, the auto-scroll position is set to `MakeVisible`. |
| 29 | + |
| 30 | +{% tabs %} |
| 31 | +{% highlight xaml hl_lines="2" %} |
| 32 | + <syncfusion:SfAccordion x:Name="accordion" |
| 33 | + AutoScrollPosition="Top"/> |
| 34 | +{% endhighlight %} |
| 35 | +{% highlight c# %} |
| 36 | + accordion.AutoScrollPosition = AccordionAutoScrollPosition.Top; |
| 37 | +{% endhighlight %} |
| 38 | +{% endtabs %} |
| 39 | + |
| 40 | +## Bring an accordion item into view |
| 41 | + |
| 42 | +The `BringIntoView` method is used to bring a specific item into view by scrolling to it programmatically. |
| 43 | + |
| 44 | +{% tabs %} |
| 45 | +{% highlight xaml %} |
| 46 | +<ContentPage.Content> |
| 47 | + <StackLayout> |
| 48 | + <Button Clicked="Button_Clicked" Text="Button"/> |
| 49 | + <syncfusion:SfAccordion x:Name="accordion"> |
| 50 | + <syncfusion:SfAccordion.Items> |
| 51 | + <syncfusion:AccordionItem> |
| 52 | + <syncfusion:AccordionItem.Header> |
| 53 | + <Grid HeightRequest="48"> |
| 54 | + <Label Text="Robin Rane" Margin="16,14,0,14" CharacterSpacing="0.25" FontFamily="Roboto-Regular" FontSize="14" /> |
| 55 | + </Grid> |
| 56 | + </syncfusion:AccordionItem.Header> |
| 57 | + <syncfusion:AccordionItem.Content> |
| 58 | + <Grid ColumnSpacing="10" RowSpacing="2" BackgroundColor="#f4f4f4" > |
| 59 | + <Grid Margin="16,6,0,0"> |
| 60 | + <Grid.Resources> |
| 61 | + <Style TargetType="Label"> |
| 62 | + <Setter Property="FontFamily" Value="Roboto-Regular"/> |
| 63 | + </Style> |
| 64 | + </Grid.Resources> |
| 65 | + <Grid.RowDefinitions > |
| 66 | + <RowDefinition Height="25"/> |
| 67 | + <RowDefinition Height="25"/> |
| 68 | + <RowDefinition Height="25"/> |
| 69 | + <RowDefinition Height="25"/> |
| 70 | + <RowDefinition Height="{OnPlatform Default=90,Android=90,WinUI=70, iOS=100,MacCatalyst=70 }"/> |
| 71 | + <RowDefinition Height="Auto"/> |
| 72 | + </Grid.RowDefinitions> |
| 73 | + <Grid.ColumnDefinitions> |
| 74 | + <ColumnDefinition Width="100"/> |
| 75 | + <ColumnDefinition Width="100"/> |
| 76 | + <ColumnDefinition Width="*"/> |
| 77 | + </Grid.ColumnDefinitions> |
| 78 | + <Frame Grid.RowSpan="4" BorderColor="Transparent" Grid.Row="0" Grid.Column="0" Padding="0" Margin="0,0,0,7"> |
| 79 | + <Image Source="emp_01.png"/> |
| 80 | + </Frame> |
| 81 | + <Label Text="Position" Grid.Column="1" Grid.Row="0" Margin="6,0,0,0"/> |
| 82 | + <Label Text="Chairman" Grid.Row="0" Grid.Column="2"/> |
| 83 | + <Label Text="Organization " Grid.Row="1" Grid.Column="1" Margin="6,0,0,0"/> |
| 84 | + <Label Text="ABC Inc." Grid.Row="1" Grid.Column="2"/> |
| 85 | + <Label Text="Date Of Birth " Grid.Row="2" Grid.Column="1" Margin="6,0,0,0"/> |
| 86 | + <Label Text="09/17/1973" Grid.Row="2" Grid.Column="2"/> |
| 87 | + <Label Text="Location " Grid.Row="3" Grid.Column="1" Margin="6,0,0,0"/> |
| 88 | + <Label Text="Boston" Grid.Row="3" Grid.Column="2"/> |
| 89 | + <Label Padding="0,10,0,10" Grid.Row="4" Grid.ColumnSpan="3" LineBreakMode="WordWrap" |
| 90 | + FontSize="14" CharacterSpacing="0.25" VerticalTextAlignment="Center" |
| 91 | + Text="Robin Rane, Chairman of ABC Inc., leads with dedication and vision.Under his guidance, the company thrives and continues to make a significant impact in the industry."> |
| 92 | + </Label> |
| 93 | + <StackLayout Grid.Row="5" Orientation="Horizontal" Margin="0,0,0,12"> |
| 94 | + <Label Text="" FontSize="16" Margin="0,2,2,2" |
| 95 | + FontFamily='{OnPlatform Android=AccordionFontIcons.ttf#,WinUI=AccordionFontIcons.ttf#AccordionFontIcons,MacCatalyst=AccordionFontIcons,iOS=AccordionFontIcons}' |
| 96 | + VerticalOptions="Center" VerticalTextAlignment="Center"/> |
| 97 | + <Label Text="(617) 555-1234" Grid.Column="1" VerticalOptions="Center" CharacterSpacing="0.25" FontSize="14"/> |
| 98 | + </StackLayout> |
| 99 | + </Grid> |
| 100 | + </Grid> |
| 101 | + </syncfusion:AccordionItem.Content> |
| 102 | + </syncfusion:AccordionItem> |
| 103 | + </syncfusion:SfAccordion.Items> |
| 104 | + </syncfusion:SfAccordion> |
| 105 | + </StackLayout> |
| 106 | +</ContentPage.Content> |
| 107 | +{% endhighlight %} |
| 108 | +{% endtabs %} |
| 109 | + |
| 110 | +{% tabs %} |
| 111 | +{% highlight c# hl_lines="3" %} |
| 112 | +private void Button_Clicked(object sender, EventArgs e) |
| 113 | +{ |
| 114 | + accordion.BringIntoView(accordion.Items[15]); |
| 115 | +} |
| 116 | +{% endhighlight %} |
| 117 | +{% endtabs %} |
| 118 | + |
| 119 | +## Expand mode |
| 120 | + |
| 121 | +You can expand single or multiple items using the `ExpandMode` property. By default, the expanded mode is set to `Single`. |
| 122 | + |
| 123 | +{% tabs %} |
| 124 | +{% highlight xaml hl_lines="2" %} |
| 125 | + <syncfusion:SfAccordion x:Name="accordion" |
| 126 | + ExpandMode="Multiple" /> |
| 127 | +{% endhighlight %} |
| 128 | +{% highlight c# %} |
| 129 | + accordion.ExpandMode = AccordionExpandMode.Multiple; |
| 130 | +{% endhighlight %} |
| 131 | +{% endtabs %} |
| 132 | + |
| 133 | +## Item spacing |
| 134 | + |
| 135 | +The `SfAccordion` allows you to customize the vertical spacing between the accordion items by using the `ItemSpacing` property. |
| 136 | + |
| 137 | +{% tabs %} |
| 138 | +{% highlight xaml hl_lines="2" %} |
| 139 | + <syncfusion:SfAccordion x:Name="accordion" |
| 140 | + ItemSpacing="6.0d" /> |
| 141 | +{% endhighlight %} |
| 142 | +{% highlight c# %} |
| 143 | + accordion.ItemSpacing = 6.0d; |
| 144 | +{% endhighlight %} |
| 145 | +{% endtabs %} |
0 commit comments