2008-09-17 13 views
7

Tengo una cuadrícula de 3 columnas en una ventana con un divisor de cuadrícula en la primera columna. Quiero establecer el MaxWidth de la primera columna en un tercio de la Ventana principal o Página Width (o ActualWidth) y preferiría hacer esto en XAML si es posible.Cómo establecer el ancho máximo de la columna de cuadrícula según la ventana o el tamaño de pantalla en XAML

Este es un ejemplo de XAML para jugar en XamlPad (o similar) que muestra lo que estoy haciendo.

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:sys="clr-namespace:System;assembly=mscorlib" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > 
    <Grid> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition x:Name="Column1" Width="200"/> 
      <ColumnDefinition x:Name="Column2" MinWidth="50" /> 
      <ColumnDefinition x:Name="Column3" Width="{ Binding ElementName=Column1, Path=Width }"/> 
      </Grid.ColumnDefinitions> 

     <Label Grid.Column="0" Background="Green" /> 
     <GridSplitter Grid.Column="0" Width="5" /> 
     <Label Grid.Column="1" Background="Yellow" /> 
     <Label Grid.Column="2" Background="Red" /> 
    </Grid> 
</Page> 

Como se puede ver, el ancho de la columna derecha se une a la anchura de la primera columna, por lo que cuando se desliza la columna izquierda utilizando el divisor, la columna de la derecha hace lo mismo :) Si desliza el columna de la izquierda a la derecha, con el tiempo que pueda deslizarse sobre la mitad de la página/ventana y hacia el lado derecho de la ventana, apartando la columna 2 y 3.

Quiero evitar esto ajustando el MaxWidth de la columna 1 a un tercio del ancho de la ventana (o algo así). Puedo hacer esto en el código con bastante facilidad, pero ¿cómo hacerlo en "XAML solamente"?

EDIT: David Schmitt sugirió usar SharedSizeGroup en lugar de vinculante, lo cual es una sugerencia excelente. Mi código de ejemplo se vería así entonces:

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:sys="clr-namespace:System;assembly=mscorlib" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > 
     <Grid IsSharedSizeScope="True"> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition x:Name="Column1" SharedSizeGroup="ColWidth" Width="40"/> 
       <ColumnDefinition x:Name="Column2" MinWidth="50" Width="*" /> 
       <ColumnDefinition x:Name="Column3" SharedSizeGroup="ColWidth"/> 
      </Grid.ColumnDefinitions> 
      <Label Grid.Column="0" Background="Green" /> 
      <GridSplitter Grid.Column="0" Width="5" /> 
      <Label Grid.Column="1" Background="Yellow" /> 
      <Label Grid.Column="2" Background="Red" /> 
     </Grid> 
</Page> 

Respuesta

7

creo que el enfoque de sólo XAML es un tanto tortuosa, pero aquí es una manera de hacerlo.

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:sys="clr-namespace:System;assembly=mscorlib" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > 

    <!-- This contains our real grid, and a reference grid for binding the layout--> 
    <Grid x:Name="Container"> 

     <!-- hidden because it's behind the grid below --> 
     <Grid x:Name="LayoutReference"> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="*"/> 
      <ColumnDefinition Width="*"/> 
      <ColumnDefinition Width="*"/> 
     </Grid.ColumnDefinitions> 
     <!-- We need the border, because the column doesn't have an ActualWidth --> 
     <Border x:Name="ReferenceBorder" 
       Background="Black" /> 
     <Border Background="White" Grid.Column="1" /> 
     <Border Background="Black" Grid.Column="2" /> 
     </Grid> 

     <!-- I made this transparent, so we can see the reference --> 
     <Grid Opacity="0.9"> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition x:Name="Column1" 
           MaxWidth="{Binding ElementName=ReferenceBorder,Path=ActualWidth}"/> 
       <ColumnDefinition x:Name="Column2" 
           MinWidth="50" /> 
       <ColumnDefinition x:Name="Column3" 
           Width="{ Binding ElementName=Column1, Path=Width }"/> 
       </Grid.ColumnDefinitions> 

      <Label Grid.Column="0" Background="Green"/> 
      <GridSplitter Grid.Column="0" Width="5" /> 
      <Label Grid.Column="1" Background="Yellow" /> 
      <Label Grid.Column="2" Background="Red" /> 
     </Grid> 
    </Grid> 

</Page> 
+4

¡Utilice un SharedSizeGroup en lugar de enlazar con el ancho de otra columna! –

+0

Probé el xaml de arriba en XamlPad y se comportó de forma extraña, ¡pero veo tu punto! Gracias. –

0

Demasiado perezoso para escribir en realidad que yo mismo, pero usted debería ser capaz de utilizar un convertidor de matemática y se unen a sus padres anchura de las ventanas (ya sea por su nombre o con una búsqueda de antepasados ​​RelativeSource).

//I know I borrowed this from someone, sorry I forgot to add a comment from whom 
public class ScaledValueConverter : IValueConverter 
{ 
    public Object Convert(Object value, Type targetType, Object parameter, System.Globalization.CultureInfo culture) 
    { 
    Double scalingFactor = 0; 
    if (parameter != null) 
    { 
     Double.TryParse((String)(parameter), out scalingFactor); 
    } 

    if (scalingFactor == 0.0d) 
    { 
     return Double.NaN; 
    } 

    return (Double)value * scalingFactor; 
    } 

    public Object ConvertBack(Object value, Type targetType, Object parameter, System.Globalization.CultureInfo culture) 
    { 
    throw new Exception("The method or operation is not implemented."); 
    } 
} 
Cuestiones relacionadas