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 `PasswordErrorOccurred` 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 the PDF document is loaded with an invalid password or without a password
pdfViewerControl.PasswordErrorOccurred += PdfViewerControl_PasswordErrorOccurred;
pdfViewerControl.DocumentLoaded += PdfViewerControl_DocumentLoaded;
}
To show the custom password-protected view in the viewport 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
The password used to open the password-protected PDF document provided in the sample is “Password”.
