2019-07-12に投稿

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

おはようございます。

今回は、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表示メニュー

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

PDF表示

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

まとめ

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

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

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

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

ではでは。

 

Originally published at www.doraxdora.com
ツイッターでシェア
みんなに共有、忘れないようにメモ

doraxdora

IT関係の仕事をしています/1985年生まれの東京在住/便利なサービスやツール漁りや料理などが好き/2017年~ブログやってます/自分でサービスとか作ってリリースしたい/何かありましたらお気軽にDMどうぞ

Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

有料記事を販売できるようになりました!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?

コメント