Question

有没有办法在XAML中创建一个单独显示列的ListView。例如，我有一个名字，并希望在其他列中放置一个更新和删除图标。像这样：

| name | update（pic）| delete（pic）|

我尝试在listview中使用gridview但是只显示一行中的所有列，如下所示：

|名称更新（pic）删除（pic）|

所以他们没有分开。

我也尝试将listview放在另一个lisview中。一个面向垂直，另一个面向水平，以创建此网格效果。与nu运气。

这是我的XAML：

<ListBox x:Name="grouplist" Grid.ColumnSpan="3" ItemsSource="{Binding Path=Grouplist, UpdateSourceTrigger=PropertyChanged}" SelectionChanged="grouplist_Selected" HorizontalAlignment="Left" Height="138" Grid.RowSpan="5" VerticalAlignment="Top" Width="168" Grid.Column="2" Margin="0,2,0,0" Grid.Row="3">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Grid>

                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>

                    <StackPanel Grid.Column="0" Grid.ColumnSpan="3">
                        <Label Grid.ColumnSpan="3" Content="{Binding}"/>
                    </StackPanel>
                    <StackPanel Grid.Column="3">
                        <Image VerticalAlignment="Top" Source="/Main;component/Resources/Images/update.png" Width="40" Height="40"/>
                    </StackPanel>
                    <StackPanel Grid.Column="4">
                        <Image VerticalAlignment="Top" Source="/Main;component/Resources/Images/delete.png" Width="40" Height="40"/>
                    </StackPanel>
                </Grid>
            </DataTemplate>
        </ListBox.ItemTemplate>
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel Orientation="Vertical"/>
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
    </ListBox>

这是我的ViewModel，它具有GroupList属性。这一点工作得很好，但不管怎么说只是发布它。以防万一。

    private ObservableCollection<string> _groupslist;

    public ObservableCollection<string> Grouplist
    {
        get
        {
            return _groupslist;
        }
        set
        {
            _groupslist = value;
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs("GroupList"));
            }
        }
    }

这是我得到的结果。但我需要将列表分开。不是一条线。

result of the lisview at runtime

我已经尝试了我能想到的一切，但似乎没有任何东西可以给我我想要的结果。欢迎任何帮助！提前谢谢。

解决我遇到的问题是使用DataGrid而不是listView或ListBox：

<DataGrid x:Name="grouplist" Grid.ColumnSpan="3" 
                          ItemsSource="{Binding Path=Grouplist, UpdateSourceTrigger=PropertyChanged}" 
                          HorizontalAlignment="Left" 
                          Height="138" Grid.RowSpan="5" VerticalAlignment="Top" Width="168" 
                          Grid.Column="2" Margin="0,2,0,0" Grid.Row="3"
                          SelectionMode="Single"
                          HeadersVisibility="None">

                    <DataGrid.Columns>
                        <DataGridTemplateColumn>
                            <DataGridTemplateColumn.CellTemplate>
                                <DataTemplate>
                                    <Label Content="{Binding}" Selector.Selected="grouplist_Selected"/>
                                </DataTemplate>
                            </DataGridTemplateColumn.CellTemplate>
                        </DataGridTemplateColumn>

                        <DataGridTemplateColumn>
                            <DataGridTemplateColumn.CellTemplate>
                                <DataTemplate>
                                    <Image VerticalAlignment="Top" Source="/Main;component/Resources/Images/update.png" Width="40" Height="40"/>
                                </DataTemplate>
                            </DataGridTemplateColumn.CellTemplate>
                        </DataGridTemplateColumn>

                        <DataGridTemplateColumn>
                            <DataGridTemplateColumn.CellTemplate>
                                <DataTemplate>
                                    <Image VerticalAlignment="Top" Source="/Main;component/Resources/Images/delete.png"  Width="40" Height="40"/>
                                </DataTemplate>
                            </DataGridTemplateColumn.CellTemplate>
                        </DataGridTemplateColumn>
                    </DataGrid.Columns>
                </DataGrid>

Answer 1

绝对。您可以在DataGrid视图中放置ListView。你会实现你想要的。分隔符列等您可以根据自己的选择自定义列数据表示。带图像的文字，没有图像的文字。

互联网上有很多文章。

OR

在您当前的代码中，您可以转到SharedSizeGroup，您可以在这里分享多个模板的大小

<ColumnDefinition SharedSizeGroup="FirstColumn"/>
<ColumnDefinition SharedSizeGroup="SecondColumn"/>

Answer 2

尝试这样的事情，我已将Grid.IsSharedSizeScope = "True"添加到顶部网格，并且每列现在都有自己的尺寸组。这将导致每列具有相同的宽度，并希望很好地排列它们。

<ListBox x:Name="grouplist" Grid.ColumnSpan="3" ItemsSource="{Binding Path=Grouplist, UpdateSourceTrigger=PropertyChanged}"
 SelectionChanged="grouplist_Selected" HorizontalAlignment="Left" Height="138" Grid.RowSpan="5" VerticalAlignment="Top" 
 Width="168" Grid.Column="2" Margin="0,2,0,0" Grid.Row="3" Grid.IsSharedSizeScope="True">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Grid>

                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="3*" SharedSizeGroup="column1"/>
                        <ColumnDefinition Width="*" SharedSizeGroup="column2"/>
                        <ColumnDefinition Width="*" SharedSizeGroup="column3"/>
                    </Grid.ColumnDefinitions>

                    <StackPanel Grid.Column="0">
                        <Label Content="{Binding}"/>
                    </StackPanel>
                    <StackPanel Grid.Column="1">
                        <Image VerticalAlignment="Top" Source="/Main;component/Resources/Images/update.png" Width="40" Height="40"/>
                    </StackPanel>
                    <StackPanel Grid.Column="2">
                        <Image VerticalAlignment="Top" Source="/Main;component/Resources/Images/delete.png" Width="40" Height="40"/>
                    </StackPanel>
                </Grid>
            </DataTemplate>
        </ListBox.ItemTemplate>
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel Orientation="Vertical"/>
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
    </ListBox>

有没有办法创建具有单独列的ListBox或ListView

2 个答案: