ボタンの色合いはuwpで

Question

私はボタンを持っていて、その中に白色のアイコンがあります。 XAMLでアイコンの色を変更するにはどうすればよいですか？ XAML/UWPに

<ImageView android:layout_width="@dimen/toolbar_icon_size" android:layout_height="@dimen/toolbar_icon_size" android:src="@drawable/btn_home" android:tint="@{@android:color/black}" /> 

がどのように私はこれを行うことができます。このようなImageViewのを着色

Androidのサポート？

---

私のコード

リソースファイル：

<Image x:Key="icon_home" Stretch="Fill" Source="ms-appx:///Assets/ToolbarIcons/drawable-xhdpi/btn_home.png"/> 

ページファイル：

<UserControl.Resources> 
    <ResourceDictionary Source="ms-appx:///Resources/Images.xaml" /> 
</UserControl.Resources> 

---

<Button Width="40" Height="40" Content="{StaticResource icon_home}" /> 

Answer 1

Grace Fengが述べたように、Android（少なくとも簡単にはできない）のようなボタン（または任意の要素）を動的に色付けする方法はありません。 UWPでは、ビットマップの代わりにベクトルアセットを使用するのが最も一般的です。なぜなら、明瞭さを失うことなく任意の解像度に拡大縮小することができ、はに動的に色付けできます。

私はいくつかの代替の提案を持っている：

はあなたがSymbol列挙から、表示する画像を選択することができますSymbolIcon

<Button Foreground="Red"> 
    <SymbolIcon Symbol="Home"/> 
</Button> 

を使用してください。 UWPには、すぐに使えるアイコンをたくさん用意しています。 SymbolIconのフォアグラウンドはButtonから継承されます。

SymbolIconの厄介な点は、サイズを変更する場合は、Viewboxにラップして、Viewboxのサイズを設定する必要があることです。

FontIconクラスFontIcon

<Button Foreground="Red" FontSize="30"> 
    <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE80F;"/> 
</Button> 

を使用して表示したいアイコンが含まれ、適切なフォントを選択することができます。 Windows 10にはSegoe MDL2 Assetsフォントが組み込まれています。あなたはグリフhereを見つけることができます。また、FontSizeプロパティも尊重されています。

は、あなたが完全にカスタムアイコンを使用したい場合は、このクラスを使用すると、パスデータから画像を表示することができますPathIcon

を使用してください。

<Button Foreground="Red"> 
    <PathIcon Data="M0,20 L10,0 L20,20 Z" Width="20" Height="20"/> 
</Button> 

あなたは、アイコンの形状を定義するpath markup syntaxを提供する必要があります。これは基本的にSVG画像で使われているマークアップと同じなので、単純なSVGアセットからこの情報を得るのは難しいことではありません。

また、Viewbox（またはRenderTransform）を使用してサイズを変更する必要があります。

Answer 2

@Clemensは、あなたのアイコンは画像ファイルだと言っていますが、色を変える方法はたくさんありますが、最も簡単な方法はこの画像ソースを別のものに置き換えることです。

あなたのコメントを見ました。あなたが望むのは、イメージを白黒にすることです.UndPHPではイメージを使用してコード内の色を変更する必要がありますここでは1つの方法です、あなたは私のanswer hereを参照することができます。

別のかなり簡単な方法は、Lumia Imaging SDK 3.0,GrayscaleEffectが必要なものを使用できるということです。

Answer 3

od Imageの代わりにBitmapIconを使用する必要があります。この方法でベクトルを使う必要はありませんが、色を付けることができます。あなたは使用する必要はありません完全なパス「MS-APPX：///資産/ ToolbarIcons /描画可能-xhdpi」の代わりに、あなただけのアイコンは、画像ファイルである

<BitmapIcon x:Name="icon_home" UriSource="Assets/ToolbarIcons/drawable-xhdpi/btn_home.png" Foreground="Red"/>