如何在網格中移動項目

Question

我有一個WPF Grid並希望根據用戶的輸入向上或向下移動行。這是我迄今爲止所嘗試過的（用戶決定移動元素時的一個示例）：

RowDefinition currentRow = fieldsGrid.RowDefinitions[currentIndex]; 
fieldsGrid.RowDefinitions.Remove(currentRow); 
fieldsGrid.RowDefinitions.Insert(currentIndex - 1, currentRow); 

我做錯了什麼？由於使用這種方法的UI保持不變。

Answer 1

這將是WPF的方法來你的截圖是什麼樣子：

<Window x:Class="WpfApplication4.Window9" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     Title="Window9" Height="300" Width="500"> 
    <ItemsControl ItemsSource="{Binding Columns}"> 
     <ItemsControl.ItemTemplate> 
      <DataTemplate> 
       <DataTemplate.Resources> 
        <BooleanToVisibilityConverter x:Key="BoolToVisConverter"/> 
       </DataTemplate.Resources> 
       <Grid> 
        <Grid.ColumnDefinitions> 
         <ColumnDefinition Width="20"/> 
         <ColumnDefinition Width="50"/> 
         <ColumnDefinition/> 
         <ColumnDefinition Width="100"/> 
         <ColumnDefinition Width="25"/> 
         <ColumnDefinition Width="25"/> 
        </Grid.ColumnDefinitions> 

        <!-- This is your Key image, I used a rectangle instead, you can change it --> 
        <Rectangle Fill="Yellow" Visibility="{Binding IsPrimaryKey, Converter={StaticResource BoolToVisConverter}}" Margin="2"/> 

        <CheckBox IsChecked="{Binding IsSelected}" Grid.Column="1"/> 

        <TextBlock Text="{Binding Name}" Grid.Column="2"/> 

        <ComboBox ItemsSource="{Binding SortOrders}" SelectedItem="{Binding SortOrder}" Grid.Column="3" Margin="2"/> 

        <Button Content="Up" Grid.Column="4" Margin="2" 
          Command="{Binding DataContext.MoveUpCommand, RelativeSource={RelativeSource FindAncestor, AncestorType=ItemsControl}}" 
          CommandParameter="{Binding}"/> 

        <Button Content="Down" Grid.Column="5" Margin="2" 
          Command="{Binding DataContext.MoveDownCommand, RelativeSource={RelativeSource FindAncestor, AncestorType=ItemsControl}}" 
          CommandParameter="{Binding}"/> 

       </Grid> 
      </DataTemplate> 
     </ItemsControl.ItemTemplate> 
    </ItemsControl> 
</Window> 

代碼背後：

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Windows; 
using InduraClientCommon.MVVM; 
using System.Collections.ObjectModel; 

namespace WpfApplication4 
{ 
    public partial class Window9 : Window 
    { 
     public Window9() 
     { 
      InitializeComponent(); 

      var vm = new ColumnListViewModel(); 
      vm.Columns.Add(new ColumnViewModel() { IsPrimaryKey = true, Name = "Customer ID", SortOrder = SortOrder.Ascending }); 
      vm.Columns.Add(new ColumnViewModel() {Name = "Customer Name", SortOrder = SortOrder.Descending}); 
      vm.Columns.Add(new ColumnViewModel() {Name = "Customer Age", SortOrder = SortOrder.Unsorted}); 

      DataContext = vm; 
     } 
    } 
} 

視圖模型：

public class ColumnListViewModel: ViewModelBase 
    { 
     private ObservableCollection<ColumnViewModel> _columns; 
     public ObservableCollection<ColumnViewModel> Columns 
     { 
      get { return _columns ?? (_columns = new ObservableCollection<ColumnViewModel>()); } 
     } 

     private DelegateCommand<ColumnViewModel> _moveUpCommand; 
     public DelegateCommand<ColumnViewModel> MoveUpCommand 
     { 
      get { return _moveUpCommand ?? (_moveUpCommand = new DelegateCommand<ColumnViewModel>(MoveUp, x => Columns.IndexOf(x) > 0)); } 
     } 

     private DelegateCommand<ColumnViewModel> _moveDownCommand; 
     public DelegateCommand<ColumnViewModel> MoveDownCommand 
     { 
      get { return _moveDownCommand ?? (_moveDownCommand = new DelegateCommand<ColumnViewModel>(MoveDown, x => Columns.IndexOf(x) < Columns.Count)); } 
     } 

     private void MoveUp(ColumnViewModel item) 
     { 
      var index = Columns.IndexOf(item); 
      Columns.Move(index, index - 1); 
      MoveUpCommand.RaiseCanExecuteChanged(); 
      MoveDownCommand.RaiseCanExecuteChanged(); 
     } 

     private void MoveDown(ColumnViewModel item) 
     { 
      var index = Columns.IndexOf(item); 
      Columns.Move(index, index + 1); 
      MoveUpCommand.RaiseCanExecuteChanged(); 
      MoveDownCommand.RaiseCanExecuteChanged(); 
     } 
    } 

    public class ColumnViewModel: ViewModelBase 
    { 
     private bool _isPrimaryKey; 
     public bool IsPrimaryKey 
     { 
      get { return _isPrimaryKey; } 
      set 
      { 
       _isPrimaryKey = value; 
       NotifyPropertyChange(() => IsPrimaryKey); 
      } 
     } 

     private bool _isSelected; 
     public bool IsSelected 
     { 
      get { return _isSelected; } 
      set 
      { 
       _isSelected = value; 
       NotifyPropertyChange(() => IsSelected); 
      } 
     } 

     private string _name; 
     public string Name 
     { 
      get { return _name; } 
      set 
      { 
       _name = value; 
       NotifyPropertyChange(() => Name); 
      } 
     } 

     private List<SortOrder> _sortOrders; 
     public List<SortOrder> SortOrders 
     { 
      get { return _sortOrders ?? (_sortOrders = Enum.GetValues(typeof(SortOrder)).OfType<SortOrder>().ToList()); } 
     } 

     private SortOrder _sortOrder; 
     public SortOrder SortOrder 
     { 
      get { return _sortOrder; } 
      set 
      { 
       _sortOrder = value; 
       NotifyPropertyChange(() => SortOrder); 
      } 
     } 
    } 

    public enum SortOrder {Unsorted, Ascending, Descending} 
} 

這是個什麼樣子像在我的屏幕上：

正如你在上面的例子中看到的，我沒有在代碼中操縱或創建UI元素，因爲它實際上並不是必需的。無論何時您需要與屏幕上顯示的信息進行交互，您都可以與ViewModel而不是View進行交互。這是UI和應用程序邏輯之間關係的明確分離WPF使其成爲可能，這在其他框架中完全沒有。在WPF中做任何類型的N元素UI時，請考慮這種方法是事實上的默認方式。

編輯：這種方法相對於classic之一

優點：

• 無需操縱，以顯示你的代碼複雜WPF類（IE UI元素） /從屏幕獲取數據（只需簡單，簡單 屬性和INotifyPropertyChanged）
• 更好的縮放（UI可以b只要它支持ViewModel屬性，就可以將ComboBox更改爲每個腳都有排序順序的旋轉3d 粉紅色大象。
• 無需導航視覺樹來查找位於天知道位置的元素。
• 不需要foreach什麼。只需一個簡單的Select即可將您的數據（來自您獲得的任何數據源）轉換爲 ViewModel列表。

底線：WPF是比什麼都更簡單，更好的其他當前存在，如果你使用WPF的辦法。

Answer 2

您正在更改RowDefinition的訂單，這不是您想要的。你想改變的元素的行分配，這是由Grid.Row attached property

確定我願意把屬於每一行的容器（每行一個）的所有控件，然後使用Grid.SetRow改變周圍的容器。請參閱how to change the grid row of the control from code behind in wpf。

Answer 3

下面是一個使用一個ItemsControl做你想要什麼樣的一個簡單的例子：

視圖模型

public class ListBoxViewModel 
{ 
    private static readonly List<string> sortList = new List<string>() { "Unsorted", "Sorted" }; 
    public List<string> SortList { get { return sortList; } } 

    public ObservableCollection<ItemDetail> ItemDetails { get; set; } 

    #region Up Command 
    ICommand upCommand; 
    public ICommand UpCommand 
    { 
     get 
     { 
      if (upCommand == null) 
      { 
       upCommand = new RelayCommand(UpExecute); 
      } 
      return upCommand; 
     } 
    } 

    private void UpExecute(object param) 
    { 
     var id = param as ItemDetail; 

     if (id != null) 
     { 
      var curIndex = ItemDetails.IndexOf(id); 
      if (curIndex > 0) 
       ItemDetails.Move(curIndex, curIndex - 1); 
     } 
    } 
    #endregion Up Command 

    #region Down Command 
    ICommand downCommand; 
    public ICommand DownCommand 
    { 
     get 
     { 
      if (downCommand == null) 
      { 
       downCommand = new RelayCommand(DownExecute); 
      } 
      return downCommand; 
     } 
    } 

    private void DownExecute(object param) 
    { 
     var id = param as ItemDetail; 
     if (id != null) 
     { 
      var curIndex = ItemDetails.IndexOf(id); 
      if (curIndex < ItemDetails.Count-1) 
       ItemDetails.Move(curIndex, curIndex + 1); 
     } 
    } 
    #endregion Down Command 

    public ListBoxViewModel() 
    { 
     ItemDetails = new ObservableCollection<ItemDetail>() 
     { 
      new ItemDetail() { IsSelected = false, ItemName = "Customer Id", SortOrder = "Unsorted" }, 
      new ItemDetail() { IsSelected = true, ItemName = "Customer Name", SortOrder = "Sorted" }, 
      new ItemDetail() { IsSelected = false, ItemName = "Customer Age", SortOrder = "Unsorted" } 
     }; 
    } 
} 

ItemDetail類（我做的最多使事情變得更容易）

public class ItemDetail 
{ 
    public bool IsSelected { get; set; } 
    public string ItemName { get; set; } 
    public string SortOrder { get; set; } 
} 

XAML

<UserControl.Resources>  
    <DataTemplate DataType="{x:Type vm:ItemDetail}"> 
     <Grid> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition SharedSizeGroup="CheckBoxGroup" /> 
       <ColumnDefinition SharedSizeGroup="ItemNameGroup" /> 
       <ColumnDefinition SharedSizeGroup="SortGroup" /> 
       <ColumnDefinition Width="20" /> 
       <ColumnDefinition SharedSizeGroup="UpArrowGroup" /> 
       <ColumnDefinition SharedSizeGroup="DownArrowGroup" /> 
       <ColumnDefinition Width="*" /> 
      </Grid.ColumnDefinitions> 
      <CheckBox Grid.Column="0" IsChecked="{Binding IsSelected}" VerticalAlignment="Center" /> 
      <Label Grid.Column="1" Content="{Binding ItemName}" /> 
      <ComboBox Grid.Column="2" ItemsSource="{Binding DataContext.SortList, RelativeSource={RelativeSource AncestorType={x:Type views:ListBoxExample}}}" SelectedItem="{Binding SortOrder}" /> 
      <Button Grid.Column="4" Command="{Binding DataContext.UpCommand, RelativeSource={RelativeSource AncestorType={x:Type views:ListBoxExample}}}" CommandParameter="{Binding}"> 
       <Image Source="..\images\up.png" Height="10" /> 
      </Button> 
      <Button Grid.Column="5" Command="{Binding DataContext.DownCommand, RelativeSource={RelativeSource AncestorType={x:Type views:ListBoxExample}}}" CommandParameter="{Binding}"> 
       <Image Source="..\images\down.png" Height="10" /> 
      </Button> 
     </Grid> 
    </DataTemplate> 
</UserControl.Resources> 

<Grid Grid.IsSharedSizeScope="True"> 
    <ItemsControl ItemsSource="{Binding ItemDetails}" /> 
</Grid> 

最後的結果：

，然後按第一項的下拉箭頭後：

希望這有助於。