This is a migrated thread and some comments may be shown as answers.

Accordion Menu Arrow Problem

8 Answers 90 Views
Accordion
This is a migrated thread and some comments may be shown as answers.
Unb
Top achievements
Rank 1
Iron
Unb asked on 22 Oct 2018, 03:30 PM

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.

8 Answers, 1 is accepted

Sort by
0
Unb
Top achievements
Rank 1
Iron
answered on 22 Oct 2018, 03:33 PM
<?xml version="1.0" encoding="utf-8" ?>
             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>
0
Didi
Telerik team
answered on 23 Oct 2018, 02:28 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Unb
Top achievements
Rank 1
Iron
answered on 25 Oct 2018, 08:40 AM

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.

 

 

 

 

0
Unb
Top achievements
Rank 1
Iron
answered on 25 Oct 2018, 09:01 AM

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

 

0
Unb
Top achievements
Rank 1
Iron
answered on 25 Oct 2018, 09:14 AM

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)

 

0
Didi
Telerik team
answered on 25 Oct 2018, 02:21 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
n/a
Top achievements
Rank 1
answered on 26 Jun 2020, 01:42 PM
This problem still exists.
0
Didi
Telerik team
answered on 29 Jun 2020, 08:08 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
Accordion
Asked by
Unb
Top achievements
Rank 1
Iron
Answers by
Unb
Top achievements
Rank 1
Iron
Didi
Telerik team
n/a
Top achievements
Rank 1
Share this question
or