質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WPF

Windows Presentation Foundation (WPF) は、魅力的な外観のユーザー エクスペリエンスを持つ Windows クライアント アプリケーションを作成するための次世代プレゼンテーション システムです

Q&A

1回答

6173閲覧

WPFでButtonの背景を画像にしたいです。

cancat

総合スコア313

WPF

Windows Presentation Foundation (WPF) は、魅力的な外観のユーザー エクスペリエンスを持つ Windows クライアント アプリケーションを作成するための次世代プレゼンテーション システムです

0グッド

0クリップ

投稿2016/09/01 03:27

編集2022/01/12 10:55

こんにちは。
Windows10でWPFのアプリケーションを開発しています。
Visual Studio 2015 Communityを使っています。

###前提・実現したいこと
Styleを使って、Buttonの後ろにimageを配置したいです。

###試したこと
http://d.hatena.ne.jp/Yamaki/20061030/1162176631
を参考に、PolygonをImageに置き換えてみました。
Imageをpngでつくり、Resourceに入れました。

###発生している問題・エラーメッセージ
VisualStudioのMainWindow.xamlにはボタンのイメージを表示できるのですが、実行するとイメージがなくなります。

###該当のソースコード

xaml

1<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 2 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 3 > 4 <Style TargetType="{x:Type Button}"> 5 <Setter Property="Template"> 6 <Setter.Value> 7 <ControlTemplate TargetType="{x:Type Button}"> 8 <Grid> 9 10 <!--<Polygon x:Name="ButtonBG" Points="0,200 150,0 300,200 0,200" 11 Stroke="Gold" StrokeThickness="3"> 12 <Polygon.Fill> 13 <SolidColorBrush Color="Orange"/> 14 </Polygon.Fill> 15 </Polygon>--> 16 17 <Image x:Name="ButtonBG" Source="pack://siteoforigin:,,,/Resources/background.png" /> 18 19 <ContentPresenter Margin="0,120,0,0" TextBlock.FontSize="36" 20 TextBlock.TextAlignment="Center"> 21 </ContentPresenter> 22 23 </Grid> 24 25 <ControlTemplate.Triggers> 26 <Trigger Property="IsMouseOver" Value="true"> 27 <!--<Setter Property="Path.Fill" Value="Gold" TargetName="ButtonBG" />--> 28 <Setter Property="Image.Width" Value="200" TargetName="ButtonBG" /> 29 </Trigger> 30 <Trigger Property="IsPressed" Value="true"> 31 <!--<Setter Property="Path.Fill" Value="OrangeRed" TargetName="ButtonBG" />--> 32 <Setter Property="Image.Width" Value="100" TargetName="ButtonBG" /> 33 </Trigger> 34 </ControlTemplate.Triggers> 35 36 </ControlTemplate> 37 </Setter.Value> 38 </Setter> 39 40 <Style.Triggers> 41 <Trigger Property="IsMouseOver" Value="true"> 42 <!--<Setter Property="RenderTransform"> 43 <Setter.Value> 44 <TransformGroup> 45 <TransformGroup.Children> 46 <TransformCollection> 47 <RotateTransform Angle="-10"/> 48 <TranslateTransform X="-20"/> 49 </TransformCollection> 50 </TransformGroup.Children> 51 </TransformGroup> 52 </Setter.Value> 53 </Setter>--> 54 </Trigger> 55 56 <Trigger Property="IsPressed" Value="true"> 57 <!--<Setter Property="RenderTransform"> 58 <Setter.Value> 59 <TransformGroup> 60 <TransformGroup.Children> 61 <TransformCollection> 62 <RotateTransform Angle="-10"/> 63 <TranslateTransform X="-20" Y="10"/> 64 </TransformCollection> 65 </TransformGroup.Children> 66 </TransformGroup> 67 </Setter.Value> 68 </Setter>--> 69 </Trigger> 70 </Style.Triggers> 71 </Style> 72</ResourceDictionary> 73

###補足情報(言語/FW/ツール等のバージョンなど)
Microsoft Visual Studio Community 2015
Version 14.0.25424.00 Update 3
Microsoft .NET Framework
Version 4.6.01038

インストールされているバージョン:Community

Visual C# 2015 00322-20000-00000-AA575
Microsoft Visual C# 2015

です。
よろしくお願いします。

さらに、

xaml

1<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 2 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 3 xmlns:local="clr-namespace:StyleButton"> 4 5 <ControlTemplate x:Key="buttonTemplate" TargetType="Button"> 6 <Border Name="border" BorderThickness="0" BorderBrush="Transparent"> 7 <Border.Background> 8 <ImageBrush ImageSource="pack://siteoforigin:,,,/Resources/background.png" /> 9 </Border.Background> 10 <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/> 11 </Border> 12 13 <ControlTemplate.Triggers> 14 <Trigger Property="IsPressed" Value="True"> 15 <Setter TargetName="border" Property="Background" > 16 <Setter.Value> 17 <ImageBrush ImageSource="pack://siteoforigin:,,,/Resources/pushed.png" /> 18 </Setter.Value> 19 </Setter> 20 </Trigger> 21 </ControlTemplate.Triggers> 22 </ControlTemplate> 23</ResourceDictionary>

xaml

1<Window.Resources> 2 <!--<ResourceDictionary Source="/StyleButton;component/Dictionary1.xaml"/>--> 3 <ResourceDictionary Source="/StyleButton;component/Dictionary2.xaml"/> 4 <!--Source="/アセンブリ名;component/対象XAMLのプロジェクトルートからのパス"--> 5 </Window.Resources> 6 <Viewbox Stretch="Uniform"> 7 <StackPanel Orientation="Horizontal"> 8 <Button Margin="10" Template="{StaticResource buttonTemplate}">はい</Button> 9 <Button Margin="10" Template="{StaticResource buttonTemplate}">いいえ</Button> 10 <Button Margin="10" Template="{StaticResource buttonTemplate}">キャンセル</Button> 11 </StackPanel> 12 </Viewbox>

とすると、VisualStudioで表示できるのは同じですが、
<ImageBrush ImageSource="pack://siteoforigin:,,,/Resources/pushed.png" />

の行で、
例外がスローされました: 'System.Windows.Markup.XamlParseException' (PresentationFramework.dll の中)

追加情報:''System.Windows.Baml2006.TypeConverterMarkupExtension' の値の指定時に例外がスローされました。のようなerrorとなって先に進めずにいます。
よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

実行時に表示されないということであれば、画像がコピーされていないということが考えられます。ソリューションエクスプローラで画像のプロパティを表示し、ビルドアクションを Resource にしてみてください。

投稿2021/02/01 10:05

Zuishin

総合スコア28656

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問