How do I make the icon on the Accordion stay at the end with the same direction?

[Rodrigo]

Hi!

I need help.

I would like the icon to be at the end and keep the same direction as in the image
> closed
v open

 

In this example below it is at the end but changes direction.

https://www.telerik.com/forums/icon-in-accordion-header

Regards,

Rodrigo.

[Yana]

Hello Rodrigo,

The easiest way to achieve it is to leave the IndicatorLocation to "Start" as in this case the icon is not changed, and modify the HeaderControlTemplate where you can manually set the indicator position without taking into account the IndicatorLocation property. 

Here is the needed approach:

1. Add the following ControlTemplate to the page's resources:

 

  <telerikExpander:InverseThicknessConverter x:Key="InverseThicknessConverter" />
  
  <ControlTemplate x:Key="AccordionItemHeader_ControlTemplate">
      <telerik:RadBorder BackgroundColor="{TemplateBinding BackgroundColor}"
                               Background="{TemplateBinding Background}"
                               BorderColor="{TemplateBinding BorderColor}"
                               BorderBrush="{TemplateBinding BorderBrush}"
                               BorderThickness="{TemplateBinding BorderThickness}"
                               CornerRadius="{TemplateBinding CornerRadius}"
                               Padding="{TemplateBinding ContentPadding}"
                               Margin="{TemplateBinding Padding, Converter={StaticResource InverseThicknessConverter}}">
          <telerik:RadBorder.GestureRecognizers>
              <TapGestureRecognizer Command="{TemplateBinding ToggleExpandCommand}" />
          </telerik:RadBorder.GestureRecognizers>
          <Grid ColumnDefinitions="Auto, *, Auto">
              <telerikExpander:ExpandCollapseIndicator x:Name="PART_ExpandCollapseIndicator"
                                          Text="{TemplateBinding IndicatorText}"
                                          Margin="{TemplateBinding IndicatorMargin}"
                                          IsExpanded="{TemplateBinding IsExpanded}"
                                          IsAnimationEnabled="{TemplateBinding IsAnimationEnabled}"
                                          FontFamily="{TemplateBinding IndicatorFontFamily}"
                                          TextColor="Black"
                                          IndicatorLocation="{TemplateBinding IndicatorLocation}"
                                          IndicatorAnimationDuration="{TemplateBinding IndicatorAnimationDuration}"
                                          IndicatorAnimationEasing="{TemplateBinding IndicatorAnimationEasing}"
                                          Grid.Column="2"
                                          FontSize="{TemplateBinding IndicatorFontSize}"
                                          VerticalOptions="Center"
                                          AutomationId="RadAccordionExpandCollapseIndicator" />
              <ContentPresenter Grid.Column="1" AutomationId="RadAccordionHeader" />
          </Grid>
      </telerik:RadBorder>
  </ControlTemplate>

 

2. Apply it to the AccordionItemHeader either directly as in the referenced link or through style, like this:

 

<telerik:AccordionItem HeaderText="Profile">
    <telerik:AccordionItem.Resources>
        <Style TargetType="telerik:AccordionItemHeader">
            <Setter Property="ControlTemplate" Value="{StaticResource AccordionItemHeader_ControlTemplate}" />
        </Style>
    </telerik:AccordionItem.Resources>
    <telerik:AccordionItem.Content>
        <Label Text="John Smith" Margin="8" />
    </telerik:AccordionItem.Content>
</telerik:AccordionItem>

Please give it a try and let me know if you have any additional concerns or questions on this.

Regards,
Yana
Progress Telerik

[Rodrigo]

Hi!

 

Thanks! It worked!

 

Regards,

Rodrigo.