Accordion Menu Arrow Problem

[Unb]

Hello

 

I want to use Accordion UI element on my project. I've used the sample code but I have a problem. Instead of the expand arrows, I see the Chinese characters. It seems very weird. I've added an expander and it works fine.

On the attached picture, you will see the expander on the top, and accordion on the bottom. I made blue circle for expander and red circle for accordion.

My core library is .Net Standard 2.0. Maybe it can be the reason. Could you check the problem?

PS: I've tried both with phone and the emulator.

[Unb]

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:local="clr-namespace:myapp.Presentation"
            xmlns:telerikPrimitives="clr-namespace:Telerik.XamarinForms.Primitives;assembly=Telerik.XamarinForms.Primitives"
             x:Class="myapp.Presentation.Settings"
             >


    <ContentPage.Content>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />

            </Grid.RowDefinitions>
            <StackLayout Margin="10,0" Grid.Row="0">
                <Label Text="SETTINGS" x:Name="lblSettings"  Style="{StaticResource TitleLabelStyle}"/>

            </StackLayout>

            <StackLayout Grid.Row="1" Margin="10,20,10,0">

                <StackLayout >
                    <!-- >> expander-features-expanderheader -->
                    <telerikPrimitives:RadExpander x:Name="expander"
                                    BorderColor="Gray"
                                    BorderThickness="2">
                        <telerikPrimitives:RadExpander.Header>
                            <telerikPrimitives:ExpanderHeader
                    IndicatorText="›"
                    IndicatorColor="Blue"
                    IndicatorFontFamily="Arial"
                    IndicatorFontSize="16"
                    IndicatorLocation="End"
                    IndicatorAnimationDuration="1000"
                    BorderColor="LightBlue"
                    BorderThickness="2">
                                <Label Text="More Options"  />
                            </telerikPrimitives:ExpanderHeader>
                        </telerikPrimitives:RadExpander.Header>
                        <telerikPrimitives:RadExpander.Content>
                            <StackLayout Margin="10, 20, 10, 20">
                                <Label Text="RadExpander for Xamarin is a flexible content control that helps you save screen space." BackgroundColor="Gray"/>
                            </StackLayout>
                        </telerikPrimitives:RadExpander.Content>
                    </telerikPrimitives:RadExpander>
                    <!-- << expander-features-expanderheader -->

                    <!-- >> expander-features-expanderheader -->
                    <telerikPrimitives:RadExpander x:Name="expander2"
                                    BorderColor="Gray"
                                    BorderThickness="2">
                        <telerikPrimitives:RadExpander.Header>
                            <telerikPrimitives:ExpanderHeader
                    IndicatorText="›"
                    IndicatorColor="Blue"
                    IndicatorFontFamily="Arial"
                    IndicatorFontSize="16"
                    IndicatorLocation="End"
                    IndicatorAnimationDuration="1000"
                    BorderColor="LightBlue"
                    BorderThickness="2">
                                <Label Text="More Options 2"  />
                            </telerikPrimitives:ExpanderHeader>
                        </telerikPrimitives:RadExpander.Header>
                        <telerikPrimitives:RadExpander.Content>
                            <StackLayout Margin="10, 20, 10, 20">
                                <Label Text="RadExpander for Xamarin is a flexible content control that helps you save screen space." BackgroundColor="Gray" />
                            </StackLayout>
                        </telerikPrimitives:RadExpander.Content>
                    </telerikPrimitives:RadExpander>
                    <!-- << expander-features-expanderheader -->
                </StackLayout>

            </StackLayout>

            <Grid Grid.Row="2" Margin="5">
                <!-- >> accordion-getting-started-xaml -->
                <telerikPrimitives:RadAccordion x:Name="accordion">
                    <telerikPrimitives:AccordionItem HeaderText="ACTIVATION KEY" IsExpanded="True"  >
                        <telerikPrimitives:AccordionItem.Content>
                            <Label Text="Attach files"  Margin="30" />
                        </telerikPrimitives:AccordionItem.Content>
                    </telerikPrimitives:AccordionItem>
                    <telerikPrimitives:AccordionItem HeaderText="USER ">
                        <telerikPrimitives:AccordionItem.Content>
                            <Label Text="Add your comment here" Margin="30" />
                        </telerikPrimitives:AccordionItem.Content>
                    </telerikPrimitives:AccordionItem>
                    <telerikPrimitives:AccordionItem HeaderText="HARDWARE">
                        <telerikPrimitives:AccordionItem.Content>
                            <StackLayout Margin="10,0">
                                <telerikPrimitives:RadCheckBox x:Name="chkEmbedded" BindingContext="Embedded"/>
                                <Label Text=".....:" Margin="30" />

                                <Label Text="abc" Margin="30" />

                            </StackLayout>

                        </telerikPrimitives:AccordionItem.Content>
                    </telerikPrimitives:AccordionItem>
                </telerikPrimitives:RadAccordion>
                <!-- << accordion-getting-started-xaml -->
            </Grid>

        </Grid>
    </ContentPage.Content>
</ContentPage>

[Didi]

Hello,

Thank you for the provided code and screenshot.

I have tested the described scenario but on my side the Accordion expanded arrows are shown correctly - refer to the attached image(accordion.png). Please take a look at the attached project (accordion.zip) and may I ask you to modify, so that the issue can be reproduced and send it back to me? Please note that you should open a support ticker and attach it there as in the forum only image attachments are allowed.

Thanks in advance.

Regards,
Didi
Progress Telerik

[Unb]

Thank you for your reply. Actually I had not hope to get an answer. Thats why I implement a custom Expander. It works like Accordion menu. 

 

Well, I tried what you sent and it works. As I see, the problem comes from the reference. The references what I've used, can be seen on the attached file. 

I did not know that you have a telerik nuget server. I simply downloaded and installed Telerik_UI_for_Xamarin_2018_3_1018_1_Dev.msi. And I've added the dlls into the project. Maybe I did not add all dlls? But I had no error while compiling.. So I still do not where the problem comes. 

I changed a bit the project what you attached. With these references, it does not work again.. Maybe you can find out something. I've uploaded the project here https://yadi.sk/d/p6pnMSImJezerw

next time I'll open a ticket. Thank you.

 

 

 

 

[Unb]

Sorry the attached picture was not so clear. I mean there was not all references on the picture. I've added a new one.

 

[Unb]

Addional Question: If I use accordion UI element, I will need to change a bit. For example;

-can I change the arrow? (if its a picture then I can add my pic?) (I have not seen how to change it and no example

- can I show the arrows on the right side instead of left (like expander UI control)

 

[Didi]

Hello,

From the attached images I noticed that you didn't add the required Telerik references to the project. You can take a look in our documentation which assemblies are needed for getting started with Accordion control: Adding the required Telerik references. 

According to the Accordion customization you can take a look at the following article from our documentation: Accordion Item Header. You can find the needed properties for how to change the icon of the indicator - IndicatorFontFamily and IndicatorText and its location - IndicatorLocation. 

I hope I was helpful.

Regards,
Didi
Progress Telerik

[n/a]

This problem still exists.

[Didi]

Hello,

Could you please elaborate more on the issue you are observing? Also if you could send us a sample repro project, or a video of the issue. Please note that in the forum only image attachments are allowed. You should open a support ticket and attach the project there.

Regards,
Didi
Progress Telerik