2012-07-23 13 views
12

Ambos VariableSizedWrapGrid y WrapGrid tienen una medición extraña: miden todos los niños en función del primer elemento.VariableSizedWrapGrid y WrapGrid tamaños de niños que miden

Debido a eso, el siguiente XAML recortará el tercer elemento.

<VariableSizedWrapGrid Orientation="Horizontal"> 
     <Rectangle Width="50" Height="100" Margin="5" Fill="Blue" /> 
     <Rectangle Width="50" Height="50" Margin="5" Fill="Red" /> 
     <Rectangle Width="50" Height="150" Margin="5" Fill="Green" /> 
     <Rectangle Width="50" Height="50" Margin="5" Fill="Red" /> 
     <Rectangle Width="50" Height="100" Margin="5" Fill="Red" /> 
    </VariableSizedWrapGrid> 

parece que VariableSizedWrapGrid medidas el primer artículo y entonces los hijos de descanso se miden con el tamaño deseado de la primera.

¿Alguna solución alternativa?

Respuesta

3

Es necesario utilizar las propiedades adjuntas en cada rectángulo VariableSizeWrapGrid.ColumnSpan y VariableSizeWrapGrid.RowSpan, así como añadir un ItemHeight y ItemWidth a la VariableSizeWrapGrid:

<VariableSizedWrapGrid Orientation="Horizontal" ItemHeight="50" ItemWidth="50"> 
    <Rectangle 
     VariableSizedWrapGrid.ColumnSpan="1" 
     VariableSizedWrapGrid.RowSpan="2" 
     Width="50" Height="100" Margin="5" Fill="Blue" /> 
</VariableSizedWrapGrid> 
0

Su posible que no sea la mejor manera, pero esto es cómo he hecho esto en mi aplicación @MetroRSSReader

<common:VariableGridView.ItemsPanel> 
       <ItemsPanelTemplate> 
        <VariableSizedWrapGrid ItemWidth="225" 
              ItemHeight="{Binding ElementName=bounds, Path=Text}" 
              MaximumRowsOrColumns="5" Orientation="Vertical" 
              /> 
       </ItemsPanelTemplate> 
       </common:VariableGridView.ItemsPanel> 
     </common:VariableGridView> 

Aviso ItemHeight el valor está vinculado a un TextBlock

<TextBlock x:Name="bounds" Grid.Row="1" Margin="316,8,0,33" Visibility="Collapsed"/> 

que se fija en los LayoutAwarePage.cs

public string Fix_item_height_for_current_screen_resolution() 
    { 
     var screenheight = CoreWindow.GetForCurrentThread().Bounds.Height; 
     var itemHeight = screenheight < 1000 ? "100" : "140"; 

     return itemHeight; 
    } 

se puede navegar por el código fuente completo http://metrorssreader.codeplex.com/SourceControl/changeset/view/18233#265970

0

Para utilizar un VariableSizeWrapGrid debe crear su propio control personalizado GridView y anular PrepareContainerForItemOverride y fijar los elementos RowSpan y ColumnSpan dentro de ese método. De esta forma, cada elemento tendrá su propia altura/ancho.

Aquí es un buen tutorial/caminar a través de Jerry Nixon: http://dotnet.dzone.com/articles/windows-8-beauty-tip-using

+1

Cualquier idea cómo se podría agregar que los tramos de fila/col se unen a datos y se actualizan cuando cambia el modelo. PrepareContainerForItemOverride no se llama a cambios. –

0

Gestionado a la forma de saberlo hoy. Tendrá que hacer uso de VisualTreeHelperExtension.cs en WinRT XAML Toolkit (http://winrtxamltoolkit.codeplex.com). Para mí, estaba tratando de ajustar un ListView que tenía un GridView como ItemsPanelTemplate, el mismo concepto debería aplicarse para usted.

1) Adjuntar al evento LayoutUpdated de su ListView (esto es cuando usted quiere actualizar los tamaños)

_myList.LayoutUpdated += _myList_LayoutUpdated;

2) Uso VisualTreeHelperExtensions.GetDescendantsOfType() para encontrar un tipo común (y único) elemento de la plantilla de datos de su material (por ejemplo: un TextBlock que es dinámica de ancho):

var items = VisualTreeHelperExtensions.GetDescendantsOfType<TextBlock>(_myList); 

if (items == null || items.Count() == 0) 
    return; 

3) obtener el ancho máximo de los elementos encontrados:

double maxWidth = items.Max(i => i.ActualWidth) + 8;

4) Use VisualTreeHelperExtensions.GetDescendantsOfType() para encontrar el contenedor principal WrapGrid para su ListView:

var wg = _categoryList.GetDescendantsOfType<WrapGrid>(); 
if (wg == null || wg.Count() != 1) 
    throw new InvalidOperationException("Couldn't find main ListView container"); 

5) Establecer ItemWidth del WrapGrid a la anchoMax que ha calculado:

wg.First().ItemWidth = maxWidth;

Cuestiones relacionadas