全て
| カテゴリ未分類
通常
| 数学
| 投資
| 副業
| 転職・就職
| ブログ
| 株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
新しいメッセージが投稿されたら、チャットウィンドウにリアルタイムで追加表示されるようにするサンプルを提供します。この機能は、MVVM パターンを使ってデータバインディングを活用することで実現します。先ほどの例に少し手を加えることで、メッセージがリストに追加された際に UI に自動的に反映されるようにします。
### 必要なセットアップ
- MVVM パターン
- ObservableCollection でのデータバインディング
### 1. ViewModel の実装
新しいメッセージが投稿されると `Messages` コレクションにメッセージが追加され、その変更が `ListBox` にバインドされるようにします。
#### ChatViewModel.cs
```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;
}
}
}
}
```
この `ChatViewModel` クラスでは、以下の操作を行っています:
1. **NewMessage プロパティ**: 新しいメッセージが入力された際に使用します。
2. **Messages プロパティ**: メッセージのリストを保持し、UI にバインドされる `ObservableCollection` として定義します。
3. **SendMessageCommand**: ボタンがクリックされた際にメッセージを送信するコマンド。
4. **SendMessage メソッド**: `NewMessage` が空でない場合、`Messages` コレクションに新しいメッセージを追加します。
### 2. 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);
}
}
}
```
### 3. View の実装
次に、UI (View) を構成し、`ChatViewModel` を `DataContext` に設定します。
#### MainWindow.xaml
以下は、チャットメッセージを表示するための `ListBox` と、メッセージを入力するための `TextBox` および送信するための `Button` を含む XAML です。
```xml
<Window x:Class="ChatApp.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:ChatApp"
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 -->
<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>
```
- `Window.DataContext` で `ChatViewModel` を設定し、バインディングが機能するようにします。
- `ListBox` の `ItemsSource` プロパティを `Messages` にバインドします。これにより、メッセージが追加されるたびに UI が自動的に更新されます。
### 4. プログラムの実行
上記のコードをすべて実装し、プロジェクトをビルドして実行します。テキストボックスにメッセージを入力し、「Send」ボタンをクリックするたびに、メッセージが `ListBox` に追加表示されます。
### まとめ
このサンプルでは、`ObservableCollection` を使って新しいメッセージが追加されると自動的に UI に反映されるチャットシステムを実装しました。MVVM パターンを活用することで、ビジネスロジックと UI ロジックの分離が明確になり、保守性が向上します。
お気に入りの記事を「いいね！」で応援しよう
Last updated
2024.08.25 20:56:44
[WPFC#.NET] カテゴリの最新記事
-
`Text="{Binding}"` と記載した場合、デー… 2024.08.25
-
`Text="{Binding}"` と記載した場合、デー… 2024.08.25
-
C# の WPF (Windows Presentation Foundat… 2024.08.25
【毎日開催】
15記事にいいね！で1ポイント
© Rakuten Group, Inc.
