Элементы списка в сетке (не GridView) - PullRequest
1 голос
/ 15 ноября 2010

В моем приложении WPF есть коллекция, к которой я хотел бы привязать сетку элементов управления.Пример желаемого макета ( TL; DR Я хочу это из ItemsSource ):

Желаемый макет http://imagebin.ca/img/27UTke

<Grid ShowGridLines="True">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>

    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <Label Grid.Row="0" Grid.Column="0">FileUploader</Label>
    <ComboBox Grid.Row="0" Grid.Column="1" />
    <Button Grid.Row="0" Grid.Column="2">Edit</Button>

    <Label Grid.Row="1" Grid.Column="0">TextUploader</Label>
    <ComboBox Grid.Row="1" Grid.Column="1" />
    <Button Grid.Row="1" Grid.Column="2">Edit</Button>

    <Label Grid.Row="2" Grid.Column="0">UrlShortener</Label>
    <ComboBox Grid.Row="2" Grid.Column="1" />
    <Button Grid.Row="2" Grid.Column="2">Edit</Button>

    <Label Grid.Row="3" Grid.Column="0">ImageUploader</Label>
    <ComboBox Grid.Row="3" Grid.Column="1" />
    <Button Grid.Row="3" Grid.Column="2">Edit</Button>
</Grid>

Этот пример имеет жестко закодированные значения;Я хочу связать коллекцию динамически, как при использовании ListView.Однако использование ListView с GridView - это не то, чего я хочу;Мне не нужны выделения, заголовки, сортировка и т. Д. Для пользователя макет представляет собой аккуратно организованный набор параметров, а не набор данных в сетке.


Я не смогсделать это связывание правильно.Я пытался использовать ItemsControl с сеткой снаружи, но сетка игнорируется:

Неудачная попытка 1 http://imagebin.ca/img/kTUordk

<Grid ShowGridLines="True">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>

    <ItemsControl ItemsSource="{Binding MyData}">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <ItemsControl>
                    <Label Grid.Column="0">Text here</Label>
                    <ComboBox Grid.Column="1" />
                    <Button Grid.Column="2">Edit</Button>
                </ItemsControl>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Grid>

Я также использовалItemsControl с сеткой на панели, но это создает одну сетку на элемент, что ужасно:

Неудачная попытка 2 http://imagebin.ca/img/xHo__-JD

<ItemsControl ItemsSource="{Binding Data}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <ItemsControl>
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <Grid ShowGridLines="True">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>
                        </Grid>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>

                <Label Grid.Column="0" Content="{Binding Features}" />
                <ComboBox Grid.Column="1" />
                <Button Grid.Column="2">Edit</Button>
            </ItemsControl>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

После некоторых исследований я обнаружилсвойство SharedSizeGroup определений сетки столбцов и строк.Я пробовал это с предыдущей попыткой;однако средний столбец (с шириной *), похоже, не изменяет свой размер, чтобы заполнить всю ширину окна:

Неудачная попытка 3 http://imagebin.ca/img/nEoMJmy

<ItemsControl ItemsSource="{Binding Data}" Grid.IsSharedSizeScope="True">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <ItemsControl>
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <Grid ShowGridLines="True">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" SharedSizeGroup="A" />
                                <ColumnDefinition Width="*" SharedSizeGroup="B" />
                                <ColumnDefinition Width="Auto" SharedSizeGroup="C" />
                            </Grid.ColumnDefinitions>
                        </Grid>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>

                <Label Grid.Column="0" Content="{Binding Features}" />
                <ComboBox Grid.Column="1" />
                <Button Grid.Column="2">Edit</Button>
            </ItemsControl>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

Что такоелучший способ выполнить первый макет ?

1 Ответ

1 голос
/ 15 ноября 2010

Джон Боуэн написал в блоге запись о ловушке использования * с SharedSizeGroups . Используя предложенный способ, я смог получить нужный макет:

<Grid Name="grid">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" SharedSizeGroup="A" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" SharedSizeGroup="C" />
    </Grid.ColumnDefinitions>
</Grid>

<ItemsControl ItemsSource="{Binding Data}" Grid.IsSharedSizeScope="True">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <ItemsControl>
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <Grid ShowGridLines="True">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" SharedSizeGroup="A" />
                                <ColumnDefinition Width="{Binding ColumnDefinitions[1].Width, ElementName=grid}" />
                                <ColumnDefinition Width="Auto" SharedSizeGroup="C" />
                            </Grid.ColumnDefinitions>
                        </Grid>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>

                <Label Grid.Column="0" Content="{Binding Features}" />
                <ComboBox Grid.Column="1" />
                <Button Grid.Column="2">Edit</Button>
            </ItemsControl>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

К сожалению, это похоже на взлом; Я уверен, что есть лучшее решение для достижения того, чего я хочу.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...