[{"content":"A collection of commonly used implementation methods and configuration guides for Avalonia development.\nThis section is organized as a reverse lookup guide, allowing you to find solutions based on what you want to achieve, such as \u0026ldquo;changing the window size\u0026rdquo;, \u0026ldquo;customizing buttons\u0026rdquo;, or \u0026ldquo;adjusting layouts\u0026rdquo;.\nSelect a category and find the solution that best matches your goal.\n","date":"5 August 2026","externalUrl":null,"permalink":"/en/recipe/","section":"Developer Recipes","summary":"A collection of commonly used implementation methods and configuration guides for Avalonia development.\nThis section is organized as a reverse lookup guide, allowing you to find solutions based on what you want to achieve, such as “changing the window size”, “customizing buttons”, or “adjusting layouts”.\n","title":"Developer Recipes","type":"recipe"},{"content":"Welcome!\nCurrently, only the Recipe section is available in English. Other blog posts are only available in Japanese.\nThank you for visiting!\n","date":"5 August 2026","externalUrl":null,"permalink":"/en/","section":"henoLog","summary":"Welcome!\nCurrently, only the Recipe section is available in English. Other blog posts are only available in Japanese.\nThank you for visiting!\n","title":"henoLog","type":"page"},{"content":" Set the Size in XAML # \u0026lt;Window xmlns=\u0026#34;https://github.com/avaloniaui\u0026#34; xmlns:x=\u0026#34;http://schemas.microsoft.com/winfx/2006/xaml\u0026#34; x:Class=\u0026#34;YourApp.MainWindow\u0026#34; Width=\u0026#34;800\u0026#34; Height=\u0026#34;600\u0026#34;\u0026gt;\u0026lt;!-- Set the window size here --\u0026gt; \u0026lt;TextBlock Text=\u0026#34;The window has been resized.\u0026#34; HorizontalAlignment=\u0026#34;Center\u0026#34; VerticalAlignment=\u0026#34;Center\u0026#34;/\u0026gt; \u0026lt;/Window\u0026gt; Use the Width property to set the window\u0026rsquo;s width and the Height property to set its height.\nSet the Size in C# # public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); Width = 800; Height = 600; } } ","date":"5 August 2026","externalUrl":null,"permalink":"/en/recipe/window/window-size/","section":"Developer Recipes","summary":"Set the Size in XAML # \u003cWindow xmlns=\"https://github.com/avaloniaui\" xmlns:x=\"http://schemas.microsoft.com/winfx/2006/xaml\" x:Class=\"YourApp.MainWindow\" Width=\"800\" Height=\"600\"\u003e\u003c!-- Set the window size here --\u003e \u003cTextBlock Text=\"The window has been resized.\" HorizontalAlignment=\"Center\" VerticalAlignment=\"Center\"/\u003e \u003c/Window\u003e Use the Width property to set the window’s width and the Height property to set its height.\n","title":"Resize a Window in Avalonia","type":"recipe"},{"content":"","date":"5 August 2026","externalUrl":null,"permalink":"/en/recipe/window/","section":"Developer Recipes","summary":"","title":"Window","type":"recipe"},{"content":" Set the Background Color in XAML # \u0026lt;Window xmlns=\u0026#34;https://github.com/avaloniaui\u0026#34; xmlns:x=\u0026#34;http://microsoft.com\u0026#34; x:Class=\u0026#34;YourApp.MainWindow\u0026#34; Title=\u0026#34;YourApp\u0026#34; Width=\u0026#34;400\u0026#34; Height=\u0026#34;300\u0026#34; Background=\u0026#34;Black\u0026#34;\u0026gt; \u0026lt;!-- Set the background color here --\u0026gt; \u0026lt;TextBlock Text=\u0026#34;The background color has been changed.\u0026#34; HorizontalAlignment=\u0026#34;Center\u0026#34; VerticalAlignment=\u0026#34;Center\u0026#34;/\u0026gt; \u0026lt;/Window\u0026gt; Set the Background property of the Window to a color name or a hexadecimal color code to change the window\u0026rsquo;s background color.\nCommon Colors # You can specify either a color name or a hexadecimal color code for the Background property. The following table lists some commonly used colors for user interfaces.\n色見本 日本語名 カラー名 カラーコード 白 White #FFFFFF 黒 Black #000000 透明 Transparent #00FFFFFF ホワイトスモーク WhiteSmoke #F5F5F5 ライトグレー LightGray #D3D3D3 グレー Gray #808080 ダークグレー DarkGray #A9A9A9 ダークスレートグレー DarkSlateGray #2F4F4F 青 Blue #0000FF ロイヤルブルー RoyalBlue #4169E1 スチールブルー SteelBlue #4682B4 スカイブルー SkyBlue #87CEEB 赤 Red #FF0000 クリムゾン Crimson #DC143C オレンジ Orange #FFA500 ゴールド Gold #FFD700 黄 Yellow #FFFF00 緑 Green #008000 ライム Lime #00FF00 フォレストグリーン ForestGreen #228B22 シーグリーン SeaGreen #2E8B57 ティール Teal #008080 紫 Purple #800080 マゼンタ Magenta #FF00FF ピンク Pink #FFC0CB ブラウン Brown #A52A2A ベージュ Beige #F5F5DC アイボリー Ivory #FFFFF0 ターコイズ Turquoise #40E0D0 ネイビー Navy #000080 ","date":"8 July 2026","externalUrl":null,"permalink":"/en/recipe/window/background/","section":"Developer Recipes","summary":"Set the Background Color in XAML # \u003cWindow xmlns=\"https://github.com/avaloniaui\" xmlns:x=\"http://microsoft.com\" x:Class=\"YourApp.MainWindow\" Title=\"YourApp\" Width=\"400\" Height=\"300\" Background=\"Black\"\u003e \u003c!-- Set the background color here --\u003e \u003cTextBlock Text=\"The background color has been changed.\" HorizontalAlignment=\"Center\" VerticalAlignment=\"Center\"/\u003e \u003c/Window\u003e Set the Background property of the Window to a color name or a hexadecimal color code to change the window’s background color.\n","title":"Change the Window Background Color in Avalonia","type":"recipe"},{"content":" Set the Title in XAML # \u0026lt;Window xmlns=\u0026#34;https://github.com/avaloniaui\u0026#34; xmlns:x=\u0026#34;http://schemas.microsoft.com/winfx/2006/xaml\u0026#34; x:Class=\u0026#34;YourApp.MainWindow\u0026#34; Width=\u0026#34;400\u0026#34; Height=\u0026#34;300\u0026#34; Title=\u0026#34;サンプルアプリ\u0026#34;\u0026gt;\u0026lt;!-- Set the window title here --\u0026gt; \u0026lt;TextBlock Text=\u0026#34;The window title has been changed.\u0026#34; HorizontalAlignment=\u0026#34;Center\u0026#34; VerticalAlignment=\u0026#34;Center\u0026#34;/\u0026gt; \u0026lt;/Window\u0026gt; Set the TitleW property to the text you want to display in the window\u0026rsquo;s title bar.\n","date":"8 July 2026","externalUrl":null,"permalink":"/en/recipe/window/title/","section":"Developer Recipes","summary":"Set the Title in XAML # \u003cWindow xmlns=\"https://github.com/avaloniaui\" xmlns:x=\"http://schemas.microsoft.com/winfx/2006/xaml\" x:Class=\"YourApp.MainWindow\" Width=\"400\" Height=\"300\" Title=\"サンプルアプリ\"\u003e\u003c!-- Set the window title here --\u003e \u003cTextBlock Text=\"The window title has been changed.\" HorizontalAlignment=\"Center\" VerticalAlignment=\"Center\"/\u003e \u003c/Window\u003e Set the TitleW property to the text you want to display in the window’s title bar.\n","title":"Change the Window Title in Avalonia","type":"recipe"},{"content":"開発中のOSSツールXAMLensの開発で、XAML内の{Binding ...}を取得しようとした備忘録です。\nXElementを使ってみる # XAMLは、\u0026lt;Button\u0026gt;などの要素で構成されたツリー構造をもっているので、文字列のままでは要素や属性を簡単に取得できません。そのため、扱うためにいわゆるパース（Parse）をしてみます。C#だとXElementというのを使うとパースができるようなので試してみます。\nvar root = XElement.Parse(xaml); みたいな感じですね。 rootという変数に、パースしたXAMLをXElementとして保持します。これにより、文字列としてではなく、「要素」や「属性」といった構造として扱えるようになりました。\nXAMLのツリー構造 # XAMLは\u0026lt;Button\u0026gt;や\u0026lt;Grid\u0026gt;などの要素が親子関係を持つツリー構造になっています。 コードが\n\u0026lt;UserControl\u0026gt; \u0026lt;StackPanel\u0026gt; \u0026lt;TextBlock /\u0026gt; \u0026lt;Button /\u0026gt; \u0026lt;/StackPanel\u0026gt; \u0026lt;/UserControl\u0026gt; であれば、\nUserControl └── StackPanel ├── TextBlock └── Button のような形です。\n要素（Element）とは？ # そもそも要素というのは、\u0026lt;StackPanel\u0026gt;や\u0026lt;TextBlock\u0026gt;のようなタグを表しています。 なので、\nelement.Elements() のようにすることで、今見ている要素（element）の、子要素（.Elements）を取得することができます。\n属性（Attribute）とは？ # 例えば、\n\u0026lt;TextBlock Text=\u0026#34;{Binding Name}\u0026#34; FontSize=\u0026#34;16\u0026#34;/\u0026gt; なら、属性は\nText FontSize です。\n先ほどの要素（Element）が、TextBlockなら、属性（Attribute）がその中身であるTextなどになりますね。\nそこで\nattribute.Name のようにすると、Textが取得できますし、\nattribute.Value にすると、その中身である{Binding Name}が取得できます。これは中身がバインディングではなくてただのテキストであっても同じです。\nXAMLの中にあるすべての要素を取得 # さっきの\n\u0026lt;TextBlock Text=\u0026#34;{Binding Name}\u0026#34; FontSize=\u0026#34;16\u0026#34;/\u0026gt; ぐらいであれば、特別に何か処理をしなくてもそのまま取得できますが、実際に書くXAMLは\n\u0026lt;StackPanel Margin=\u0026#34;10\u0026#34;\u0026gt; \u0026lt;TextBlock Text=\u0026#34;{Binding Name}\u0026#34; FontSize=\u0026#34;16\u0026#34; Margin=\u0026#34;0,0,0,10\u0026#34;/\u0026gt; \u0026lt;Button Content=\u0026#34;Click Me\u0026#34; Width=\u0026#34;100\u0026#34; Height=\u0026#34;30\u0026#34;/\u0026gt; \u0026lt;/StackPanel\u0026gt; みたいなツリー構造になっていますよね。\nそうすると、ただ一つ取得処理を書いただけでは今いる要素から見て直下の要素しか取得できず、複雑な入れ子構造になっているとすべて判定することができません。\nそこで使うのが再帰です。\n一度で探索処理が終わってしまうのが問題なので、すべての要素の判定が終わるまで繰り返す（先ほどの例のコードで言うと、StackPanelを判定したら、次はTextBlockへ、その次はButtonへ\u0026hellip;のように、現在の要素を判定したら、その子要素に対しても同じ処理を繰り返す）ことですべて取得することができます。\nこういった繰り返し処理にはforeachを使うのが一般的です。\n例としてメソッドで探索したいxamlを受け取り、foreach文で先ほどのコードの{Binding Name}を取得する処理を書いてみます。\nprivate void FindBindings(XElement element) { foreach (var attribute in element.Attributes()) // XAMLの属性をチェック { if (attribute.Value.StartsWith(\u0026#34;{Binding\u0026#34;)) { System.Diagnostics.Debug.WriteLine(attribute.Value); // Bindingの内容を出力 } } foreach (var child in element.Elements()) { FindBindings(child); } } 始めのforeach文で、現在見ている要素が持つ\nText FontSize などの属性を確認します。もし属性に{Bindingという、バインディング文に必須のキーワードが含まれていれば、その属性の内容（attribute.Value）を出力し、含まれていなければ、下のforeach (var child in element.Elements())に移ります。 この中で、子要素（child）が存在する場合は、その子要素に対して再びFindBindings(child);という、先ほど行ったような探索処理をもう一度実行します。こうすることで、子要素のさらに子要素、そのまた子要素\u0026hellip;とすべての要素を探索できます。\n","date":"2026-06-28","externalUrl":null,"permalink":"/posts/avaloniaxelement%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9Fxaml%E3%81%AE%E3%83%84%E3%83%AA%E3%83%BC%E6%8E%A2%E7%B4%A2/","section":"Blog","summary":"開発中のOSSツールXAMLensの開発で、XAML内の{Binding ...}を取得しようとした備忘録です。\nXElementを使ってみる # XAMLは、\u003cButton\u003eなどの要素で構成されたツリー構造をもっているので、文字列のままでは要素や属性を簡単に取得できません。そのため、扱うためにいわゆるパース（Parse）をしてみます。C#だとXElementというのを使うとパースができるようなので試してみます。\n","title":"【Avalonia】XElementを使ったXAMLのツリー探索","type":"posts"},{"content":"","date":"2026-06-28","externalUrl":null,"permalink":"/tags/avalonia/","section":"Tags","summary":"","title":"Avalonia","type":"tags"},{"content":"","date":"2026-06-28","externalUrl":null,"permalink":"/posts/","section":"Blog","summary":"","title":"Blog","type":"posts"},{"content":"","date":"2026-06-28","externalUrl":null,"permalink":"/categories/%E6%8A%80%E8%A1%93%E3%83%A1%E3%83%A2/","section":"Categories","summary":"","title":"技術メモ","type":"categories"},{"content":"AvaloniaでTextBoxに入力した内容をMVVM使ってTextBlockに表示する処理を作ります。\n今回はプロジェクト作成時にMVVMテンプレートで作成した前提で進めます。\nXAMLを作る # 表示するTextBlockと入力するTextBoxを作成します。\n.axamlに以下のコードを書きましょう。\n\u0026lt;Grid\u0026gt; \u0026lt;Grid.RowDefinitions\u0026gt; \u0026lt;RowDefinition Height=\u0026#34;2*\u0026#34;/\u0026gt; \u0026lt;RowDefinition Height=\u0026#34;*\u0026#34;/\u0026gt; \u0026lt;/Grid.RowDefinitions\u0026gt; \u0026lt;TextBlock Text=\u0026#34;{Binding InputText}\u0026#34; Foreground=\u0026#34;White\u0026#34;/\u0026gt; \u0026lt;TextBox Grid.Row=\u0026#34;1\u0026#34; AcceptsReturn=\u0026#34;True\u0026#34; TextWrapping=\u0026#34;Wrap\u0026#34; Text=\u0026#34;{Binding InputText}\u0026#34;/\u0026gt; \u0026lt;/Grid\u0026gt; TextBlockとTextBoxに、Binding InputTextを入れることで入力した値をViewModelからバインド（表示）できるようにします。\nViewModelを作る # コードの全体像は\nprivate string _inputText; public string InputText { get =\u0026gt; _inputText; set { if (_inputText != value) { _inputText = value; OnPropertyChanged(); } } } という形ですね。\n詳細を説明していくと、表示するテキストを保持するstring型の変数_inputTextとTextBoxに表示するテキストを保持するためのプロパティを作ります。\nInputTextのgetで_inputTextを返します。\nvalueにはTextBoxから渡された値が入っているので、その値を_inputTextへ代入しています。\nOnPropertyChanged();というメソットでInputTextプロパティが変更されたことをUIへ通知し、反映されるようになります。 これで入力した内容が表示されるようになっているはずです！\n","date":"2026-05-31","externalUrl":null,"permalink":"/posts/avaloniamvvm%E3%81%A7textbox%E3%81%AE%E5%85%A5%E5%8A%9B%E5%86%85%E5%AE%B9%E3%82%92textblock%E3%81%B8%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B/","section":"Blog","summary":"AvaloniaでTextBoxに入力した内容をMVVM使ってTextBlockに表示する処理を作ります。\n今回はプロジェクト作成時にMVVMテンプレートで作成した前提で進めます。\n","title":"【Avalonia】MVVMでTextBoxの入力内容をTextBlockへ表示する","type":"posts"},{"content":"ウィンドウの上側はTextBox、下側はTextBlockを置きたいなど、\nWPFで要素を上下・左右で別々の要素を置く方法についてまとめます。\n上下（行）で分ける # \u0026lt;Grid.RowDefinitions\u0026gt; \u0026lt;RowDefinition Height=\u0026#34;Auto\u0026#34;/\u0026gt; \u0026lt;RowDefinition Height=\u0026#34;*\u0026#34;/\u0026gt; \u0026lt;/Grid.RowDefinitions\u0026gt; と、Gridの中に入れておいて、上側にTextBoxを置きたいのであれば\n\u0026lt;TextBox Grid.Row=\u0026#34;0\u0026#34; Text=\u0026#34;Hello World\u0026#34;/\u0026gt; 下側にTextBlockなら、\n\u0026lt;TextBlock Grid.Row=\u0026#34;1\u0026#34; Text=\u0026#34;テキスト\u0026#34; FontSize=\u0026#34;16\u0026#34;/\u0026gt; のようにします。\nこの場合、RowDefinition を2つ書いているため、\n上側が Row=\u0026quot;0\u0026quot;、下側が Row=\u0026quot;1\u0026quot; になります。\nHeight= のところには Auto*80 などを指定でき、要素の大きさや余白の取り方を調整できます。\n左右（列）で分ける # \u0026lt;Grid.ColumnDefinitions\u0026gt; \u0026lt;ColumnDefinition Width=\u0026#34;*\u0026#34; /\u0026gt; \u0026lt;ColumnDefinition Width=\u0026#34;Auto\u0026#34; /\u0026gt; \u0026lt;/Grid.ColumnDefinitions\u0026gt; 上下の時とほぼ同じですが、RowではなくColumnになります。\n左側にTextBoxを置きたいのであれば\n\u0026lt;TextBox Grid.Column=\u0026#34;0\u0026#34; Text=\u0026#34;Hello World\u0026#34;/\u0026gt; 右側にTextBlockなら、\n\u0026lt;TextBlock Grid.Column=\u0026#34;1\u0026#34; Text=\u0026#34;テキスト\u0026#34; FontSize=\u0026#34;16\u0026#34;/\u0026gt; になります。\nこれも同じようにWidth=のところにはAuto*80などがありますね。\n","date":"2026-05-26","externalUrl":null,"permalink":"/posts/wpfgrid%E3%81%A7%E8%A6%81%E7%B4%A0%E3%82%92%E4%B8%8A%E4%B8%8B%E5%B7%A6%E5%8F%B3%E3%81%AB%E9%85%8D%E7%BD%AE%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95/","section":"Blog","summary":"ウィンドウの上側はTextBox、下側はTextBlockを置きたいなど、\nWPFで要素を上下・左右で別々の要素を置く方法についてまとめます。\n","title":"【WPF】Gridで要素を上下・左右に配置する方法","type":"posts"},{"content":"","date":"2026-05-26","externalUrl":null,"permalink":"/tags/wpf/","section":"Tags","summary":"","title":"WPF","type":"tags"},{"content":"","date":"2026-05-25","externalUrl":null,"permalink":"/tags/c%23/","section":"Tags","summary":"","title":"C#","type":"tags"},{"content":" Github ダウンロードページ 概要 # 作業画面を邪魔せず、参考画像を常に表示できる軽量オーバーレイツールです。\nウィンドウの切り替え不要で、参考画像を“視界に固定”。\n作業の流れを止めず、集中したままモデリングを続けられます。\nクリック透過モードにより、画像の背後にあるアプリをそのまま操作可能。\nBlenderやVRoid Studioなどの作業を妨げません。\nシンプルな操作で、拡大・縮小・透明度調整にも対応。 トレースや形状確認にも最適です。\n機能一覧 # 画像の最前面表示（オーバレイ） クリック透過モード（背面ウィンドウ操作可能） 画像の移動・拡大縮小 透明度調整 動作環境 # Windows11 使用技術 # C# WPF 工夫した点 # 〇〇の部分で工夫しました。\n特に〇〇の実装は大変でした。\n今後の改善 # ○○を追加したい ○○を改善予定 ","date":"2026-05-25","externalUrl":null,"permalink":"/works/test-app/","section":"Works","summary":" Github ダウンロードページ 概要 # 作業画面を邪魔せず、参考画像を常に表示できる軽量オーバーレイツールです。\nウィンドウの切り替え不要で、参考画像を“視界に固定”。\n作業の流れを止めず、集中したままモデリングを続けられます。\n","title":"OverlayRef","type":"works"},{"content":"C# / WPF / Hugo などで作ったものをまとめています。\n","date":"2026-05-25","externalUrl":null,"permalink":"/works/","section":"Works","summary":"C# / WPF / Hugo などで作ったものをまとめています。\n","title":"Works","type":"works"},{"content":"","date":"2026-05-25","externalUrl":null,"permalink":"/categories/%E5%88%B6%E4%BD%9C%E7%89%A9/","section":"Categories","summary":"","title":"制作物","type":"categories"},{"content":"visualstudio2026で、Avaloniaをインストールし、プロジェクトを作成するまでの手順をまとめます。\nAvalonia for Visual Studio を使う方法もありますが、\n今回はライセンス認証周りでうまく動作しなかったため、\nCLI + Visual Studio の構成で進めます。\nテンプレートを追加 # ターミナル上で、以下のコマンドを入力してみてください。\ndotnet new list avalonia 成功していれば、\nこれらのテンプレートは～一致しました。 などが表示されるはずです。.NETのバージョンなどによって表示が違うと思いますが、「Avalonia」を含むテンプレート一覧が表示されれば問題ありません。次の見出しに進んでください。\nテンプレートが見つかりません。 と表示されてしまった場合Avaloniaのプロジェクトテンプレートを改めて追加しましょう。\n以下のコマンドを入力してください。\ndotnet new install Avalonia.Templates 再度、先ほどのnew list avaloniaをターミナルで実行してみましょう。 正常に追加できているはずです。\nプロジェクトの作成 # プロジェクト自体を作成したいフォルダへcdコマンドで移動します。 私の場合は\ncd E:\\Projects ですね。続いて\ndotnet new avalonia.mvvm -o AvaloniaPractice などと入力して、AvaloniaPracticeという名前のプロジェクトを作成します。\nvisualstudioで開いてみましょう。\n右上にあるプロジェクトやソリューションを開くをクリック、先ほど作成したプロジェクトフォルダにある\nAvaloniaPractice.csproj を開きます。 今回は .sln がうまく開けなかったため、 .csproj を直接開いていますが、.sln を開く方が一般的だと思います。\nフォルダーを開くでも開発は可能ですが、スタートアップアイテムが選択されておらず、そのまま実行が難しいため、プロジェクトやソリューションを開く方が簡単です。 プロジェクト作成画面 作成して、このような画面になっていれば成功です。\n上部の「AvaloniaPractice」と表示されている実行ボタンを押して実行してみましょう。 実行画面 これで成功です。\n","date":"2026-05-24","externalUrl":null,"permalink":"/posts/visualstudio2026avalonia%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E4%BD%9C%E6%88%90/","section":"Blog","summary":"visualstudio2026で、Avaloniaをインストールし、プロジェクトを作成するまでの手順をまとめます。\nAvalonia for Visual Studio を使う方法もありますが、\n今回はライセンス認証周りでうまく動作しなかったため、\nCLI + Visual Studio の構成で進めます。\n","title":"【VisualStudio2026】Avaloniaのインストール\u0026プロジェクト作成","type":"posts"},{"content":"ボタンの上で右クリックメニュー表示ではなく、ウィンドウどこでも右クリックでメニューを表示する方法の備忘録です。\nXAMLでContextMenuを作成する # ウィンドウ全体の当たり判定を付ける # デフォルトだと、\n\u0026lt;Window x:Class=～ Title=\u0026#34;MainWindow\u0026#34; Height=\u0026#34;450\u0026#34; Width=\u0026#34;450\u0026#34;\u0026gt; \u0026lt;Grid\u0026gt; \u0026lt;/Grid\u0026gt; \u0026lt;/Window\u0026gt; とかになっていると思います。 ここの\n\u0026lt;Grid\u0026gt;\u0026lt;/Grid\u0026gt; に当たり判定として\nBackground=\u0026#34;#ffffff\u0026#34; のような背景色を設定しておきます。\nこれが無いとGrid内のTextBlock要素の上を右クリックしたときしかメニューが表示されません。\nGridにContextMenuを追加 # Gridの中に\n\u0026lt;Grid.ContextMenu\u0026gt; \u0026lt;ContextMenu\u0026gt; \u0026lt;MenuItem Header=\u0026#34;メニュー\u0026#34; Click=\u0026#34;\u0026#34;/\u0026gt; \u0026lt;MenuItem Header=\u0026#34;メニュー2\u0026#34; Click=\u0026#34;\u0026#34;/\u0026gt; \u0026lt;/ContextMenu\u0026gt; \u0026lt;/Grid.ContextMenu\u0026gt; を入れましょう。 これで右クリックメニューができました。\nメニュー要素を選択したときの処理 # xaml.csなどで、\nprivate void Menu_Click(object sender, RoutedEventArgs e) { } を追加して、中にそれぞれの処理を書いていきます。\nMenu_ClickはXAMLのClick=\u0026ldquo;\u0026ldquo;と揃えましょう。\n全体のコード # xaml # \u0026lt;Window ～ Title=\u0026#34;MainWindow\u0026#34; Height=\u0026#34;450\u0026#34; Width=\u0026#34;450\u0026#34;\u0026gt; \u0026lt;Grid Background=\u0026#34;#ffffff\u0026#34;\u0026gt; \u0026lt;Grid.ContextMenu\u0026gt; \u0026lt;ContextMenu\u0026gt; \u0026lt;MenuItem Header=\u0026#34;メニュー\u0026#34; Click=\u0026#34;Menu_Click\u0026#34;/\u0026gt; \u0026lt;MenuItem Header=\u0026#34;メニュー2\u0026#34; Click=\u0026#34;Menu2_Click\u0026#34;/\u0026gt; \u0026lt;/ContextMenu\u0026gt; \u0026lt;/Grid.ContextMenu\u0026gt; \u0026lt;TextBlock HorizontalAlignment=\u0026#34;Center\u0026#34; VerticalAlignment=\u0026#34;Center\u0026#34; FontSize=\u0026#34;24\u0026#34; Text=\u0026#34;右クリックでメニュー表示\u0026#34;/\u0026gt; \u0026lt;/Grid\u0026gt; \u0026lt;/Window\u0026gt; xaml.cs # private void Menu_Click(object sender, RoutedEventArgs e) { } private void Click=\u0026#34;Menu2_Click\u0026#34;(object sender, RoutedEventArgs e) { } ","date":"2026-05-04","externalUrl":null,"permalink":"/posts/wpf%E5%8F%B3%E3%82%AF%E3%83%AA%E3%83%83%E3%82%AF%E3%81%A7%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BCcontextmenu%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B/","section":"Blog","summary":"ボタンの上で右クリックメニュー表示ではなく、ウィンドウどこでも右クリックでメニューを表示する方法の備忘録です。\nXAMLでContextMenuを作成する # ウィンドウ全体の当たり判定を付ける # デフォルトだと、\n","title":"【WPF】右クリックでメニュー(ContextMenu)を表示する","type":"posts"},{"content":"WPFでファイル選択ダイアログを表示する方法についてまとめました。\nOpenFileDialogを使う # xaml.csに\nprivate void OpenImage_Click(object sender, RoutedEventArgs e) { } などのメゾットを作ります。 この中に\nvar dig = new Microsoft.Win32.OpenFileDialog(); dig.Filter = \u0026#34;Image Files|*.jpg;*.jpeg;*.png;*.bmp;*.gif\u0026#34;; これでファイルを開く機能を持った新しいダイアログボックスのインスタンスを作成します。\n今回私は画像を取得したかったのでdig.Filterでファイルの拡張子を指定しましたが、これ自体はあってもなくても動作しますので、必要に応じて削除・修正してください。\n後は\nif(dig.ShowDialog() == true) { string imagePath = dig.FileName; MessageBox.Show(imagePath); } のように、string型の変数にファイルのパスを取得して入れておきます。\n","date":"2026-05-04","externalUrl":null,"permalink":"/posts/wpf%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%83%95%E3%82%A9%E3%83%AB%E3%83%80%E9%81%B8%E6%8A%9E%E3%83%80%E3%82%A4%E3%82%A2%E3%83%AD%E3%82%B0%E3%82%92%E4%BD%BF%E3%81%86/","section":"Blog","summary":"WPFでファイル選択ダイアログを表示する方法についてまとめました。\nOpenFileDialogを使う # xaml.csに\n","title":"ファイル選択ダイアログを使う","type":"posts"},{"content":" 環境 # Windows11 visualstudio2026 手順 # サブウィンドウ（開くウィンドウ）の開き中にメインウィンドウ（元のウィンドウ）を操作するかどうかでコードが一部変わります。\n場合に応じて使い分けてみてください。\n操作できないようにする場合 # メインウィンドウとサブウィンドウを作成します。 呼び出されるウィンドウをWindow2として、呼び出すウィンドウ側の.xaml.csの任意の位置に以下のコードを入力してください。\nvar window = new Window2();で window.ShowDialog(); これで実行したときにWindow2（サブウィンドウ）が開かれるはずです。\n操作できるようにする場合 # window.ShowDialogをwindow.Showに変えるだけです。上の操作できない版とほぼ同じですね。\nvar window = new Window2();で window.Show(); これでサブウィンドウ起動中もメインウィンドウを操作できるようになるはずです。\n","date":"2026-04-19","externalUrl":null,"permalink":"/posts/wpf%E3%81%A7%E5%88%A5%E3%81%AE%E3%82%A6%E3%82%A3%E3%83%B3%E3%83%89%E3%82%A6%E3%82%92%E9%96%8B%E3%81%8F%E6%96%B9%E6%B3%95/","section":"Blog","summary":"環境 # Windows11 visualstudio2026 手順 # サブウィンドウ（開くウィンドウ）の開き中にメインウィンドウ（元のウィンドウ）を操作するかどうかでコードが一部変わります。\n場合に応じて使い分けてみてください。\n","title":"WPFで別のウィンドウを開く方法","type":"posts"},{"content":"","date":"2026-01-09","externalUrl":null,"permalink":"/tags/hugo/","section":"Tags","summary":"","title":"Hugo","type":"tags"},{"content":" この記事でやること # HugoのテーマであるStackの背景色をテーマ別に変更する方法をまとめます。\n※初心者が色々試してたまたま動いたやり方であり、正式なやり方か不明です。使用は自己責任でお願いします。\n環境 # Windows11 PowerShell Hugo extended 0.154.2 Stack Git カスタムCSSの作成 # custom.scssを作成します。すでに作成済みの方は、背景色の変更まで進んでください。\n以下のフォルダ構成になるように作成しましょう。\nyourblogname\\assets\\scss\\custom.scss 背景色の変更 # 以下のコードをコピペします。\n:root { --test-color: #f2f5f9; --card-color: #ffffff; } html[data-scheme=\u0026#34;dark\u0026#34;] { --test-color: #181c22; --card-color: #1f242c; } body { background-color: var(--test-color); --card-background:var(--card-color) } ","date":"2026-01-09","externalUrl":null,"permalink":"/posts/stack%E3%81%AE%E8%83%8C%E6%99%AF%E8%89%B2%E3%82%92%E3%83%86%E3%83%BC%E3%83%9E%E5%88%A5%E3%81%AB%E5%A4%89%E6%9B%B4%E3%81%99%E3%82%8B%E3%82%84%E3%82%8A%E6%96%B9hugo/","section":"Blog","summary":"この記事でやること # HugoのテーマであるStackの背景色をテーマ別に変更する方法をまとめます。\n※初心者が色々試してたまたま動いたやり方であり、正式なやり方か不明です。使用は自己責任でお願いします。\n","title":"Stackの背景色をテーマ別に変更するやり方【Hugo】","type":"posts"},{"content":" この記事でやること # Hugoで別タブ指定したうえでリンクを開けるようにする。\n環境 # Windows11 PowerShell Hugo extended 0.154.2 Stack Git タグを使う # Markdown記法だけではそもそも別タブ指定ができません。\nそのため、HTMLを使って指定する必要があります。\n\u0026lt;a href=\u0026#34;リンク\u0026#34; target=\u0026#34;_blank\u0026#34; rel=\u0026#34;noopener\u0026#34;\u0026gt; 表示するテキスト \u0026lt;/a\u0026gt; コピペして、リンクと表示するテキストを変更してください。\nGoldmarkのunsafeを有効にする # Hugoはデフォルト設定だと、生HTMLを描画しないという挙動になっています。\nそのため、先ほどのHTMLを書いただけでは無視されてしまい表示されません。\nではどうするのかというと、Markdownファイルを処理するGoldmarkというエンジンの設定で、直接HTMLコードを記述できるようにする設定であるunsafeを有効にして動かします。\nhugo.tomlに以下のコードを既存のコードの下に付け足してください。\n[markup] [markup.goldmark] [markup.goldmark.renderer] unsafe = true コピペ出来たら、正しく動作しているかテストを行ってみてください。\n","date":"2026-01-08","externalUrl":null,"permalink":"/posts/hugo%E3%81%A7%E5%88%A5%E3%82%BF%E3%83%96%E6%8C%87%E5%AE%9A%E3%81%8C%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%8B%E3%81%A3%E3%81%9F%E3%81%A8%E3%81%8D%E3%81%AE%E5%AF%BE%E5%87%A6%E6%B3%95/","section":"Blog","summary":"この記事でやること # Hugoで別タブ指定したうえでリンクを開けるようにする。\n","title":"Hugoで別タブ指定ができなかったときの対処法","type":"posts"},{"content":" この記事でやること # StackテーマのHugoで新規記事を作成する手順をまとめます。\n環境 # Windows11 PowerShell Hugo extended 0.154.2 Stack Git 新規記事の作成 # 新しい記事を作成する方法は、大きく分けて2つあります。\nコマンドで作成する方法 エクスプローラーで作成する方法\nどちらを使っても問題ありませんので、お好きな方を選んでやってみてください。\n普段コマンドを使い慣れている方はコマンド、\nそうでない方はエクスプローラーから作るのがおすすめです。\nちなみに私はエクスプローラーから作ることが多いです。 コマンドで作成 # hugo newコマンドを使います。PowerShellで以下のコマンドを実行してください。\nhugo new posts/記事名/index.md Hugo的にはこちらの方が正解らしいですね。普段からコマンドを使い慣れている方であれば楽だと思います。\nエクスプローラーで作成 # エクスプローラーで自分のブログがあるフォルダ階層へ移動します。\n私の場合は、\nE:\\Hugo\\henolog\\content になります。このhenologの部分を変更してください。\nデフォルトだと、このフォルダの中にはまだ何も無いかと思います。\n記事はpostsフォルダの中に作成する必要があるのでフォルダを作成していきましょう。\n新規フォルダを作成し、postsに名前を変更してください。 作成できたら、フォルダの中に記事を作成していきましょう。\n直接タイトル.mdを作成すると表示はされますが、記事内に画像を表示する際など後々を考えると、記事ごとにフォルダを作成していくのをお勧めします。\n新しく記事名のフォルダを作成し、その中に新規テキストファイルを作成し\nindex.md に名前を変更してください。これで記事の作成ができました。\n記事の内容を作成 # 記事自体の文章を作成していきましょう。\n先ほど作成したindex.mdに以下の内容をコピペしてください。\n--- title: \u0026#34;記事のタイトル\u0026#34; date: 2026-01-01 draft: true --- ## 見出し ここに文章 ---の部分はfront matterと呼ばれ、記事の設定を書く場所です。\nその下から記事の内容をMarkdownで書いていきましょう。\nローカルで確認 # hugo server -D でサーバを立てて確認してみましょう。\n記事が表示されれば問題ありません。\n","date":"2026-01-07","externalUrl":null,"permalink":"/posts/hugo%E3%81%A7%E6%96%B0%E8%A6%8F%E8%A8%98%E4%BA%8B%E3%82%92%E4%BD%9C%E3%82%8B%E6%96%B9%E6%B3%95windows/","section":"Blog","summary":"この記事でやること # StackテーマのHugoで新規記事を作成する手順をまとめます。\n","title":"Hugoで新規記事を作る方法【Windows】","type":"posts"},{"content":" この記事でやること # Hugoを使ってブログを作成し、Stackテーマを入れてローカルで表示するまでの手順をまとめます。\n※本記事はWindows11環境での手順になります。Mac環境での手順は記載していませんのでご注意ください\n環境 # Windows11 PowerShell Hugo extended 0.154.2 Git Hugoのインストール # Windows版Hugoをダウンロード # まずはHugoを入れていきましょう。 このリンクのWindows版インストーラをダウンロードをしてください。 大量にファイルがありますが、Windowsのextended版を入れてください。\nStackテーマはSCSSという技術を使用しているためextendedと書いているバージョンが必要です。 私は最初にextendedではないものをインストールしてしまい気づくのに相当苦労したので注意してください\u0026hellip;\nダウンロードしたら解凍して任意のフォルダに移動します。 Hugoがインストールできたか確認してみましょう。PowerShellで以下のコマンドを打ってください。\nhugo version そうすると、\nhugo v0.154.2-f66d0944461bf32c4e69588bc3e093f14e4e149d+extended windows/amd64 BuildDate=2026-01-02T16:08:44Z VendorInfo=gohugoio といったものが表示されるかと思います。さっき入れたバージョンと一致していればOKです！そのまま新しいサイトを作成の見出しまで進んでください。\n用語 \u0026lsquo;hugo\u0026rsquo;が認識されない場合 # これはhugo.exeは存在するものの、PATHが通っていない、もしくは今のフォルダにhugo.exeが無いという場合に起こります。\n私の場合PATHに通すことで解決できました。 Windowsキーを押して検索窓にシステムの詳細設定の表示を入力して起動、そうするとシステムのプロパティが表示されるので、下の方にある環境変数と書かれたボタンを押してください。\nそうすると、ユーザー環境変数とシステム環境変数が表示されると思います。\n今回はユーザー環境変数を変えていくので、リストボックスにあるPathを選択。下の編集を押してください。\n新規ボタンからHugo.exeがあるフォルダのフルパスを入力してOKを押してください。\n私の場合は外部ストレージにHugoというフォルダを作成し、その下に置いたので下記のようになりました。\nE:\\Hugo\\hugo_extended_0.154.2_windows-amd64 もう一度\nhugo version をPowerShellで実行するとうまくバージョンが表示されるかと思います。\n新しいサイトを作成 # hugo new site yourblogname このコマンドでHugo用のフォルダ構成が作成されます。今後はこのフォルダを使って記事作成やデザインの変更などを行っていきます。\nyourblognameの部分がブログ名になるので好きな名前で問題ありません。私の場合はhenologにしてあります。\nStackテーマを導入 # 今回はこのブログでも使っているStackというテーマを使っていきます。\nPowerShellで以下のコマンドを入力して実行してください。\ngit clone https://github.com/CaiJimmy/hugo-theme-stack/ themes/hugo-theme-stack これで導入ができました\nローカルで表示確認 # ローカルでサイトを開いてみましょう。\nhugo server -D のコマンドでローカルサーバを起動します。早速localhost:1313にアクセスしてみましょう！ まだ記事やサイドバーを作成していないので、左側のサイト名が表示されていれば問題ありません。\nStackテーマのデザインが表示されれば成功です！\n","date":"2026-01-06","externalUrl":null,"permalink":"/posts/hugo%E5%88%9D%E5%BF%83%E8%80%85%E3%81%8Cwindows11%E3%81%A7stack%E3%83%86%E3%83%BC%E3%83%9E%E3%82%92%E5%85%A5%E3%82%8C%E3%81%A6%E3%81%BF%E3%81%9F%E8%A8%98%E9%8C%B2/","section":"Blog","summary":"この記事でやること # Hugoを使ってブログを作成し、Stackテーマを入れてローカルで表示するまでの手順をまとめます。\n※本記事はWindows11環境での手順になります。Mac環境での手順は記載していませんのでご注意ください\n","title":"Hugo初心者がWindows11でStackテーマを入れてみた記録","type":"posts"},{"content":"","externalUrl":null,"permalink":"/archives/","section":"Archives","summary":"","title":"Archives","type":"archives"},{"content":"","externalUrl":null,"permalink":"/en/authors/","section":"Authors","summary":"","title":"Authors","type":"authors"},{"content":"","externalUrl":null,"permalink":"/en/categories/","section":"Categories","summary":"","title":"Categories","type":"categories"},{"content":"","externalUrl":null,"permalink":"/search/","section":"Search","summary":"","title":"Search","type":"search"},{"content":"","externalUrl":null,"permalink":"/en/series/","section":"Series","summary":"","title":"Series","type":"series"},{"content":"","externalUrl":null,"permalink":"/en/tags/","section":"Tags","summary":"","title":"Tags","type":"tags"},{"content":" 自己紹介 # こんにちは、へのです。\n現在は C# / Avalonia / WPF を中心に、デスクトップアプリ開発をしています。\nこのブログでは開発記録や学習内容を発信しています。\n制作物 # 制作したアプリは Worksページにまとめています。\n→ Worksを見る\n資格・検定 # 💻 情報 # ITパスポート IPA / 2023 基本情報技術者 IPA / 2026 🧑‍💻 プログラミング # プログラミング技能検定 1級 日検 / 2024 プログラミング能力検定（Java）レベル6 2026 情報デザイン検定 1級 日検 / 2025 🛠 その他 # Word / Excel 文書・表計算処理技能認定試験 1級 イータイピングマスター 特級 / 2023 毎日パソコン入力コンクール 初段 文章入力スピード認定 1級 色彩検定 3級 ","externalUrl":null,"permalink":"/about/","section":"henoLog","summary":"自己紹介 # こんにちは、へのです。\n現在は C# / Avalonia / WPF を中心に、デスクトップアプリ開発をしています。\nこのブログでは開発記録や学習内容を発信しています。\n","title":"への / heno-1010","type":"page"}]