Gridview 항목 동적 너비 UWP의 화면 크기에 따라

Question

데이터 바인딩을 통해 데이터를 가져 오는 gridview를 만들었습니다. 내가 뭘하고 싶은지는 스크린 크기 ()에 따라 gridview 항목 너비를 동적으로 만드는 것입니다. 그들은 Windows 10 뉴스, 스포츠 앱 등에서 수행 한 것과 같습니다. 지금까지 나는 가로 창 정렬을 설정하여 시각 상태 관리자를 사용하여 최소 창 너비 0에 대해 성공적으로 수행했지만 다른 더 넓은 창 크기에 대해서는이 작업을 계속할 수 없습니다.

이 문제를 해결하기위한 도움이 필요합니다. 감사. 당신이 항목을 및 당신이 원하는 행 당 얼마나 많은 항목을 지정할 수 수평 공간을 채우기 위해 스트레칭하려면

Answer 1

는, 당신은의 GridView의하여 SizeChanged 이벤트에서 수동으로 ItemsWrapGrid의 ItemWidth을 설정해야합니다.

<GridView x:Name="gridView" SizeChanged="onGridViewSizeChanged"> 
    <GridView.ItemTemplate> 
     <DataTemplate> 
      <Grid Background="GreenYellow" BorderBrush="Black" BorderThickness="2"> 
       <TextBlock Text="{Binding}" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="40"/> 
      </Grid> 
     </DataTemplate> 
    </GridView.ItemTemplate> 

    <GridView.ItemContainerStyle> 
     <Style TargetType="GridViewItem"> 
      <Setter Property="HorizontalContentAlignment" Value="Stretch"/> 
      <Setter Property="VerticalContentAlignment" Value="Stretch"/> 
      <Setter Property="Margin" Value="0"/> 
     </Style> 
    </GridView.ItemContainerStyle> 

    <GridView.ItemsPanel> 
     <ItemsPanelTemplate> 
      <ItemsWrapGrid Orientation="Horizontal"/> 
     </ItemsPanelTemplate> 
    </GridView.ItemsPanel> 

    <x:String>1</x:String> 
    <x:String>2</x:String> 
    <x:String>3</x:String> 
    <x:String>4</x:String> 
    <x:String>5</x:String> 
    <x:String>6</x:String> 
    <x:String>7</x:String> 
    <x:String>8</x:String> 
</GridView> 

private void onGridViewSizeChanged(object sender, SizeChangedEventArgs e) 
{ 
    // Here I'm calculating the number of columns I want based on 
    // the width of the page 
    var columns = Math.Ceiling(ActualWidth/300); 
    ((ItemsWrapGrid)gridView.ItemsPanelRoot).ItemWidth = e.NewSize.Width/columns; 
} 

당신은 아마 행동거나 연결된 속성에이 번들 수 :

다음은 예입니다.