CSS Customization

PSPDFKit for Windows allows you to customize many parts of the UI that come as part of the SDK. This includes a number of supported public CSS classes borrowed from PSPDFKit For Web, which you can use to apply custom styling to. The up-to-date list of customizable elements can be found in the CSS section of our Web API documentation.

How to Use CSS to Customize the Appearance

Let’s say you want to change the background color of the toolbar. If you look through our Web CSS API documentation, you will find a section dedicated to all toolbar-related styling. You can use your mouse to move over the elements you want to style. For example, if you move over the toolbar, you’ll see the associated CSS class, [.PSPDFKit-Toolbar][].

  1. With that information in mind, you can create a new stylesheet that overwrites the properties. For this example, you only want to change the background color. The first step is to add the stylesheet to your assets.
Add a CSS file to your project
  1. Now you can populate this stylesheet with values to change the background color of the toolbar:

    1
    2
    3
    4
    
    /* my-pspdfkit.css */
    .PSPDFKit-Toolbar {
      background-color: #f00;
    }
    
  2. Then you have to pass the CSS when declaring the PdfView XAML element in order to override the default styling:

Copy
1
2
3
4
<ui:PdfView
    License="{StaticResource PSPDFKitLicense}"
    PdfUriSource="ms-appx:///Assets/pdfs/default.pdf"
    Css="ms-appx-web:///Assets/css/my-pspdfkit.css"/>

Now all the CSS elements will be applied and you should see the following:

Copy
1
2
3
4
5
<img
  class="shadow"
  alt="Toolbar with configured background color"
  src="/images/guides/web/customizing-the-interface/css-customization/customized-toolbar-9ce45a2e.png"
  width="795">