如何使用可变大小的gridview项目获取gridview？

3 回答

• 4

  好吧，如果这是你想要的布局，那么你不需要布局的 Grid 视图，因为它不是网格 . GridView 将根据第一个项目的大小调整其所有项目的大小 . 您很可能需要为该布局自定义 ItemsControl 实现 .

  回复于 2024-04-30T12:39:52+08:00
• 0

  不，我怀疑你试过WrapPanel . WinRT中没有一个 .

  使用VariableSizedWrapGrid可以得到如下结果：

  

  使用WrapGrid，您会得到如下结果：

  

  普雷斯托！诀窍？

  public sealed partial class MainPage : Page
  {
      public MainPage()
      {
          this.InitializeComponent();
      }
  }
  
  public class MyViewModel
  {
      public MyViewModel()
      {
          var _Random = new Random((int)DateTime.Now.Ticks);
          var _Colors = typeof(Windows.UI.Colors)
              // using System.Reflection;
              .GetRuntimeProperties()
              .Select((c, i) => new
              {
                  Title = c.Name,
                  Color = (Windows.UI.Color)c.GetValue(null),
                  ColSpan = _Random.Next(20, 300),
                  RowSpan = _Random.Next(20, 300),
              });
          this.Groups = new System.Collections.ObjectModel.ObservableCollection<object>();
          this.Groups.Add(new { Title = "Mostly Red", Children = _Colors.Where(x => x.Color.R > 200) });
          this.Groups.Add(new { Title = "Mostly Green", Children = _Colors.Where(x => x.Color.G > 200) });
          this.Groups.Add(new { Title = "Mostly Blue", Children = _Colors.Where(x => x.Color.B > 200) });
      }
      public System.Collections.ObjectModel.ObservableCollection<object> Groups { get; private set; }
  }
  
  <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
  
      <Grid.DataContext>
          <local:MyViewModel />
      </Grid.DataContext>
  
      <Grid.Resources>
          <CollectionViewSource 
              x:Name="MyCsv"
              IsSourceGrouped="True"
              ItemsPath="Children"
              Source="{Binding Groups}"
              d:Source="{Binding Groups, Source={d:DesignInstance Type=local:MyViewModel, IsDesignTimeCreatable=True}}" />
      </Grid.Resources>
  
      <GridView ItemsSource="{Binding Source={StaticResource MyCsv}}">
          <GridView.GroupStyle>
              <GroupStyle>
                  <GroupStyle.HeaderTemplate>
                      <DataTemplate>
                          <StackPanel Orientation="Horizontal">
                              <Rectangle Height="20" Width="20" Fill="{Binding Brush}" Margin="0,0,10,0" />
                              <TextBlock FontSize="40" Text="{Binding Title}" />
                          </StackPanel>
                      </DataTemplate>
                  </GroupStyle.HeaderTemplate>
                  <GroupStyle.Panel>
                      <ItemsPanelTemplate>
                          <local:WrapPanel Orientation="Vertical" Width="2000" />
                          <!--<VariableSizedWrapGrid Margin="0,0,80,0" ItemHeight="1" ItemWidth="1" />-->
                      </ItemsPanelTemplate>
                  </GroupStyle.Panel>
              </GroupStyle>
          </GridView.GroupStyle>
          <GridView.ItemsPanel>
              <ItemsPanelTemplate>
                  <StackPanel Orientation="Horizontal" Margin="0,0,80,0" />
              </ItemsPanelTemplate>
          </GridView.ItemsPanel>
          <GridView.ItemTemplate>
              <DataTemplate>
                  <Grid Height="{Binding RowSpan}" Width="{Binding ColSpan}">
                      <Grid.Background>
                          <SolidColorBrush Color="{Binding Color}" />
                      </Grid.Background>
                  </Grid>
              </DataTemplate>
          </GridView.ItemTemplate>
      </GridView>
  
  </Grid>
  

  但是它已经违约到了2000年（这太荒谬了） . 你做了所有事情）否则，这就是你要求的100％ .

  WinRT WrapPanel在我的博客http://jerrynixon.com（左栏）

  祝你好运，法尔汉 .

  另见：ms forum where you asked the same thing

  回复于 2024-04-30T12:39:52+08:00
• 0

  如果您可以选择为应用程序使用html / winjs，则可以尝试list view item template sample scenario 4 - "Creating a templating function that can span multiple cells" . 在这里，您可以选择使用较小的网格单元，并定义多个css类 . 在基于图像大小的项目模板fn中，使用最适合的css类来缩放图像 .

  例如：

  .square-image
  {
      width: 200px;
      height: 200px;
  }
  
  // 4:3 aspect ratio
  .landscape-image
  {
      width: 200px;
      height: 150px;
  }
  
  // aspect ratio 4:6
  portrait-image
  {
      width: 200px;
      height: 300px;
  }
  

  你明白了 . 可以定义更多具有不同宽高比的css类 . 在这种情况下，您需要将 -ms-grid-row-align: center 用于一个维度，将其他维度用作项目的 100% ，以确保图像适合单元格并且不会失真 .

  如果您不能使用winjs，那么我会在GridView中看到一些关于c＃的可变网格大小的示例 . 但我还没试过 . 这些链接可能会有所帮助 .

  • Variable size grouped gridview

  • Grid with variable size items

  回复于 2024-04-30T12:39:52+08:00