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

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

ただいまの
回答率

90.84%

  • C#

    6289questions

    C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

  • WPF

    641questions

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

  • XAML

    228questions

    XAML(Extensible Application Markup Language)はWPF、Silverlight、Windows PhoneそしてWindows Store appsでユーザーインターフェースを定義するために使われるXML言語です。

Buttonをクリックした時の色の挙動について

解決済

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 191

nokinoki

score 5

 現状・実現したいこと

ボタンをクリックして、ボタンを離れた時の色をはじめの状態に戻したいです。

ボタンの色に関して該当のソースコードは、下記の状態となります。

・はじめの状態:白
・マウスオーバー時:緑色
・クリック時:赤色
・クリックした後にボタンを離れる:白

問題は、キーボードフォーカスの色を指定した場合です。

キーボードフォーカス状態のトリガーを設定すると(該当ソースコードではコメントアウトを解除して下さい)、
クリックした時にボタンの色は黄色になり、
一度クリックすると、マウスがボタンを離れてもそのまま黄色の状態となってしまいます。

これを下記の状態にすることは可能でしょうか?

・はじめの状態:白
・マウスオーバー時:緑色
・クリック時:赤色
・クリックした後にボタンを離れる:白
・キーボードフォーカス時:黄色

以上よろしくお願いいたします。

 該当のソースコード

<Window x:Class="Button01.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Button01"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">

    <Window.Resources>

        <ControlTemplate x:Key="buttonTest"
                         TargetType="Button">

            <Border Name="border"
                    BorderThickness="1"
                    BorderBrush="DarkGray"
                    CornerRadius="5"
                    TextBlock.Foreground="Black">
                <ContentPresenter VerticalAlignment="Center"
                                  HorizontalAlignment="Center" />
            </Border>

            <ControlTemplate.Triggers>

                <!--マウスオーバー時-->
                <Trigger Property="IsMouseOver"
                         Value="True">
                    <Setter TargetName="border"
                            Property="Background"
                            Value="Green" />
                </Trigger>

                <!--クリック時-->
                <Trigger Property="IsPressed"
                         Value="True">
                    <Setter TargetName="border"
                            Property="Background"
                            Value="Red" />
                </Trigger>

                <!--キーボード フォーカス状態-->
                <!--<Trigger Property="IsKeyboardFocused"
                         Value="true">
                    <Setter TargetName="border"
                            Property="Background"
                            Value="Yellow" />
                </Trigger>-->

            </ControlTemplate.Triggers>

        </ControlTemplate>

    </Window.Resources>

    <Grid>
        <Button Content="Button"
                Template="{StaticResource buttonTest}"
                HorizontalAlignment="Left"
                Margin="226,145,0,0"
                VerticalAlignment="Top"
                Width="75" />
        <TextBox HorizontalAlignment="Left"
                 Height="23"
                 Margin="200,211,0,0"
                 TextWrapping="Wrap"
                 Text="TextBox"
                 VerticalAlignment="Top"
                 Width="120" />
    </Grid>

</Window>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

キーボードフォーカスはマウスが離れても変更はされませんので正常な動作です。
ボタンが黄色の状態で、TextBoxをクリックするとフォーカスはTextBoxに移ります。
コードで再現するには、TextBoxにtextBoxと名前を付けてtextBox.Focus();とか

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/28 09:22

    回答誠にありがとうございます。

    実現したいことは、XAMLだけでは実装できないのでしょうか。

    引き続き回答お待ちしております。

    キャンセル

  • 2018/05/28 10:22

    仕様(やりたい事)に矛盾がありますので、実現不能です。
    >・はじめの状態:白
    >・マウスオーバー時:緑色
    >・クリック時:赤色
    >・クリックした後にボタンを離れる:白
    >・キーボードフォーカス時:黄色
    キーボードフォーカスの意味を理解したうえで、仕様を検討し直してください。

    キャンセル

  • 2018/05/28 10:52

    2度目の回答ありがとうございます。

    なるほどキーボードフォーカスに対する捉え方、もしくはボタンに対する捉え方が甘かったようです。

    キャンセル

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

  • ただいまの回答率 90.84%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • C#

    6289questions

    C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

  • WPF

    641questions

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

  • XAML

    228questions

    XAML(Extensible Application Markup Language)はWPF、Silverlight、Windows PhoneそしてWindows Store appsでユーザーインターフェースを定義するために使われるXML言語です。