带有动态列数的网格 [英] Grid with dynamic number of columns

问题描述

我对WPF还是很陌生，并且正在努力实现视觉效果-我想要一个二维的对象网格，其中包含数据驱动的列数.我正在尝试使用零代码隐藏的MVVM.

我具有以下结构:

I am quite new to WPF, and am struggling with accomplishing a visual effect - I would like to have a two-dimensional grid of objects with a data-driven number of columns. I am trying to go with MVVM with zero code-behind.

I have the following structure:

<UserControl x:Class="Demo.Views.SideBySideStackPanelView"

             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 

             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 

             xmlns:views="clr-namespace:Demo.Views"

             xmlns:viewModels="clr-namespace:Demo.ViewModels"

             mc:Ignorable="d" 

             d:DesignHeight="300" d:DesignWidth="300">

    <UserControl.Resources>

        <DataTemplate x:Key="ColumnTemplate">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="400"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*" SharedSizeGroup="TreeView"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*" SharedSizeGroup="DetailView"/>
                </Grid.RowDefinitions>

                <DockPanel Grid.Row="0" LastChildFill="True">
                    <TextBlock Text="{Binding Name}" DockPanel.Dock="Left"/>
                    <Button Command="{Binding Close}" DockPanel.Dock="Right" HorizontalAlignment="Right">
                        <Image Width="10" Height="10" Source="/Demo;component/Images/Close.png" />
                    </Button>
                </DockPanel>

                <views:TreeView Grid.Row="1"/>

                <GridSplitter 

                    ResizeDirection="Rows" 

                    VerticalAlignment="Center"

                    HorizontalAlignment="Stretch"

                    Height="5"

                    Grid.Row="2"

                    Name="sideBySideSplitter"/>

                <views:TreeDetail Grid.Row="2"/>
                
            </Grid>
        </DataTemplate>
        
    </UserControl.Resources>

    <Grid d:DataContext="{d:DesignInstance viewModels:MainWindowViewModel}" Grid.IsSharedSizeScope="True">
        
        <ItemsControl ItemsSource="{Binding PluginItem}" ItemTemplate="{StaticResource ColumnTemplate}">

            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            
        </ItemsControl>
        
    </Grid>
</UserControl>

TreeView视图是基本的绑定TreeView，而TreeDetail视图是简单的绑定Grid.

该控件确实按照需要渲染了或多或少的内容，但是当我与该列上部的树视图交互时，该控件会垂直展开，而不是在树中显示滚动条. GridSplitter根本不起作用；实际上，它似乎呈现在局部对象的中间.

我在TabControl.ContentTemplate中有一个类似的DataTemplate，它可以按需工作.移动GridSplitter会导致滚动条在必要时显示在任一侧，打开TreeView项会导致滚动条显示在该控件中.

我要做的是一个类似于Excel的演示，其中用户可以使用水平和垂直拆分器"控制单元的大小，并且单元内的用户对象根据需要在单元内滚动.我现在可以使用固定大小的列.

我将不胜感激.谢谢.

The TreeView view is a basic bound TreeView and the TreeDetail view is a simple bound Grid.

The control does render my content more-or-less as desired, but when I interact with the tree view that is in the upper part of the column the control expands vertically rather than a scroll bar showing up in the tree. The GridSplitter doesn''t work at all; in fact it appears to render in the middle of the detail object.

I have a similar DataTemplate in a TabControl.ContentTemplate and it works as desired. Moving the GridSplitter causes scroll bars to show up on either side when necessary and opening up TreeView items causes scroll bars to show up in that control.

What I am after is an Excel-like presentation where the user can control the sizes of the cells with horizontal and vertical "splitters" and the user objects within the cells scroll within the cell as necessary. I can live with fixed-size columns for now.

I would appreciate any help provided. Thanks.

推荐答案

如果需要后面的代码，就这样吧.我只是想避免将UI元素连接到业务逻辑-这样就存在维护麻烦.我认为问题的答案是基本缺少组件或设置.

If code behind becomes necessary, so be it. I would just like to avoid wiring the UI elements to the business logic - that way lies maintenance trouble. I would think that the answer to my problem is a basic missing component or setting.

这篇关于带有动态列数的网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！