全て
| カテゴリ未分類
通常
| 数学
| 投資
| 副業
| 転職・就職
| ブログ
| 株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.25
カテゴリ： WPFC#.NET
C# の WPF (Windows Presentation Foundation) を使って MVVM (Model-View-ViewModel) パターンを実装し、簡単なチャットシステムを作成するサンプルコードを提供します。このサンプルでは、ユーザーがメッセージを入力し、送信ボタンをクリックすることで、チャットウィンドウにメッセージが表示されるシンプルな機能を実装します。
### 1. プロジェクトのセットアップ
1. Visual Studio で新しい WPF アプリケーション プロジェクトを作成します。
### 2. MVVM の基本クラスの作成
#### ViewModelBase.cs
MVVM の基本となる ViewModelBase クラスを作成します。このクラスはプロパティの変更通知機能を提供します。
```csharp
using System.ComponentModel;
namespace ChatApp
{
public class ViewModelBase : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged(string propertyName)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
}
```
### 3. Model の作成
#### MessageModel.cs
チャットメッセージを表現するシンプルなモデルクラスを作成します。
```csharp
namespace ChatApp
{
public class MessageModel
{
public string Text { get; set; }
public string User { get; set; }
}
}
```
### 4. ViewModel の作成
#### ChatViewModel.cs
ViewModel クラスを作成し、ユーザー入力の管理やメッセージのリストの管理を行います。
```csharp
using System.Collections.ObjectModel;
using System.Windows.Input;
namespace ChatApp
{
public class ChatViewModel : ViewModelBase
{
private string _newMessage;
public string NewMessage
{
get { return _newMessage; }
set
{
_newMessage = value;
OnPropertyChanged(nameof(NewMessage));
}
}
public ObservableCollection<MessageModel> Messages { get; set; }
public ICommand SendMessageCommand { get; set; }
public ChatViewModel()
{
Messages = new ObservableCollection<MessageModel>();
SendMessageCommand = new RelayCommand(SendMessage);
}
private void SendMessage()
{
if (!string.IsNullOrWhiteSpace(NewMessage))
{
Messages.Add(new MessageModel { User = "You", Text = NewMessage });
NewMessage = string.Empty;
}
}
}
}
```
### 5. RelayCommand クラスの作成
`ICommand` インターフェースを実装する RelayCommand クラスを作成します。
```csharp
using System;
using System.Windows.Input;
namespace ChatApp
{
public class RelayCommand : ICommand
{
private readonly Action _execute;
private readonly Func<bool> _canExecute;
public event EventHandler CanExecuteChanged;
public RelayCommand(Action execute, Func<bool> canExecute = null)
{
_execute = execute;
_canExecute = canExecute;
}
public bool CanExecute(object parameter)
{
return _canExecute == null || _canExecute();
}
public void Execute(object parameter)
{
_execute();
}
public void RaiseCanExecuteChanged()
{
CanExecuteChanged?.Invoke(this, EventArgs.Empty);
}
}
}
```
### 6. View の作成
#### MainWindow.xaml
XAML ファイルに UI を定義し、`DataContext` を `ChatViewModel` にバインドします。
```xml
<Window x:Class="ChatApp.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="ChatApp" Height="350" Width="525">
<Window.DataContext>
<local:ChatViewModel />
</Window.DataContext>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ListBox Grid.Row="1" ItemsSource="{Binding Messages}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding User}" FontWeight="Bold" />
<TextBlock Text="{Binding Text}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<StackPanel Grid.Row="2" Orientation="Horizontal">
<TextBox Width="400" Text="{Binding NewMessage, UpdateSourceTrigger=PropertyChanged}" />
<Button Content="Send" Command="{Binding SendMessageCommand}" />
</StackPanel>
</Grid>
</Window>
```
### 7. アプリケーションのエントリーポイント
#### MainWindow.xaml.cs
通常のエントリーポイントに特別な設定は不要です。
```csharp
using System.Windows;
namespace ChatApp
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
}
}
```
### 8. 実行
すべてのコードを入力したら、プロジェクトをビルドして実行します。テキストボックスにメッセージを入力し、「Send」ボタンをクリックすると、メッセージがリストボックスに表示されます。
### まとめ
このサンプルコードでは、基本的な MVVM パターンを使ってシンプルなチャットシステムを構築する方法を示しました。これにより、データバインディングやコマンドを利用して、UI とビジネスロジックを分離し、コードの可読性とメンテナンス性を向上させることができます。
お気に入りの記事を「いいね！」で応援しよう
Last updated
2024.08.25 20:53:00
[WPFC#.NET] カテゴリの最新記事
-
`Text="{Binding}"` と記載した場合、デー… 2024.08.25
-
`Text="{Binding}"` と記載した場合、デー… 2024.08.25
-
新しいメッセージが投稿されたら、チャッ… 2024.08.25
【毎日開催】
15記事にいいね！で1ポイント
© Rakuten Group, Inc.
