Как я могу сгруппировать GridViewColumns в WPF, чтобы расширитель заполнил всю ширину - PullRequest
Новая
       23

Как я могу сгруппировать GridViewColumns в WPF, чтобы расширитель заполнил всю ширину

0 голосов
/ 18 января 2019

Я новичок в WPF и пытаюсь сделать следующее:

У меня есть ListView с ItemsSource с использованием ViewModel. Внутри есть GridView с колонками. Каждый столбец представляет Preoperty модели представления. Но описание является необязательным и может быть довольно длинным. Поэтому я хочу использовать Expander. Моя проблема в том, что я могу управлять экспандером, чтобы он был таким же большим, как столбец имен. Но я хочу, чтобы экспандер был таким же большим, как весь ряд. Вот 2 изображения, чтобы уточнить, что я хочу.

Мое текущее состояние: https://i.stack.imgur.com/ZNA4v.png

Чего я хочу достичь: https://i.stack.imgur.com/ZmFq1.png

Я пытался "сгруппировать GridView", но безуспешно ... Смотрите здесь http://technico.qnownow.com/grouping-gridview-wpf/

Вот мой код 

<Window ...>
<Window.Resources>
    ...
</Window.Resources>
<DockPanel>
    <StackPanel DockPanel.Dock="Top">
        ...
    </StackPanel>
    <Grid>            
        <ListView Grid.RowSpan="4" DockPanel.Dock="Top" Margin="10" ItemsSource="{Binding MyView}">
            <ListView.ItemContainerStyle>
                <Style TargetType="{x:Type ListViewItem}">
                    <Setter Property="BorderBrush" Value="Black"></Setter>
                    <Setter Property="BorderThickness" Value="0,0,0,1"></Setter>
                    <Setter Property="Focusable" Value="False" />
                    <Setter Property="HorizontalAlignment" Value="Stretch" />
                    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                    <Setter Property="VerticalAlignment" Value="Top"></Setter>
                    <Setter Property="VerticalContentAlignment" Value="Top"></Setter>
                </Style>
            </ListView.ItemContainerStyle>

            <!-- New GridView -->
            <ListView.View>
                <GridView>

                    <!--Number-->
                    <GridViewColumn Header="#">
                        <GridViewColumn.CellTemplate>
                            <DataTemplate DataType="viewModel:MyViewModel">
                                <TextBlock Text="{Binding Model.Number, StringFormat='#{0}', Mode=OneWay}"
                                               Width="20" TextAlignment="Left" Margin="5" VerticalAlignment="Top" />
                            </DataTemplate>
                        </GridViewColumn.CellTemplate>
                    </GridViewColumn>

                    <!--ErrorLevel-->
                    <GridViewColumn Header="" Width="45">
                        <GridViewColumn.CellTemplate>
                            <DataTemplate DataType="viewModel:MyViewModel">
                                <Image Source="{Binding Model.ErrorLevel, Converter={StaticResource ErrorLevelToImageConverter}, Mode=OneWay}"
                                           ToolTip="{Binding Model.ErrorLevel, Mode=OneWay}" Width="20" Margin="5" VerticalAlignment="Top" />
                            </DataTemplate>
                        </GridViewColumn.CellTemplate>
                    </GridViewColumn>

                    <!--ID-->
                    <GridViewColumn Header="ID">
                        <GridViewColumn.CellTemplate>
                            <DataTemplate DataType="viewModel:MyViewModel">
                                <TextBlock TextAlignment="Center" Margin="5" Width="50" VerticalAlignment="Top" >
                                        <Hyperlink NavigateUri="{Binding Model.Hyperlink, Mode=OneWay}"
                                                   Command="{Binding HyperlinkCommand}">
                                            <TextBlock Text="{Binding Model.Id, Mode=OneWay}" />
                                        </Hyperlink>
                                    </TextBlock>
                            </DataTemplate>
                        </GridViewColumn.CellTemplate>
                    </GridViewColumn>

                    <!--Name-->
                    <GridViewColumn Header="Name" Width="500" >
                        <GridViewColumn.CellTemplate>
                            <DataTemplate DataType="viewModel:MyViewModel">
                                <Expander ToolTip="Expand" ExpandDirection="Down" Foreground="Black" VerticalAlignment="Top">
                                    <Expander.Header>
                                        <TextBlock Text="{Binding Model.Name, Mode=OneWay}"
                                               HorizontalAlignment="{Binding HorizontalAlignment, RelativeSource={RelativeSource AncestorType=ContentPresenter}, Mode=OneWayToSource}"
                                               TextAlignment="Left" Margin="5" TextWrapping="Wrap" VerticalAlignment="Top" />
                                    </Expander.Header>
                                    <GroupBox Header="Description" FontWeight="Bold" >
                                        <TextBlock Text="{Binding Model.Description, Mode=OneWay}" TextWrapping="Wrap"
                                                       FontWeight="Normal" TextAlignment="Left" Margin="5" />
                                    </GroupBox>
                                </Expander>
                            </DataTemplate>
                        </GridViewColumn.CellTemplate>
                    </GridViewColumn>

                    <!-- Module-->
                    <GridViewColumn Header="Module" >
                        <GridViewColumn.CellTemplate>
                            <DataTemplate DataType="viewModel:MyViewModel">
                                <TextBlock Text="{Binding Model.Module, Mode=OneWay}"
                                               TextAlignment="Center" Margin="5" Width="100" />
                            </DataTemplate>
                        </GridViewColumn.CellTemplate>
                    </GridViewColumn>

                </GridView>
            </ListView.View>
        </ListView>
    </Grid>
</DockPanel>

Еще раз, я новичок в WPF, MVVM, DataBinding и все это. Поэтому, пожалуйста, постарайтесь сделать ваш ответ максимально подробным. Я перепробовал много вещей, но они не сработали.

Ответы [ 2 ]

0 голосов
/ 18 января 2019

Вы можете добавить следующие GridViewColumn слева (вверху в XAML) к вашему GridView

<GridViewColumn Header="" Width="30">
    <GridViewColumn.CellTemplate>
        <DataTemplate DataType="viewModel:MyViewModel">
            <Expander Margin="-5,2,-5000,0" HorizontalAlignment="Left" Width="{Binding Path=ActualWidth, RelativeSource={RelativeSource AncestorType={x:Type ItemsPresenter}}}">
                <GroupBox Header="Description" FontWeight="Bold" Margin="0,0,5,0">
                    <TextBlock Text="{Binding Model.Description}" FontWeight="Normal" TextWrapping="Wrap" />
                </GroupBox>
            </Expander>
        </DataTemplate>
    </GridViewColumn.CellTemplate>
</GridViewColumn>

Это GridViewColumn содержит пустой Header, который просто показывает стрелку Expander в GridViewRow s.

Сам Expander выровнен по левому краю и имеет огромный отрицательный знак Margin с правой стороны, поэтому он может рисовать свое содержимое за пределами правой границы. Ширина установлена ​​на ActualWidth из ItemsPresenter вашего GridView. С помощью этого Width вы можете ограничить содержимое текущим видимым Width из GridView (или вы можете установить для него абсолютное значение, например, 500).

И, наконец, предварительный просмотр этого Column enter image description here

0 голосов
/ 18 января 2019

ОК, тот факт, что расширитель не растягивается из-за не растягиваемого родительского элемента управления. В вашем виде сетки есть столбец «Имя» с фиксированной шириной и расширитель, добавленный как дочерний элемент. Насколько я знаю, дочерний контроль не может выходить за пределы родительского контроля, если это не правда, я уверен, что кто-то исправит это. Я не знаю, как лучше всего достичь своей цели, но чтобы дать вам вдохновение, я привел небольшой пример.

Итак, приведу пример того, как это может работать:

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

<Expander ToolTip="Expand" ExpandDirection="Down" Margin="-100,0,-300,0" Foreground="Black" VerticalAlignment="Top">

Спасибо @LittleBit за этот совет. 

<ListView x:Name="lsttest" ItemsSource="{Binding persons}">
        <ListViewItem>
            <StackPanel>
                <ListView>
                    <ListView.View>
                        <GridView>
                            <GridViewColumn Header="#1" Width="50">
                                <GridViewColumn.CellTemplate>
                                    <DataTemplate>
                                        <TextBlock Text="{Binding Name}"
                                           Width="20" TextAlignment="Left" Margin="5" VerticalAlignment="Top" />
                                    </DataTemplate>
                                </GridViewColumn.CellTemplate>
                            </GridViewColumn>
                            <GridViewColumn Header="Test 2" Width="50">
                                <GridViewColumn.CellTemplate>
                                    <DataTemplate>
                                        <TextBlock Text="{Binding Name}"
                                           Width="20" TextAlignment="Left" Margin="5" VerticalAlignment="Top" />
                                    </DataTemplate>
                                </GridViewColumn.CellTemplate>
                            </GridViewColumn>
                        </GridView>
                    </ListView.View>
                </ListView>
                <Expander ToolTip="Expand" ExpandDirection="Down" Foreground="Black" VerticalAlignment="Top">
                    <Expander.Header>
                        <TextBlock Text="{Binding Model.Name, Mode=OneWay}"
                                           HorizontalAlignment="{Binding HorizontalAlignment, RelativeSource={RelativeSource AncestorType=ContentPresenter}, Mode=OneWayToSource}"
                                           TextAlignment="Left" Margin="5" TextWrapping="Wrap" VerticalAlignment="Top" />
                    </Expander.Header>
                    <GroupBox Header="Description" FontWeight="Bold" Width="{Binding ActualWidth, ElementName=lsttest}">
                        <TextBlock Text="{Binding Name, Mode=OneWay}" TextWrapping="Wrap"
                                                   FontWeight="Normal" TextAlignment="Left" Margin="5" />
                    </GroupBox>
                </Expander>
            </StackPanel>
        </ListViewItem>
        </ListView>

Результат:

enter image description here

...