GridView с автоматической настройкой позиции

Question

У меня есть сетка с источником источника xbind в наблюдаемой коллекции. Коллекция состоит из пользовательского элемента управления (который по сути является кнопкой). Я хочу, чтобы вид сетки соответствовал элементам следующим образом.

1) Если он может показать два предмета в одной строке, вперед.

2) Если он может отображать только один элемент, ему необходимо растянуть его, чтобы занять все пространство.

Если точка 2 не соблюдается, в строке есть только один элемент, так как второй элемент не может попасть в первую строку, все это пустое пространство выглядит очень плохо.

<GridView ItemsPanel="{StaticResource VariableSizedItemTemplate}" ItemContainerStyleSelector="{StaticResource VariableSizedStyleSelector}" Name="ContentGrid" ItemsSource="{x:Bind projectsButtonCollection,Mode=OneWay}"></GridView> 

<ItemsPanelTemplate x:Key="VariableSizedItemTemplate"> 
    <VariableSizedWrapGrid Orientation="Horizontal"/> 
</ItemsPanelTemplate> 

селектор VariableSizedStyle в настоящее время назначение стилей в соответствии со свойством пользователя control.Property это просто INT, который мы инициализируем при создании пользовательского элемента управления. Стили имеют ряды и столбцы.

<Setter Property="VariableSizedWrapGrid.RowSpan" 
      Value="2" /> 
<Setter Property="VariableSizedWrapGrid.ColumnSpan" 
      Value="2" /> 

Я не думаю, что текущий код поможет, как я хочу, чтобы изменить способ, что я делаю это прямо сейчас, детали корректируются красиво до есть место только для одного пользовательского элемента управления в строке. Тогда у меня все это осталось.

Answer 1

Один из способов добиться того, что вы пытаетесь сделать, - получить триггер на событии GridView_SizeChanged и на основе размера окна вы можете иметь 1,2,3,4 элемента и т. Д., Что удобно. В этом коде я сделал что-то подобное в приведенном ниже кодексе

private async void GridView_SizeChanged(object sender, SizeChangedEventArgs e) 
{ 
    try 
    { 
     ItemsWrapGrid itemsWPGrid = (ItemsWrapGrid)((GridView)sender).ItemsPanelRoot; 
     double viewWidth = ApplicationView.GetForCurrentView().VisibleBounds.Width; 
     int number = 2; 
     //here 200 is the size if the item and number is the number of items in a row 
     number = Convert.ToInt32(Math.Floor(viewWidth/200)); 
     Debug.WriteLine("The current height is " + itemsWPGrid.ItemHeight + " and width " + itemsWPGrid.ItemWidth + "and view width " + viewWidth); 
     { 
      await Windows.ApplicationModel.Core.CoreApplication.MainView.CoreWindow.Dispatcher.RunAsync(CoreDispatcherPriority.Normal, 
       () => 
       { 
        //Set the width of the items based on how many number of items that can fit 
        if (viewWidth < 350) 
        { 
         //Display 2 items in a row and the 45 is used for margin/padding 
         itemsWPGrid.ItemWidth = (viewWidth - 45)/2; 
        } 
        else if (number >= 4 && viewWidth >= 500) 
        { 
         itemsWPGrid.ItemWidth = (viewWidth - 100)/(number - 1); 
        } 
        else if (number == 3 && viewWidth < 400) 
        { 
         if (viewWidth < 375) 
          itemsWPGrid.ItemWidth = (viewWidth - 10)/number; 
         else 
          itemsWPGrid.ItemWidth = (viewWidth - 30)/number; 
        } 
        else if (number == 3 && viewWidth > 400) 
        { 
         itemsWPGrid.ItemWidth = (viewWidth - 50)/number; 
        } 


        //Below takes care of the condition to make sure the aspect ratio is corrected. 
        if (!double.IsNaN(itemsWPGrid.ItemWidth) && viewWidth > 350) 
         itemsWPGrid.ItemHeight = itemsWPGrid.ItemWidth * 1.7; 
        else if (viewWidth == 360 && double.IsNaN(itemsWPGrid.ItemWidth)) 
        { 
         itemsWPGrid.ItemHeight = viewWidth/3 * 1.7; 
        } 
        else if (!double.IsNaN(itemsWPGrid.ItemWidth)) 
        { 
         itemsWPGrid.ItemHeight = itemsWPGrid.ItemWidth * 1.5; 
        } 
       }); 
     } 
     Debug.WriteLine("The new height is " + itemsWPGrid.ItemHeight + " and width " + itemsWPGrid.ItemWidth + "and view width " + viewWidth); 
    } 
    catch 
    { 

    } 
}