XAML

ご無沙汰しております。ここは本来技術ネタを書く場所だったんですが、方向がずれてきてまた技術に返り咲こうかなと。 昔の記事を見てると色々やってるもんですね。ボタンを動的に配置したい、トリガーでStyleを変更したい、アニメーション云々。 久しぶりにWPFに戻ってまいりました。 昔に比べてDataTemplateの記載は増えた気がする。現場では当たり前のように使われるDataTemplate。動的配置だいだいだいすき。 でも気になることがあるんですよね。DataTemplateの記事を見てるとItemsControl（ListBoxでもいいが）の記載ばかり目に入る。 そうじゃないんだ、DataTe…

はじめに WPFでダイアログ表示を行う方法を備忘録として残したいと思います。 前提 今回の記事はPrismを用いていることが前提となります。 ユーザーコントロール画面を新規作成 まずはポップアップで表示するユーザーコントロール画面を新規に追加します。 プロジェクトを右クリック > 追加 > ユーザーコントロールをクリックします。 Viewsフォルダに新規のページが出来ていることを確認した後、実際の画面を作成していきます。 今回は以下のようなXAMLを書いてみました。 <UserControl x:Class="ExtendSettingsView.Views.HelpPage" xmlns="…

WPFでUIの表示切替のモードを選択するコンボボックスを作成するときに、コンボボックスの値をenumで定義できれば、内部処理の条件判定などがいい感じになるのでは？と思ったので色々と調べてみたところ、PrismのコミッターであるBrian Lagunasさんの解説動画がYoutubeにありました。 マークアップ拡張について、何となくの理解でいると応用が利かなそうなので、細かいところを勉強用にメモを残します。 Brian Lagunasさんの解説動画 詳しい解説やソースコードはBrian Lagunasさんの動画を参照してください。 enumとコンボボックスのバインドについて解説されています。 h…

前回より MAUI の Shell に触れ始めました。.NET MAUI のShell は、基本的に Xamarin.Forms のShell と機能が同じようで、モバイルアプリケーションの基本機能であるナビゲーション・・・平たく言えば、モバイルアプリの画面(ページ)遷移や検索等の機能を統合的に管理し、かつ操作を標準化する機能なようです。今回は複数のページを Shell でどのように遷移するのか、試してみたいと思います。 画面遷移の挙動確認用として、ContentPage をプロジェクトに三つ追加してみます。新規の MAUI プロジェクトを作成し、ソリューションエクスプローラでプロジェクトを選…

先週に引き続き、.NET MAUI の記事です。 今回は ,NET MAUI 新規プロジェクト作成時のイベント処理を ViewModel を設け、MVVM のデータバインディングによる更新へ変更します。 新規プロジェクト作成時、ビューのカウンター処理は、ボタンクリックイベント内で SemanticScreenReader.Announce メソッドで更新されています。 ボタンクリックイベントの実装 SemanticScreenReader.Announce に関する詳細はこちら。 docs.microsoft.com これを ViewModel とのバインドに変更します。 まずはプロジェクトに…

前回に引き続き、.NET MAUI の記事です。 当方、Android・Mac は初心者なので、その辺を考慮して記事を読んで頂けば幸いです。 今回は iOS を選択して、Mac でサンプルを実行します。 まず下準備として、Mac に Visual Studio 2022 for Mac Preview をダウンロード・インストールします。 Visual Studio の MAUI プロジェクトのデバッグ実行をドロップダウンで「iOS Remote Device」に変更して、デバッグ開始します。 「リモートデバイス」をクリックすると、最初にガイダンスが表示されます。以下のアナウンスに従って、Ma…

またまた昨日に引き続き、.NET MAUI の記事です。 昨日、MAUI のサンプルプロジェクトを Android Emulator で実行してみましたが、正直あまりに遅すぎて使い物になりませんでした。そこでいろいろ調べたところ、@amay077さんの記事が見つかりました。 qiita.com Android Studio をインストールして設定する方法、良さ気です。この方法に従ってHyper-V を無効化して試してみたところ、比較的速く起動しました。その後、再度Hyper-Vを有効化して実行すると、あれサクッと起動した？？ただしエミュレーターへのプログラムのロードから実までエラく時間かかりま…

WPF アプリケーションでのデータの持ち方を紹介します。 MVVM の利用有無にかかわらず、アプリケーションのデータをどこでもつか悩みどころです。WPFはフレームワークによるコードの隠蔽化が WinForm より顕著なため、どこからプログラムがスタートするさえ分かりにくいです。正直、とっつきにくいです。 データの持ち方 アプリケーションでデータを管理するときに使用するのが、ひっそりと追加されている App.xaml.cs です。 App.xaml.cs は App.xaml の影に隠れていますが、アプリケーションにとって最も大切なソースです。 App.Xaml.cs は Application…

Windows 11 で全面的に導入された Fluent Design System は個人的には結構好みなので、自作アプリでも同じようなデザインを実現したいのですが意外に難しいです。コントロールだけに限れば Windows App SDK を使うとある程度は対応は可能ですが、まだ使いやすく提供されていない機能もあります。例えば以下は Microsoft Store アプリですが、タイトルバーからして大きく異なっています。全体的に Mica が適用されていて、完全にカスタマイズされたタイトルバーが実装されています。Windows 11 におけるタイトルバーのデザインについては、以下のドキュメン…

Xamarin.FormsアプリをMAUIへ移行する際に遭遇した問題から一つ。 問題 DependencyService.Get<T>()でインタンスを取得できなくなる。 解決方法 型の登録方法を変更し、DependentyAttributeで自動登録する方法から、明示的な手動登録に変更する。 解説 MAUIへ移行すると DependencyService.Get<T>() した際にインスタンスを取得できなくなると思います。 型の自動登録は、DependencyService.Get<T>()した際にDependencyServiceが未初期化なら、AssemblyからDepenedency属…

ヒートマップのサンプルプログラムをScottPlotで作成しました。以下を参考にしています。資料1*1、資料2*2、資料3*3 サンプルプログラム1 サンプルプログラム2 環境 ファイルの登録場所 サンプルプログラム1 ヒートマップとは数値データを色に対応させて表示し、温度分布をわかりやすくした図です。ScottPlotでは配列(0,0)の数値データを左上の座標から色で表示します。 カラーマップで数値と色を対応させています。デフォルトはViridis です。 表示データの最大値、最小値がカラーマップの両端の色となります。 ヒートマップの横に表示するカラーマップをカラーバーと呼んでいます。 図1…

あらすじ WinUIにはコントロールに適用できるスタイルというものがあり、色や形などのテンプレートとして利用できる。 スタイルにはデフォルトで定義されているものもあるが、ドキュメントなどは存在せず、検索性が悪い。 自分用に調べてまとめておこうと思った。 とりあえずボタンのスタイルのみを調べた。 結果 以下は使いそうなものだけまとめたもの。 名前 説明 画像 AccentButtonStyle アクセントボタン 色がつく NavigationBackButtonNormalStyle 戻る動作を示す左矢印ボタン NavigationViewOverflowButtonStyleWhenPaneO…

SnackBar XAML の設定 （最適ではないけど）動作する最小サンプル Prism の DI を使った例 参考 WPF の GUI ライブラリ「WPF UI」を使ってみる機会があったので、基本的な使い方をメモ。 シリーズの２つ目です。 WPF UI（UI ライブラリ）の使い方（１） 今回の記事の内容は、公式のコンテンツに掲載がありません。内容に間違いがあるかもしれません。（SnackBar の使い方を説明する記事が全然ない……） SnackBar Snackbar は、アプリケーション内で完結する Toast のような機能です。スマートフォンゲームでは、なんらかのイベントやデイリークエス…

メモ： Segoe MDL2 アイコン フォント が Windows１０で使える。 Segoe Fluent アイコン フォント が Windows１１で使える。 Fluent の方は、ダウンロードすればWindows１０でも使えるっぽい。 XAMLで記述する際、下記のようにフォントを指定して利用する。 // Win11 <FontIcon FontFamily="Segoe Fluent Icons" Glyph="&#xE700;"/> // Win10 <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE700;"/> 下記のようにして…

はじめに GUIを含んだアプリケーションのアーキテクチャにMVVMモデルがあります。 自分でWindowsデスクトップアプリケーションを作るにあたり、正しくMVVMモデルに則ったクラス設計をしたいと思いました。 しかしテンプレートのプロジェクトを立ち上げた時点で作成されるクラスがMVVMでいうところの何に当てはまるのか分からなかったので調査しました。 幸い、Microsoftの公式リポジトリに参考になるプロジェクトを発見したので、そのアプリのアーキテクチャを見ていきたいと思います。 MVVMの依存関係 分析するリポジトリ Windows-appsample-customers-orders-d…

インストールと初期設定 補足（直接指定） 補足（テーマの指定） XAML からライブラリを利用するための設定 システムのテーマを適用する メニュー 参考 WPF の GUI ライブラリ「WPF UI」を使ってみる機会があったので、基本的な使い方をメモ。 WPF の GUI ライブラリは、以下のようなものが色々あります。（2023/08/09 時点） Material Design 13.9k Star MashApps.Metro 8.8k Star WPF UI 4.7k Star ModernWpf 3.8k Star もちろん他にも GUI のライブラリは、種類があると思います。GitH…

もくじ https://tera1707.com/entry/2022/02/06/144447#WinUI3 やりたいこと 下記のページのやり方で、WinUI3でローカライズできることが分かった。 https://tera1707.com/entry/2022/03/24/224855 分かったのだが、ローカライズのためにResource.reswに書いた文言は、どこに出力されているのか？知りたい。 結論 色々調べた限り、下記だった。 パッケージPJでパッケージ＆インストールしたアプリの場合 パッケージの中のresources.priに入る。 中身は、ただダブルクリックするだけでは開けない(…

WinUI3を使用したデスクトップアプリで、指定したフォルダ内のファイルの追加、削除を検知します。 今回は以下の２通りの方法を紹介します。 フォルダ内のファイルを列挙し、ファイル名のリストを保持しておく。 ファイルの追加・削除・変更をトリガーにしたイベントを作成する。 プロジェクトの作成 VisualStudioの新しいプロジェクトの作成から空のアプリ、パッケージ化(デスクトップのWinUI3)のプロジェクトを作成します。 WinUI3のプロジェクトテンプレートを使用する そのままビルドすると、ボタンのみの画面が表示されます。 初期状態 ここに機能を追加していきます。 1. フォルダ内のファイ…

概要 Visual Basic + .NET 7 WPFでNumericUpDownコントロール(スピンボタン)を使おうと思ったらなかった。 .NET 7勉強ついでにそれっぽいユーザーコントロールを作ることにした。 詳細 環境 Visual Studio 2022 バージョン17.6.5 Visual Basic 2019 バージョン16.9 .NET SDK バージョン7.0.306 WPFアプリケーション コントロール名: UserControl1 目標仕様 整数値のアップダウン操作ができること UserControl1.xaml テキストボックスとスクロールバーを配置。 ここで、スクロー…