WPFの画面をWebブラウザのように拡大・縮小に追従させる方法（オートスクロールバー付き）

WPFの画面をWebブラウザのように拡大・縮小に追従させる方法（オートスクロールバー付き）

• 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