Blend for Visual Studio を使って、パスを使った図形を作成するために個人的につかいやすい方法例をメモした記事です。

シンプルな図形を用意するときはパスを使ったベクター図形にしておくと再利用しやすいです。 xaml 形式で作成したとしても「INKSCAPE」などのツールを使うことで、SVG 形式などにも変換できます。

パスを使った図形はベクター形式の図形になるため、拡大・縮小をしてもボヤけたり荒いドットが見えたりしません。なお、一般的な bmp, png, jpg 等で描かれた図形はラスター形式という。

Blend for Visual Studio を使う

Visual Studio でベクター図形を作成することもできるのですが、パスを使う際は、Blend for Visual Studio を使うほうが便利です。P キーがペンのショートカットになっているなど、いくらかお絵かきソフトウェアっぽい感覚で操作することができます。

プロジェクト選択の注意

プロジェクトは UWP を選択すると、ペンに関するツールが無効化されています。WPF などのプロジェクトを作成してください。

Expression Blend for VS 2017 - Pen tool disabled (UWP)

f:id:shikaku_sh:20200227174504p:plain:w500 — PEN ツールが disable になってしまう

プロジェクトの構成

アイコンを作成するプロジェクトの構成は、こんな感じです。

f:id:shikaku_sh:20200227174548p:plain — シンプルな構成例

Assets フォルダー
参考画像の外部リソースを入れるところ
Icons フォルダー
作成したパス図形のコントロールを入れるところ（UserControl）
MainWindow
作成したコントロールを使ってみるテスト画面

最初に Icons フォルダーに新しい項目の追加で UserControl を作成します。（ここでは Reload.xaml）作成したコントロールの簡易テンプレートは次のとおりです。

<UserControl x:Class="BlendIconSample.Icons.Reload"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:BlendIconSample.Icons"
             Name="Control"
             mc:Ignorable="d" 
             d:DesignHeight="800" d:DesignWidth="800">
    <d:DesignerProperties.DesignStyle>
        <Style TargetType="UserControl">
            <Setter Property="Background" Value="White（背景色）"/>
            <Setter Property="Foreground" Value="Green（パスの基本色）" />
        </Style>
    </d:DesignerProperties.DesignStyle>
    <Viewbox>
        <Grid>
           <!-- Path などを追加していく -->
           <Path Stroke="{Binding ElementName=Control, Path=Foreground}" StrokeThickness="20" 
                 RenderTransformOrigin="0.5,0.5" 
                 Data="...." />
        </Grid>
    </Viewbox>
</UserControl>

デザイナーを対象にした名前空間 xmlns:d を利用して、ウィンドウの大きさの大きさ・背景色・コントロールの色などを仮置きします。

ここでは UserControl のプロパティ Foreground で、図形の色を変えることができるようにバインディングしました。

Viewbox を利用することで、ベクター形式らしいコンテンツの拡大・縮小をうまくやってくれます。

よくある更新ボタンの図形を作成してみると、こんな感じになった。

f:id:shikaku_sh:20200227175023p:plain — それっぽい

テスト

使用感は、MainWindow でテストします。Blend for Visual Studio でも WPF アプリケーションを実行できるので、実際のウィンドウの雰囲気を含めて確認することができます。

<Window x:Class="BlendIconSample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:BlendIconSample"
        xmlns:icon="clr-namespace:BlendIconSample.Icons"
        mc:Ignorable="d"
        Title="MainWindow" Height="1000" Width="1000">
    <d:DesignerProperties.DesignStyle>
        <Style TargetType="Window">
            <Setter Property="Background" Value="Black"/>
            <Setter Property="Foreground" Value="White" />
        </Style>
    </d:DesignerProperties.DesignStyle>
    <StackPanel Orientation="Vertical">
        <icon:Reload Width="100" Height="100" Foreground="Aqua" />
    </StackPanel>
</Window>