wpf - WPF:ダイアログユニットでユニットを指定する方法は?

Question

適切なダイアログ ユニット(DLU)を使用して、WPF で単純なダイアログをレイアウトする方法を見つけようとしています。

---

ダイアログユニットとは？

ダイアログは、ユーザーの好みのフォント サイズに基づく測定単位です。ダイアログ単位は、平均文字が幅 4 ダイアログ単位、高さ 8 ダイアログ単位になるように定義されます。

これは、ダイアログ ユニットが次のことを意味します。

• 選択したフォントで変更
• 選択した DPI 設定で変更
• 正方形ではありません

---

さまざまなdlu測定値を使用して、Windows Vista のこのサンプル ダイアログ ボックスの寸法を約 2 時間かけて測定しました。このダイアログ ボックスを生成する対応する XAML マークアップを教えてください。

(画像リンク)

確かに、私は WPF XAML についてほとんど何も知りません。コントロールを配置する方法がわからないため、開始するたびに困惑します。WPF のすべてが何らかのパネルに含まれている必要があるようです。StackPanels、FlowPanels、DockPanel、Gridなどがあります。これらのいずれかがないと、コンパイルされません。

これまでに（XAMLPadを使用して）思いついた唯一のXAML：

<DockPanel xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Image Width="23" />
    <Label>Are you sure you want to move this file to the Recycle Bin?</Label>
    <Image Width="60" />
    <Label>117__6.jpg</Label>
    <Label>Type: ACDSee JPG Image</Label>
    <Label>Rating: Unrated</Label>
    <Label>Dimensions: 1072 × 712</Label>
    <Button Content="Yes" Width="50" Height="14"/>  
    <Button Content="Cancel" Width="50" Height="14"/>  
</DockPanel>

これは、派手な怪物としてレンダリングされます。どのコントロールも適切に配置またはサイズ設定されていません。ウィンドウにコントロールを配置する方法も、適切なサイズにする方法もわかりません。

誰かがそのスクリーンショットを XAML に変換できますか?

注:スクリーンショットを測定することは許可されていません。すべてのダイアログ ユニット (dlu) の幅と高さが指定されています。

注: 1 つの水平 DLU != 1 つの垂直 DLU。水平 DLU と垂直 DLU はサイズが異なります。

---

こちらもご覧ください

• 画面とフォントの設定に合わせて調整する WPF アプリケーション (または、DLU を WPF の単位に関連付けるにはどうすればよいでしょうか?)
• WPF グローバル フォント サイズ
• WPF ボタンと同じ/推奨される幅
• .ScaleControl の WPF バージョン?
• Microsoft ユーザー エクスペリエンス ガイドライン: 推奨されるサイズと間隔
• Microsoft ユーザー エクスペリエンス ガイドライン: レイアウト メトリック

バンプ: 2011 年 6 月 20 日

Answer 1

次の XAML は、探している効果を提供します。

マークアップで DLU ユニットを 2 倍にしたことに注意してください。したがって、同じ側面を維持しています。Button の高さを 14 単位にすると、おかしくなりました。市場で提示された数字をいじる必要があるかもしれません。

また、「Vista Layout」の一部を別のスタイルに削除し始めました。この道を進むことで、Vista のガイドラインに準拠した再利用可能な一連のスタイルを手に入れることができるかもしれません。他の何人かの人々が同様のことをしたと確信しています。

さらに、ダイアログのサイズをいくらか自由にしました。あなたは 210x96 ユニットが欲しいとおっしゃいました。この量とウィンドウ クロームを設定する必要があります。

とにかく、内容を続けます：

  <Window x:Class="VistaLayout.Dialog"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      Title="Delete File" 
      ResizeMode="NoResize"
      Height="212" Width="430">
    <Window.Resources>
      <Style x:Key="FooterButtonStyle" TargetType="{x:Type Button}">
        <Setter Property="Width" Value="100" />
        <Setter Property="Height" Value="28" />
        <Setter Property="Margin" Value="8,0,0,0" />
      </Style>
      <Style x:Key="FooterPanelStyle" TargetType="{x:Type UniformGrid}">
        <Style.Resources>
          <Style TargetType="{x:Type Button}" BasedOn="{StaticResource FooterButtonStyle}" />
        </Style.Resources>
        <Setter Property="Rows" Value="1" />
        <Setter Property="HorizontalAlignment" Value="Right" />
      </Style>
    </Window.Resources>
    <DockPanel Margin="14">
      <!-- Footer -->
      <UniformGrid DockPanel.Dock="Bottom" 
                       Style="{StaticResource FooterPanelStyle}">
        <Button>_Yes</Button>
        <Button>_No</Button>
      </UniformGrid>

      <!-- Main Content -->
      <Grid>
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="Auto" />
          <ColumnDefinition Width="8" />
          <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>

        <Image Width="64" />

        <StackPanel Grid.Column="2">
          <TextBlock Margin="0,6,0,14">Are you sure you want to move this file to the Recycle Bin?</TextBlock>

          <Grid>
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="Auto" />
              <ColumnDefinition Width="14" />
              <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>

            <Image Width="60" />

            <StackPanel Grid.Column="2">
              <TextBlock>117__6.jpg</TextBlock>
              <TextBlock>Type: ACDSee JPG Image</TextBlock>
              <TextBlock>Rating: Unrated</TextBlock>
              <TextBlock>Dimensions: 1072 × 712</TextBlock>
            </StackPanel>

          </Grid>

        </StackPanel>

      </Grid>

    </DockPanel>
  </Window>

ほとんどの XAML と同様に、これは無数の方法で実行できますが、これは 1 つのソリューションにすぎません。

お役に立てれば！

Answer 2

これは非常に古いことは知っていますが、OPが要求したことをやろうと思いました。そして、これは私の試みです。ところで、先に進む前に、何らかの理由で、DLU を使用したときに OP の測定値がうまくいかなかったことを指摘しておく必要がありますが、かなり近い値になったと思います。また、このことに関しては、私はまだ相対的なn00bであることを覚えておいてください...したがって、何か間違ったことや冒涜的なことをした場合は...申し訳ありません。

最初に、特定のフォントの特定の文字の幅と高さを取得する方法を見つける必要がありました (私の場合、10px の Segoe UI)...そのために、この SO の回答を使用しました: how-to-calculate-wpf -textblock-width-for-its-known-font-size-and-charactersに、結果の double を保持する静的クラスを作成しました。

public static class Fonts
{
    public static double HorizontalDluMultiplier;
    public static double VerticalDluMultiplier;

    static Fonts()
    {
        var formattedText = new FormattedText(
            "A",
            CultureInfo.CurrentUICulture,
            FlowDirection.LeftToRight,
            new Typeface("Segoe UI"),
            12.0,
            Brushes.Black);
        Fonts.HorizontalDluMultiplier = formattedText.Width / 4;
        Fonts.VerticalDluMultiplier = formattedText.Height / 8;
    }
}

メトリックを取得したら、特定の ConverterParameter (この場合は DLU の数値) を受け取り、2 倍のピクセルを吐き出す WPF コンバーターを作成する必要がありました。これは私が使用したコンバーターです...

public class HorizontalDluToPixelConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        return (Double.Parse((parameter as string))) * Fonts.HorizontalDluMultiplier;
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

言うまでもなく、コンバーターの別の垂直バージョンがありました。

それが完了すると、XAML でウィンドウをレイアウトし、コンバーターを使用して高さと幅を設定するだけで済みました。単一のグリッドを使用して、ウィンドウ全体をレイアウトしました。しかし、列の幅と行の高さを設定するには、次のようにコンバーターを使用しました。

<Window.Resources>
    <converters:HorizontalDluToPixelConverter x:Key="HorizontalConverter" />
    <converters:VerticalDluToPixelConverter x:Key="VerticalConverter" />
</Window.Resources>

<Grid.RowDefinitions>
    <RowDefinition Height="{Binding Converter={StaticResource VerticalConverter}, ConverterParameter=7}" />
    etc...
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
    <ColumnDefinition Width="{Binding Converter={StaticResource HorizontalConverter}, ConverterParameter=7}" />
    etc... etc...
</Grid.ColumnDefinitions>

これが将来の人々にも役立つことを願っています（実際に役立つ場合）

Answer 3

MSDN で見つけたLayout Metricsに関する詳細なリンクを次に示します。WPF DIU は 1/96 インチとして定義され、DLU からピクセルへの変換は、以下の表に示すようにフォントに依存します。

したがって、この情報をシステムの DPI 設定と共に使用すると、対象とするフォントに応じて、垂直または水平の DLU 単位で特定の測定値に関連する DUI の数を把握できます。このための JavaScript ベースの計算機はまだ見たことがありませんが、これを少し簡単にするプログラミング言語で同様のツールを作成するのは非常に簡単です。

Answer 4

Grid コントロールを調べてください。相対的なサイズ変更がサポートされています。

Answer 5

Canvas レイアウト要素を使用すると、慣れ親しんだものと同様の座標ベースのレイアウトが可能になり、Canvas がある場合は、ビジュアル エディターでガイドラインを取得することもできます。例えば：

<Window xmlns:mc='http://schemas.openxmlformats.org/markup-compatibility/2006' xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml' xmlns:d='http://schemas.microsoft.com/expression/blend/2008' mc:Ignorable='d' Title='Spin-Echo Image Processing' Width='673' x:Class='ImageR2.CLASPmap' Height='961' xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation'>
    <Canvas Name='canvas1'>
        <TextBlock Name='TEXT_Program' Canvas.Top='27' Width='133' Height='21' Canvas.Left='875'>CLASPmap:</TextBlock>
        <TextBlock Name='TEXT_Heading' Canvas.Top='27' Width='368' Height='27' Canvas.Left='1008'>Transverse Relaxation Rate Mapping</TextBlock>
        <TextBlock Name='TEXT_XYCoordinates' Canvas.Top='251' Width='139' Height='21' Canvas.Left='869'>X &amp; Y Coordinates</TextBlock>