Xaml and Syncfusion .Net Maui Accordion control

Question

I have this Xaml that I am using to learn the the Syncfusion .Net Maui Accordion control. The <ContentPage.Content> Tag is all new to me, and I dont know if this Tag is the cause of the issues I am having. But I need to add a button on this page so that i can "Do Something" or add some additional functionality. Also I can't figure out why this page is centered? I greatly appreciate any help.

<?xml version="1.0" encoding="utf-8" ?>
            <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:AccordionBindableLayout"
             x:Class="AccordionBindableLayout.MainPage"
             xmlns:syncfusion="clr   namespace:Syncfusion.Maui.Accordion;assembly=Syncfusion.Maui.Expander">
    
    <ContentPage.BindingContext>
        <local:EmployeeDetails/>
    </ContentPage.BindingContext>
    
    <ContentPage.Content>
        
        <syncfusion:SfAccordion  x:Name="accordion" WidthRequest="270" BindableLayout.ItemsSource="{Binding Employees}" >
            <BindableLayout.ItemTemplate>
                <DataTemplate>
                    <syncfusion:AccordionItem IsExpanded="{Binding IsExpanded}">
                        <syncfusion:AccordionItem.Header>
                           
                            <Grid  HeightRequest="48">
                                
                                <Label Text="{Binding State}" TextColor="Red" FontAttributes="Bold" Margin="0,14,0,14" CharacterSpacing="0.25" FontFamily="Roboto-Regular"  FontSize="14" />
                            </Grid>
                        </syncfusion:AccordionItem.Header>
                        <syncfusion:AccordionItem.Content>
                            <Grid ColumnSpacing="10" RowSpacing="2" BackgroundColor="#f4f4f4"  >
                                <Grid Margin="16,6,0,0">
                                    <Grid.Resources>
                                        <Style TargetType="Label">
                                            <Setter Property="FontFamily" Value="Roboto-Regular"/>
                                        </Style>
                                    </Grid.Resources>
                                    <Grid.RowDefinitions >
                                        <RowDefinition Height="25"/>
                                        <RowDefinition Height="25"/>
                                        <RowDefinition Height="25"/>
                                        <RowDefinition Height="25"/>
                                        <RowDefinition Height="{OnPlatform Default=90,Android=90,WinUI=70, iOS=100,MacCatalyst=70 }"/>
                                        <RowDefinition Height="Auto"/>
                                    </Grid.RowDefinitions>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="100"/>
                                        <ColumnDefinition Width="100"/>
                                        <ColumnDefinition Width="*"/>
                                    </Grid.ColumnDefinitions>
                                    <Label Text="Position" Grid.Column="0" Grid.Row="0" Margin="0,0,0,0"/>
                                    <Label Text="{Binding Position}" Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2"/>
                                    <Label Text="Organization " Grid.Row="1" Grid.Column="0" Margin="0,0,0,0"/>
                                    <Label Text="{Binding OrganizationUnit}" Grid.Row="1" Grid.Column="1"/>
                                    <Label Text="Date Of Birth " Grid.Row="2" Grid.Column="0" Margin="0,0,0,0"/>
                                    <Label Text="{Binding DateOfBirth}" Grid.Row="2" Grid.Column="1"/>
                                    <Label Text="Location " Grid.Row="3" Grid.Column="0" Margin="0,0,0,0"/>
                                    <Label Text="{Binding Location}" Grid.Row="3" Grid.Column="1"/>

                                    <Label Padding="0,10,0,10" Grid.Row="4" Grid.ColumnSpan="3"  LineBreakMode="WordWrap"  
                                            FontSize="14" CharacterSpacing="0.25" VerticalTextAlignment="Center" 
                                                Text="{Binding Description}">
                                    </Label>
                                    <StackLayout Grid.Row="5" Orientation="Horizontal" Margin="0,0,0,12">
                                        <Label Text="&#xe700;" FontSize="16" Margin="0,2,2,2"
                                                   FontFamily='{OnPlatform Android=AccordionFontIcons.ttf#,WinUI=AccordionFontIcons.ttf#AccordionFontIcons,MacCatalyst=AccordionFontIcons,iOS=AccordionFontIcons}'
                                                   VerticalOptions="Center" VerticalTextAlignment="Center"/>
                                        <Label Text="{Binding Phone}" TextColor="DarkBlue" Grid.Column="1" VerticalOptions="Center" CharacterSpacing="0.25" FontSize="14"/>
                                    </StackLayout>
                                </Grid>
                            </Grid>
                        </syncfusion:AccordionItem.Content>
                    </syncfusion:AccordionItem>
                </DataTemplate>
            </BindableLayout.ItemTemplate>
        </syncfusion:SfAccordion>
    </ContentPage.Content>

  
    
</ContentPage>

Answer 1

Hello,

But I need to add a button on this page so that i can "Do Something" or add some additional functionality.

You can use <StackLayout> to wrap the <syncfusion:SfAccordion>, Then you can add button to test it. You can refer to it.

<StackLayout>
           <Button Text="test" Command="{Binding TestCommand}"></Button>

            <syncfusion:SfAccordion   x:Name="accordion" WidthRequest="270" BindableLayout.ItemsSource="{Binding Employees}" >
                <BindableLayout.ItemTemplate>
                    <DataTemplate>
                        <syncfusion:AccordionItem IsExpanded="{Binding IsExpanded}">
                            <syncfusion:AccordionItem.Header>
                             <Grid  HeightRequest="48">
                                   <Label Text="{Binding State}" TextColor="Red" FontAttributes="Bold" Margin="0,14,0,14" CharacterSpacing="0.25" FontFamily="Roboto-Regular"  FontSize="14" />
                                </Grid>
                            </syncfusion:AccordionItem.Header>
                            <syncfusion:AccordionItem.Content>
                                <Grid ColumnSpacing="10" RowSpacing="2" BackgroundColor="#f4f4f4"  >
                                    <Grid Margin="16,6,0,0">
                                        <Grid.Resources>
                                            <Style TargetType="Label">
                                                <Setter Property="FontFamily" Value="Roboto-Regular"/>
                                            </Style>
                                        </Grid.Resources>
                                        <Grid.RowDefinitions >
                                            <RowDefinition Height="25"/>
                                            <RowDefinition Height="25"/>
                                            <RowDefinition Height="25"/>
                                            <RowDefinition Height="25"/>
                                            <RowDefinition Height="{OnPlatform Default=90,Android=90,WinUI=70, iOS=100,MacCatalyst=70 }"/>
                                            <RowDefinition Height="Auto"/>
                                        </Grid.RowDefinitions>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="100"/>
                                            <ColumnDefinition Width="100"/>
                                            <ColumnDefinition Width="*"/>
                                        </Grid.ColumnDefinitions>
                                        <Label Text="Position" Grid.Column="0" Grid.Row="0" Margin="0,0,0,0"/>
                                        <Label Text="{Binding Position}" Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2"/>
                                        <Label Text="Organization " Grid.Row="1" Grid.Column="0" Margin="0,0,0,0"/>
                                        <Label Text="{Binding OrganizationUnit}" Grid.Row="1" Grid.Column="1"/>
                                        <Label Text="Date Of Birth " Grid.Row="2" Grid.Column="0" Margin="0,0,0,0"/>
                                        <Label Text="{Binding DateOfBirth}" Grid.Row="2" Grid.Column="1"/>
                                        <Label Text="Location " Grid.Row="3" Grid.Column="0" Margin="0,0,0,0"/>
                                        <Label Text="{Binding Location}" Grid.Row="3" Grid.Column="1"/>

                                       <Label Padding="0,10,0,10" Grid.Row="4" Grid.ColumnSpan="3"  LineBreakMode="WordWrap"  
                                            FontSize="14" CharacterSpacing="0.25" VerticalTextAlignment="Center"
                                                Text="{Binding Description}">
                                        </Label>
                                        <StackLayout Grid.Row="5" Orientation="Horizontal" Margin="0,0,0,12">
                                            <Label Text="&#xe700;" FontSize="16" Margin="0,2,2,2"
                                                   FontFamily='{OnPlatform Android=AccordionFontIcons.ttf#,WinUI=AccordionFontIcons.ttf#AccordionFontIcons,MacCatalyst=AccordionFontIcons,iOS=AccordionFontIcons}'
                                                   VerticalOptions="Center" VerticalTextAlignment="Center"/>
                                            <Label Text="{Binding Phone}" TextColor="DarkBlue" Grid.Column="1" VerticalOptions="Center" CharacterSpacing="0.25" FontSize="14"/>
                                        </StackLayout>
                                    </Grid>
                                </Grid>
                            </syncfusion:AccordionItem.Content>
                        </syncfusion:AccordionItem>
                    </DataTemplate>
                </BindableLayout.ItemTemplate>
            </syncfusion:SfAccordion>
        </StackLayout>

Also I can't figure out why this page is centered?

Because maui add HorizontalOptions="Fill" for all views by default, If you want to make the SfAccordion to the left, you can set HorizontalOptions="Start" in <syncfusion:SfAccordion>, if you want it to the right, set set HorizontalOptions="End", here is a document about Align views in layouts

<syncfusion:SfAccordion HorizontalOptions="Start"  x:Name="accordion" WidthRequest="270" BindableLayout.ItemsSource="{Binding Employees}" >

Best Regards,

Leon Lu

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.