WPF: ¿Cómo especificar unidades en unidades de diálogo?

windows xaml

Question

Estoy intentando descubrir cómo diseñar un diálogo simple en WPF usando las unidades de diálogo (DLU) adecuadas.

¿Qué es una unidad de diálogo?

Un diálogo es una unidad de medida basada en el tamaño de letra preferido del usuario. Una unidad de diálogo se define de tal manera que el carácter promedio es de 4 unidades de diálogo de ancho por 8 unidades de diálogo de alto:

Esto significa que las unidades de diálogo:

• cambiar con la fuente seleccionada
• cambiado con la configuración de DPI seleccionada
• no son cuadrados

Pasé aproximadamente dos horas dimensionando este cuadro de diálogo de muestra de Windows Vista con las diversas mediciones dlu . ¿Puede alguien dar el marcado XAML correspondiente que genera este cuadro de diálogo?

texto alternativo http://i44.tinypic.com/30a7390.jpg ( Enlace de imagen )

Ahora admitimos que no sé casi nada sobre WPF XAML. Cada vez que empiezo, me obstruyo porque no puedo entender cómo colocar ningún control. Parece que todo en WPF debe estar contenido en un panel de algún tipo. Hay StackPanels, FlowPanels, DockPanel, Grid , etc. Si no tiene uno de estos, no compilará.

El único XAML que he podido encontrar (usando XAMLPad) hasta ahora:

<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>

Lo cual lo representa como una monstruosidad chillona. Ninguno de los controles está colocado o dimensionado correctamente. No puedo entender cómo colocar controles en una ventana, ni dimensionarlos adecuadamente.

¿Alguien puede convertir esa captura de pantalla en XAML?

Nota: No tiene permitido medir la captura de pantalla. Se especifican todos los anchos y alturas de la Unidad de Diálogo (dlu).

Nota: 1 DLU horizontal! = 1 DLU vertical. Las DLU horizontales y verticales son de diferentes tamaños.

Ver también

• Aplicaciones WPF que se ajustan a la configuración de pantalla y fuente (¿O cómo relacionaría las DLU con las unidades en WPF?)
• Tamaño de fuente global de WPF
• Botones WPF mismo / ancho recomendado
• Versión WPF de .ScaleControl?
• Pautas de experiencia del usuario de Microsoft: tamaño y espaciado recomendados
• Pautas de experiencia de usuario de Microsoft: Métricas de diseño

Topetón: 20/6/2011

Answer 1

Aquí hay un enlace más detallado que encontré en MSDN sobre Métricas de diseño . Los DIU de WPF se definen como 1/96 de pulgada y las conversiones de DLU a píxel dependen de la fuente, como puede ver en la tabla que se muestra a continuación.

Entonces, al usar esta información junto con una configuración de DPI del sistema, y ​​dependiendo de la fuente a la que se dirija, se podría calcular la cantidad de DUI que se correlaciona con una medida determinada en unidades DLU verticales u horizontales. Todavía no he visto ninguna calculadora basada en Javascript para esto, pero sería bastante trivial crear una herramienta similar en cualquier lenguaje de programación que haga esto un poco más fácil.

Answer 2

El elemento de diseño de Canvas permite un diseño basado en coordenadas similar al que está acostumbrado y, si tiene un lienzo, incluso obtiene algunas pautas en el editor visual. p.ej:

<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>

Answer 3

El siguiente XAML le dará el efecto que está buscando.

Tenga en cuenta que he duplicado las unidades DLU en el marcado, manteniendo así el mismo aspecto. Parecía divertido tener una altura de botón de 14 unidades. Es posible que deba retocar las cifras presentadas en el mercado.

Además, comencé a eliminar algunos de los "diseños Vista" en estilos diferentes. Puede continuar por este camino para tener un conjunto de estilos reutilizables que siguen las pautas de Vista. Estoy bastante seguro de que otras personas han hecho algo similar.

Además, me tomé algunas libertades con el tamaño del diálogo. Mencionaste que querías unidades de 210x96: necesitarías establecer esta cantidad, más la ventana cromada.

De todos modos, sigue con el contenido:

  <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>

Al igual que con la mayoría de XAML, esto podría hacerse de muchas maneras: esta es solo una solución.

¡Espero que esto ayude!

Answer 4

Mire en el Grid - tiene soporte para el tamaño relativo.

Answer 5

Sé que esto es muy viejo, pero pensé que intentaría hacer lo que me pidió el OP. Y como tal este es mi intento. Por cierto, antes de continuar, debo señalar que, por alguna razón, las mediciones de OP no funcionaron cuando utilicé DLU, pero creo que estuve razonablemente cerca. También, por favor tenga en cuenta que todavía soy un n00b relativo cuando se trata de esto ... así que si he hecho algo mal o blasfemo ... disculpas.

Primero tenía que encontrar una forma de obtener el ancho y alto de una letra dada de una fuente dada (en mi caso, UI de Segoe a 10px) ... que para eso usé esta respuesta SO: how-to-calculate-wpf-textblock-width-for-its-known-font-size-and-characters a la que hice una clase estática para contener los dobles resultantes:

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;
    }
}

Una vez que tuve las métricas tuve que crear un convertidor WPF que toma un ConvertidorParámetro (en este caso un número en DLUs) y escupe un doble de píxeles. Este es el convertidor que utilicé ...

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();
    }
}

Creo que es evidente que tenía una versión vertical separada del convertidor.

Una vez hecho esto, solo era cuestión de colocar la ventana en XAML y cuando se trataba de establecer alturas y anchuras, usando el convertidor. Usé una sola grilla para diseñar toda la ventana. pero para establecer los anchos de columna y las alturas de fila utilicé el convertidor así:

<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>

Espero que esto también ayude a las personas del futuro (si de hecho es útil, je)