escalado de fuente WPF

Question

Tengo una aplicación WPF donde la interfaz de usuario debe escalarse para que se agranda si las ventanas se hacen más grandes. En uno de los cuadros de diálogo, debo presentar una lista de elementos a un usuario y el usuario debe hacer clic en uno de ellos. La lista contendrá de 1 a alrededor de 15-20 elementos. Quiero que el tamaño de fuente para cada elemento individual sea tan grande como el tamaño de fuente para los otros elementos en la lista, pero al mismo tiempo quiero que el tamaño de fuente aumente si la ventana se hace más grande.

Por el momento, mi código de prueba se ve a continuación.

<Window x:Class="WpfApplication4.Window1" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:controls="clr-namespace:WpfApplication4" 
    Title="Window1" Height="480" Width="640"> 


    <ScrollViewer> 

     <Grid> 
      <Grid.RowDefinitions> 
       <RowDefinition Height="30*" MinHeight="30"/> 
       <RowDefinition Height="30*" MinHeight="30"/> 
       <RowDefinition Height="30*" MinHeight="30"/> 
      </Grid.RowDefinitions> 

      <Button Grid.Row="0" MaxHeight="100"><Viewbox><TextBlock>T</TextBlock></Viewbox></Button> 
      <Button Grid.Row="1" MaxHeight="100"><Viewbox><TextBlock>Test</TextBlock></Viewbox></Button> 
      <Button Grid.Row="2" MaxHeight="100"><Viewbox><TextBlock>Test Longer String</TextBlock></Viewbox></Button> 

     </Grid> 

    </ScrollViewer> 

</Window> 

Si la aplicación se inicia y la ventana se amplía, todo se ve bien. Si se reduce el ancho de la ventana, el tamaño de fuente del texto Test Longer String se hace más pequeño, pero el tamaño de fuente para T y Test permanece igual. Entiendo por qué sucede esto: viewbox escalará los contenidos a su tamaño máximo. Lo que quiero saber es qué método debo usar para resolver este problema.

No quiero dar a los controles tamaños de fuente específicos porque algunas personas ejecutarán esto en pantallas de baja resolución como 640x480 y otras usarán pantallas anchas más grandes.

EDIT:

He intentado modificar mi código a la siguiente:

<ScrollViewer> 
    <Viewbox> 
     <ItemsControl> 
      <Button>Test 2</Button> 
      <Button>Test 3</Button> 
      <Button>Test 4 afdsfdsa fds afdsaf</Button> 
      <Button>Test 5</Button> 
      <Button>Test 5</Button> 
      <Button>Test 5</Button> 
      <Button>Test 5</Button> 
      <Button>Test 5</Button> 
     </ItemsControl> 
    </Viewbox> 
</ScrollViewer> 

Pero con el tamaño de los bordes del botón se incrementan también, así que en las pantallas grandes, la los bordes de los botones se vuelven un centímetro de ancho.

Answer 1

Prueba esto: Render sus elementos de texto como lo haría cualquier otro momento:

• TextBlock s contenida en un 'ItemsControl'?
• ListBox?

Coloque todo el shebang en un ViewBox y ajústelo a escala según sus necesidades. Busque las propiedades de escala horizontal, vertical o combinada.

Answer 2

Esta solución podría ayudar:

<ScrollViewer> 
    <Grid> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="30*" MinHeight="30"/> 
      <RowDefinition Height="30*" MinHeight="30"/> 
      <RowDefinition Height="30*" MinHeight="30"/> 
     </Grid.RowDefinitions> 

     <Button Grid.Row="0" MaxHeight="100"> 
      <Viewbox> 
       <TextBlock Width="{Binding ElementName=tbLonger,Path=ActualWidth}">T</TextBlock> 
      </Viewbox> 
     </Button> 
     <Button Grid.Row="1" MaxHeight="100"> 
      <Viewbox> 
       <TextBlock Width="{Binding ElementName=tbLonger,Path=ActualWidth}">Test</TextBlock> 
      </Viewbox> 
     </Button> 
     <Button Grid.Row="2" MaxHeight="100"> 
      <Viewbox> 
       <TextBlock Name="tbLonger">Test Longer String</TextBlock> 
      </Viewbox> 
     </Button> 
    </Grid> 
</ScrollViewer> 

La clave es ajustar todos los bloques de texto de la misma anchura. En este caso, todos siguen el bloque de texto más largo a través del enlace.

Answer 3

La manera más simple es probablemente construir un decorador para hacer el trabajo. Puede llamarlo "VerticalStretchDecorator" o algo así.

Así es cómo se utilizaría:

<UniformGrid Rows="3" MaxHeight="300"> 
    <Button> 
    <my:VerticalStretchDecorator> 
     <TextBlock>T</TextBlock> 
    </my:VerticalStretchDecorator> 
    </Button> 
    <Button> 
    <my:VerticalStretchDecorator> 
     <TextBlock>Test</TextBlock> 
    </my:VerticalStretchDecorator> 
    </Button> 
    <Button> 
    <my:VerticalStretchDecorator> 
     <TextBlock>Test Longer String</TextBlock> 
    </my:VerticalStretchDecorator> 
    </Button> 
</UniformGrid> 

que utilizan UniformGrid en lugar de Grid, pero funcionaría de la misma manera con Grid.

en que se aplicaría algo como esto:

public class VerticalStretchDecorator : Decorator 
{ 
    protected override Size MeasureOverride(Size constraint) 
    { 
    var desired = base.Measure(constraint); 
    if(desired.Height > constraint.Height || desired.Height==0) 
     LayoutTransform = null; 
    else 
    { 
     var scale = constraint.Height/desired.Height; 
     LayoutTransform = new ScaleTransform(scale, scale); // Stretch in both directions 
    } 
    } 
} 

Answer 4

tuviera que hacer una aplicación independiente de resolución y lo hizo con esta respuesta aquí: tips on developing resolution independent application

con que su solicitud está aumentando (o zoom), dependiendo de la resolución.