[解決済み] WPF WPFでSVGファイルをアイコンとして使用する正しい方法は何ですか？

質問

どなたか、これを行うための推奨の Step by Step を説明していただけませんか？

ステップ1. SVGをXAMLに変換する...それは簡単です。

ステップ2. さて、どうする？

どのように解決するのですか？

あなたのテクニックは、SVG to XAML コンバータがどのような XAML オブジェクトを生成するかに依存します。 それはドローイングを生成しますか? 画像ですか？ グリッド？ キャンバス？ パス？ ジオメトリ？ それぞれの場合において、あなたのテクニックは異なるでしょう。

以下の例では、最も一般的なシナリオであるボタンにアイコンを使用することを想定していますが、同じテクニックがどの ContentControl でも機能することに注意してください。

アイコンとして描画を使用する

Drawingを使用するには、適切な大きさの矩形をDrawingBrushで描きます。

<Button>
  <Rectangle Width="100" Height="100">
    <Rectangle.Fill>
      <DrawingBrush>
        <DrawingBrush.Drawing>

          <Drawing ... /> <!-- Converted from SVG -->

        </DrawingBrush.Drawing>
      </DrawingBrush>
    </Rectangle.Fill>
  </Rectangle>
</Button>

画像をアイコンにする

画像を直接使用することができます。

<Button>
  <Image ... />  <!-- Converted from SVG -->
</Button>

グリッドをアイコンにする

グリッドを直接使用することができます。

<Button>
  <Grid ... />  <!-- Converted from SVG -->
</Button>

また、サイズを制御する必要がある場合は、Viewboxに含めることができます。

<Button>
  <Viewbox ...>
    <Grid ... />  <!-- Converted from SVG -->
  </Viewbox>
</Button>

キャンバスをアイコンとして使用する

これは画像やグリッドを使うのと同じですが、キャンバスには固定サイズがないため、高さと幅を指定する必要があります（SVGコンバータで既に設定されている場合を除く）。

<Button>
  <Canvas Height="100" Width="100">  <!-- Converted from SVG, with additions -->
  </Canvas>
</Button>

パスをアイコンとして使用する

Pathを使用することはできますが、ストロークやフィルを明示的に設定する必要があります。

<Button>
  <Path Stroke="Red" Data="..." /> <!-- Converted from SVG, with additions -->
</Button>

または

<Button>
  <Path Fill="Blue" Data="..." /> <!-- Converted from SVG, with additions -->
</Button>

ジオメトリをアイコンにする

ジオメトリを描画するためにPathを使用することができます。 ストロークが必要な場合は、ストロークを設定します。

<Button>
  <Path Stroke="Red" Width="100" Height="100">
    <Path.Data>
      <Geometry ... /> <!-- Converted from SVG -->
    </Path.Data>
  </Path>
</Button>

を設定するか、塗りつぶす必要がある場合は、Fillを設定します。

<Button>
  <Path Fill="Blue" Width="100" Height="100">
    <Path.Data>
      <Geometry ... /> <!-- Converted from SVG -->
    </Path.Data>
  </Path>
</Button>

データバインディングの方法

SVG -> XAML変換をコードで行っていて、結果のXAMLをデータバインディングを使って表示させたい場合は、以下のいずれかを使用します。

描画をバインドする。

<Button>
  <Rectangle Width="100" Height="100">
    <Rectangle.Fill>
      <DrawingBrush Drawing="{Binding Drawing, Source={StaticResource ...}}" />
    </Rectangle.Fill>
  </Rectangle>
</Button>

画像をバインドする。

<Button Content="{Binding Image}" />

グリッドをバインドする。

<Button Content="{Binding Grid}" />

ViewboxにGridをバインドする。

<Button>
  <Viewbox ...>
    <ContentPresenter Content="{Binding Grid}" />
  </Viewbox>
</Button>

キャンバスをバインドする。

<Button>
  <ContentPresenter Height="100" Width="100" Content="{Binding Canvas}" />
</Button>

パスをバインドする。

<Button Content="{Binding Path}" />  <!-- Fill or stroke must be set in code unless set by the SVG converter -->

ジオメトリをバインドする。

<Button>
  <Path Width="100" Height="100" Data="{Binding Geometry}" />
</Button>