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

答

我想出了一种方法来将控件缩放到屏幕大小，以便他们将占用所有可用的房地产，并在所有设备上运行良好。

其他在页面底部所示..

<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的项目数的计数。

答

我建议你看看视框，可能会提供一个解决方案。

Windows RT XAML控件 - GridWrap列自动调整为窗口大小

相关推荐