はじめに

Power Appsのコンポーネントを利用して縁取りや影を設定できるようなカスタムラベルコントロールを作成してみたので紹介します。

完成イメージはこんな感じです。

カスタムラベルコントロールを作成する

コンポーネントを作成する

コンポーネントの作成方法の概要については、以前私がM365VM2022で登壇したセッションをご覧ください。

今日から始めるPower Appsでのコンポーネント開発コルネ - Korune - YouTube

www.docswell.com

デザインをカスタムできる文字列を作成する

今回デザインをカスタムするためにSVGを利用します。

SVGについてはこの記事ではあまり詳しくは触れませんが、利用する要素の参考ドキュメントだけ残しておきます。

Textの基本要素
developer.mozilla.org

Textの縦方向の要素
developer.mozilla.org

Textの影の要素
developer.mozilla.org

上記要素を利用して組み立てたSVGがこちらになります(唐突)

data:image/svg+xml,
<svg viewBox='0 0 640 640' xmlns='http://www.w3.org/2000/svg'>
    <defs>
        <filter id='shadow'>
            <feDropShadow 
                dx='10' 
                dy='5' 
                stdDeviation='2'
            />
        </filter>
    </defs>

    <text 
        x='50%' 
        y='50%' 
        text-anchor='middle' 
        dominant-baseline='middle' 
        font-family='Algerian'
        font-size='80'
        stroke-width='3' 
        stroke='#d42314' 
        fill='#18eee0ff'
        filter='url(#shadow)'
    >Sample Text</text>
</svg>

他にもSVG利用すればもっとリッチなテキストを作成することが出来はするのですが、~~めんどくさい~~キリがないので、このくらいにします。

こちらをコンポーネント利用時にカスタマイズできるようにパラメータを外だししていこうと思います。

カスタムプロパティを作成する

必要なパラメータは以下になりますね。

テキスト
フォントのサイズ
文字のフォント
横方向の位置
縦方向の位置
文字の外枠の色
文字の外枠の太さ
文字の色
ぼかしのX要素
ぼかしのY要素
ぼかしの標準偏差

これらのパラメータを作成してきます。
コンポーネント利用者がカスタムできるパラメータを作成したいので、プロパティの型はすべて入力になりますね。

設定値は以下になります。

表示名	名前	説明	プロパティの型	データ型
Text	Text	テキスト	入力	テキスト
FontSize	FontSize	フォントサイズ	入力	数値
Font	Font	フォント	入力	テキスト
Align	Align	テキストのアライメント	入力	テキスト
VirticalAlign	VirticalAlign	垂直方向の配置	入力	テキスト
StrokeFill	StrokeFill	縁取りの色(16進数)	入力	テキスト
StrokeWidth	StrokeWidth	縁取りの太さ	入力	数値
FontFill	FontFill	文字の塗りつぶし色(16進数)	入力	テキスト
ShadowX	ShadowX	ぼかしのX要素	入力	数値
ShadowY	ShadowY	ぼかしのY要素	入力	数値
ShadowstdDeviation	ShadowstdDeviation	ぼかしの標準偏差	入力	数値

「値が変更されたときに OnReset を実行する」はすべてチェックしています。

* カスタムパラメータの作成方法は冒頭に紹介した資料や動画をご確認ください。

次にこのカスタムパラメータを先ほど紹介したSVGに設定していきます。

SVGにカスタムパラメータを設定する

Power AppsでSVGを表示するためには画像コントロールが必要です。

画像コントロールの Image にSVGの定義を記載します。
ただし記載方法は

"data:image/svg+xml,"& 
EncodeUrl(
    "<svg viewBox='0 0 640 640' xmlns='http://www.w3.org/2000/svg'>
...
    </svg>"
)

のようになります。
EncodeUrl関数が必要な点が注意ですね。

また、配置した画像コントロールはコンポーネントのサイズによって変わるように

Image.X

Image.Y

Image.Width

Parent.Width

Image.Height

Parent.Height

とコンポーネントのサイズによって可変になるように設定しましょう。

次にSVGの描画領域(viewBox)も画像コントロールのサイズによって可変になるようにしましょう。

これは

<svg viewBox='0 0 "& Self.Width & " " & Self.Height & "' xmlns='http://www.w3.org/2000/svg'>

のように描画領域を画像のサイズにあわせてあげればよいです。
これはコンポーネント化するとき以外でもPower AppsでSVGを利用するときの基本テクニックなので覚えておきましょう！

さて、Power AppsでSVGを利用するための準備ができましたので、先ほどのSVGにカスタムプロパティを組み込んだ式を設定します。

完成形は以下です。

"data:image/svg+xml,"& 
EncodeUrl(
    "<svg viewBox='0 0 "& Self.Width & " " & Self.Height & "' xmlns='http://www.w3.org/2000/svg'>
        <defs>
            <filter id='shadow'>
                <feDropShadow 
                    dx='"& Parent.ShadowX &"' 
                    dy='"& Parent.ShadowY &"' 
                    stdDeviation='"& Parent.ShadowstdDeviation &"'
                />
            </filter>
        </defs>

        <text 
            x='"&
                Switch(
                    Parent.Align,
                    Align.Left, "0%",
                    Align.Center, "50%",
                    Align.Right, "100%",
                    "50%"
                )
            &"' 
            y='"&
                Switch(
                    Parent.VerticalAlign,
                    VerticalAlign.Top, "0%",
                    VerticalAlign.Middle, "50%",
                    VerticalAlign.Bottom, "100%",
                    "0%"
                )
            &"' 
            text-anchor='"&
                Switch(
                    Parent.Align,
                    Align.Left, "start",
                    Align.Center, "middle",
                    Align.Right, "end",
                    "middle"
                )
            &"' 
            dominant-baseline='"&
                Switch(
                    Parent.VerticalAlign,
                    VerticalAlign.Top, "hanging",
                    VerticalAlign.Middle, "middle",
                    VerticalAlign.Bottom, "auto",
                    "middle"
                )
            &"' 
            font-family='"& Parent.Font &"'
            font-size='"& Parent.FontSize &"'
            stroke-width='"& Parent.StrokeWidth &"' 
            stroke='"& Parent.StrokeFill &"' 
            fill='"& Parent.FontFill &"'
            filter='url(#shadow)'
        >"&
            Parent.Text
        &"</text>
    </svg>"
)