Accordion Menu Arrow Problem

7 posts, 0 answers
  1. Unb
    Unb avatar
    12 posts
    Member since:
    Oct 2018

    Posted 22 Oct Link to this post

    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.

  2. Unb
    Unb avatar
    12 posts
    Member since:
    Oct 2018

    Posted 22 Oct in reply to Unb Link to this post

    <?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>
  3. Didi
    Admin
    Didi avatar
    97 posts

    Posted 23 Oct Link to this post

    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
  4. Unb
    Unb avatar
    12 posts
    Member since:
    Oct 2018

    Posted 25 Oct Link to this post

    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.

     

     

     

     

  5. Unb
    Unb avatar
    12 posts
    Member since:
    Oct 2018

    Posted 25 Oct in reply to Unb Link to this post

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

     

  6. Unb
    Unb avatar
    12 posts
    Member since:
    Oct 2018

    Posted 25 Oct Link to this post

    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)

     

  7. Didi
    Admin
    Didi avatar
    97 posts

    Posted 25 Oct Link to this post

    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
Back to Top