Maui controls not showing correct form

Question

tried the below code to make a flyout containing a maui treeview and a detail page containing pdfviewer and a sfpopup to be shown programmmatically.But not getting output as expected.Xaml code is below

............................................................................................................................

............................................ .........................................................

<?xml version="1.0" encoding="utf-8" ?>
<FlyoutPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="book_companion_3.Editor"
         xmlns:Syncfusion="clr-namespace:Syncfusion.Maui.PdfViewer;assembly=Syncfusion.Maui.PdfViewer"
            xmlns:sfPopup="clr-namespace:Syncfusion.Maui.Popup;assembly=Syncfusion.Maui.Popup"

              xmlns:syncfusion="clr-namespace:Syncfusion.Maui.TreeView;assembly=Syncfusion.Maui.TreeView"
             xmlns:treeviewengine="clr-namespace:Syncfusion.TreeView.Engine;assembly=Syncfusion.Maui.TreeView"
             Title="Editor" FlyoutLayoutBehavior="Default">
    <FlyoutPage.Flyout>
        <ContentPage Title="FlyoutForm">
            <StackLayout>
                <syncfusion:SfTreeView x:Name="treeview" FlowDirection="LeftToRight" ExpanderPosition="Start" FullRowSelect="True">
                    <syncfusion:SfTreeView.Nodes>
                        <treeviewengine:TreeViewNode Content="Ornamentation">
                            <treeviewengine:TreeViewNode.ChildNodes>
                                <treeviewengine:TreeViewNode Content="Highlight">
                                    <treeviewengine:TreeViewNode.ChildNodes>
                                        <treeviewengine:TreeViewNode Content="Red" />
                                        <treeviewengine:TreeViewNode Content="Blue" />
                                        <treeviewengine:TreeViewNode Content="Green" />
                                        <treeviewengine:TreeViewNode Content="Yellow" />
                                        <treeviewengine:TreeViewNode Content="Remove" />
                                    </treeviewengine:TreeViewNode.ChildNodes>
                                </treeviewengine:TreeViewNode>
                                <treeviewengine:TreeViewNode Content="Drawing">
                                    <treeviewengine:TreeViewNode.ChildNodes>
                                        <treeviewengine:TreeViewNode Content="Free hand Drawing">
                                            <treeviewengine:TreeViewNode.ChildNodes>
                                                <treeviewengine:TreeViewNode Content="Red" />
                                                <treeviewengine:TreeViewNode Content="Blue" />
                                                <treeviewengine:TreeViewNode Content="Green" />
                                                <treeviewengine:TreeViewNode Content="Yellow" />
                                            </treeviewengine:TreeViewNode.ChildNodes>
                                        </treeviewengine:TreeViewNode>
                                        <treeviewengine:TreeViewNode Content="Square">
                                            <treeviewengine:TreeViewNode.ChildNodes>
                                                <treeviewengine:TreeViewNode Content="Red" />
                                                <treeviewengine:TreeViewNode Content="Blue" />
                                                <treeviewengine:TreeViewNode Content="Green" />
                                                <treeviewengine:TreeViewNode Content="Yellow" />
                                            </treeviewengine:TreeViewNode.ChildNodes>
                                        </treeviewengine:TreeViewNode>
                                        <treeviewengine:TreeViewNode Content="Circle">
                                            <treeviewengine:TreeViewNode.ChildNodes>
                                                <treeviewengine:TreeViewNode Content="Red" />
                                                <treeviewengine:TreeViewNode Content="Blue" />
                                                <treeviewengine:TreeViewNode Content="Green" />
                                                <treeviewengine:TreeViewNode Content="Yellow" />
                                            </treeviewengine:TreeViewNode.ChildNodes>
                                        </treeviewengine:TreeViewNode>
                                        <treeviewengine:TreeViewNode Content="Arrow">
                                            <treeviewengine:TreeViewNode.ChildNodes>
                                                <treeviewengine:TreeViewNode Content="Red" />
                                                <treeviewengine:TreeViewNode Content="Blue" />
                                                <treeviewengine:TreeViewNode Content="Green" />
                                                <treeviewengine:TreeViewNode Content="Yellow" />
                                            </treeviewengine:TreeViewNode.ChildNodes>
                                        </treeviewengine:TreeViewNode>
                                        <treeviewengine:TreeViewNode Content="Line">
                                            <treeviewengine:TreeViewNode.ChildNodes>
                                                <treeviewengine:TreeViewNode Content="Red" />
                                                <treeviewengine:TreeViewNode Content="Blue" />
                                                <treeviewengine:TreeViewNode Content="Green" />
                                                <treeviewengine:TreeViewNode Content="Yellow" />
                                            </treeviewengine:TreeViewNode.ChildNodes>
                                        </treeviewengine:TreeViewNode>
                                    </treeviewengine:TreeViewNode.ChildNodes>
                                </treeviewengine:TreeViewNode>
                                <treeviewengine:TreeViewNode Content="Underline">
                                    <treeviewengine:TreeViewNode.ChildNodes>
                                        <treeviewengine:TreeViewNode Content="Red" />
                                        <treeviewengine:TreeViewNode Content="Blue" />
                                        <treeviewengine:TreeViewNode Content="Green" />
                                        <treeviewengine:TreeViewNode Content="Yellow" />
                                    </treeviewengine:TreeViewNode.ChildNodes>
                                </treeviewengine:TreeViewNode>
                                <treeviewengine:TreeViewNode Content="StrikeOut">
                                    <treeviewengine:TreeViewNode.ChildNodes>
                                        <treeviewengine:TreeViewNode Content="Red" />
                                        <treeviewengine:TreeViewNode Content="Blue" />
                                        <treeviewengine:TreeViewNode Content="Green" />
                                        <treeviewengine:TreeViewNode Content="Yellow" />
                                    </treeviewengine:TreeViewNode.ChildNodes>
                                </treeviewengine:TreeViewNode>
                                <treeviewengine:TreeViewNode Content="Squiggly">
                                    <treeviewengine:TreeViewNode.ChildNodes>
                                        <treeviewengine:TreeViewNode Content="Red" />
                                        <treeviewengine:TreeViewNode Content="Blue" />
                                        <treeviewengine:TreeViewNode Content="Green" />
                                        <treeviewengine:TreeViewNode Content="Yellow" />
                                    </treeviewengine:TreeViewNode.ChildNodes>
                                </treeviewengine:TreeViewNode>
                                <treeviewengine:TreeViewNode Content="Erase"></treeviewengine:TreeViewNode>
                            </treeviewengine:TreeViewNode.ChildNodes>
                        </treeviewengine:TreeViewNode>
                        <treeviewengine:TreeViewNode Content="Settings">
                        </treeviewengine:TreeViewNode>
                    </syncfusion:SfTreeView.Nodes>
                </syncfusion:SfTreeView>
            </StackLayout>
        </ContentPage>
    </FlyoutPage.Flyout>
    <FlyoutPage.Detail>
        <ContentPage Title="DetailsForm">
            <StackLayout>
                <Grid>
                    <!-- Define 4 buttons at the upper bar -->
                    <Grid.RowDefinitions>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Button Grid.Row="0" Text="Reading Mode" Clicked="Button_OnClicked" IsVisible="False" x:Name="ReadingModeButton"></Button>

                    <StackLayout Grid.Row="1">

                        <Syncfusion:SfPdfViewer x:Name="sfpdfviewer"  TextSelectionChanged="sfpdfviewer_TextSelectionChanged">

                            <Syncfusion:SfPdfViewer.GestureRecognizers>

                                <SwipeGestureRecognizer Direction="Left" Swiped="SwipeGestureRecognizer_Swiped_Left">
                                </SwipeGestureRecognizer>
                                <SwipeGestureRecognizer Direction="Right" Swiped="SwipeGestureRecognizer_Swiped_Right">
                                </SwipeGestureRecognizer>
                                <PinchGestureRecognizer PinchUpdated="PinchGestureRecognizer_PinchUpdated">
                                </PinchGestureRecognizer>
                                <TapGestureRecognizer Buttons="Secondary" Tapped="TapGestureRecognizer_Tapped" ></TapGestureRecognizer>
                            </Syncfusion:SfPdfViewer.GestureRecognizers>

                            <sfPopup:SfPopup x:Name="sfPopup"  AnimationMode="Zoom" IsVisible="False">

                                <Button x:Name="Addnote" Text="Add Sticky Note" Clicked="Addnote_Clicked" ></Button>
                            </sfPopup:SfPopup>
                            <sfPopup:SfPopup x:Name="Addallnotes">
                                <StackLayout>
                                    <Button x:Name="Comment" Text="Comment" Clicked="Comment_Clicked" ></Button>
                                    <Button x:Name="Voice" Text="Voice" Clicked="Voice_Clicked"></Button>
                                    <Button x:Name="Image" Text="Image" Clicked="Image_Clicked"></Button>
                                </StackLayout>
                            </sfPopup:SfPopup>
                        </Syncfusion:SfPdfViewer>

                        <!--<sfPopup:SfPopup x:Name="ColorPopUp">
    <Button Grid.Row="0" Grid.Column="0" BackgroundColor="Red" x:Name="ButtonRed" Clicked="ButtonRed_Clicked" />

    <Button Grid.Row="0" Grid.Column="2" BackgroundColor="Yellow" x:Name="ButtonYellow" Clicked="ButtonYellow_Clicked" />
    <Button Grid.Row="0" Grid.Column="3" BackgroundColor="Green" x:Name="ButtonGreen" Clicked="ButtonGreen_Clicked" />
    <Button Grid.Row="0" Grid.Column="4" BackgroundColor="Blue" x:Name="ButtonBlue" Clicked="ButtonBlue_Clicked" />
</sfPopup:SfPopup>-->
                    </StackLayout>
                    <!-- Add the SfPdfViewer to the remaining portion -->
                </Grid>
            </StackLayout>
        </ContentPage>
    </FlyoutPage.Detail>
</FlyoutPage>