具体的には、VS2008ImageLibrary に含まれている 16*16 の 32 ビット png 画像を使用しようとしています。画像の高さと幅の属性を手動で設定し、余白とパディングを調整し、Stretch と RenderOptions を調整してみました。ツールバー ボタンを作成しようとすると、不適切なスケーリング (ぼやけたアイコン)、アイコンの一番下の行のピクセルが切り捨てられる、またはツールバー ボタンのサイズが不適切になることがありました。WPF で適切に表示される標準の VisualStudio/WinForms スタイルのツールバー ボタンを作成する最良の方法を見つけた人はいますか?
4 に答える
まず、画像の解像度を 96DPI に変更します。これは、無料の Paint.net ( http://www.getpaint.net ) でファイルを開き、メニューから [画像] -> [キャンバス サイズ] を選択し、「解像度」を96と節約。
これで問題が解決しない場合は、ブログで書いた解決策を使用できますhttp://www.nbdtech.com/blog/archive/2008/11/20/blurred-images-in-wpf.aspx
最善の方法は、pngの代わりにベクターグラフィックスを使用することです。以下はあなたが求めていたものではないことを私は知っていますが、私見ではアイコンの見栄えを良くする方法はありません。また、マージンとパディングを取り除くのに役立ちます。(わかりました、あなたが写真を使いたいなら、あなたはめちゃくちゃです)
悪いニュースは、おそらくすべてのアイコンを塗り直す必要があるということです。これは、MS Expression Blend(ペイントされた画像を.xamlとして保存できます)を使用して行うことも、テキストエディターを使用して独自に作成することもできます。アイコンの配置には、Image.SourceではなくBorder.Backgroundの方が好きです。これにより、画像の上にテキストを配置できます。これは次のようになります。
<Window.Resources>
<ResourceDictionary Source="Resources/Icons.xaml"/>
</Window.Resources>
<!--
...
-->
<Button>
<Border Background="{StaticResource IconName}" Height="16" Width="16" />
</Button>
WPF4で現在利用可能な新しいプロパティを試すことを検討することをお勧めします。HighQualityRenderOptions.BitmapScalingMode
に任せるか、宣言しないでください。
ルート要素(つまりメインウィンドウ)に次のプロパティを追加します:UseLayoutRounding="True"
。
以前はSilverlightでのみ使用可能だったプロパティにより、すべてのビットマップのサイズ設定の問題が修正されました。:)
注意してください-レイアウトの丸めが正確なレイアウトに与える影響のいくつかは次のとおりです。
要素の幅や高さは、最大1ピクセルだけ拡大または縮小できます。
オブジェクトの配置は最大1ピクセル移動できます
中央に配置された要素は、垂直方向または水平方向に最大1ピクセルずれることができます
詳細はこちら: http: //blogs.msdn.com/text/archive/2009/08/27/layout-rounding.aspx
私が思い付くことができる最善の回避策はこれです:
<Image x:Key="TB_NewIcon" Source="Toolbar Images/NewDocumentHS.png" Height="16" Width="16" SnapsToDevicePixels="True" RenderOptions.BitmapScalingMode="NearestNeighbor"/>
...
<Button Command="ApplicationCommands.New" Content="{StaticResource TB_NewIcon}" Padding="2,2,2,1"/>
または別の方法:
<BitmapImage x:Key="TB_NewIcon" UriSource="Toolbar Images\NewDocumentHS.png"/>
...
<Button Command="ApplicationCommands.New" Padding="2,2,2,1">
<Image Source="{StaticResource TB_NewIcon}" Height="16" Width="16" SnapsToDevicePixels="True" RenderOptions.BitmapScalingMode="NearestNeighbor"/>
</Button>
ボタン タグの場合、イメージが 15 ピクセルの高さで切り捨てられないようにするため、およびボタンがイメージに合わせてサイズ変更されないようにするために、Padding 属性が必要です。別の方法として、Padding="1" を指定することもできますが、Height="21" と Width="22" を手動で設定して、ボタンが画像に合わせてサイズ変更されないようにする必要があります。 [
画像] タブで、高さと幅は画像が引き伸ばされないようにするために必要です。SnapsToDevicePixels と RenderOptions.BitMapScalingMode は両方とも、ぼかしがないようにするために必要です。これがすべての解像度でうまく機能するとは約束できません。
注: NewDocumentHS.png アイコンは、16 ピクセルの高さを占めるため、最も問題の原因となるアイコンです。パディングを「1,1,3,2」に調整すると、他のアイコンとより適切に整列します。