列表视图中的 Wpf 扩展器答案

【问题标题】：Wpf expander in listview列表视图中的 Wpf 扩展器
【发布时间】：2015-07-14 16:21:25
【问题描述】：

我有一个带有扩展器的列表视图。是否可以像在屏幕上一样进行扩展？

 <Grid>
    <ListView ItemsSource="{Binding Items}">
        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition></ColumnDefinition>
                        <ColumnDefinition></ColumnDefinition>
                        <ColumnDefinition></ColumnDefinition>
                        <ColumnDefinition></ColumnDefinition>
                        <ColumnDefinition></ColumnDefinition>
                        <ColumnDefinition></ColumnDefinition>
                        <ColumnDefinition></ColumnDefinition>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition></RowDefinition>
                    </Grid.RowDefinitions>
                        <Expander Grid.Column="6" Grid.Row="0" Margin="41.343,0,-27,0">
                            <StackPanel>
                                <Label Content="First Element"/>
                                <Label Content="Second Element"/>
                                <Label Content="Third Element"/>
                            </StackPanel>
                        </Expander>
                        <Label Grid.Column="0" Grid.Row="0" Content="Test"/>
                        <Label Grid.Column="1" Grid.Row="0" Content="Test"/>
                        <Label Grid.Column="2" Grid.Row="0" Content="220.35"/>
                        <Label Grid.Column="3" Grid.Row="0" Content="15.37"/>
                        <Label Grid.Column="4" Grid.Row="0" Content="4.54"/>
                        <Label Grid.Column="5" Grid.Row="0" Content="00:04:01"/>
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</Grid>

我尝试在 Grid 中放置“第一个元素”、“第二个元素”、“第三个元素”并更改其扩展大小，但 xaml 不允许将网格的左边框放置在扩展器左边框的左侧。

【问题讨论】：

使用 stackpanel Orientation="Horizontal" 属性
您希望 Expander 在您的标签下水平展开？布局的目的是什么 - 它可能会导致更准确的答案。
To dytori 是的，我希望 Expander 在标签下水平展开。目的是显示一些附加信息，例如价格低于实际价格的折扣。

标签： c# wpf

【解决方案1】：

以下代码应该作为基础，您需要调整其余代码以满足您的特定要求，但我所做的是添加一个额外的行，以便您的扩展器可以坐在该行中并通过跨行向左扩展整个网格列的长度。

<Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition></ColumnDefinition>
                            <ColumnDefinition></ColumnDefinition>
                            <ColumnDefinition></ColumnDefinition>
                            <ColumnDefinition></ColumnDefinition>
                            <ColumnDefinition></ColumnDefinition>
                            <ColumnDefinition></ColumnDefinition>
                            <ColumnDefinition></ColumnDefinition>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition></RowDefinition>
                            <RowDefinition></RowDefinition>
                        </Grid.RowDefinitions>
                        <Expander ExpandDirection="Left" Grid.ColumnSpan="6" Grid.Row="1" Margin="41.343,0,-27,0">
                            <StackPanel Orientation="Horizontal">
                                <Label Content="First Element"/>
                                <Label Content="Second Element"/>
                                <Label Content="Third Element"/>
                            </StackPanel>
                        </Expander>
                        <Label Grid.Column="0" Grid.Row="0" Content="Test"/>
                        <Label Grid.Column="1" Grid.Row="0" Content="Test"/>
                        <Label Grid.Column="2" Grid.Row="0" Content="220.35"/>
                        <Label Grid.Column="3" Grid.Row="0" Content="15.37"/>
                        <Label Grid.Column="4" Grid.Row="0" Content="4.54"/>
        <Label Grid.Column="5" Grid.Row="0" Content="00:04:01"/>
    </Grid>

【讨论】：

抱歉，扩展器按钮应该在 Grid.Row="0" 中。它非常重要。
然后将此行更改为以下 <Expander ExpandDirection="Left" Grid.ColumnSpan="6" Grid.Row="0" Margin="41.343,0,-27,0" VerticalAlignment="Bottom"> 并设置第 0 行的高度，使值足够接近。