【WPF】WebBrowser を使ってPDFファイルを表示してみる

公開日:2019-07-12
最終更新:2019-07-12
※この記事は外部サイト(https://www.doraxdora.com/blog/2017/11/02/...)からのクロス投稿です

今回は、WPFアプリでPDFを表示する方法のうち、WebBrowser でサクッとファイルを表示するのを試してみました。

画面に上部メニューを追加し、そこから呼び出せるように修正します。
ヘルプやマニュアルなんかをアプリから表示する際にやったりしますよね。

プログラムは前回のものを流用します。
【WPF】はてなアイコンにツールチップを表示する

画面の追加

新規でPDFを表示するためのウィンドウを追加します。
画像を取り忘れてしまいましたが、ソリューション・エクスプローラーから「追加」>「ウィンドウ」みたいな感じで出来るはずです。

画面レイアウト

PdfView.xaml

<Mah:MetroWindow x:Class="WpfApp1.PdfView"  
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
        xmlns:local="clr-namespace:WpfApp1"  
        xmlns:Mah="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"  
        mc:Ignorable="d"  
        Title="PDFビュー" Width="1024" Height="768"  
        GlowBrush="{DynamicResource AccentColorBrush}"  
        BorderThickness="1"  
        Icon="/WpfApp1;component/Resource/Cat.ico"  
        WindowStartupLocation="CenterScreen" >  
    <Window.Resources>  
        <ResourceDictionary Source="/Style/StyleDic.xaml"/>  
    </Window.Resources>  
    <Grid>  
        <WebBrowser x:Name="wb_manual" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="1,1,1,1"/>  
    </Grid>  
</Mah:MetroWindow>  

単純に WebBrowser を配置してスタイルを弄っただけです。

コードビハインド

PdfView.xaml.cs

using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Text;  
using System.Threading.Tasks;  
using System.Windows;  
using System.Windows.Controls;  
using System.Windows.Data;  
using System.Windows.Documents;  
using System.Windows.Input;  
using System.Windows.Media;  
using System.Windows.Media.Imaging;  
using System.Windows.Shapes;  

using MahApps.Metro.Controls;  
using System.Reflection;  

namespace WpfApp1  
{  
    /// <summary>  
    /// PdfView.xaml の相互作用ロジック  
    /// </summary>  
    public partial class PdfView : MetroWindow  
    {  
        public PdfView()  
        {  
            InitializeComponent();  
            Assembly mainAssembly = Assembly.GetExecutingAssembly();  
            String appDir = System.IO.Path.GetDirectoryName(mainAssembly.Location);  

            wb_manual.Navigate("file://" + appDir + "/Pdf/sample.pdf" + "#toolbar=1");  

        }  
    }  
}  

実行ディレクトリを取得して、PDFのパスを絶対パスで指定します。
また、ツールバーを表示したくなければ「#toolbar=1」を「#toolbar=0」に変更してください。

PDFファイルの追加

プロジェクト直下に「Pdf」フォルダ―を作成し、適当なPDFファイルを格納します。
ファイル名は「sample.pdf」としました。

また、ファイルのプロパティを開き、常に実行ディレクトリにコピーするようにプロパティを変更します。

画面の修正

グリッドのレイアウト調整

MainWindow.xaml(抜粋)

        <Grid.RowDefinitions>  
            <RowDefinition Height="50" />  
            <RowDefinition />  
        </Grid.RowDefinitions>  

メニュー追加

MainWindow.xaml(抜粋)

            <Menu Style="{StaticResource menu-normal}" Background="#e7efff" Height="auto" Width="auto" Margin="0,0,0,20">  
                <MenuItem Header="ファイル(_F)" >  
                    <MenuItem x:Name="menu_exit" Header="終了(_X)" Click="menu_exit_Click"/>  
                </MenuItem>  
                <MenuItem Header="その他(_O)">  
                    <MenuItem x:Name="menu_pdfview" Header="サンプルPDF表示(_P)" Click="menu_pdfview_Click"/>  
                </MenuItem>  
            </Menu>  

スタイル定義の追加

StyleDic.xaml

        <Style x:Key="menu-normal" TargetType="Menu" >  
            <Setter Property="Background" Value="#ffeef1ff" />  
        </Style>  

プログラム修正

追加したメニューのクリックイベントの実装を追加します。

MainWindow.xaml.cs

        /// <summary>  
        /// 閉じるメニュークリックイベント.  
        /// </summary>  
        /// <param name="sender"></param>  
        /// <param name="e"></param>  
        private void menu_exit_Click(object sender, RoutedEventArgs e)  
        {  
            this.Close();  
        }  

        /// <summary>  
        /// サンプルPDF表示メニュークリックイベント.  
        /// </summary>  
        /// <param name="sender"></param>  
        /// <param name="e"></param>  
        private void menu_pdfview_Click(object sender, RoutedEventArgs e)  
        {  
            // ダイアログを表示  
            var win = new PdfView();  
            win.Owner = GetWindow(this);  
            win.ShowDialog();  
        }  

起動してみる

上部にメニューが追加されました。

よくある閉じるメニュー。
他に何も思いつきませんでした。。

PDF表示用のメニューです。

サンプルPFD表示メニューをクリックしてPDFを表示した画面です。
無事に表示されました。

まとめ

以前、何かの記事でも触れましたが
Word で、「rand=(10,10)」みたいな文言を入力し、エンターを押すとランダムでサンプルドキュメントを作ることができます。

今回のPDFはその機能を使って作ったサンプルのドキュメントを、PDFとして保存したものとなります。

こういった便利なコマンドを知っていると、ちょっとした効率化ができますね。

WebBrowser はもちろん HTML も表示できるので他にも色々と応用することができそうですね。
そのうちまた何か別のこともやってみたいと思います。

ではでは。

記事が少しでもいいなと思ったらクラップを送ってみよう!
5
+1
@doraxdoraの技術ブログ 主に Java, C#, Python, Javascript の記事を載せていく予定。

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする