質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.47%
Windows 10

Windows 10は、マイクロソフト社がリリースしたOSです。Modern UIを標準画面にした8.1から、10では再びデスクトップ主体に戻され、UIも変更されています。PCやスマホ、タブレットなど様々なデバイスに幅広く対応していることが特徴です。

.NET Core

.NET Coreは、マネージソフトウェアフレームワークでオープンソースで実装されています。クロスプラットフォームを前提に考えられており、Windows/Mac/Linuxで動くアプリケーションを作成することが可能です。

Visual Studio

Microsoft Visual StudioはMicrosoftによる統合開発環境(IDE)です。多種多様なプログラミング言語に対応しています。

XAML

XAML(Extensible Application Markup Language)はWPF、Silverlight、Windows PhoneそしてWindows Store appsでユーザーインターフェースを定義するために使われるXML言語です。

WPF

Windows Presentation Foundation (WPF) は、魅力的な外観のユーザー エクスペリエンスを持つ Windows クライアント アプリケーションを作成するための次世代プレゼンテーション システムです

Q&A

解決済

1回答

3388閲覧

DocumentViewer の表示をカスタマイズしたい

tails

総合スコア22

Windows 10

Windows 10は、マイクロソフト社がリリースしたOSです。Modern UIを標準画面にした8.1から、10では再びデスクトップ主体に戻され、UIも変更されています。PCやスマホ、タブレットなど様々なデバイスに幅広く対応していることが特徴です。

.NET Core

.NET Coreは、マネージソフトウェアフレームワークでオープンソースで実装されています。クロスプラットフォームを前提に考えられており、Windows/Mac/Linuxで動くアプリケーションを作成することが可能です。

Visual Studio

Microsoft Visual StudioはMicrosoftによる統合開発環境(IDE)です。多種多様なプログラミング言語に対応しています。

XAML

XAML(Extensible Application Markup Language)はWPF、Silverlight、Windows PhoneそしてWindows Store appsでユーザーインターフェースを定義するために使われるXML言語です。

WPF

Windows Presentation Foundation (WPF) は、魅力的な外観のユーザー エクスペリエンスを持つ Windows クライアント アプリケーションを作成するための次世代プレゼンテーション システムです

1グッド

0クリップ

投稿2021/10/27 08:23

質問

XAML

1<DocumentViewer> 2 <FixedDocument> 3 <PageContent> 4 <FixedPage Width="5.0cm" Height="2.0cm"> 5 <Glyphs FontUri="C:\WINDOWS\Fonts\ARIAL.TTF" FontRenderingEmSize="12" StyleSimulations="ItalicSimulation" UnicodeString="Hello World!" Fill="SteelBlue" OriginX="50" OriginY="15" /> 6 </FixedPage> 7 </PageContent> 8 <PageContent> 9 <FixedPage Width="5.0cm" Height="2.0cm"> 10 <Glyphs FontUri="C:\WINDOWS\Fonts\ARIAL.TTF" FontRenderingEmSize="12" StyleSimulations="ItalicSimulation" UnicodeString="Hello World!" Fill="SteelBlue" OriginX="50" OriginY="15" /> 11 </FixedPage> 12 </PageContent> 13 </FixedDocument> 14</DocumentViewer>

上のXAMLコード(Window等, 省略)をビルドすると、以下の画像のように表示されます。
DocumentViewer表示例
この各ページには、デフォルトでは周りに黒のボーダーがついていたり、影がついていたりしますが、これらの表示のされ方をカスタマイズすることは、DocumentViewerで可能でしょうか。

具体的には、

  • 各ページの周りのボーダーライン(太さ、色など)
  • 各ページの影(色、大きさ、透明度など)
  • 縦並びの場合の、ページ間の距離
  • ページの表示方法(StackPanel のように単に並べたり、WrapPanel のように自動整列したり)

を変更したいです。

ご存じの方いらっしゃれば、教えてください。
よろしくお願いします。

補足情報

ちなみに、DocumentViewer を使う理由は以下の通りです。

  • 文字を座標を指定して配置する必要がある
  • 文字を選択してコピーできる必要がある

これらの操作は、(標準のコントロールの中では)DocumentViewer以外では実現できなさそうだと思ったからです。

環境

  • .NET Core 3.1
  • WPF
  • Windows 10
  • Visual Studio 2019
TN8001👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

これらの表示のされ方をカスタマイズすることは、DocumentViewerで可能でしょうか。

各ページの周りのボーダーライン(太さ、色など)
各ページの影(色、大きさ、透明度など)

消すだけならShowPageBordersがあります。
DocumentViewer.ShowPageBorders プロパティ (System.Windows.Controls) | Microsoft Docs

縦並びの場合の、ページ間の距離

DocumentViewer.VerticalPageSpacing プロパティ (System.Windows.Controls) | Microsoft Docs

ページの表示方法(StackPanel のように単に並べたり、WrapPanel のように自動整列したり)
を変更したいです。

これはさすがに無理じゃないですかね?(わかんないですけど)
DocumentViewerの改造というか、DocumentViewerのようなものを作ることになるんじゃないでしょうか。


各ページの周りのボーダーライン(太さ、色など)
各ページの影(色、大きさ、透明度など)

.NET 6が使える場合は、自由に変えられるようになったようです。
Use theme to create DocumentGridPage borders by wjk · Pull Request #2574 · dotnet/wpf

wpf/DocumentViewer.xaml#L1207 at main · dotnet/wpf

xml

1<Window 2 x:Class="Questions366470.MainWindow" 3 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 4 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 5 Width="800" 6 Height="450"> 7 <Window.Resources> 8 <Style 9 x:Key="{ComponentResourceKey TypeInTargetAssembly={x:Type FrameworkElement}, 10 ResourceId=DocumentGridPageContainerWithBorder}" 11 BasedOn="{x:Null}" 12 TargetType="ContentControl"> 13 <Setter Property="FocusVisualStyle" Value="{x:Null}" /> 14 <Setter Property="Template"> 15 <Setter.Value> 16 <ControlTemplate TargetType="{x:Type ContentControl}"> 17 <Grid> 18 <Grid.RowDefinitions> 19 <RowDefinition Height="5" /> 20 <RowDefinition Height="*" /> 21 <RowDefinition Height="5" /> 22 </Grid.RowDefinitions> 23 <Grid.ColumnDefinitions> 24 <ColumnDefinition Width="5" /> 25 <ColumnDefinition Width="*" /> 26 <ColumnDefinition Width="5" /> 27 </Grid.ColumnDefinitions> 28 29 <Border 30 Grid.RowSpan="2" 31 Grid.ColumnSpan="2" 32 Background="LightGray" 33 BorderBrush="Red" 34 BorderThickness="5"> 35 <ContentPresenter /> 36 </Border> 37 38 <Rectangle 39 Grid.Row="1" 40 Grid.Column="2" 41 Fill="Blue" 42 Opacity="0.35" /> 43 <Rectangle 44 Grid.Row="2" 45 Grid.Column="1" 46 Grid.ColumnSpan="2" 47 Fill="Blue" 48 Opacity="0.35" /> 49 </Grid> 50 </ControlTemplate> 51 </Setter.Value> 52 </Setter> 53 </Style> 54 </Window.Resources> 55 56 <DocumentViewer> 57 <FixedDocument> 58 <PageContent> 59 <FixedPage Width="5.0cm" Height="2.0cm"> 60 <Glyphs 61 Fill="SteelBlue" 62 FontRenderingEmSize="12" 63 FontUri="C:\WINDOWS\Fonts\ARIAL.TTF" 64 OriginX="50" 65 OriginY="15" 66 StyleSimulations="ItalicSimulation" 67 UnicodeString="Hello World!" /> 68 </FixedPage> 69 </PageContent> 70 <PageContent> 71 <FixedPage Width="5.0cm" Height="2.0cm"> 72 <Glyphs 73 Fill="SteelBlue" 74 FontRenderingEmSize="12" 75 FontUri="C:\WINDOWS\Fonts\ARIAL.TTF" 76 OriginX="50" 77 OriginY="15" 78 StyleSimulations="ItalicSimulation" 79 UnicodeString="Hello World!" /> 80 </FixedPage> 81 </PageContent> 82 </FixedDocument> 83 </DocumentViewer> 84</Window>

アプリ画像

投稿2021/10/27 10:43

編集2023/07/29 07:41
TN8001

総合スコア9363

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tails

2021/10/27 15:40

回答ありがとうございます。 プロパティで部分的に設定していく感じになるんですね。。 他のWPFのコントロールのように、Border で囲ったり、Panel で並べ方を決定したり、といった表示のされ方は細かくカスタマイズできない感じなんでしょうかね。 (他のコントロールと使い勝手が違って、異質な感じがあります) 自分のやりたいようにやるには DocumentViewer のようなものを作るしかないのかなと思っていて、それには、テキスト選択が課題だと思っているのですが、テキスト選択を簡単に実装できるようなコントロール?などはあるでしょうか。 テキストは、任意の位置に配置できて、重なっていたり、斜めになっていても(DocumentViewer と同様に)選択可能で、かつ、複数のテキストオブジェクトも跨いで選択可能である必要があります。 1から実装することになるんでしょうか…(選択の開始を検出して、選択範囲を計算して、選択範囲に矩形を描画して…?)
TN8001

2021/10/27 21:53

注)私はDocumentViewerは使ったことがないので、何か見落としがある可能性はあります。 > プロパティで部分的に設定していく感じになるんですね。。 DocumentViewerにもスタイルはあります。 しかしこれはツールバー等全体の見た目用で、コンテンツ部分?はScrollViewerがあるだけです。 [DocumentViewer のスタイルとテンプレート - WPF .NET Framework | Microsoft Docs](https://docs.microsoft.com/ja-jp/dotnet/desktop/wpf/controls/documentviewer-styles-and-templates > 他のWPFのコントロールのように、Border で囲ったり、Panel で並べ方を決定したり、といった表示のされ方は細かくカスタマイズできない感じなんでしょうかね。 (回答画像では色ぐらいしか変えていませんが、ページの周りについては好きなデザインに変えることは可能です) 少なくともItemsControlのように、ItemsPanelやItemTemplateがある感じではないですね。 どうなればいいのかわからないんですが、これとかは使えませんか? [DocumentViewer.MaxPagesAcross Property (System.Windows.Controls) | Microsoft Docs](https://docs.microsoft.com/ja-jp/dotnet/api/system.windows.controls.documentviewer.maxpagesacross あるいはこのような方法? [c# - How to preview document with DocumentViewer with multi-pages per sheet in WPF - Stack Overflow](https://stackoverflow.com/questions/60580821/how-to-preview-document-with-documentviewer-with-multi-pages-per-sheet-in-wpf > 自分のやりたいようにやるには DocumentViewer のようなものを作るしかないのかなと思っていて まあソースは見れるんで改造するとしたら、まずは解読からでしょうね(私は見てませんし読む気もないです^^; [DocumentViewer.cs](https://source.dot.net/#PresentationFramework/System/Windows/Controls/DocumentViewer.cs
tails

2021/10/29 12:59

ItemsControl みたいな感じで設定できるのかなと思っていたので、使い方がちょっと違う感じが微妙だなと思っていました。 主にプロパティで設定していく感じで使ってみて、どうしてもそれでは実装できない機能が出てきたら、自分で実装し直してみようかなと思います。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.47%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問