全て
| カテゴリ未分類
通常
| 数学
| 投資
| 副業
| 転職・就職
| ブログ
| 株Stock
| VBA
| SharePoint
| REST API
| RenderListDataAsStream
| PowerAutomateDesktop
| Graph API
| PowerApps
| PowerAutomate
| PowerFx
| OfficeScriptオフィススクリプト
| PowerAutomate日時Excel日時相互関係
| PowerShell
| Dataverse
| UiPath
| OneDrive
| LINQ
| VB.NET
| C#.NET
| WPFC#.NET
| Git
| ネットワーク
| Azure
| AWS
| JP1
| セキュリティ
| JavaScript
| Google Cloud
| データベース
| ASP.MET
2024.08.03
カテゴリ： WPFC#.NET
C#のWPFでMVVM（Model-View-ViewModel）パターンを使用するサンプルコードを紹介します。このパターンは、UI（View）とビジネスロジック（Model）を分離し、データバインディングを使用してそれらをViewModelで結び付けることで、コードの再利用性とテスト可能性を向上させることができます。
この例では、シンプルなデータ表示アプリケーションを作成します。データベースから値を取得し、それをテキストボックスに表示するというシナリオを考えます。
### 必要な準備
1. **プロジェクトの作成**: Visual Studioで新しいWPFアプリケーションプロジェクトを作成します。
2. **プロジェクト構造の設定**:
- `Models`フォルダーを作成し、Modelクラスを配置します。
- `ViewModels`フォルダーを作成し、ViewModelクラスを配置します。
- `Views`フォルダーを作成し、View（XAMLファイル）を配置します。
### 手順
#### 1. Modelクラスの作成
Modelクラスは、データやビジネスロジックを表現します。この例では、シンプルなデータクラスを作成します。
```csharp
// Models/DataModel.cs
namespace WpfApp.Models
{
public class DataModel
{
public string DataValue { get; set; }
}
}
```
#### 2. ViewModelクラスの作成
ViewModelクラスは、ModelとViewを結び付ける役割を果たします。
```csharp
// ViewModels/MainViewModel.cs
using System.ComponentModel;
using System.Runtime.CompilerServices;
using WpfApp.Models;
namespace WpfApp.ViewModels
{
public class MainViewModel : INotifyPropertyChanged
{
private DataModel _dataModel;
private string _dataValue;
public MainViewModel()
{
_dataModel = new DataModel
{
DataValue = "Hello, MVVM!"
};
DataValue = _dataModel.DataValue;
}
public string DataValue
{
get => _dataValue;
set
{
_dataValue = value;
OnPropertyChanged();
}
}
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged([CallerMemberName] string name = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
}
}
}
```
#### 3. View（XAMLファイル）の作成
Viewは、UIの見た目を定義します。
```xml
<!-- Views/MainWindow.xaml -->
<Window x:Class="WpfApp.Views.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:vm="clr-namespace:WpfApp.ViewModels"
mc:Ignorable="d"
Title="MainWindow" Height="200" Width="400">
<Window.DataContext>
<vm:MainViewModel />
</Window.DataContext>
<Grid>
<TextBox Text="{Binding DataValue, UpdateSourceTrigger=PropertyChanged}"
HorizontalAlignment="Left" Height="23" Margin="10,10,0,0"
VerticalAlignment="Top" Width="360"/>
</Grid>
</Window>
```
#### 4. アプリケーションのエントリポイントを修正
デフォルトのエントリポイントをViewに変更します。
```csharp
// App.xaml
<Application x:Class="WpfApp.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
StartupUri="Views/MainWindow.xaml">
<Application.Resources>
</Application.Resources>
</Application>
```
### 完成したプロジェクト構造
```
WpfApp
├── App.xaml
├── App.xaml.cs
├── Models
│ └── DataModel.cs
├── ViewModels
│ └── MainViewModel.cs
├── Views
│ └── MainWindow.xaml
│ └── MainWindow.xaml.cs
```
### 実行結果
アプリケーションを実行すると、テキストボックスに`Hello, MVVM!`というテキストが表示されます。このテキストは、ViewModelの`DataValue`プロパティからバインドされています。
この基本的な例をベースに、データベースからのデータ取得やコマンドの実装など、さらに複雑な機能を追加していくことができます。
お気に入りの記事を「いいね！」で応援しよう
Last updated
2024.08.03 10:52:30
[WPFC#.NET] カテゴリの最新記事
-
`Text="{Binding}"` と記載した場合、デー… 2024.08.25
-
`Text="{Binding}"` と記載した場合、デー… 2024.08.25
-
新しいメッセージが投稿されたら、チャッ… 2024.08.25
【毎日開催】
15記事にいいね！で1ポイント
© Rakuten Group, Inc.
