Accordion UI Design - Frame Accordion Listview

  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:

• BindingFrameView

BindingFrameView.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" 
                           Text="{Binding Source={x:Reference BindingFrame}, Path=Text}" >
                        <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>    

BindingFrameView.cs

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

        public static readonly BindableProperty TextProperty = BindableProperty.Create(nameof(Text), typeof(string), 
            typeof(BindingFrameView));
        public string Text
        {
            get { return (string)GetValue(TextProperty); }
            set { SetValue(TextProperty, 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;
        }

        public string Data { get; set; }

        public static BindableProperty titleTextProperty = BindableProperty.Create(
                                                         propertyName: "Data",
                                                         returnType: typeof(string),
                                                         declaringType: typeof(FrameView),
                                                         defaultValue: "",
                                                         defaultBindingMode: BindingMode.TwoWay,
                                                         propertyChanged: NameTextPropertyChanged);


        private static void NameTextPropertyChanged(BindableObject bindable, object oldValue, object newValue)
        {
            var control = (FrameView)bindable;
            control.Text = newValue.ToString();
        }

ListTemplate.xaml

       <StackLayout Padding="10">
            <control:BindingFrameView  x:Name="frame" Text="{Binding Name}">
                <control:BindingFrameView.ContainerContent>
                    <StackLayout>
                        <Label Text="{Binding Description}" TextColor="Black"></Label>
                    </StackLayout>
                </control:BindingFrameView.ContainerContent>
            </control:BindingFrameView>
        </StackLayout>

FrameAccordionListView.xaml

    <StackLayout>
            <ListView x:Name ="listView" HasUnevenRows="True" ItemSelected="listView_ItemSelected">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell >
                            <views:ListTemplate></views:ListTemplate>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackLayout>