WPF:如何在对话单元中指定单位？

Question

我试图弄清楚如何使用适当的对话单元(DLU)在WPF中布局一个简单的对话框.

---

什么是对话单元？

对话框是基于用户首选字体大小的度量单位.定义一个对话框单元,使得平均字符宽4个对话框单位,高8个对话框单位:

这意味着对话单元:

• 用所选字体更改
• 已选择DPI设置更改
• 不正方形

---

我花了大约两个小时从Windows Vista中使用各种dlu测量标注这个示例对话框.有人可以给出生成此对话框的相应XAML标记吗？

(图片链接)

现在我承认我对WPF XAML几乎一无所知.每次我开始,我都会受到阻碍,因为我无法弄清楚如何进行任何控制.似乎WPF中的所有内容都必须包含在某种面板中.有StackPanels,FlowPanels,DockPanel,Grid等.如果你没有这些,那么它将无法编译.

到目前为止,我唯一能够提出的XAML(uing XAMLPad):

<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的大小不同.

---

也可以看看

• 适应屏幕和字体设置的WPF应用程序(或者,如何将DLU与WPF中的单元相关联？)
• WPF全局字体大小
• WPF按钮相同/推荐宽度
• WPF版的.ScaleControl？
• Microsoft用户体验指南:建议的大小和间距
• Microsoft用户体验指南:布局指标

凹凸: 2011年6月20日

Answer 1

以下XAML将为您提供所需的效果.

请注意,我在标记中加倍了DLU单元 - 因此保持相同的方面.按键高度为14单位,看起来很有趣.您可能需要修补市场上的数字.

此外,我开始将一些"Vista布局"删除为单独的样式.您可以继续沿着这条路走下去,这样您就拥有了一套符合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一样,这可以通过多种方式完成 - 这只是一种解决方案.

希望这可以帮助!

Answer 2

查看网格控件- 它支持相对大小调整。