web-dev-qa-db-ja.com

WPFのEventTriggerのボタンの背景色を変更する

ユーザーがボタンをクリックしたときにボタンのBackgroundの色を変更しようとしています。私はそれを達成するためにトリガーを使用しています。

私のXAMLは次のとおりです。

<UserControl.Resources>
    <Style x:Key="myBtnStyle" TargetType="{x:Type Button}">
        <!--VerticalAlignment="Top"  VerticalContentAlignment="Top" Background="Blue"  HorizontalAlignment="Right"
        Height="24" Width="25" FontSize="16" FontWeight="Bold"  -->
        <Setter Property="VerticalAlignment" Value="Top" /> 
        <Setter Property="VerticalContentAlignment" Value="Top" />
        <Setter Property="Background" Value="Blue" />
        <Setter Property="HorizontalAlignment" Value="Right" />
        <Setter Property="Height" Value="24" />
        <Setter Property="Width" Value="25" />
        <Setter Property="FontSize" Value="16" />
        <Setter Property="FontWeight" Value="Bold" />
        <Style.Triggers>
            <Trigger Property="Button.IsMouseOver" Value="true">
                <Setter Property="Background" Value="Yellow" />
            </Trigger>
        </Style.Triggers>
    </Style>
 <!--   
    <ControlTemplate x:Key="btnTemplate" TargetType="{x:Type Button}">
        <ControlTemplate.Triggers>
            <Trigger Property="IsPressed" Value="True" >
                <Setter Property="Background" Value="Cyan" />
            </Trigger>

        </ControlTemplate.Triggers>
    </ControlTemplate> -->
</UserControl.Resources>

<Button DockPanel.Dock="Right" Style="{StaticResource myBtnStyle}"  Name="btnVert" Click="btnVert_Click"
                Margin="10,10,10,0" ToolTip="Vertical" Content="V" />

いろいろな設定をしてみましたが、マウスをクリックしてもボタンの背景色が変わりませんでした。また、さまざまなサイトを参照しました [〜＃〜] msdn [〜＃〜] 、 SharpCorner 、 CodeProject および他の多くのサイトも参照してください。どこが間違っているのかわからなかったのですか？

クリックされたイベントでボタンのBackgroundの色を変更するにはどうすればよいですか？

ありがとう。

c#wpfxamltriggerseventtrigger
7
Tvd

この状況では、[ EventTrigger ]のため、StoryboardをSourceとともに使用する必要があります。

EventTrigger-イベントに応答して一連のアクション（アニメーションストーリーボード）を適用するトリガーを表します。

例：

<Window.Resources>
    <SolidColorBrush x:Key="ButtonBrush" Color="OrangeRed" />

    <Storyboard x:Key="ChangeBackgroundStoryboard">
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ChangeBackgroundButton"
                                       Storyboard.TargetProperty="Background">

            <DiscreteObjectKeyFrame KeyTime="0:0:0"
                                    Value="{StaticResource ButtonBrush}" />
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>
</Window.Resources>

<Grid>
    <Grid.Triggers>
        <EventTrigger SourceName="ChangeBackgroundButton" 
                      RoutedEvent="Button.Click">

            <BeginStoryboard Storyboard="{StaticResource ChangeBackgroundStoryboard}" />
        </EventTrigger>
    </Grid.Triggers>

    <Button Name="ChangeBackgroundButton"
            Content="TestButton"
            VerticalAlignment="Center"
            HorizontalAlignment="Center" />
</Grid>

ここでは、リソースで定義されたStoryboardは、ButtonBrushイベントで設定される色Clickを定義します。詳細については、以下を参照してください。

MSDN: EventTrigger

Edit

はい、EventTriggerは次のようにテンプレートで使用できます。

<Window.Resources>
    <SolidColorBrush x:Key="IsMouseOverBackground" Color="AliceBlue" />
    <SolidColorBrush x:Key="IsPressedBrush" Color="Gainsboro" />
    <SolidColorBrush x:Key="ButtonBrush" Color="OrangeRed" />

    <Storyboard x:Key="ChangeBackgroundStoryboard">
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background">
            <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource ButtonBrush}" />
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>

    <Style x:Key="FlatButtonBaseStyle" TargetType="{x:Type Button}">
        <Setter Property="Width" Value="60" />
        <Setter Property="Height" Value="20" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="BorderBrush" Value="Gray" />
        <Setter Property="Background" Value="Transparent" />

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Border Name="Border"
                        Background="{TemplateBinding Background}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        BorderBrush="{TemplateBinding BorderBrush}">

                        <ContentPresenter Name="Content"
                                      Content="{TemplateBinding Content}" 
                                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                      TextBlock.FontFamily="{TemplateBinding FontFamily}" 
                                      TextBlock.FontSize="{TemplateBinding FontSize}" />
                    </Border>

                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="Border" Property="Background" Value="{StaticResource IsMouseOverBackground}" />
                            <Setter Property="Opacity" Value="1" />
                        </Trigger>

                        <Trigger Property="IsPressed" Value="True">
                            <Setter TargetName="Border" Property="Background" Value="{StaticResource IsPressedBrush}" />
                        </Trigger>

                        <!-- Here --> 
                        <EventTrigger RoutedEvent="Button.Click">
                            <BeginStoryboard Storyboard="{StaticResource ChangeBackgroundStoryboard}" />
                        </EventTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

<WrapPanel>
    <Button Content="Fisrt"                
            Style="{StaticResource FlatButtonBaseStyle}" 
            Margin="10" />

    <Button Content="Second"
            Style="{StaticResource FlatButtonBaseStyle}"
            Margin="10" />

    <Button Content="Third"
            Style="{StaticResource FlatButtonBaseStyle}" 
            Margin="10" />
</WrapPanel>

1つのStoryboardを介して他のボタンに接続する可能性については、次のようにすることができます。

<Window.Resources>
    <SolidColorBrush x:Key="ButtonBrush" Color="OrangeRed" />
    <SolidColorBrush x:Key="DefaultButtonBrush" Color="BlueViolet" />
</Window.Resources>

<WrapPanel>
    <WrapPanel.Triggers>
        <EventTrigger SourceName="FisrtButton" 
                      RoutedEvent="Button.Click">

            <BeginStoryboard>
                <Storyboard>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="FisrtButton"
                                       Storyboard.TargetProperty="Background">

                        <DiscreteObjectKeyFrame KeyTime="0:0:0"
                                    Value="{StaticResource ButtonBrush}" />
                    </ObjectAnimationUsingKeyFrames>

                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SecondButton"
                                       Storyboard.TargetProperty="Background">

                        <DiscreteObjectKeyFrame KeyTime="0:0:0"
                                    Value="{StaticResource DefaultButtonBrush}" />
                    </ObjectAnimationUsingKeyFrames>

                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ThirdButton"
                                       Storyboard.TargetProperty="Background">

                        <DiscreteObjectKeyFrame KeyTime="0:0:0"
                                    Value="{StaticResource DefaultButtonBrush}" />
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </WrapPanel.Triggers>

    <Button Name="FisrtButton"
            Content="Fisrt"                
            Margin="10" />

    <Button Name="SecondButton"
            Content="Second"
            Margin="10" />

    <Button Name="ThirdButton"
            Content="Third"
            Margin="10" />
</WrapPanel>

この場合、すべてのボタンにTargetNameを指定するだけで、最初のボタンをクリックすると、残りの色がデフォルトのBlueViolet：

enter image description here

14
Anatoliy Nikolaev

WPFでは、 Storyboard を使用してオブジェクトをアニメーション化できます。

0
Nath