Accordion UI Designs - Simple Accordion

 Today, I am designing UI of Accordion

Please, support my blog by clicking on our sponsors ad!

As you see in video there are three types of designs:

• Simple Accordion
• https://xamarinuidesigns.blogspot.com/2021/12/accordion-ui-designs-part-1.html
• Simple Accordion Listview: 
• https://xamarinuidesigns.blogspot.com/2021/12/accordion-ui-design-simple-accordion.html
• Frame Accordion Listview:
• https://xamarinuidesigns.blogspot.com/2021/12/accordion-ui-design-frame-accordion.html

For Font awesome, please watch video:

https://www.youtube.com/watch?v=0l0LYFdLEGs&t=220s

First we will create template:

• FrameView

FrameView.xaml

 <Frame x:Name="frame" HasShadow="True" >
            <StackLayout x:Name="sl" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
                <Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"></ColumnDefinition>
                        <ColumnDefinition Width="Auto"></ColumnDefinition>
                    </Grid.ColumnDefinitions>
                    <Label x:Name="lblName" Grid.Column="0" FontAttributes="Bold" HorizontalOptions="FillAndExpand" 
                           VerticalOptions="FillAndExpand" TextColor="Black" >
                        <Label.GestureRecognizers>
                            <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"></TapGestureRecognizer>
                        </Label.GestureRecognizers>
                    </Label>
                    <Label x:Name="lblIcon" Grid.Column="1" FontFamily="{StaticResource FontAwesomeSolid}" 
                            Text="{x:Static fontawesome:Regular.Angle_Up}" HorizontalOptions="FillAndExpand" 
                           VerticalOptions="Start" FontAttributes="Bold" TextColor="Black">
                        <Label.GestureRecognizers>
                            <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"></TapGestureRecognizer>
                        </Label.GestureRecognizers>
                    </Label>
                </Grid>

                <Frame Padding="10"  BackgroundColor="White" x:Name="ContentFrame" HasShadow="False">
                </Frame>
            </StackLayout>
        </Frame>  

FrameView.cs

  public FrameView()
        {
            InitializeComponent();
            frame.HeightRequest =  lblName.Height;
        }

        public string Text
        {
            get
            {
                return lblName.Text;
            }
            set
            {
                lblName.Text = value;
            }
        }

        public View ContainerContent
        {
            get
            {
                return ContentFrame.Content;
            }
            set
            {
                ContentFrame.Content = value;
            }
        }

        private void TapGestureRecognizer_Tapped(object sender, EventArgs e)
        {
            ContentFrame.IsVisible = !ContentFrame.IsVisible;
            lblIcon.Text = ContentFrame.IsVisible ? Regular.Angle_Up : Regular.Angle_Down;
        }

      

SimpleAccordion.xaml

    <Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Padding="20">             
            <Grid.RowDefinitions>                       
                <RowDefinition Height="Auto"></RowDefinition>
                <RowDefinition Height="Auto"></RowDefinition>
                <RowDefinition Height="Auto"></RowDefinition>
            </Grid.RowDefinitions>
            <control:FrameView Grid.Row="0" Text="Popular Music Instrument">
                <control:FrameView.ContainerContent>
                    <StackLayout>
                        <Label Text="1. Piano/Keyboard" TextColor="Black"></Label>
                        <Label Text="2. Guitar" TextColor="Black"></Label>
                        <Label Text="3. Violin" TextColor="Black"></Label>
                        <Label Text="4. Drums" TextColor="Black"></Label>
                        <Label Text="5. Saxophone" TextColor="Black"></Label>
                    </StackLayout>
                </control:FrameView.ContainerContent>
            </control:FrameView>
            
            <control:FrameView Grid.Row="1" Text="Gender">
                <control:FrameView.ContainerContent>
                    <StackLayout>
                        <Label Text="1. Male" TextColor="Black"></Label>
                        <Label Text="2. Female" TextColor="Black"></Label>
                        <Label Text="3. Transgender" TextColor="Black"></Label>
                    </StackLayout>
                </control:FrameView.ContainerContent>
            </control:FrameView>

            <control:FrameView Grid.Row="2" Text="Detail">
                <control:FrameView.ContainerContent>
                    <StackLayout>
                        <Label Text="Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                               Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
                               when an unknown printer took a galley of type and scrambled it to make a type 
                               specimen book." TextColor="Black"></Label>
                    </StackLayout>
                </control:FrameView.ContainerContent>
            </control:FrameView>
        </Grid>