0

ボタンクリックでデータグリッドにデータを追加したい。ITEM、QUANTITY、PRICE という 3 つのヘッダーを持つデータグリッドがあるとします。ユーザーが初めてクリックすると、このように最初の行にデータが表示されます。

1   1   1

次に、2回目のクリックで合計データが

1   1   1
2   2   2

等々

1   1   1
2   2   2
3   3   3
4   4   4
.   .   .
.   .   .
.   .   .
.   .   .
n   n   n

そして、配列と言うボタンをクリックすると、配列リストにデータグリッドデータを取得する必要があります。これはWPFで可能ですか?? jquery とバックエンド メソッドを使用して、Web アプリケーションで既にこれを行っています。とにかく、これがWPFでも簡単になることを願っています。私はネットを検索しましたが、すべての例はデータバインディングが複雑であるように見えます.データバインディングをしたくないので、上で説明しようとした簡単な方法で行きたいと思っています.

4

2 に答える 2

0

DataBinding を使用してこれを簡単に実現できることを示すために、この小さなアプリを簡単に作成しました。これには約 10 分かかりましたが、Resharper やその他のツールを使用する経験豊富なプログラマーであれば、数分でほぼ完了できます。

これが私のInventoryItemViewModel.csです

public class InventoryItemViewModel : ViewModelBase
{
    private int _itemid;

    public int ItemId
    {
        get { return _itemid; }
        set { _itemid = value; this.OnPropertyChanged("ItemId"); }
    }

    private int _qty;

    public int Qty
    {
        get { return _qty; }
        set { _qty = value; this.OnPropertyChanged("Qty"); }
    }
    private int _price;

    public int Price
    {
        get { return _price; }
        set { _price = value; this.OnPropertyChanged("Price"); }
    }

}

ご覧のとおり、大したことはありません。3 つのプロパティだけです。簡単な UI 更新を可能にする魔法は、ViewModelBase を実装しているからです。

ここにViewModelBase.csがあります

/// <summary>
/// Abstract base to consolidate common functionality of all ViewModels
/// </summary>
public abstract class ViewModelBase : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    protected void OnPropertyChanged(string propertyName)
    {
        this.OnPropertyChanged(new PropertyChangedEventArgs(propertyName));
    }

    protected virtual void OnPropertyChanged(PropertyChangedEventArgs e)
    {
        var handler = this.PropertyChanged;
        if (handler != null)
        {
            handler(this, e);
        }
    }
}

このクラスをすべての WPF プロジェクトにほとんどコピーして、そのまま使用できます。

メイン ウィンドウのビューモデルは次のとおりです。 MainWindowViewModel.cs

public class MainWindowViewModel : ViewModelBase
{
    public MainWindowViewModel()
    {
        this.InventoryCollection = new ObservableCollection<InventoryItemViewModel>();
        this.AddItemCommand = new DelegateCommand((o) => this.AddItem());
        this.GetItemListCommand = new DelegateCommand((o) => this.GetInventoryItemList());
    }

    public ICommand AddItemCommand { get; private set; }
    public ICommand GetItemListCommand { get; private set; }

    public ObservableCollection<InventoryItemViewModel> InventoryCollection { get; private set; }

    private void AddItem()
    {
        // get maxid in collection
        var maxid = InventoryCollection.Count;
        // if collection is not empty get the max id (which is the same as count in this case but whatever)
        if (maxid > 0) maxid = InventoryCollection.Max(x => x.ItemId);

        InventoryCollection.Add(new InventoryItemViewModel
        {
            ItemId = ++maxid,
            Price = maxid,
            Qty = maxid
        });
    }

    private List<InventoryItemViewModel> GetInventoryItemList()
    {
        return this.InventoryCollection.ToList();
    }
}

ご覧のとおり、InventoryItemViewModels の ObservableCollection があります。これは、UI からバインドするコレクションです。リストまたは配列の代わりに ObservableCollection を使用することが不可欠です。ボタンを機能させるために、UI でボタンにバインドされる ICommand プロパティを定義します。DelegateCommand クラスを使用して、アクションをそれぞれのプライベート メソッドにリダイレクトします。

これが DelegateCommand.cs です。これは、WPF プロジェクトに含めるだけで動作することを信頼できる別のクラスです。

public class DelegateCommand : ICommand
{
    /// <summary>
    /// Action to be performed when this command is executed
    /// </summary>
    private Action<object> executionAction;

    /// <summary>
    /// Predicate to determine if the command is valid for execution
    /// </summary>
    private Predicate<object> canExecutePredicate;

    /// <summary>
    /// Initializes a new instance of the DelegateCommand class.
    /// The command will always be valid for execution.
    /// </summary>
    /// <param name="execute">The delegate to call on execution</param>
    public DelegateCommand(Action<object> execute)
        : this(execute, null)
    {
    }

    /// <summary>
    /// Initializes a new instance of the DelegateCommand class.
    /// </summary>
    /// <param name="execute">The delegate to call on execution</param>
    /// <param name="canExecute">The predicate to determine if command is valid for execution</param>
    public DelegateCommand(Action<object> execute, Predicate<object> canExecute)
    {
        if (execute == null)
        {
            throw new ArgumentNullException("execute");
        }

        this.executionAction = execute;
        this.canExecutePredicate = canExecute;
    }

    /// <summary>
    /// Raised when CanExecute is changed
    /// </summary>
    public event EventHandler CanExecuteChanged
    {
        add { CommandManager.RequerySuggested += value; }
        remove { CommandManager.RequerySuggested -= value; }
    }

    /// <summary>
    /// Executes the delegate backing this DelegateCommand
    /// </summary>
    /// <param name="parameter">parameter to pass to predicate</param>
    /// <returns>True if command is valid for execution</returns>
    public bool CanExecute(object parameter)
    {
        return this.canExecutePredicate == null ? true : this.canExecutePredicate(parameter);
    }

    /// <summary>
    /// Executes the delegate backing this DelegateCommand
    /// </summary>
    /// <param name="parameter">parameter to pass to delegate</param>
    /// <exception cref="InvalidOperationException">Thrown if CanExecute returns false</exception>
    public void Execute(object parameter)
    {
        if (!this.CanExecute(parameter))
        {
            throw new InvalidOperationException("The command is not valid for execution, check the CanExecute method before attempting to execute.");
        }
        this.executionAction(parameter);
    }

MainWindow.xaml の UI コードは次のようになります。

<Window x:Class="WpfApplication1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:ctlDefs="clr-namespace:WpfApplication1"
    Title="MainWindow" Height="350" Width="525">
<Window.Resources>

</Window.Resources>

<StackPanel>
    <Button Command="{Binding Path=GetItemListCommand}" Content="Get Item List" />
    <Button Command="{Binding Path=AddItemCommand}" Content="Add Item" />
    <DataGrid ItemsSource="{Binding Path=InventoryCollection}" />
</StackPanel>

すべてをまとめるために、App.xaml.cs の OnStartUp メソッドをオーバーライドします。

public partial class App : Application
{
    protected override void OnStartup(StartupEventArgs e)
    {
        base.OnStartup(e);

        var mainvm = new MainWindowViewModel();
        var window = new MainWindow
        {
            DataContext = mainvm
        };
        window.Show();
    }
}
于 2013-03-15T08:43:25.710 に答える
0

私は2人のコメンターに同意します。データバインディングがこれを行う方法です。最初は非常に複雑に見えることはわかっていますが、コンバーターとコマンドの優れたライブラリをまとめて取得すると、何度も再利用できます。上記のデータ バインディングの例は次のようになります。

XAML で新しいプロジェクトを作成し、メイン ウィンドウにこのコードを貼り付けます。3 つの列を持つデータ グリッドと、新しい行を追加するボタンを追加するだけです。このウィンドウのデータ コンテキストはそれ自体に設定されていることに注意してください。つまり、クラス MainWindow のプロパティは、デフォルトで {Binding} で公開されます。

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        DataContext="{Binding RelativeSource={RelativeSource Self}}"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Button Content="Button" HorizontalAlignment="Left" Margin="432,289,0,0" VerticalAlignment="Top" Width="75" Command="{Binding AddCommand}"/>
        <DataGrid HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Height="274" Width="497" AutoGenerateColumns="False" ItemsSource="{Binding Items}">
            <DataGrid.Columns>
                <DataGridTextColumn Binding="{Binding Field1}"/>
                <DataGridTextColumn Binding="{Binding Field2}"/>
                <DataGridTextColumn Binding="{Binding Field3}"/>
            </DataGrid.Columns>
        </DataGrid>
    </Grid>
</Window>

MainWindow の分離コードです。バインドできる 2 つのプロパティを作成しました。1 つは行として表示されるものの配列を含む項目で、もう 1 つは別の行を追加するために呼び出すことができるコマンドです。

ここの ObservableCollection には、行が変更されたときにバインディング エンジンに通知するメソッドがあるため、グリッドを自分で更新する必要はありません。

 public partial class MainWindow : Window
    {
        public ObservableCollection<Item> Items
        {
            get { return (ObservableCollection<Item>)GetValue(ItemsProperty); }
            set { SetValue(ItemsProperty, value); }
        }
        public static readonly DependencyProperty ItemsProperty = DependencyProperty.Register("Items", typeof(ObservableCollection<Item>), typeof(MainWindow), new PropertyMetadata(null));

        public SimpleCommand AddCommand
        {
            get { return (SimpleCommand)GetValue(AddCommandProperty); }
            set { SetValue(AddCommandProperty, value); }
        }
        public static readonly DependencyProperty AddCommandProperty = DependencyProperty.Register("AddCommand", typeof(SimpleCommand), typeof(MainWindow), new PropertyMetadata(null));

        public MainWindow()
        {
            InitializeComponent();
            Items = new ObservableCollection<Item>();
            AddCommand = new SimpleCommand(para =>
            {
                string nextNumber = Items.Count.ToString();
                Items.Add(new Item() { Field1 = nextNumber, Field2 = nextNumber, Field3 = nextNumber });
            });
        }
    }

Item クラスは、データ グリッド、フィールド 1、2、3 に一致する 3 つのプロパティを持つ非常に単純なクラスです。ここでの依存関係プロパティは、データが変更されたときにグリッドを自分で更新する必要がないことも意味します。

public class Item : DependencyObject
{
    public string Field1
    {
        get { return (string)GetValue(Field1Property); }
        set { SetValue(Field1Property, value); }
    }
    public static readonly DependencyProperty Field1Property = DependencyProperty.Register("Field1", typeof(string), typeof(Item), new PropertyMetadata(null));

    public string Field2
    {
        get { return (string)GetValue(Field2Property); }
        set { SetValue(Field2Property, value); }
    }
    public static readonly DependencyProperty Field2Property = DependencyProperty.Register("Field2", typeof(string), typeof(Item), new PropertyMetadata(null));

    public string Field3
    {
        get { return (string)GetValue(Field3Property); }
        set { SetValue(Field3Property, value); }
    }
    public static readonly DependencyProperty Field3Property = DependencyProperty.Register("Field3", typeof(string), typeof(Item), new PropertyMetadata(null));
}

最後に、コマンド クラスです。これは、すべてのプロジェクトで何度も再利用して、何かをコード ビハインドにリンクすることができます。

public class SimpleCommand : DependencyObject, ICommand
{
    readonly Action<object> _execute;
    readonly Func<object, bool> _canExecute;
    public event EventHandler CanExecuteChanged;

    public SimpleCommand(Action<object> execute, Func<object, bool> canExecute = null)
    {
        _canExecute = canExecute == null ? parmeter => { return true; } : canExecute;
        _execute = execute;
    }
    public virtual void Execute(object parameter)
    {
        _execute(parameter);
    }
    public virtual bool CanExecute(object parameter)
    {
        return _canExecute == null ? true : _canExecute(parameter);
    }
}
于 2013-03-15T08:34:36.500 に答える