none
マウスでホバーした際にtogglebuttonでの画像変更について RRS feed

  • 質問

  • いつもWPFについて勉強させてもらっています。

    WPFの画像の遷移について質問させてください。

    以前マウス等の移動でボタンの内容が変わるやり方を教えていただいた者です。

    (https://social.msdn.microsoft.com/Forums/ja-JP/35318bd8-cea5-48ed-a975-518ff656c2b6/12510124541247312391369842524612375123831239212365123954123881?forum=wpfja)

    WPFでトグルボタンを選択した際に画像等が遷移する方法を教えていただきたいです。

    というのも、以前教えていただいたやり方で行った所、画像の遷移が出来ませんでした。

    内容が違うので当たり前と言えば

    <Style x:Key="sample" TargetType="ToggleButton"> <Setter Property="Foreground" Value="Black"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="ToggleButton"> <Image Name="image" Source="{StaticResource waiting_normal}"/> <ControlTemplate.Triggers> <Trigger Property="IsChecked" Value="True"> <Setter TargetName="image" Property="Source" Value="{StaticResource waiting_on}"/> </Trigger> <Trigger Property="IsMouseOver" Value="True"> <Setter TargetName="image" Property="Source" Value="{StaticResource waiting_hover}"/> </Trigger> <Trigger Property="IsPressed" Value="True"> <Setter TargetName="image" Property="Source" Value="{StaticResource waiting_on}"/> </Trigger> <Trigger Property="IsEnabled" Value="False"> <Setter TargetName="image" Property="Source" Value="{StaticResource waiting_off}"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style>


    <RadioButton x:Name="sample" Style="{StaticResource {x:Type ToggleButton}}" Margin="10,54,0,0" Height="60" VerticalAlignment="Top" HorizontalAlignment="Left" Width="75" Checked="RadioButton_Checked" Foreground="{x:Null}" BorderBrush="{x:Null}" > <RadioButton.Background> <ImageBrush ImageSource="Resources/waiting_normal.png"/> </RadioButton.Background> </RadioButton>

    このようなXAMLを書きましたが、画像が遷移されませんでした。

    各マウスの移動で画像等が遷移出来るようにするにはどのようにすればいいのでしょうか?

    教えていただけますでしょうか?

    なにか足りない情報がありましたら、即時対応させていただきます。

    何卒よろしくお願いいたします。

    <style type="text/css">p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 9.5px Helvetica; color: #0000ff; background-color: #000000} p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 9.5px Helvetica; color: #a31515; background-color: #000000} span.s1 {color: #a31515} span.s2 {color: #ff0000} span.s3 {color: #000000} span.s4 {color: #0000ff} </style>
    2019年1月28日 3:55

回答

  • テンプレートを定義しているStyleのキーに"sample"という名前がついています。
    しかし、RadioButtonのStyleが参照しているStaticResourceのキーが{x:Type ToggleButton}となっているので、ToggleButtonのデフォルトのスタイルが適用されてしまってます。
    定義したスタイルを適用したいのであれば、StyleのKeyと StaticResourceのResourceKeyを同じにする必要があります。

    "{StaticResource ResourceKey=sample}"または"{StaticResource sample}"としてやるとスタイルが適用されるでしょう。
    あるいはStyleのほうのKeyを"{x:Type ToggleButton}"とするか、Keyを消してやればKeyがTargetTypeとなるので適用されるでしょう。



    個別に明示されていない限りgekkaがフォーラムに投稿したコードにはフォーラム使用条件に基づき「MICROSOFT LIMITED PUBLIC LICENSE」が適用されます。(かなり自由に使ってOK!)

    2019年1月28日 9:32

すべての返信

  • テンプレートを定義しているStyleのキーに"sample"という名前がついています。
    しかし、RadioButtonのStyleが参照しているStaticResourceのキーが{x:Type ToggleButton}となっているので、ToggleButtonのデフォルトのスタイルが適用されてしまってます。
    定義したスタイルを適用したいのであれば、StyleのKeyと StaticResourceのResourceKeyを同じにする必要があります。

    "{StaticResource ResourceKey=sample}"または"{StaticResource sample}"としてやるとスタイルが適用されるでしょう。
    あるいはStyleのほうのKeyを"{x:Type ToggleButton}"とするか、Keyを消してやればKeyがTargetTypeとなるので適用されるでしょう。



    個別に明示されていない限りgekkaがフォーラムに投稿したコードにはフォーラム使用条件に基づき「MICROSOFT LIMITED PUBLIC LICENSE」が適用されます。(かなり自由に使ってOK!)

    2019年1月28日 9:32
  • gekka様

    いつもご協力いただきまことにありがとうございます。

    指定いただいた物に変えたところ上手く動きました。

    要するに必要なkeyというか、ちゃんと合わせないと行けないと言う事ですね、

    ありがとうございました。

    2019年1月29日 1:10