web-dev-qa-db-ja.com

WPF SPFファイルをWPFのアイコンとして使用する正しい方法は何ですか

誰かがこれを行うための推奨手順を説明できますか？

編集：

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

ステップ2。それで？

wpfsvg
61
NVM

手法は、SVGからXAMLへのコンバーターが生成するXAMLオブジェクトによって異なります。図面を作成しますか？画像？グリッド？キャンバス？通り？ジオメトリ？いずれの場合も、テクニックは異なります。

以下の例では、ボタンでアイコンを使用していることを前提としていますが、これは最も一般的なシナリオですが、ContentControlでも同じ手法が機能することに注意してください。

アイコンとしての図面の使用

描画を使用するには、適切なサイズの長方形を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>

アイコンとしてのパスの使用

パスを使用できますが、ストロークまたは塗りを明示的に設定する必要があります。

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

または

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

ジオメトリをアイコンとして使用する

パスを使用してジオメトリを描画できます。ストロークする必要がある場合は、ストロークを設定します。

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

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

<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}" />

ビューボックスでグリッドをバインド：

<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>
121
Ray Burns

WPFでsvgアイコンを使用する最良の方法を見つけました。 sharpvector frameworkを使用します：

Install-Package SharpVectors

したがって、私のXAMLは次のようになります。

<UserControl ...
         xmlns:svgc="http://sharpvectors.codeplex.com/svgc/"
         ...>
    ...
    <svgc:SvgViewbox Margin="5" Height="20" Width="20" Stretch="Uniform" Source="/View/Resources/Icons/Connection.Closed.Black.svg"/>
    ...
</UserControl>
40
fastobject

Windows 10ビルド15063「Creators Update」は、Windows 10を対象とするUWP/UAPアプリケーションへのSVGイメージを（一部の落とし穴はあるものの）ネイティブにサポートします。

アプリケーションがUWP/UAPではなくWPFアプリである場合、このAPIを引き続き使用できます（かなり多くのフープをジャンプした後）：Windows 10 build 17763 "October 2018 Update"が導入されましたXAMLアイランドの概念（「プレビュー」テクノロジーとしてですが、アプリストアで許可されていると考えています。すべての場合、Windows 10ビルド18362「2019年5月更新」XAMLアイランドはプレビュー機能ではなく、完全にサポートされます） WPFアプリケーションでUWP APIとコントロールを使用するには

最初に WinRT APIへの参照を追加 する必要があり、ユーザーデータまたはシステムと対話する特定のWindows 10 APIを使用する（例：ディスクからのイメージの読み込みWindows 10 UWP Webビューまたはトースト通知APIを使用してトーストを表示する場合）、WPFアプリケーションをパッケージIDに関連付ける必要もあります ここに示すように （Visual Studio 2019では非常に簡単です）。ただし、これはWindows.UI.Xaml.Media.Imaging.SvgImageSourceクラスを使用する必要はありません。

使用方法（UWPを使用している場合、または上記の指示に従ってWPFでXAMLアイランドのサポートを追加した場合）は、<Image />のSourceをSVGへのパスに設定するのと同じくらい簡単です。これは、次のようにSvgImageSourceを使用するのと同等です。

<Image>
    <Image.Source>
        <SvgImageSource UriSource="Assets/svg/icon.svg" />
    </Image.Source>
</Image>

ただし、この方法で（XAML経由で）ロードされたSVG画像 jagged/aliasedをロードする場合があります 。 1つの回避策は、実際の高さ/幅の2倍のRasterizePixelHeightまたはRasterizePixelWidth値を指定することです。

<SvgImageSource RasterizePixelHeight="300" RasterizePixelWidth="300" UriSource="Assets/svg/icon.svg" /> <!-- presuming actual height or width is under 150 -->

これは、ベースイメージのSvgImageSourceイベントに新しいImageOpenedを作成することで動的に回避できます。

var svgSource = new SvgImageSource(new Uri("ms-appx://" + Icon));
PrayerIcon.ImageOpened += (s, e) =>
{
    var newSource = new SvgImageSource(svgSource.UriSource);
    newSource.RasterizePixelHeight = PrayerIcon.DesiredSize.Height * 2;
    newSource.RasterizePixelWidth = PrayerIcon.DesiredSize.Width * 2;
    PrayerIcon2.Source = newSource;
};
PrayerIcon.Source = svgSource;

エイリアシングは、高dpi以外の画面では見にくい場合がありますが、それを説明するための試みを次に示します。

これは上記のコードの結果です。最初のImageを使用するSvgImageSourceと、Imageイベントで作成されたSvgImageSourceを使用するその下の2番目のImageOpened

enter image description here

これは、上の画像の拡大図です。

enter image description here

これは、下の（アンチエイリアス処理された、正しい）画像の拡大図です：

enter image description here

（違いを理解するには、新しいタブで画像を開いてフルサイズで表示する必要があります）

5
Mahmoud Al-Qudsi

SVGから生成されたxamlを四角形の描画ブラシとして使用できます。このようなもの：

<Rectangle>
   <Rectangle.Fill>
      --- insert the converted xaml's geometry here ---
   </Rectangle.Fill>
</Rectangle>
3
Gus Cavalcanti

SvgImageまたはSvgImageConverter拡張機能を使用すると、SvgImageConverterはバインディングをサポートします。両方の拡張機能を示すサンプルについては、次のリンクを参照してください。

https://github.com/ElinamLLC/SharpVectors/tree/master/TutorialSamples/ControlSamplesWpf

0
Paulus