Page Layout mode

Author: manikandansf4068

Custom Toolbar/CustomToolbar.csproj

@@ -54,6 +54,7 @@
 
 	<ItemGroup>
 		<PackageReference Include="Syncfusion.Maui.PdfViewer" Version="*" />
+	  <PackageReference Include="Syncfusion.Maui.ListView" Version="*" />
 	</ItemGroup>
 
 	<ItemGroup>
@@ -63,6 +64,9 @@
 	</ItemGroup>
 
 	<ItemGroup>
+	  <MauiXaml Update="UI\PageLayoutModeDialog.xaml">
+	    <Generator>MSBuild:Compile</Generator>
+	  </MauiXaml>
 	  <MauiXaml Update="UI\MessageBox.xaml">
 	    <Generator>MSBuild:Compile</Generator>
 	  </MauiXaml>

Custom Toolbar/UI/PageLayoutModeDialog.xaml

@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             x:Class="CustomToolbar.PageLayoutModeDialog"
+             xmlns:sf="clr-namespace:Syncfusion.Maui.ListView;assembly=Syncfusion.Maui.ListView">
+
+    <Border 
+        x:Name="Colors" 
+        VerticalOptions="Start" 
+        HorizontalOptions="Start"
+        WidthRequest="{OnPlatform MacCatalyst=205, iOS=150, Android=150, WinUI=205}"
+        HeightRequest="84"
+        Padding="0,0,0,0" 
+        StrokeShape="RoundRectangle 4">
+        <sf:SfListView 
+        x:Name="listView" ItemTapped="SfListView_ItemTapped" ItemSize="40" >
+            <sf:SfListView.ItemTemplate>
+                <DataTemplate>
+                    <Border StrokeThickness="0">
+                    <Border.StrokeShape>
+                        <RoundRectangle CornerRadius="0" />
+                    </Border.StrokeShape>
+                        <Grid >
+                            <Grid.ColumnDefinitions>
+                                <ColumnDefinition Width="*"></ColumnDefinition>
+                            </Grid.ColumnDefinitions>
+                        <HorizontalStackLayout>
+                            <Label 
+                             Padding="8,0,8,0"
+                            FontSize="18"
+                               
+                                HeightRequest="18"
+                            FontFamily="Maui Material Assets"
+                            VerticalOptions="Center"
+                            Text="{Binding Icon}">
+                            </Label>
+                            <Label 
+                                Padding="0,0,0,0"
+                                FontSize="{OnPlatform MacCatalyst=16, iOS=14, Android=14, WinUI=16}"
+                                FontFamily="Roboto"
+                                VerticalOptions="Center"
+                                Text="{Binding IconName}">
+                            </Label>
+                        </HorizontalStackLayout>
+                        </Grid>
+                    </Border>
+                </DataTemplate>
+            </sf:SfListView.ItemTemplate>
+        </sf:SfListView>
+    </Border>
+</ContentView>

Custom Toolbar/UI/PageLayoutModeDialog.xaml.cs

@@ -0,0 +1,88 @@
+using Syncfusion.Maui.ListView;
+
+namespace CustomToolbar;
+
+/// <summary>
+/// PageLayoutModeDialog representing a dialog for selecting page layout mode.
+/// </summary>
+public partial class PageLayoutModeDialog : ContentView
+{
+    /// <summary>
+    /// Event raised when an item is tapped in the dialog.
+    /// </summary>
+    public event EventHandler<ItemTappedEventArgs> ItemTapped;
+
+    /// <summary>
+    /// Initializes a new instance of the PageLayoutModeDialog class.
+    /// </summary>
+    public PageLayoutModeDialog() 
+    {
+        Initialize();
+    }
+    internal void Initialize()
+    {
+        InitializeComponent();
+        List<AnnotationButtonItem> items = new List<AnnotationButtonItem>()
+        {
+            new AnnotationButtonItem()
+            {
+                Icon = "\uE796",
+                IconName = "Continuous page"
+            },
+            new AnnotationButtonItem()
+            {
+                 Icon = "\uE797",
+                IconName = "Page by page"
+               
+            },
+        };
+        listView.ItemsSource = items;
+        listView.SelectedItem = items[0];
+    }
+
+    /// <summary>
+    /// Handles the event when an item is tapped in the ListView.
+    /// </summary>
+    private void SfListView_ItemTapped(object sender, Syncfusion.Maui.ListView.ItemTappedEventArgs e)
+    {
+        if(sender is SfListView view)
+        {
+
+            if (e.DataItem is AnnotationButtonItem buttonItem && BindingContext is PdfViewerViewModel viewModel)
+            {
+                if (buttonItem.IconName == "Continuous page")
+                    viewModel.PageLayoutMode = Syncfusion.Maui.PdfViewer.PageLayoutMode.Continuous;
+                else
+                    viewModel.PageLayoutMode = Syncfusion.Maui.PdfViewer.PageLayoutMode.Single;
+            }
+            ItemTapped?.Invoke(this, new ItemTappedEventArgs(view));
+        }
+    }
+    internal void DisappearHighlight()
+    {
+        // Clears the selection highlight in the ListView.
+        listView.SelectedItem = null;
+    }
+}
+
+/// <summary>
+/// Represents an item in the dialog ListView.
+/// </summary>
+public class AnnotationButtonItem
+{
+    public string Icon { get; set; }
+    public string IconName { get; set; }
+}
+
+/// <summary>
+/// Event arguments for the ItemTapped event.
+/// </summary>
+public class ItemTappedEventArgs : EventArgs
+{
+    public View TappedItem;
+
+    public ItemTappedEventArgs(IView view)
+    {
+        TappedItem = view as View;
+    }
+}

Custom Toolbar/View/MainPage.xaml

@@ -53,6 +53,7 @@
                     <ColumnDefinition Width="{OnPlatform Default=Auto, Android=1*, iOS=1*}"/>
                     <ColumnDefinition Width="{OnPlatform Default=*, Android=3*, iOS=3*}"/>
                     <ColumnDefinition Width="{OnPlatform Default=*, Android=1*, iOS=1*}"/>
+                    <ColumnDefinition Width="{OnPlatform Default=40, Android=1*, iOS=1*}"/>
                 </Grid.ColumnDefinitions>
                 <HorizontalStackLayout Spacing="10" Grid.Column="0" Margin="8,0,0,0" HorizontalOptions="Start" >
                     <Button Text="&#xe700;"
@@ -114,6 +115,14 @@
                         Command="{Binding ZoomInCommand}" IsEnabled="{Binding CanZoomIn}"
                         PropertyChanged="Button_PropertyChanged"/>
                 </HorizontalStackLayout>
+                <Grid Grid.Column="3" Margin="0,0,12,0" HorizontalOptions="{OnPlatform MacCatalyst=End, iOS=End, Android=End, WinUI=End}">
+                    <Button Text="&#xe795;" 
+                            Margin="0,0,0,0" 
+                            HorizontalOptions="End"
+                            FontFamily="Maui Material Assets"
+                            PropertyChanged="Button_PropertyChanged"
+                            Clicked="pageLayoutClicked"/>
+                </Grid>
             </Grid>
             <Line Grid.Row="1" StrokeThickness="1" BackgroundColor="#33000000"/>
             <syncfusion:SfPdfViewer
@@ -136,6 +145,15 @@
                 x:Name="MessageBox" Grid.Row="2"
                 IsVisible="False"
                 OkClicked="MessageBox_OKClicked"/>
+            <local:PageLayoutModeDialog   
+                    WidthRequest="{OnPlatform MacCatalyst=205, iOS=150, Android=150, WinUI=205}" 
+                    BackgroundColor="#F7F2FB"
+                    HeightRequest="84"
+                    HorizontalOptions="End" 
+                    VerticalOptions="Start"
+                    ItemTapped="PageLayoutModeChanged"
+                    x:Name="PageLayout" Grid.Row="2"
+                    IsVisible="false"/>
         </Grid>
     </ContentPage.Content>
 </ContentPage>

Custom Toolbar/View/MainPage.xaml.cs

@@ -1,4 +1,5 @@
 using Microsoft.Maui.Platform;
+using Syncfusion.Maui.PdfViewer;
 
 namespace CustomToolbar;
 
@@ -182,4 +183,30 @@ private void MessageBox_OKClicked(object sender, EventArgs e)
                 PdfViewer.DocumentSource = context.PdfDocumentStream;
         }
     }
+
+    /// <summary>
+    /// Toggles the visibility of the page layout options when the page layout button is clicked.
+    /// </summary>
+    private void pageLayoutClicked(object sender, EventArgs e)
+    {
+        PageLayout.IsVisible = !PageLayout.IsVisible;
+    }
+
+    /// <summary>
+    /// Handles the change of page layout mode based on user selection.
+    /// </summary>
+    private void PageLayoutModeChanged(object sender, ItemTappedEventArgs e)
+    {
+        if (BindingContext is PdfViewerViewModel context)
+        {
+            // Set the page layout mode based on the selected mode.
+            if (context.PageLayoutMode == Syncfusion.Maui.PdfViewer.PageLayoutMode.Continuous)
+                PdfViewer.PageLayoutMode = PageLayoutMode.Continuous;
+            else
+                PdfViewer.PageLayoutMode = PageLayoutMode.Single;
+            // Hide the page layout options after selection.
+            PageLayout.IsVisible = false;
+        }
+
+    }
 }

Custom Toolbar/ViewModel/PdfViewerViewModel.cs

@@ -1,5 +1,6 @@
 using System.ComponentModel;
 using System.Windows.Input;
+using Syncfusion.Maui.PdfViewer;
 
 namespace CustomToolbar
 {
@@ -19,6 +20,7 @@ public class PdfViewerViewModel : INotifyPropertyChanged
         private bool _showPasswordDialog = false;
         private Stream _documentStream;
         private int _pageCount;
+        private PageLayoutMode _pageLayoutMode;
 
         /// <summary>
         /// Occurs when a property is changed.
@@ -170,6 +172,18 @@ public int PageCount
             }
         }
 
+        /// <summary>
+        /// Stores the  pageLayout Mode of the PDF.
+        /// </summary>
+        public PageLayoutMode PageLayoutMode
+        {
+            get => _pageLayoutMode;
+            set
+            {
+                _pageLayoutMode = value;
+                OnPropertyChanged("PageLayoutMode");
+            }
+        }
         /// <summary>
         /// Gets the command to browse file in the disk.
         /// </summary>