VariableSizedWrapGrid và WrapGrid kích thước trẻ em đo

Question

Cả hai VariableSizedWrapGrid và WrapGrid có phép đo lạ - chúng đo lường tất cả trẻ em dựa trên mục đầu tiên.

Do đó, XAML sau sẽ ghi mục thứ ba.

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

Có nghĩa là VariableSizedWrapGrid đo lường mục đầu tiên và sau đó là phần còn lại được đo bằng kích thước mong muốn của mục đầu tiên.

Bất kỳ giải pháp nào?

Answer 1

Bạn cần phải sử dụng tài sản gắn liền trên mỗi Rectangle VariableSizeWrapGrid.ColumnSpan và VariableSizeWrapGrid.RowSpan cũng như thêm một ItemHeight và ItemWidth đến VariableSizeWrapGrid:

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

Answer 2

của nó có thể không phải là cách tốt nhất nhưng đây là làm thế nào tôi đã làm điều này trong ứng dụng @MetroRSSReader tôi

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

Thông báo giá trị ItemHeight được ràng buộc với một TextBlock

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

nào được thiết lập trong 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; 
    } 

Bạn có thể duyệt toàn bộ mã nguồn http://metrorssreader.codeplex.com/SourceControl/changeset/view/18233#265970

Answer 3

Để sử dụng một VariableSizeWrapGrid bạn nên tạo điều khiển tùy chỉnh GridView của riêng bạn và ghi đè PrepareContainerForItemOverride và thiết lập các yếu tố RowSpan và ColumnSpan bên trong phương thức đó. Bằng cách đó, mỗi phần tử sẽ có chiều cao/chiều rộng của riêng nó.

Đây là một hướng dẫn tốt đẹp/đi bộ qua bởi Jerry Nixon: http://dotnet.dzone.com/articles/windows-8-beauty-tip-using

Answer 4

Managed để tìm một này ra ngày hôm nay. Bạn sẽ cần phải sử dụng VisualTreeHelperExtension.cs trong Bộ công cụ WinRT XAML (http://winrtxamltoolkit.codeplex.com). Đối với tôi, tôi đã cố gắng điều chỉnh một ListView có GridView như là ItemsPanelTemplate của nó, cùng một khái niệm sẽ áp dụng cho bạn.

1) Gắn với sự kiện LayoutUpdated của ListView của bạn (đây là khi bạn sẽ muốn cập nhật các kích thước)

_myList.LayoutUpdated += _myList_LayoutUpdated;

2) Sử dụng VisualTreeHelperExtensions.GetDescendantsOfType() để tìm một loại phần tử chung (và duy nhất) trong mẫu dữ liệu của mục của bạn (ví dụ: một TextBlock có chiều rộng động):

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

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

3) Lấy chiều rộng tối đa của các vật phẩm tìm thấy:

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

4) Sử dụng VisualTreeHelperExtensions.GetDescendantsOfType() để tìm container WrapGrid chính cho ListView của bạn:

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

5) Đặt ItemWidth của WrapGrid đến maxWidth bạn tính toán:

wg.First().ItemWidth = maxWidth;