XAML GridView в GridView с другой ориентацией

(Название отредактировано)

Как это сделать с помощью XAML? Горизонтальная ширина фиксирована и должна быть прокручиваемой.

Возможно, GridView или другой элемент управления, например ItemsControl или StackPanel.

введите здесь описание изображения


person sahap    schedule 03.03.2015    source источник
comment
Я нашел ответ, и он работает! stackoverflow.com/questions/22812456 /   -  person sahap    schedule 10.03.2015


Ответы (4)


Вы используете ListView только тогда, когда вам нужно иметь элементы в вертикальном направлении, в противном случае GridView представляет все, что вам нужно. Он представляет элементы в горизонтальном направлении.

Большая часть функционирования обоих одинаковы.

person Community    schedule 05.03.2015
comment
@Seema_Soam спасибо, но проблема еще не решена. Даже если я использую GridView, я не могу найти пример для иллюстрированного образца - person sahap; 05.03.2015

Если я правильно понимаю ваше требование, у вас может быть сетка с двумя ячейками. В левой ячейке будет scrollviewer со стековой панелью, во второй ячейке будет scrollviewer с оберточной панелью с вертикальной ориентацией.

Если вам нужно выполнить привязку данных к какому-либо источнику элементов, используйте элементы управления элементами с пользовательским шаблоном ItemsPanelTemplate — stackpanel, wrappanel, однородная сетка, холст или любая другая панель, которая вам нужна.

РЕДАКТИРОВАТЬ: пример кода с использованием двух ячеек с ListView и IntemsControl, каждая в своем собственном средстве просмотра прокрутки:

<ScrollViewer HorizontalScrollBarVisibility="Disabled">
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <ListView x:Name="StudentsListView"  ItemsSource="{Binding Students}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <Border Background="#484" Height="90"  Width="200">
                        <TextBlock Text="{Binding Name}" FontSize="24"  HorizontalAlignment="Center" VerticalAlignment="Center"  />
                    </Border>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
        <ScrollViewer Grid.Column="1" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Disabled" ZoomMode="Disabled">
            <ItemsControl ItemsSource="{Binding Students}">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <ItemsControl ItemsSource="{Binding Markings}">
                            <ItemsControl.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <StackPanel Orientation="Horizontal" />
                                </ItemsPanelTemplate>
                            </ItemsControl.ItemsPanel>
                            <ItemsControl.ItemTemplate>
                                <DataTemplate>
                                    <Border Background="#888" Height="90" Width="90" Margin="5">
                                        <TextBlock Text="{Binding }" FontSize="48" HorizontalAlignment="Center" VerticalAlignment="Center"  />
                                    </Border>
                                </DataTemplate>
                            </ItemsControl.ItemTemplate>
                        </ItemsControl>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </ScrollViewer>


    </Grid>
</ScrollViewer>

public class ViewModel
{
    public ViewModel()
    {
        Students = Enumerable.Range(0, 25)
            .Select(i => new Student
            {
                Name = "Student " + i,
                Markings = Enumerable.Range(1, 30).Select(j => (j + i) % 5 + 1).ToList()
            }).ToList();
    }

    public List<Student> Students { get; set; }
}

public class Student
{
    public string Name { get; set; }
    public List<int> Markings { get; set; }
}

и результат:

введите здесь описание изображения

person Liero    schedule 06.03.2015
comment
Да, но если я хочу прокручивать первую вертикальную панель стека... А как насчет второй ячейки? Будет ли он прокручиваться вместе с первой ячейкой? Наоборот. - person sahap; 06.03.2015
comment
Я не совсем понимаю. У вас будет две прокрутки, каждая из которых прокручивается отдельно, в зависимости от того, где находится ваш курсор мыши. Вам нужно какое-то дополнительное поведение, например, когда вы прокручиваете первую ячейку, потерянную, и вы дошли до конца, тогда вторая ячейка должна начать прокручиваться? - person Liero; 06.03.2015
comment
Нет, можете представить, что у нас есть список учеников, первая ячейка сетки с ежедневными отметками во второй ячейке сетки? Да, это просто представить, но я не могу закодировать это в XAML. - person sahap; 06.03.2015
comment
В таком случае это очень просто. Используйте listview в первой ячейке и gridview во второй ячейке. - person Liero; 06.03.2015
comment
Пожалуйста, посмотрите на картинку моей реализации: tinypic.com/r/24wyidj/8 Синяя зона должен прокручиваться с оранжевой зоной. Но оранжевая зона может иметь 30 дней и эта таблица оценок не помещается на экране, поэтому оранжевая зона должна прокручиваться, а синяя зона должна быть фиксированной - person sahap; 07.03.2015
comment
Теперь я понимаю. в основном вам нужен тип сетки данных с фиксированными считывателями строк аля excel. возможно, вам следует искать такую ​​​​стороннюю сетку данных. однако я отредактировал свой образец. - person Liero; 07.03.2015
comment
Да, мой образец похож на ваш сейчас... Вопрос не из легких, я думаю - person sahap; 07.03.2015

Вы можете сделать это, поместив всю строку в шаблон данных и используя столбцы сетки для установки ширины:

    <ListView Width="500" Height="500" ItemsSource="{Binding Data}">
        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="100"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <TextBlock Text="{Binding Item}" Grid.Column="0"/>
                    <ListView ItemsSource="{Binding SubItems}" Grid.Column="1"
                                ScrollViewer.HorizontalScrollBarVisibility="Auto"
                                ScrollViewer.HorizontalScrollMode="Enabled"
                                SelectionMode="None">
                        <ListView.ItemsPanel>
                            <ItemsPanelTemplate>
                                <StackPanel
                                    Orientation="Horizontal" />
                            </ItemsPanelTemplate>
                        </ListView.ItemsPanel>
                    </ListView>
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
person Jon    schedule 09.03.2015
comment
Например, вы можете увидеть это в Excel для Windows Phone. - person sahap; 10.03.2015
comment
Я думал, это то, чего ты хотел. Если вы хотите, чтобы все они прокручивались одновременно, на SO есть множество примеров этого. - person Jon; 11.03.2015

Простой рабочий пример: Связывание только вертикального смещения двух средств просмотра прокрутки

И я нашел расширенный пример в 5-м образце «Ввод и манипуляции XAML — расширенные концепции»: https://code.msdn.microsoft.com/windowsapps/XAML-input-and-manipulation-44125241

person sahap    schedule 10.03.2015