How to create custom password protected view to load the encrypted PDF document in Xamarin Forms
This KB article explains the creation of a custom password protected view to load a password protected PDF document into the PDF viewer control.
To start with, add a new method named InitializePasswordView in the MainPage.Xaml.cs. In this method, you can create a custom password protected view using the SfPopupLayout.
The entire InitializePasswordView method is as follows.
C#:
private void InitializePasswordView()
{
#region Password Protected
//Initialize the PopupLayout
popup = new SfPopupLayout();
popup.PopupView.ShowFooter = true;
popup.StaysOpen = true;
popup.PopupView.MinimumWidthRequest = 100;
popup.PopupView.MinimumHeightRequest = 100;
popup.PopupView.WidthRequest = 400;
popup.PopupView.HeightRequest = 210;
popup.Closing += Popup_Closing;
popup.Closed += Popup_Closed;
if (Device.RuntimePlatform == Device.iOS)
popup.PopupView.ShowCloseButton = false;
#region HeaderTemplate
//Initialize the header view of the PopupLayout
popup.PopupView.HeaderTemplate = new DataTemplate(() =>
{
StackLayout layout = new StackLayout()
{
Padding = new Thickness(20, 15, 0, 0),
BackgroundColor = Color.White,
HeightRequest = 20
};
Label headerLabel = new Label()
{
Text = "Password Protected",
FontSize = 20,
TextColor = Color.Black,
FontFamily = "Roboto-Medium",
HeightRequest = 24,
};
if (Device.RuntimePlatform == Device.iOS)
headerLabel.HorizontalOptions = LayoutOptions.CenterAndExpand;
layout.Children.Add(headerLabel);
return layout;
}
);
#endregion
#region ContentTemplate
// Initialize the content view of the PopupLayout
popup.PopupView.ContentTemplate = new DataTemplate(() =>
{
StackLayout contentLayout = new StackLayout()
{
BackgroundColor = Color.Transparent,
Padding = new Thickness(20, 10, 20, 0),
Spacing = 10
};
if (Device.RuntimePlatform == Device.iOS)
{
contentLayout.Padding = new Thickness(20, 0, 20, 0);
}
Label bodyContent = new Label()
{
BackgroundColor = Color.Transparent,
Text = "Enter the password to open this PDF File.",
TextColor = Color.Black,
FontSize = 15,
FontFamily = "Roboto-Regular"
};
passwordEntry.BackgroundColor = Color.Transparent;
passwordEntry.Text = "";
passwordEntry.TextColor = Color.Black;
passwordEntry.Placeholder = "Password: syncfusion";
passwordEntry.FontSize = 15;
passwordEntry.FontFamily = "Roboto-Regular";
passwordEntry.Completed += OkButton_Clicked;
passwordEntry.IsPassword = true;
passwordEntry.TextChanged += PasswordEntry_TextChanged;
if (Device.RuntimePlatform == Device.Android)
passwordEntry.Margin = new Thickness(-3, 0, 0, 0);
if (Device.RuntimePlatform == Device.iOS)
{
passwordEntry.MinimumHeightRequest = 40;
passwordEntry.HeightRequest = 40;
}
contentLayout.Children.Add(bodyContent);
contentLayout.Children.Add(passwordEntry);
return contentLayout;
});
#endregion
#region FooterTemplate
//Initialize the footer view of the PopupLayout
popup.PopupView.FooterTemplate = new DataTemplate(() =>
{
StackLayout layout = new StackLayout()
{
Orientation = StackOrientation.Horizontal,
Spacing = 10
};
Button cancelButton = new Button()
{
Text = "Cancel",
FontSize = 15,
TextColor = Color.FromRgb(176, 176, 176),
FontFamily = "Roboto-Medium",
BackgroundColor = Color.Transparent,
MinimumWidthRequest = 80,
HorizontalOptions=LayoutOptions.FillAndExpand
};
if (Device.RuntimePlatform == Device.iOS)
cancelButton.HorizontalOptions = LayoutOptions.FillAndExpand;
cancelButton.Clicked += CancelButton_Clicked;
okButton.Text = "Ok";
okButton.FontSize = 15;
okButton.HorizontalOptions = LayoutOptions.FillAndExpand;
okButton.FontFamily = "Roboto-Medium";
okButton.Clicked += OkButton_Clicked;
okButton.TextColor = Color.FromRgb(176, 176, 176);
okButton.BackgroundColor = Color.Transparent;
okButton.MinimumWidthRequest = 70;
okButton.IsEnabled= true;
if (Device.RuntimePlatform == Device.iOS)
okButton.HorizontalOptions = LayoutOptions.FillAndExpand;
layout.Children.Add(cancelButton);
layout.Children.Add(okButton);
return layout;
}
);
#endregion
#endregion
}
Call the InitializePasswordView method in the MainPage constructor method of the MainPage class to initialize the custom password protected view. Please refer to the following code snippet for reference.
C#:
public MainPage()
{
InitializeComponent();
InitializePasswordView();
}
To load the encrypted PDF document using the custom password protected view, you need to disable the inbuilt password protected view by setting the IsPasswordViewEnabled API to false.
You need to set the IsPasswordViewEnabled property and wire up the PasswordErrorOccured event (to handle password errors) before loading the password protected PDF document as follows,
C#:
protected override void OnAppearing()
{
base.OnAppearing();
// To disable the in-built password protected view
pdfViewerControl.IsPasswordViewEnabled = false;
//Wire up the events to trigger when PDF document is loaded with Invalid password and without password
pdfViewerControl.PasswordErrorOccurred += PdfViewerControl_PasswordErrorOccurred;
pdfViewerControl.DocumentLoaded += PdfViewerControl_DocumentLoaded;
To show the custom password protected view in the view port or display, call the popup.Show() API in the PdfViewerControl_PasswordErrorOccurred method as follows,
C#:
private void PdfViewerControl_PasswordErrorOccurred(object sender, PasswordErrorOccurredEventArgs args)
{
if (args.Title == "Error loading encrypted PDF document")
{
if (callCount == 0)
{
callCount++;
if(popup!=null)
//To show the PopupLayout to enter the password
popup.Show();
isDocumentLoaded = false;
}
passwordEntry.Text = "";
passwordEntry.Focus();
}
}
On execution, the custom password protected UI view will look alike follows,
Now, you can enter the password for the loaded PDF document from the text entry available in the custom password protected view. Then, pressing the Ok button will reload the same PDF document with the entered password into the PDF viewer control.
Please refer to the following code snippet for your reference,
C#:
private void OkButton_Clicked(object sender, EventArgs e)
{
if (passwordEntry.Text != "")
{
passwordEntry.Unfocus();
fileStream = typeof(App).GetTypeInfo().Assembly.GetManifestResourceStream("PdfViewerSample.Assets.Encrypted Document.pdf");
pdfViewerControl.LoadDocument(fileStream, passwordEntry.Text);
}
}
Pressing the Cancel button will close the custom password protected view. To know about loading the password protected PDFs in Xamarin PdfViewer, please refer to the following documentation.
https://help.syncfusion.com/xamarin/pdf-viewer/loading-password-protected-pdfs
Sample link:
Also, please find the custom password protected view sample from the following link,
https://www.syncfusion.com/downloads/support/directtrac/general/ze/PdfViewerSample694698751.zip
Password used to open the password protected PDF document provided in the sample is “Password”.
