kazukazu0333 / memo

0 stars 0 forks source link

メモ #1

Open kazukazu0333 opened 1 year ago

kazukazu0333 commented 1 year ago

ViewのXAMLコードの例を以下に示します。この例では、カメラから取得した画像を表示するためのImage要素、ラインプロファイルを表示するためのChart要素、および撮影ボタンを持つStackPanel要素が表示されています。このViewは、プリズムのモジュール、ビュー、およびビューモデルの要件に準拠しています。

<UserControl x:Class="YourNamespace.Views.CameraAdjustmentView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:prism="http://www.codeplex.com/prism"
             prism:ViewModelLocator.AutoWireViewModel="True">
    <Grid>
        <Image Source="{Binding CapturedImage}" Stretch="Fill" />
        <DockPanel LastChildFill="True" Margin="10">
            <Label Content="Chart" DockPanel.Dock="Top" />
            <charting:Chart Title="Line Profile" Margin="10">
                <charting:LineSeries ItemsSource="{Binding LineProfile}" />
            </charting:Chart>
        </DockPanel>
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="10">
            <Button Content="One Shot" Margin="10" Command="{Binding OneShotCommand}" />
            <Button Content="Continuous" Margin="10" Command="{Binding ContinuousCommand}" />
        </StackPanel>
    </Grid>
</UserControl>

この例では、ビュー・モデルにプロパティとしてバインドするための各種要素が含まれています。例えば、ImageコントロールのSourceプロパティにCapturedImageをバインドすることで、シングルショットまたは連続ショットのフレームから取得した画像を表示することができます。また、ラインプロファイルを表示するために、Chartコントロールを使用し、ChartのLineSeriesにLineProfileをバインドします。ビュー・モデルでコマンドを設定することで、シングルショットと連続撮影ボタンも実装できます。

kazukazu0333 commented 1 year ago

以下は、あなたが要求した要件に基づいた ViewModel の例です。必要に応じて調整してください。

using Prism.Commands;
using Prism.Mvvm;

namespace CameraAdjustment.ViewModels
{
    public class MainViewModel : BindableBase
    {
        private BitmapImage _capturedImage;
        public BitmapImage CapturedImage
        {
            get { return _capturedImage; }
            set { SetProperty(ref _capturedImage, value); }
        }

        private double _zoomRatio;
        public double ZoomRatio
        {
            get { return _zoomRatio; }
            set { SetProperty(ref _zoomRatio, value); }
        }

        private int _imageOffsetX;
        public int ImageOffsetX
        {
            get { return _imageOffsetX; }
            set { SetProperty(ref _imageOffsetX, value); }
        }

        private int _imageOffsetY;
        public int ImageOffsetY
        {
            get { return _imageOffsetY; }
            set { SetProperty(ref _imageOffsetY, value); }
        }

        private ObservableCollection<LineProfileViewModel> _lineProfiles = new ObservableCollection<LineProfileViewModel>();
        public ObservableCollection<LineProfileViewModel> LineProfiles
        {
            get { return _lineProfiles; }
            set { SetProperty(ref _lineProfiles, value); }
        }

        private bool _isContinuousCaptureEnabled;
        public bool IsContinuousCaptureEnabled
        {
            get { return _isContinuousCaptureEnabled; }
            set { SetProperty(ref _isContinuousCaptureEnabled, value); }
        }

        public DelegateCommand CaptureSingleImageCommand { get; }
        public DelegateCommand CaptureContinuousImagesCommand { get; }
        public DelegateCommand ZoomInCommand { get; }
        public DelegateCommand ZoomOutCommand { get; }
        public DelegateCommand<Point> ShowLineProfileCommand { get; }
        public DelegateCommand<MouseEventArgs> UpdateOffsetCommand { get; }

        private ICaptureService _captureService;

        public MainViewModel(ICaptureService captureService)
        {
            // キャプチャーサービスインタフェースの設定
            _captureService = captureService;

            // キャプチャー実行コマンドの定義
            CaptureSingleImageCommand = new DelegateCommand(ExecuteCaptureSingleImage);
            CaptureContinuousImagesCommand = new DelegateCommand(ExecuteCaptureContinuousImages);
            ZoomInCommand = new DelegateCommand(ExecuteZoomIn);
            ZoomOutCommand = new DelegateCommand(ExecuteZoomOut);
            ShowLineProfileCommand = new DelegateCommand<Point>(ExecuteShowLineProfile);
            UpdateOffsetCommand = new DelegateCommand<MouseEventArgs>(ExecuteUpdateOffset);
        }

        private void ExecuteCaptureSingleImage()
        {
            var image = _captureService.CaptureSingleImage();
            CapturedImage = ConvertToBitmapImage(image);
        }

        private void ExecuteCaptureContinuousImages()
        {
            // start and stop continuous capture
        }

        private void ExecuteZoomIn()
        {
            // zoom in
        }

        private void ExecuteZoomOut()
        {
            // zoom out
        }

        private void ExecuteShowLineProfile(Point point)
        {
            // add line profile view model
            // show line profile view
        }

        private void ExecuteUpdateOffset(MouseEventArgs e)
        {
            // update image offest
        }

        private BitmapImage ConvertToBitmapImage(Bitmap image)
        {
            // convert bitmap to bitmapimage
        }
    }

    public class LineProfileViewModel
    {
        public List<Point> Points { get; set; }
        public List<double> Values { get; set; }
    }
}

以上が ViewModel の例です。ご参考になると思います。

kazukazu0333 commented 1 year ago
  1. Visual Studio 2019を開いて、新しいWPFアプリケーションを作成します。
  2. プロジェクトの参照に、Prism.CoreおよびPrism.Wpfを追加します。
  3. MVVMデザインパターンを使用するために、ViewModelのベースクラスとしてBindableBaseを使用するため、Prism.Mvvmを追加します。
  4. アプリケーションのMainWindow.xamlにGridを追加し、各ボタンを配置します。
  5. MainWindow.xaml.csで、Gridに対応する ViewModel オブジェクトをインスタンス化します。
  6. ViewModel.csファイルを作成して、BindableBaseから継承してください。
  7. ViewModel.csファイルで、INotifyPropertyChangedインターフェースを実装し、プロパティの変更を通知するためにPropertyChangedイベントを使用します。
  8. ViewModel.csファイル内に、StartCaptureCommand、StopCaptureCommand、SaveImageCommandなど、UIから操作されるメソッドを追加します。
  9. ViewModel.csファイルに、カメラで取得したイメージを保持するための変数を追加します。
  10. ViewModel.csファイルに、拡大縮小のための変数を追加します。
  11. ViewModel.csファイルに、ラインプロファイルのための変数を追加します。
  12. ViewModel.csファイルに、画像移動のための変数を追加します。
  13. 拡大縮小、ラインプロファイル、画像移動など、UI上で扱われるプロパティを宣言してください。
  14. ViewModel.csファイルに、カメラからイメージをキャプチャするためのメソッドを追加します。
  15. ViewModel.csファイルに、キャプチャしたイメージを保存するためのメソッドを追加します。
  16. ViewModel.csファイルに、マウスイベントのハンドラを追加して、拡大縮小、ラインプロファイル、画像移動などの機能を実装します。
  17. ボタンを識別するために、コマンドを追加してください。
  18. XAMLコードで、ViewModelにバインドするUI要素を設定します。

上記に述べた手順にしたがって、C#コードを作成し、それらを相互に結び付けて、カメラ調整用画面を作成してください