1

Я хотел бы заполнить пространство, доступное в элементе управления GridView, с изображениями. В частности, я хотел бы сделать 4 столбца, каждый столбец с изображением. Нет места между столбцами.Заполнить пространство для GridView

Смысл: GridView заполняет все пространство, доступное на странице, поэтому мне нужен конвертер, который привязывается к свойству ActualWidth GridView и делит его на четыре (столбцы). Это должно дать мне четыре столбца с одинаковой шириной. Проблема в том, что, к сожалению, Ширина не является простым числом и делит на 4, она дает, вероятно, не идеальное число, поэтому сумма из 4 столбцов Ширина может проходить через сетку, и результат состоит в том, что я могу видеть только три столбца вместо четырех , Даже если я установил маржу и отступы в ноль, результат не изменится. Код выглядит следующим образом:

<GridView x:Name="Photos"> 
     <GridView.ItemTemplate> 
      <DataTemplate> 
       <Image Source="{Binding Url}" 
         Width="{Binding ElementName=Photos, Path=ActualWidth, Converter={StaticResource DivideByFourConverter}}" 
         Height="{Binding ElementName=Photos, Path=ActualWidth, Converter={StaticResource DivideByFourConverter}} 
         Stretch="UniformToFill" /> 
      </DataTemplate> 
     </GridView.ItemTemplate> 
    </GridView> 

Вторая мысль: попробовать не устанавливать ширину и высоту на изображения, но сделать WrapGrid установив максимальное количество строк и столбцов. Ничего, я не вижу тот же результат ....

<GridView x:Name="Photos"> 
     <GridView.ItemsPanel> 
      <ItemsPanelTemplate> 
       <ItemsWrapGrid MaximumRowsOrColumns="4" 
           Orientation="Horizontal" /> 
      </ItemsPanelTemplate> 
     </GridView.ItemsPanel> 
     <GridView.ItemTemplate> 
      <DataTemplate> 
       <Image Source="{Binding Url}" 
         Stretch="UniformToFill" /> 
      </DataTemplate> 
     </GridView.ItemTemplate> 
    </GridView> 

Просто чтобы быть ясно, вот экран: http://i.imgur.com/J6h5s0Z.png

Не возможно, чтобы иметь простую сетку с элементами заполняя его без полей ? Платформа - это Windows Phone 8.1 RT, поэтому нет возможности использовать GridViewColumns.

Я даже думал сделать скрытую сетку с 4-мя колоннами с * проклейки и связывание изображения к ширине колонки, но ... Я искал умнее решения :)

+0

Вы пытались увеличить маржу в GridView несколько несколько пикселей? Что-то вроде 'Margin =" 0,0, -4,0 "'. Я не знаю, сработает ли это, попробуй. –

+0

Это может работать, но оно отличается от размера к размеру. Пример: WVGA-экран не является экраном 720p, где мы можем установить больше полей – xTuMiOx

ответ

4

Вы не должны привязать к свойству ActualWidth. docs упоминания:

Для целей ElementName связывания, ActualWidth не размещать обновления, когда она изменяется (из-за его асинхронный и время выполнения, вычисленное характер). Не пытайтесь использовать ActualWidth в качестве источника привязки для привязки ElementName. Если у вас есть сценарий, который требует обновлений на основе ActualWidth, используйте обработчик SizeChanged.

мне удалось заставить его работать так:

<GridView x:Name="GridView" SizeChanged="GridView_SizeChanged"> 
    <GridView.ItemsPanel> 
     <ItemsPanelTemplate> 
      <ItemsWrapGrid 
       MaximumRowsOrColumns="4" 
       Orientation="Horizontal" /> 
     </ItemsPanelTemplate> 
    </GridView.ItemsPanel> 
    <GridView.ItemTemplate> 
     <DataTemplate> 
      <Image Source="ms-appx:///Assets/Logo.png" /> 
     </DataTemplate> 
    </GridView.ItemTemplate> 

    <x:String>Test</x:String> 
    <x:String>Test</x:String> 
    <x:String>Test</x:String> 
    <x:String>Test</x:String> 
    <x:String>Test</x:String> 
    <x:String>Test</x:String> 
    <x:String>Test</x:String> 
    <x:String>Test</x:String> 
    <x:String>Test</x:String> 
    <x:String>Test</x:String> 
    <x:String>Test</x:String> 
    <x:String>Test</x:String> 
</GridView> 

А потом в коде позади:

private void GridView_SizeChanged(object sender, SizeChangedEventArgs e) 
{ 
    var panel = (ItemsWrapGrid)GridView.ItemsPanelRoot; 
    panel.ItemWidth = panel.ItemHeight = e.NewSize.Width/4; 
} 

Screenshot

Он работает с эмулятор 6" тоже .

+0

О, документация ... Правильно, я полностью потерял эту штуку! Большое спасибо, это работает! :) – xTuMiOx

Смежные вопросы