Windows RT XAML控件 - GridWrap列自動調整爲窗口大小

我一直在尋找一個可調整大小的通用Windows應用程序（RT，UWP）控件來處理不同的屏幕尺寸和可伸縮控件。我正在尋找的東西就像一個wrapgrid（我在下面使用的東西），除了當它調整大小時，它改變了列的寬度以填充空間，就像Tubecast應用程序的窗口發生的那樣，當你調整窗口的大小時列將擴大，或縮小時，合併一旦達到最小值。Windows RT XAML控件 - GridWrap列自動調整爲窗口大小

目前，我正在使用wrapgrid控件將電視節目填充到庫中，在代碼中添加一個新框架，將其導航到LibraryModel Page的新實例，並通過onNavigatedTo（）方法傳遞一個類。此XAML頁面的最小屬性爲135x200，最大屬性爲270x400，使用靜態項目高度和270x400以及視覺狀態組在寬度低於720px時更改爲125x200。我嘗試使用一個variablesizedwrapgrid，但它沒有任何幫助。

是否有像這樣的控件存在於UWP應用程序中？或者需要使用C＃手動創建，還是以後添加到平臺？此控件對於未來的Windows 10應用程序開發可能很重要。 Example Screenshot

來源

2015-06-12 William Bradley

我想出了一種方法來將控件縮放到屏幕大小，以便他們將佔用所有可用的房地產，並在所有設備上運行良好。

其他在頁面底部所示..

<Grid Background="#FF1D1D1D" x:Name="maingrid" SizeChanged="maingrid_SizeChanged"> 

    <Grid Grid.ColumnSpan="2" Grid.RowSpan="2"> 
     <ScrollViewer x:Name="LibraryScroll"> 
      <Grid> 
       <Viewbox x:Name="LibraryItemViewbox" Stretch="Uniform" VerticalAlignment="Top" HorizontalAlignment="Left"> 
        <Grid x:Name="Area" Width="{x:Bind maingrid.Width}" Height="{x:Bind maingrid.Height}"> 
         <ItemsControl x:Name="showsPanel" Loaded="showsPanel_Loaded" ItemsSource="{x:Bind Library.LibraryItems, Mode=OneWay}"> 
          <ItemsControl.ItemsPanel> 
           <ItemsPanelTemplate> 
            <WrapGrid x:Name="shows" Orientation="Horizontal" ItemHeight="400" ItemWidth="270" MaximumRowsOrColumns="3"/> 
           </ItemsPanelTemplate> 
          </ItemsControl.ItemsPanel> 
          <ItemsControl.ItemTemplate> 
           <DataTemplate x:DataType="viewmodel:LibraryItemModel"> 
            <Button Padding="0" Foreground="Transparent" BorderThickness="0" Tapped="LibraryItem_Tapped" RightTapped="LibraryItem_RightTapped" Holding="Button_Holding"/> 
             <Grid x:Name="MainGrid" Background="#00A6A6A6" Width="270" Height="400"> 
              <!-- Content --> 
             </Grid> 
            </Button> 
           </DataTemplate> 
          </ItemsControl.ItemTemplate> 
         </ItemsControl> 
        </Grid> 
       </Viewbox> 
      </Grid> 
     </ScrollViewer> 
    </Grid> 
</Grid>

這是按比例繪製內容所需的XAML結構。 Viewbox被包裝成一個Grid，以便垂直和水平對齊在ScrollViewer內仍然有效。內部Grid「區域」的高度和寬度綁定到基礎Grid'maingrid'，因此它保持頁面的高寬比。

Itemscontrol定義爲WrapGrid，這意味着項目寬度必須被定義，這意味着這將不會工作內部的變量大小的控制（雖然可能有一些修改）。然後定義ItemTemplate（要求基礎Grid'MainGrid'的尺寸與WrapGrid的ItemWidth和ItemHeight的尺寸相同。被要求

事件是SizeChanged上的ItemsControl基地Grid和Loaded。

爲了縮放元素時，頁面加載，並適當調整時，頁面的大小時，代碼如下：

private void showsPanel_Loaded(object sender, RoutedEventArgs e) 
    { 
     Area.Measure(new Size(double.PositiveInfinity, double.PositiveInfinity)); 
     Resize(); 
     fillGaps(showsPanel.ItemsPanelRoot as WrapGrid); 
    } 

    private void Resize() 
    { 
     var width = this.ActualWidth; 
     var height = this.ActualHeight; 
     var grid = (WrapGrid)showsPanel.ItemsPanelRoot; 
     int numofColsOrig = grid.MaximumRowsOrColumns; 
     if (width >= 2800) grid.MaximumRowsOrColumns = 8; 
     if (width < 2800) grid.MaximumRowsOrColumns = 8; 
     if (width < 2400) grid.MaximumRowsOrColumns = 7; 
     if (width < 2000) grid.MaximumRowsOrColumns = 6; 
     if (width < 1600) grid.MaximumRowsOrColumns = 5; 
     if (width < 1200) grid.MaximumRowsOrColumns = 4; 
     if (width < 800) grid.MaximumRowsOrColumns = 3; 
     if (width < 400) 
     { 
      grid.MaximumRowsOrColumns = 2; 
      if (Library.LibraryItems.Count >= 2) Area.Padding = new Thickness(0); 
     } 

     if (numofColsOrig != grid.MaximumRowsOrColumns) 
     { 
      fillGaps(grid); 
     } 
    } 

    private void fillGaps(WrapGrid grid) 
    { 
     var libraryitems = Library.LibraryItems; 
     if (libraryitems.Count < grid.MaximumRowsOrColumns && libraryitems.Count != 0) 
     { 
      int numOfItemsToFill = grid.MaximumRowsOrColumns - libraryitems.Count; 
      Area.Padding = new Thickness { Right = (grid.ItemWidth * numOfItemsToFill) }; 
     } 
    } 

    private void maingrid_SizeChanged(object sender, SizeChangedEventArgs e) { Resize(); }

寬度的值更改的行數將需要爲了使用不同尺寸的對象看起來更好，並且在添加或刪除ItemSource時，必須調用Resize();來重新計算元素的尺寸，以使其看起來正確。

你會的，當然，需要更換libraryitems與你自己的ObservableCollection，使之能得到多少對象是在列表中的數，或者從你的WrapGrid的項目數的計數。