XAML のデザイン モード

2025年7月13日 — さかぽん

WPF をはじめとする XAML 系のアプリを Visual Studio や Blend で開発するとき、
例えば「レイアウトの作業時はサンプルのデータを表示させたい」ということがあります。

このような場合に、DesignerProperties.GetIsInDesignMode メソッドを使うことが考えられます。
このメソッドは XAML の編集画面でアプリが実行されているときに戻り値が true となるため、
デザイン時と非デザイン時でアプリの挙動を切り替えることができます。
ただし、このメソッドでは引数に DependencyObject を受け付けるため、Model 層では使いづらいです。

そこで、デザイン時のみ有効となる d: を使います。
例えば Model 層のクラスに bool 型の IsForDesign プロパティを用意しておき、XAML 上で
<local:AppModel d:IsForDesign="True"/>
と設定することで、挙動を切り替えることができます。
また、d: は UI 要素自体にも指定することができ、デザイン時のみ配置することができます。

namespace ContentWpf
{
public class AppModel
{
public bool IsForDesign { get; set; }
}
}
view raw AppModel.cs hosted with ❤ by GitHub
<Window x:Class="ContentWpf.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml&quot;
xmlns:d="http://schemas.microsoft.com/expression/blend/2008&quot;
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006&quot;
xmlns:local="clr-namespace:ContentWpf"
xmlns:system="clr-namespace:System;assembly=System.Runtime"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Window.DataContext>
<local:AppModel d:IsForDesign="True"/>
</Window.DataContext>
<Grid>
<d:TextBlock Text="{x:Static system:Environment.CurrentDirectory}"/>
</Grid>
</Window>
view raw MainWindow.xaml hosted with ❤ by GitHub

利用例： DQBG: DQ’S BATTLEGROUNDS

参照

カテゴリー: クライアント技術. タグ: , . 1 Comment »

XAML 系の Tips 集

2025年7月9日 — さかぽん

WPF をはじめとする XAML 系技術についての Tips を集めたものです。

XAML の記述

その他

  • マウスなどのイベントを下の階層の UI 要素で発生させたい場合、IsHitTestVisible プロパティを False に設定します。
  • 同じプロパティに対して、データ バインディングとアニメーションの両方を設定してはいけません。
  • ClickOnce インストーラーは、そのままローカルのインストーラーとしても使えます。
    • .application または setup.exe をローカルで直接実行すればよいです。

次回: XAML のデザイン モード

参照

カテゴリー: クライアント技術. タグ: , . Leave a Comment »

Roslyn の構文解析を使ってデバッガーを自作する

2018年12月23日 — さかぽん

// C# Advent Calendar 2018 の 23 日目の記事です。

デバッガーのようなものを自作してみました。

動機

  • 普段は Visual Studio を使っているが、デバッグ時に手動でステップ実行するのが面倒
    • ループなどでステップ数が多い場合
    • 分岐の様子や変数の状態を軽くチェックしたい場合

解決案

  • ステップの時間間隔だけを指定して、デバッガーを自動で実行させる
    • 変数の一覧が表示される
    • 時間間隔をリアルタイムで調節できる
  • .NET Compiler Platform (Roslyn) の構文解析の機能を使い、各ステップの間にデバッグ用のコードを差し込めば実現できそう

結果

というわけで、WPF でプロトタイプ「Tick-tack Debugger」を作ってみた結果、このようになりました。
例として、ニュートン法で平方根を求めています。 (クリックで拡大)

 

解説

以下は概略の技術解説です。
WPF アプリを作成する前に、まず .NET Framework 上のコンソール アプリで実験してみます。
C# の構文解析を使うには、NuGet で Microsoft.CodeAnalysis.CSharp をインストールします。

デバッグ対象となるソースコードにデバッグ コードを挿入し、それを動的にコンパイルして実行する、という方針です。
コンソール アプリのソースコードを以下に示します (全体のソリューションは SyntaxTreeSample にあります)。

using System;
using System.CodeDom.Compiler;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Text;
using System.Threading;
using DebuggerLib;
namespace DebuggerConsole
{
class Program
{
const string SourcePath = @"..\..\..\NumericConsole\Program.cs";
const string GeneratedPath = @"Program.g.cs";
static void Main(string[] args)
{
// Generates the code for debugging.
var sourceCode = File.ReadAllText(SourcePath);
var generatedCode = SyntaxHelper.InsertBreakpoints(sourceCode);
File.WriteAllText(GeneratedPath, generatedCode, Encoding.UTF8);
// Compiles and loads the assembly.
var provider = CodeDomProvider.CreateProvider("CSharp");
var compilerOption = new CompilerParameters(new[] { "System.Core.dll", "DebuggerLib.dll" }) { GenerateExecutable = true };
var compilerResult = provider.CompileAssemblyFromFile(compilerOption, GeneratedPath);
if (compilerResult.Errors.HasErrors) return;
// Registers the action for breakpoints.
DebugHelper.InfoNotified += (spanStart, spanLength, variables) =>
{
Console.WriteLine(string.Join(", ", variables.Select(v => $"{v.Name}: {v.Value}")));
Console.WriteLine(sourceCode.Substring(spanStart, spanLength));
Thread.Sleep(1000);
};
// Calls the Main method.
var entryPoint = compilerResult.CompiledAssembly.EntryPoint;
entryPoint.Invoke(null, new object[] { new string[0] });
}
}
}
view raw Program.cs hosted with ❤ by GitHub
using System;
using System.Collections.Generic;
using System.Linq;
using Microsoft.CodeAnalysis;
using Microsoft.CodeAnalysis.CSharp;
using Microsoft.CodeAnalysis.CSharp.Syntax;
using Microsoft.CodeAnalysis.Text;
using DebugStatement = System.ValueTuple<Microsoft.CodeAnalysis.CSharp.Syntax.StatementSyntax, string[]>;
namespace DebuggerConsole
{
public static class SyntaxHelper
{
public static string InsertBreakpoints(string sourceCode)
{
var root = ParseText(sourceCode);
var method = root.DescendantNodes()
.OfType<MethodDeclarationSyntax>()
.FirstOrDefault(m => m.Identifier.ValueText == "Main")
?? throw new FormatException("The Main method is not found.");
var statements = DetectStatements(method);
var result = sourceCode;
foreach (var (statement, variables) in statements.Reverse())
{
var (span, debugIndex) = GetSpan(statement);
result = result.Insert(debugIndex, $"DebugHelper.NotifyInfo({span.Start}, {span.Length}{ToParamsArrayText(variables)});\r\n");
}
return result.Insert(root.Usings.FullSpan.End, "using DebuggerLib;\r\n");
}
public static CompilationUnitSyntax ParseText(string text)
{
var tree = CSharpSyntaxTree.ParseText(text);
var diagnostics = tree.GetDiagnostics().ToArray();
if (diagnostics.Length > 0) throw new FormatException(diagnostics[0].ToString());
return tree.GetCompilationUnitRoot();
}
public static DebugStatement[] DetectStatements(MethodDeclarationSyntax method)
{
var statements = new List<DebugStatement>();
DetectStatements(method.Body, statements, new List<(string, SyntaxNode)>());
return statements.ToArray();
}
static void DetectStatements(SyntaxNode node, List<DebugStatement> statements, List<(string name, SyntaxNode scope)> variables)
{
// Adds variables.
if (node is VariableDeclarationSyntax varSyntax)
{
var varNames = varSyntax.Variables.Select(v => v.Identifier.ValueText).ToArray();
var scope = ((node.Parent is LocalDeclarationStatementSyntax) ? node.Parent : node)
.Ancestors()
.First(n => n is StatementSyntax);
variables.AddRange(varNames.Select(v => (v, scope)));
}
// Maps variables to the statement.
if ((node is StatementSyntax statement) &&
!(node is BlockSyntax) &&
!(node is BreakStatementSyntax))
statements.Add((statement, variables.Select(v => v.name).ToArray()));
// Recursively.
foreach (var child in node.ChildNodes())
DetectStatements(child, statements, variables);
// Maps variables to the last line of the block.
if (node is BlockSyntax block)
statements.Add((block, variables.Select(v => v.name).ToArray()));
// Clears variables out of the scope.
if (node is StatementSyntax)
for (var i = variables.Count - 1; i >= 0; i--)
if (variables[i].scope == node)
variables.RemoveAt(i);
else
break;
}
static (TextSpan, int) GetSpan(StatementSyntax statement)
{
switch (statement)
{
case ForStatementSyntax f:
var span = new TextSpan(f.ForKeyword.Span.Start, f.CloseParenToken.Span.End - f.ForKeyword.Span.Start);
return (span, statement.FullSpan.Start);
case BlockSyntax b:
return (b.CloseBraceToken.Span, b.CloseBraceToken.FullSpan.Start);
default:
return (statement.Span, statement.FullSpan.Start);
}
}
static string ToParamsArrayText(string[] variables) =>
string.Concat(variables.Select(v => $", new Var(\"{v}\", {v})"));
}
}
view raw SyntaxHelper.cs hosted with ❤ by GitHub

SyntaxHelper クラスでは、デバッグ対象の C# ソースコードを構文ツリー (SyntaxTree) に変換して走査し、
各ステートメントの前にデバッグ用のコード行を挿入していきます。

CSharpSyntaxTree.ParseText メソッドを使うことで、ソースコードを構文ツリーに変換できます。
また、メソッド・ステートメント・式など、すべてのノードを表す親クラスは SyntaxNode クラスであり、

  • Parent プロパティ: 親
  • Ancestors メソッド: 祖先
  • ChildNodes メソッド: 子
  • DescendantNodes メソッド: 子孫

が存在することを知っておけば、だいたいの探索ができるでしょう。

この他に、デバッグ用のコードから呼び出されるメソッドを定義するクラス ライブラリとして DebuggerLib を作成しています。
各ステートメントの位置、およびその直前で存在する変数とその値を通知するために、このライブラリを経由させます。

Program クラスでは、生成されたデバッグ用のソースコードをファイルに保存したら、
System.CodeDom.Compiler 名前空間の CodeDomProvider を使ってこれをコンパイルし、
そのエントリ ポイント (Main メソッド) を呼び出します。
また、デバッグ コードが実行されたときのイベントハンドラーを登録しておき、
Thread.Sleep メソッドを使って、指定した時間だけ停止させます。

これで、デバッグ対象の元のソースコードが次の Program.cs だとすると、
デバッグ用のソースコードとして下の Program.g.cs が生成されます。

using System;
namespace NumericConsole
{
class Program
{
static void Main(string[] args)
{
// Square root by the Newton's method.
var a = 5.0;
var x = a;
for (var i = 0; i < 100; i++)
{
var xi = (x + a / x) / 2;
if (x == xi) break;
x = xi;
}
Console.WriteLine(x);
}
}
}
view raw Program.cs hosted with ❤ by GitHub
using System;
using DebuggerLib;
namespace NumericConsole
{
class Program
{
static void Main(string[] args)
{
DebugHelper.NotifyInfo(188, 12);
// Square root by the Newton's method.
var a = 5.0;
DebugHelper.NotifyInfo(214, 10, new Var("a", a));
var x = a;
DebugHelper.NotifyInfo(240, 29, new Var("a", a), new Var("x", x));
for (var i = 0; i < 100; i++)
{
DebugHelper.NotifyInfo(302, 25, new Var("a", a), new Var("x", x), new Var("i", i));
var xi = (x + a / x) / 2;
DebugHelper.NotifyInfo(347, 19, new Var("a", a), new Var("x", x), new Var("i", i), new Var("xi", xi));
if (x == xi) break;
DebugHelper.NotifyInfo(384, 7, new Var("a", a), new Var("x", x), new Var("i", i), new Var("xi", xi));
x = xi;
DebugHelper.NotifyInfo(405, 1, new Var("a", a), new Var("x", x), new Var("i", i), new Var("xi", xi));
}
DebugHelper.NotifyInfo(422, 21, new Var("a", a), new Var("x", x));
Console.WriteLine(x);
DebugHelper.NotifyInfo(453, 1, new Var("a", a), new Var("x", x));
}
}
}
view raw Program.g.cs hosted with ❤ by GitHub

作成したコンソール アプリを実行すると、次の図のようになります (時間間隔は 0.3 秒)。

 

以上をもとに、WPF アプリでデバッグ ツールを作成しました。
左側の C# ソースコードの部分は TextBox で、編集もできます。
デバッグ実行時は、各ステートメントを選択状態にすることでハイライトしています。
右側の変数一覧が表示される部分は DataGrid です。

(図は円周率を求める例)

今回は上記の方法でプロトタイプを作ってみましたが、
デバッグ コードの挿入やコンパイルに関しては、よりスマートな方法があるのではないかと思います。

注意点
  • 考えられうるすべてのステートメントには対応できていません。また、Main メソッドしか構文解析していません。
  • コンパイル時に生成されるアセンブリ (EXE) は、%TEMP% フォルダー (ユーザーの AppData\Local\Temp) に保存されていきます。
  • TextBox で、IsInactiveSelectionHighlightEnabled を True に設定しても利かないことがあります。
    また、選択状態のハイライトがずれることがあります。
    RichTextBox で Run などを使うのがよいかもしれません。

 

作成したサンプル
バージョン情報
参照
カテゴリー: .NET Framework, クライアント技術, ツール, プログラミング言語. タグ: , , . Leave a Comment »

SIR 感染症モデルのシミュレーター

2017年12月19日 — さかぽん

// この投稿は ライフゲーム Advent Calendar 2017 の 19 日目の記事です。

2017年11月11日の稲葉寿先生還暦記念祝賀研究集会「数理人口学・数理疫学・構造化個体群モデル」で講演してきました。
そのときに発表したシミュレーション ツールを紹介します。

数理生物学で「SIR 感染症モデル」という数理モデルがあり、

S(t): 未感染者の人口
I(t): 感染者の人口
R(t): 回復者の人口

としたとき、

S’ = θR – βSI
I’ = βSI – γI
R’ = γI – θR

のような微分方程式系で表されるものを指します。ここで、各定数は

β: 感染率
γ: 回復率
θ: 免疫喪失率

を表します (このように免疫喪失を考慮する場合は SIRS ともいう)。

このモデルをもとに、感染症の伝播を視覚的に表現するセルオートマトンを WPF で作成しました。
各ファイルは GitHub にあります。

EpidemicSimulator.exe を実行し、右下のトグルスイッチを押せばシミュレーションを開始できます。
感染率などのいくつかのパラメーターは実行時にリアルタイムに変更できます。

S と I が隣り合っているとき、一定の割合で感染が発生するようになっています (したがって、数式で表した状況とは厳密には異なります)。
また、I と R は一定の割合でそれぞれ R と S に移動します。

実行前に設定するパラメーター：

  • 幅
  • 高さ
  • SIR の初期人口比

実行中も設定できるパラメーター：

  • 感染率
  • 回復率
  • 免疫喪失率
  • Looping Map: マップの端でループするかどうか
  • ターンの時間間隔

Epidemic Simulator

 

実装方法については技術的に目新しいところはありませんが、特徴としては以下が挙げられます。

(1) シミュレーションの演算は UI スレッドではなく、バックグラウンド スレッドで実行
(2) 各フレームで画像データを生成して、Image コントロールで表示

(1) については、重い処理を UI スレッドで実行するとアプリケーションがフリーズしてしまうため、
各フレームで非同期的にデータのスナップショットを取得しています。
技術的な説明は、以前に

で書いた通りです。

バージョン情報
.NET Framework 4.5
ReactiveProperty 3.6.0
ToggleSwitch 1.1.2

参照
稲葉寿先生還暦記念祝賀研究集会「数理人口学・数理疫学・構造化個体群モデル」

カテゴリー: ツール, 数学. タグ: . Leave a Comment »

Leap Motion で手の回転状態を取得する

2017年1月17日 — さかぽん

Leap Motion Controller の公式 SDK では、手の回転の状態をオイラー角で取得できるようになっています。
具体的には、Hand.Direction (Vector オブジェクト) の Yaw, Pitch, Roll プロパティが用意されています。
ただし、Hand クラスの説明を参照すると、 ロールについては Direction.Roll ではなく PalmNormal.Roll を使うように書かれています。

float pitch = hand.Direction.Pitch;
float yaw = hand.Direction.Yaw;
float roll = hand.PalmNormal.Roll;

しかし、これらの値を使って実装してみても、期待通りの動作にはなりません。

そこで、前回の 3D における回転の表現と相互変換の内容をもとに、手の回転の状態を取得する機能を自作しました。

Hand.Direction と Hand.PalmNormal はともに長さ 1 で直交しているため、
これらをそれぞれ (0, 0, -1) と (0, -1, 0) の回転後のベクトルと見なして、
前回作成した Rotation3DHelper クラスを利用してオイラー角を求めれば OK です。

using System;
using System.Windows.Media.Media3D;
namespace HandRotationLeap
{
public static class Leap3DHelper
{
public static Vector3D ToVector3D(this Leap.Vector v) => new Vector3D(v.x, v.y, v.z);
// Wrong values.
public static EulerAngles GetEulerAngles_org(this Leap.Hand h) => new EulerAngles
{
Yaw = h.Direction.Yaw,
Pitch = h.Direction.Pitch,
Roll = h.PalmNormal.Roll,
};
// Improved values.
public static EulerAngles GetEulerAngles(this Leap.Hand h) =>
Rotation3DHelper.ToEulerAngles(-h.Direction.ToVector3D(), -h.PalmNormal.ToVector3D());
}
}
view raw AppModel.cs hosted with ❤ by GitHub

全体のソースコードは HandRotationLeap (GitHub) にあります。
このサンプルでは、手とさいころの回転の状態を同期させています。

Hand Rotation by Leap Motion Controller

前回: 3D における回転の表現と相互変換

バージョン情報
.NET Framework 4.5
Leap Motion SDK 2.3.1

参照
Hand クラス

カテゴリー: .NET Framework, クライアント技術, 周辺機器. タグ: , , . 2 Comments »
« Older posts
    • WordPress.com で次のようなサイトをデザイン
    始めてみよう