4

まず、「解像度に依存しない C# WPF レイアウト」関連の質問がたくさんあります。私の質問はそれとは直接関係ありません。私はそれらのほとんどを読み、いくつかのチュートリアルを読みました。

ゴール：

私は WPF にかなり慣れていないので、私の目標は、画面解像度に依存せず、ユーザーがウィンドウのサイズを変更すると適切にスケーリングされる、複雑で現実的な GUI を設計する明確な方法を持つことです。

混乱の原因:

ビューボックス、液体レイアウト、相対レイアウト、さまざまな種類のコンテナーの使用、および WPF が設計上解像度に依存しないはずであるという事実を使用して、多くのチュートリアルとスタックオーバーフローの投稿が提案する多くのオプションに非常に混乱しています。

質問：

私は議論を始めるつもりはありません.SOがそのためのものではないことは知っています. 実際の G​​UI を設計するために使用する予定のこの手順が正しいかどうかを知りたいだけです。

1 > Illustrator でモックアップをデザインする (または Blend で直接、どちらを使用すればよいかわかりません)

2>レイアウトを使用して1024 x 768の解像度で設計しながら、WPFでデザインをドラッグアンドドロップして複製します（まだわかりません）レイアウト

3 > ユーザーがアプリケーションを起動すると、画面サイズを取得し、いくつかの計算を行ってすべてのコントロールのサイズを変更します (うーん!これは本当に私がやらなければならない方法ですか?WPF が解像度に依存しないという点は何でしたか?それは本当にドラッグではありません)ドロップデザインですか？）

私のアプリケーションのほとんどは、データベース主導のデータ入力および操作フォームです。業界で一般的に行われている正しい戦略を使用していますか、それとも何か不足していますか?

どうもありがとう

4

4 に答える 4

6

WPF が簡単に解像度に依存しない理由の 1 つは、WPF が提供するレイアウト コントロールです。

WPF を初めて使用し、まだどのようなレイアウト コントロールが存在するのかわからない場合は、さまざまなレイアウト パネルと、子のサイズ変更/配置方法を示すこのクイック ビジュアル スタートを確認することを強くお勧めします。

GUI を構築する私の典型的な方法は次のとおりです。

  • どこかにレイアウトをスケッチします。私の好みはBalsamiqまたは紙のどちらかです
  • そのタイプの UI レイアウトに必要なパネルを把握する
  • XAML を入力して、XAML エディターでビルドします。

ここで注意すべき点がいくつかあります。

  • ほとんどの要素は、WPF では絶対的なサイズまたは配置ではありません。通常、WPF のレイアウト パネルは、その中の要素のサイズまたは配置を制御します。そのため、通常は、すべてのコントロールに個別のサイズと位置を指定する代わりに、パネルを使用してコントロールをレイアウトします。

  • ドラッグ アンド ドロップ WPF エディターは使用されません。これは、コントロールに不必要なサイズ変更、配置、マージンが追加されることが多く、XAML の読み取りと管理が困難になるためです。パネルに子要素のサイズ変更と配置を任せる方がはるかに優れています。

これは、要素のサイズ変更や配置がまったくできないという意味ではありませんが、通常、絶対的なプロパティではなく、サイズ変更と配置に相対的なプロパティを設定し、パネルに要素を描画する場所と大きさを決定する重い作業を任せます。それらを作るために。

配置には、 /または unnaturally largeのような絶対プロパティの代わりにHorizontalAlignmentorのような相対プロパティが使用されますが、ほとんどのレイアウト パネルは特定の方法で要素を配置するため、ほとんどの要素では必要ありません。VerticalAlignmentCanvas.TopCanvas.LeftMargins

サイジングの場合、これは、要素に対して絶対的な/を設定するMaxHeightか定義する代わりに、またはグリッドの星のサイズ設定を使用して、要素を画面のパーセンテージに相対的にサイズ設定することを意味します。MinWidthHeightWidth

于 2013-04-16T12:04:00.827 に答える
3

Illustrator でモックアップをデザインします (または Blend で直接、どちらを使用すればよいかわかりません)。

それがあなたのやり方なら、同意しました。私は VS で簡単なことを直接行い、必要に応じて Blend を使用する傾向があります。

レイアウトを使用して1024 x 768の解像度で設計しながら、WPFでデザインをドラッグアンドドロップして複製します（まだわかりません）レイアウト

私はまだWPFのデザイナーをお勧めできません。2010 年にはまったくひどいものでした。おそらく 2012 年にはかなり良くなっていますが、XAML を書くことに慣れているので、試す理由がありません。

ユーザーがアプリケーションを起動すると、画面サイズを取得し、いくつかの計算を行ってすべてのコントロールのサイズを変更します (うーん!これは本当に私がやらなければならない方法ですか?WPF が解像度に依存しないという点は何でしたか?それは本当にドラッグ アンド ドロップではありません)デザインですか？）

絶対違う。WPF のレイアウト システムを使用して、面倒な作業を行ってください。これの基礎は でありPanel、その子にどのスペースを与えるかを決定できます。WPF のGridコントロール ( Panel) は非常に柔軟で、行と列に比例したサイズを割り当てることができるため、レイアウトを合理的な方法で拡大および縮小できます。

ただし、最小サイズを常に念頭に置く必要があります。明らかに、UI が 10x10 で問題なく見えるとは期待できません。プロパティを使用MinWidthしMinHeightて、 のレベルまでこれを制御できますWindow。

于 2013-04-16T11:58:36.443 に答える
3

3 > ユーザーがアプリケーションを起動すると、画面サイズを取得し、いくつかの計算を行ってすべてのコントロールのサイズを変更します

いいえ、手動でサイズを変更しないでください。シンプルな などのレイアウトを使用しますGrid。

行と列を定義します。例えば：

<Grid Margin="5">
    <Grid.ColumnDefinition>
        <ColumnDefinition Height="Auto" />
        <ColumnDefinition Height="20" />
        <ColumnDefinition Height="*" />
    </Grid.RowDefinitions>

    <Label Grid.Row="0" Content="some text" />
    <TextBox Grid.Row="1" />
    <Label Grid.Row="2" />

</Grid>

自動サイズの列 (つまり、サイズは のサイズになりますLabel)、固定サイズの列 (20)、および残りのすべてのスペースを使用する最後の列があります。したがって、基本的にウィンドウのサイズを変更すると、この最後の列のサイズは多かれ少なかれスペースを使用します。

WPF のレイアウトに関するその他のヒントや例については、リンクを参照してください。

于 2013-04-16T11:55:38.997 に答える
1

「解像度の独立性」により、アプリケーションで利用可能なすべてのスペースを使用する必要があると仮定します。

これを達成するには、簡単な方法と正しい方法の 2 つの主な方法があります ;-)

オプション 1: UI をスケーリングする

このオプションを使用すると、ユーザー インターフェイスの固定レイアウトを設計できます。次に、スケール変換を適用して、UI がウィンドウ全体を占めるようにします。

WPF でこれを行うには、UI のすべてをViewbox内にラップするだけです。

<Viewbox>
    <RestOfYourUI />
</Viewbox>

長所：

  • WPFで行うのは非常に簡単です
  • 異なるピクセル密度を処理したいだけの場合に優れた機能を発揮します (ただし、cm/インチの点で同じ/類似の画面サイズ)

短所：

  • すべてが均等にスケーリングされるため、テキストが不自然に大きくなったり小さくなったりする可能性があります。
  • 余分なスペースを有用なものに実際に利用していない - 以前よりも多くの情報を表示していない

オプション 2: UI を再配置する

これは、Web デザイナーが「レスポンシブ デザイン」と呼んでいるもので、現在のデバイス (または画面/ウィンドウ) のサイズと解像度に合わせて UI のレイアウトとコンテンツ全体を変更することを意味します。

これにはさらに多くの労力がかかりますが、最終的な結果は IMO よりはるかに優れています。簡単なチェックリストはありませんが、これを達成するためのテクニックは次のとおりです。

  • サイズ変更を処理する巧妙なレイアウト コンテナーを使用します。サイズ変更の動作はパネルごとに異なりますが、一般的に、使用可能なすべてのスペースを確実に使用したい場合は、Grid と DockPanel を使用するのが適しています。
  • 必要に応じて要素を表示および非表示にします。スペースが限られていることを検出し、使用頻度の低い UI 要素を削除します。現実世界の良い例は、MS Office のリボンで、アイコンが混雑するとサイズ変更、再配置し、最終的にアイコンを削除します。

長所：

  • あなたは実際に新しい情報を配置するために画面スペースを使用しています

短所：

  • 実行して正しく行うには、はるかに多くの努力が必要です。

個人的には、非常にまれなケースを除いて、常にオプション 2 を使用します。

于 2013-04-16T12:16:52.467 に答える