Question

要求显示与实体相关的数据的垂直配置文件，配置文件可以动态更改，因此基本上它是动态列网格，只是它不是网格控件，而是我使用ItemsControl和Listbox实现了这一点。

现在我需要实现类似于Grid移动列中行为的方式，我必须能够移动Profile 1旁边的Profile 6进行比较。

我怎样才能实现这个目标？

下面是我的Xaml，它呈现代码下方显示的屏幕。

页眉按钮是切换按钮，因此单击它可选择整个配置文件。

通过拖放更新代码

<ScrollViewer Height="500" Name="scrollViewer1" Width="Auto" HorizontalAlignment="Stretch" 
                      VerticalAlignment="Top" Margin="0" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">

                <toolkit:DockPanel>
                    <!-- Items control container to hold time Bucket information -->
                    <ItemsControl x:Name="TimeBucket" Grid.Column="0" toolkit:DockPanel.Dock="Left" VerticalAlignment="Top">
                        <Grid HorizontalAlignment="Left">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="30" />
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>

                            <ToggleButton Grid.Row="0" Content="Bucket" Width="Auto" HorizontalAlignment="Stretch" IsEnabled="False"/>
                            <ListBox Grid.Row="1" Width="Auto" ItemsSource="{Binding Source={StaticResource DC1}, Path=Content.TimeBuckets, Mode=TwoWay}" 
                                 IsEnabled="False">
                                <ListBox.ItemTemplate>
                                    <DataTemplate>
                                        <TextBox Text="{Binding}" Style="{StaticResource BucketProfileStyle}" />
                                    </DataTemplate>
                                </ListBox.ItemTemplate>
                                <ItemsControl.ItemsPanel>
                                    <ItemsPanelTemplate>
                                        <StackPanel Orientation="Vertical"  VerticalAlignment="Top"  HorizontalAlignment="Stretch">
                                        </StackPanel>
                                    </ItemsPanelTemplate>
                                </ItemsControl.ItemsPanel>
                            </ListBox>
                        </Grid>
                    </ItemsControl>

                    <!-- Items Control for dynamic profile columns creation -->
                <toolkit:ListBoxDragDropTarget AllowDrop="True" AllowedSourceEffects="Move" toolkit:DockPanel.Dock="Left" BorderThickness="0" Padding="0" VerticalAlignment="Top">
                    <ListBox ItemsSource="{Binding Profiles}" VerticalAlignment="Top" toolkit:DockPanel.Dock="Left" BorderThickness="0" Padding="0" IsTabStop="True" TabNavigation="Cycle">
                        <!--<ItemsControl x:Name="Profile" ItemsSource="{Binding Profiles}" VerticalAlignment="Top" toolkit:DockPanel.Dock="Left" Drop="Profile_Drop" >-->
                        <ListBox.ItemsPanel>
                            <ItemsPanelTemplate>
                                <StackPanel  Orientation="Horizontal" Drop="StackPanel_Drop" Margin="0"/>
                            </ItemsPanelTemplate>
                        </ListBox.ItemsPanel>
                        <ListBox.ItemContainerStyle>
                            <Style TargetType="ListBoxItem">
                                <Setter Property="Template">
                                    <Setter.Value>
                                        <ControlTemplate TargetType="ListBoxItem">
                                            <ContentPresenter/>
                                        </ControlTemplate>
                                    </Setter.Value>
                                </Setter>
                            </Style>
                        </ListBox.ItemContainerStyle>
                        <ListBox.ItemTemplate>
                            <DataTemplate>
                                <Grid HorizontalAlignment="Left">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="30" />
                                        <RowDefinition Height="*"/>
                                    </Grid.RowDefinitions>

                                    <ToggleButton Grid.Row="0" x:Name="HeaderButton" Content="{Binding Name}" Tag="{Binding ID}"
                                        Width="Auto" HorizontalAlignment="Stretch" ClickMode="Release">
                                        <i:Interaction.Behaviors>
                                            <b:ToggleButtonAsHeaderButtonItemClickBehavior Command="{Binding Source={StaticResource DC1}, Path=Content.HeaderButtonClickCommand}"/>
                                        </i:Interaction.Behaviors>

                                        <ig:ContextMenuService.Manager>
                                            <!--If you use the Infragistics Commanding Framework, you should set the OpenMode property to None-->
                                            <ig:ContextMenuManager ModifierKeys="None" OpenMode="RightClick">
                                                <ig:ContextMenuManager.ContextMenu>
                                                    <ig:XamContextMenu   HorizontalAlignment="Left" Name="xamContextMenu11" VerticalAlignment="Top">
                                                        <ig:XamMenuItem Header="Import" IsEnabled="{Binding Source={StaticResource DC1}, Path=Content.ImportMenuIsEnabled}">
                                                            <i:Interaction.Triggers>
                                                                <i:EventTrigger EventName="Click">
                                                                    <i:InvokeCommandAction Command="{Binding Source={StaticResource DC1}, Path=Content.ImportMenuCommand}"
                                                           CommandParameter="IMPORT"/>
                                                                </i:EventTrigger>
                                                            </i:Interaction.Triggers>
                                                        </ig:XamMenuItem>
                                                        <ig:XamMenuItem Header="Export" IsEnabled="{Binding Source={StaticResource DC1}, Path=Content.ExportMenuIsEnabled}">
                                                            <i:Interaction.Triggers>
                                                                <i:EventTrigger EventName="Click">
                                                                    <i:InvokeCommandAction Command="{Binding Source={StaticResource DC1}, Path=Content.ExportMenuCommand}"
                                                           CommandParameter="EXPORT"/>
                                                                </i:EventTrigger>
                                                            </i:Interaction.Triggers>
                                                        </ig:XamMenuItem>
                                                        <ig:XamMenuItem Header="Revert to Original" IsEnabled="{Binding Source={StaticResource DC1}, Path=Content.RevertMenuIsEnabled}">
                                                            <i:Interaction.Triggers>
                                                                <i:EventTrigger EventName="Click">
                                                                    <i:InvokeCommandAction Command="{Binding Source={StaticResource DC1}, Path=Content.RevertMenuCommand}"
                                                           CommandParameter="REVERT"/>
                                                                </i:EventTrigger>
                                                            </i:Interaction.Triggers>
                                                        </ig:XamMenuItem>
                                                        <ig:XamMenuItem Header="Graph" IsEnabled="{Binding Source={StaticResource DC1}, Path=Content.GraphMenuIsEnabled}">
                                                            <i:Interaction.Triggers>
                                                                <i:EventTrigger EventName="Click">
                                                                    <i:InvokeCommandAction Command="{Binding Source={StaticResource DC1}, Path=Content.GraphMenuCommand}"
                                                           CommandParameter="GRAPH"/>
                                                                </i:EventTrigger>
                                                            </i:Interaction.Triggers>
                                                        </ig:XamMenuItem>
                                                    </ig:XamContextMenu>
                                                </ig:ContextMenuManager.ContextMenu>
                                            </ig:ContextMenuManager>
                                        </ig:ContextMenuService.Manager>
                                    </ToggleButton>

                                    <ListBox Grid.Row="1" Height="Auto" x:Name="listBox1" Width="Auto" HorizontalAlignment="Stretch"
                                     ItemsSource="{Binding Path=Profile, Mode=TwoWay}" SelectionMode="Extended" 
                                     dp:ListBoxExtenders.AutoScrollToCurrentItem="True">

                                        <ListBox.Style>
                                            <Style TargetType="ListBox">
                                                <Setter Property="Background" Value="{Binding Path=Status, Converter={StaticResource ProfileStatusIndicator}}"/>
                                            </Style>
                                        </ListBox.Style>
                                        <ListBox.ItemTemplate>
                                            <DataTemplate>
                                                <TextBox Text="{Binding}" Style="{StaticResource BucketProfileStyle}" />
                                            </DataTemplate>
                                        </ListBox.ItemTemplate>
                                        <ItemsControl.ItemsPanel>
                                            <ItemsPanelTemplate>
                                                <StackPanel  Orientation="Vertical"  VerticalAlignment="Top"  HorizontalAlignment="Stretch">
                                                </StackPanel>
                                            </ItemsPanelTemplate>
                                        </ItemsControl.ItemsPanel>
                                    </ListBox>
                                </Grid>
                            </DataTemplate>
                        </ListBox.ItemTemplate>
                        <!--</ItemsControl>-->

                    </ListBox>
                </toolkit:ListBoxDragDropTarget>
            </toolkit:DockPanel>

        </ScrollViewer>

enter image description here

Answer 1

因此，使用dragdropTarget，我能够达到所需的结果，上面留下完整的解决方案只是为了清晰。

<toolkit:ListBoxDragDropTarget AllowDrop="True" AllowedSourceEffects="Move" toolkit:DockPanel.Dock="Left" BorderThickness="0" Padding="0" VerticalAlignment="Top">

Answer 2

使用拖放目标解决，如果有人想要，可以在上面发布更新的解决方案。

如何：列拖动/移动itemscontrol中的功能类似于Silverlight中的DataGrid

2 个答案: