勉強会で発表した資料。 https://sciencepark.connpass.com/event/178816/

1. WPFの画面をWebブラウザのように拡大・縮小に追従させる方法
（オートスクロールバー付き）
サイエンスパーク株式会社 須藤圭太
1

2. • ID：suusanex（ connpass・Twitter・GitHub共通）
• 名前：須藤圭太
• サイエンスパーク株式会社という独立系ソフトウェアベンダーに所属
• 4年ほど受託開発で、上流から下流まで全部を回す
• ここ6年ほどは、自社製品開発を担当
勉強会、今後も開いていきます。
https://sciencepark.connpass.com/
自己紹介
2

3. • WPFは色々画面処理をしてくれるパワフルなFW
• ウインドウサイズに合わせて自動的に寄せたり広げたり
• フォントサイズに合わせて文字がはみ出さないように配置したり
• しかし、サンプル等も少なく、なかなか狙った動きをさせるのが難しい
WPFは高機能だが、難易度が高め
3

4. • 長いテキストを入力したら、無限に入力できてスクロールバーも出ない
• 画面サイズを可変にしたら、テキスト入力に合わせてどんどん横に伸びていった
• 間違っちゃいないが、どうも期待と違う動き・・・？
適当に作ると①
4

5. • 低解像度で起動したら、中身が画面からはみ出して、はみ出した分は操作できない
適当に作ると②
5

6. • 適当に作るんじゃなく、方針を決めて作らないとダメだ！
気づいた
6

7. • この方針で作ってみました。
• Webブラウザっぽい動きが良い
• コントロールのサイズよりも画面が小さくなったら、はみ出した部分をスクロール
バーで操作できる
• 画面が大きくなったら、固定のコントロールはそのまま。可変のコントロールは、最
大値までの範囲で拡大（左上寄せ）
• GitHubに置いてあります
• https://github.com/suusanex/sample_wpf_window_scrollbar_auto
今回はこの方針で作ります
7

8. • 画面全体を、ScrollViewerの中にパネルを置いた構成にする
• DockPanelで構成し、座標指定はしない
画面を可変サイズに対応・スクロールバーで操作可能にする
8
<Window （略）Height="600" Width="800">
<DockPanel>
<ScrollViewer HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Auto">
<DockPanel>
<DockPanel DockPanel.Dock="Top">
<TextBlock DockPanel.Dock="Top" Text="コンテンツ1“ />

9. • 可変のコントロールのMaxWidthを、画面のActualWidthへバインドする（Widthに
すると、最大化などの一時的なサイズ変更に追従できなくなる）
可変コントロールを画面サイズに合わせる
9
<DockPanel DockPanel.Dock="Top" Margin="0,5,0,0" HorizontalAlignment="Stretch">
<TextBlock DockPanel.Dock="Top" Text="横方向のサイズがウインドウサイズ+αまで大きくなる入力欄"></TextBlock>
<TextBox DockPanel.Dock="Top" HorizontalAlignment="Stretch"
MaxWidth="{Binding ActualWidth, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Window}}"
ScrollViewer.HorizontalScrollBarVisibility="Auto" />
</DockPanel>

10. • WPFは
• 適当に作ると妙な動き
• きちんと方針を決めて作ると、色々な要求に応えてくれる
• 妙な動きでがっかりせずに、上手く使っていきましょう！
まとめ
10

11. SP2006-E04-01