Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

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

  • Be the first to comment

  • Be the first to like this

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

  1. 1. WPFの画面をWebブラウザのように拡大・縮小に追従させる方法 (オートスクロールバー付き) サイエンスパーク株式会社 須藤圭太 1
  2. 2. • ID:suusanex( connpass・Twitter・GitHub共通) • 名前:須藤圭太 • サイエンスパーク株式会社という独立系ソフトウェアベンダーに所属 • 4年ほど受託開発で、上流から下流まで全部を回す • ここ6年ほどは、自社製品開発を担当 勉強会、今後も開いていきます。 https://sciencepark.connpass.com/ 自己紹介 2
  3. 3. • WPFは色々画面処理をしてくれるパワフルなFW • ウインドウサイズに合わせて自動的に寄せたり広げたり • フォントサイズに合わせて文字がはみ出さないように配置したり • しかし、サンプル等も少なく、なかなか狙った動きをさせるのが難しい WPFは高機能だが、難易度が高め 3
  4. 4. • 長いテキストを入力したら、無限に入力できてスクロールバーも出ない • 画面サイズを可変にしたら、テキスト入力に合わせてどんどん横に伸びていった • 間違っちゃいないが、どうも期待と違う動き・・・? 適当に作ると① 4
  5. 5. • 低解像度で起動したら、中身が画面からはみ出して、はみ出した分は操作できない 適当に作ると② 5
  6. 6. • 適当に作るんじゃなく、方針を決めて作らないとダメだ! 気づいた 6
  7. 7. • この方針で作ってみました。 • Webブラウザっぽい動きが良い • コントロールのサイズよりも画面が小さくなったら、はみ出した部分をスクロール バーで操作できる • 画面が大きくなったら、固定のコントロールはそのまま。可変のコントロールは、最 大値までの範囲で拡大(左上寄せ) • GitHubに置いてあります • https://github.com/suusanex/sample_wpf_window_scrollbar_auto 今回はこの方針で作ります 7
  8. 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. 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. 10. • WPFは • 適当に作ると妙な動き • きちんと方針を決めて作ると、色々な要求に応えてくれる • 妙な動きでがっかりせずに、上手く使っていきましょう! まとめ 10
  11. 11. SP2006-E04-01

×