Question

当我的鼠标悬停在另一个控件上时，我正在尝试为控件调用设计状态。示例：我的鼠标悬停在“按钮A”上，我希望“按钮B”改变其设计。

所以我试图在我的模板中管理它：

    xmlns:sys="clr-namespace:System;assembly=mscorlib"
<Style x:Key="ButtonStepperStyle" TargetType="Button">
            <Setter Property="OverridesDefaultStyle" Value="True"/>
            <Setter Property="Button.Margin" Value="0" />
            <Setter Property="Button.Padding" Value="0,-8,0,0" />
            <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">

                        <Border Name="Bordure" 
                                    Height="25"
                                    BorderBrush="Transparent"
                                    BorderThickness="2">
                            <!--<Border.Background>
                                <ImageBrush Stretch="Fill" RenderOptions.BitmapScalingMode="Fant" ImageSource="images/design/in game/bouton_back.png"/>
                            </Border.Background>-->
                            <Grid>
                                <ContentPresenter Grid.Column="1" 

                                                                  Name="bla"
                                                      VerticalAlignment="Center"
                                                      HorizontalAlignment="Center" 
                                                      ContentSource="Content">
                                </ContentPresenter>
                            </Grid>
                        </Border>
                        <ControlTemplate.Triggers>
                            <!--<Trigger Property="Tag">
                                <Trigger.Value>
                                    <sys:Int32>1</sys:Int32>
                                </Trigger.Value>

                                <Setter TargetName="Bordure" Property="BorderBrush" Value="{DynamicResource CouleurBoutonHover}"/>
                                <Setter TargetName="bla" Property="TextBlock.Foreground" Value="{DynamicResource CouleurTexteBoutonHover}" />
                                <Setter TargetName="Bordure" Property="Background" Value="{DynamicResource CouleurBoutonHover}" />
                                <Setter Property="Cursor" Value="Hand" />
                            </Trigger>-->
                            <DataTrigger Binding="{Binding Path=Tag, RelativeSource={RelativeSource Self}}" Value="1">
                                <Setter TargetName="Bordure" Property="BorderBrush" Value="{DynamicResource CouleurBoutonHover}"/>
                                <Setter TargetName="bla" Property="TextBlock.Foreground" Value="{DynamicResource CouleurTexteBoutonHover}" />
                                <Setter TargetName="Bordure" Property="Background" Value="{DynamicResource CouleurBoutonHover}" />
                                <Setter Property="Cursor" Value="Hand" />
                            </DataTrigger>
                            <MultiTrigger>
                                <!-- Bouton normal -->
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsMouseOver" Value="False" />
                                    <Condition Property="Button.IsPressed" Value="False" />
                                    <Condition Property="IsEnabled" Value="true" />
                                </MultiTrigger.Conditions>
                                <Setter TargetName="Bordure" Property="BorderBrush" Value="{DynamicResource CouleurSecondaire}"/>
                                <Setter TargetName="bla" Property="TextBlock.Foreground" Value="{DynamicResource CouleurTexte}" />
                                <Setter TargetName="Bordure" Property="Background" Value="Transparent" />
                                <Setter Property="Cursor" Value="Hand" />
                            </MultiTrigger>
                            <MultiTrigger>
                                <!-- Bouton over -->
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsMouseOver" Value="True" />
                                    <Condition Property="Button.IsPressed" Value="False" />
                                    <Condition Property="IsEnabled" Value="true" />
                                </MultiTrigger.Conditions>
                                <Setter TargetName="Bordure" Property="BorderBrush" Value="{DynamicResource CouleurBoutonHover}"/>
                                <Setter TargetName="bla" Property="TextBlock.Foreground" Value="{DynamicResource CouleurTexteBoutonHover}" />
                                <Setter TargetName="Bordure" Property="Background" Value="{DynamicResource CouleurBoutonHover}" />
                                <Setter Property="Cursor" Value="Hand" />
                            </MultiTrigger>
                            <MultiTrigger>
                                <!-- Bouton pressed -->
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsMouseOver" Value="True" />
                                    <Condition Property="Button.IsPressed" Value="True" />
                                    <Condition Property="IsEnabled" Value="true" />
                                </MultiTrigger.Conditions>
                                <Setter TargetName="Bordure" Property="BorderBrush" Value="{DynamicResource CouleurBoutonPressed}"/>
                                <Setter TargetName="bla" Property="TextBlock.Foreground" Value="{DynamicResource CouleurTexteBoutonPressed}" />
                                <Setter TargetName="Bordure" Property="Background" Value="{DynamicResource CouleurBoutonPressed}" />
                                <Setter Property="Cursor" Value="Hand" />
                            </MultiTrigger>

                            <Trigger Property="IsEnabled" Value="False">
                                <Setter TargetName="Bordure" Property="BorderBrush" Value="{DynamicResource CouleurBoutonDisabled}"/>
                                <Setter TargetName="bla" Property="TextBlock.Foreground" Value="{DynamicResource CouleurTexteBoutonDisabled}" />
                                <Setter TargetName="Bordure" Property="Background" Value="Transparent" />
                                <Setter Property="Cursor" Value="Arrow" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

这是我的按钮的样式，我处理事件鼠标输入和鼠标离开并将“按钮B”的标记置于“按钮A”的鼠标输入上，并将“按钮A”设置为0鼠标离开。

我的反思是说Tag = 1然后改变背景和前景。我已经尝试了几个带触发器和数据触发器的选项，但它们似乎都没有用。

我该如何解决这个问题？

谢谢！

Answer 1

在资源名称空间 xmlns：sys =“clr-namespace：System; assembly = mscorlib”中使用Button“B”。

<强>资源

<Window.Resources>
    <sys:String x:Key="B">B</sys:String>

    <Storyboard x:Key="Button_A_MouseOver">
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="{StaticResource B}" Storyboard.TargetProperty="Content">
            <DiscreteObjectKeyFrame KeyTime="0:0:0.1" Value="New Button Content"></DiscreteObjectKeyFrame>
        </ObjectAnimationUsingKeyFrames>
        <DoubleAnimation Storyboard.TargetName="{StaticResource B}" Storyboard.TargetProperty="Width" To="200" Duration="0:0:0.1"></DoubleAnimation>
        <DoubleAnimation Storyboard.TargetName="{StaticResource B}" Storyboard.TargetProperty="Height" To="45" Duration="0:0:0.1"></DoubleAnimation>
        <DoubleAnimation Storyboard.TargetName="{StaticResource B}" Storyboard.TargetProperty="FontSize" To="17" Duration="0:0:0.1"></DoubleAnimation>
        <ColorAnimation Storyboard.TargetName="{StaticResource B}" Storyboard.TargetProperty="BorderBrush.Color" To="Black" Duration="0:0:0.1" />
        <ColorAnimation Storyboard.TargetName="{StaticResource B}" Storyboard.TargetProperty="Background.Color" To="Red" Duration="0:0:0.1" />
    </Storyboard>

  <Storyboard x:Key="Button_A_MouseLeave">
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="{StaticResource B}" Storyboard.TargetProperty="Content">
            <DiscreteObjectKeyFrame KeyTime="0:0:0.1" Value="Button2"></DiscreteObjectKeyFrame>
        </ObjectAnimationUsingKeyFrames>
        <DoubleAnimation Storyboard.TargetName="{StaticResource B}" Storyboard.TargetProperty="Width" To="100" Duration="0:0:0.1"></DoubleAnimation>
        <DoubleAnimation Storyboard.TargetName="{StaticResource B}" Storyboard.TargetProperty="Height" To="35" Duration="0:0:0.1"></DoubleAnimation>
        <DoubleAnimation Storyboard.TargetName="{StaticResource B}" Storyboard.TargetProperty="FontSize" To="14" Duration="0:0:0.1"></DoubleAnimation>
        <ColorAnimation Storyboard.TargetName="{StaticResource B}" Storyboard.TargetProperty="BorderBrush.Color" To="DarkCyan" Duration="0:0:0.1" />
        <ColorAnimation Storyboard.TargetName="{StaticResource B}" Storyboard.TargetProperty="Background.Color" To="DarkBlue" Duration="0:0:0.1" />
    </Storyboard>

    <Style x:Key="ButtonStepperStyle" TargetType="Button">
        <Setter Property="Cursor" Value="Hand"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border Name="bd" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
                        <ContentPresenter Name="bd_content" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" TextElement.Foreground="{TemplateBinding Foreground}" TextElement.FontFamily="{TemplateBinding FontFamily}" TextElement.FontSize="{TemplateBinding FontSize}"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter TargetName="bd" Property="Background" Value="Red"/>
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="bd" Property="BorderBrush" Value="Black"/>
                            <Setter TargetName="bd" Property="BorderThickness" Value="2"/>
                            <Setter TargetName="bd" Property="Background" Value="White"/>
                            <Setter TargetName="bd_content" Property="TextElement.Foreground" Value="Black"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter TargetName="bd" Property="BorderBrush" Value="Black"/>
                            <Setter TargetName="bd" Property="BorderThickness" Value="2"/>
                            <Setter TargetName="bd" Property="Background" Value="Gray"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

</Window.Resources>

<强>的Xaml

 <StackPanel Orientation="Horizontal">
    <Button Name="A" Style="{StaticResource ButtonStepperStyle}"  Height="35" Width="100" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Foreground="White" FontFamily="Segoe Ui Dark" FontSize="14" BorderBrush="DarkCyan" BorderThickness="2" Background="MidnightBlue"  Content="Button1">
        <Button.Triggers>
            <EventTrigger RoutedEvent="MouseEnter">
                <BeginStoryboard Storyboard="{StaticResource Button_A_MouseOver}"/>
            </EventTrigger>
            <EventTrigger RoutedEvent="MouseLeave">
                <BeginStoryboard Storyboard="{StaticResource Button_A_MouseLeave}"/>
            </EventTrigger>
        </Button.Triggers>
    </Button>
    <Button Name="B" Style="{StaticResource ButtonStepperStyle}" Height="35" Width="100" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Foreground="White" FontFamily="Segoe Ui Dark" FontSize="14" BorderBrush="DarkCyan" BorderThickness="2" Background="MidnightBlue"  Content="Button2" Margin="20,0,0,0"/>
</StackPanel>

<强>结果

enter image description here

<强> UPDATE1

<强>资源

 <Window.Resources>
    <Storyboard x:Key="Button_A_MouseOver" x:Shared="False"  Storyboard.TargetName="{DynamicResource AnimationTarget}">            
        <DoubleAnimation  Storyboard.TargetProperty="Width" To="200" Duration="0:0:0.1"></DoubleAnimation>
        <DoubleAnimation  Storyboard.TargetProperty="Height" To="45" Duration="0:0:0.1"></DoubleAnimation>
        <DoubleAnimation  Storyboard.TargetProperty="FontSize" To="17" Duration="0:0:0.1"></DoubleAnimation>
        <ColorAnimation   Storyboard.TargetProperty="BorderBrush.Color" To="Black" Duration="0:0:0.1" />
        <ColorAnimation   Storyboard.TargetProperty="Background.Color" To="Red" Duration="0:0:0.1" />
    </Storyboard>
    <Storyboard x:Key="Button_A_MouseLeave" x:Shared="False" Storyboard.TargetName="{DynamicResource AnimationTarget}">           
        <DoubleAnimation Storyboard.TargetProperty="Width" To="100" Duration="0:0:0.1"></DoubleAnimation>
        <DoubleAnimation  Storyboard.TargetProperty="Height" To="35" Duration="0:0:0.1"></DoubleAnimation>
        <DoubleAnimation  Storyboard.TargetProperty="FontSize" To="14" Duration="0:0:0.1"></DoubleAnimation>
        <ColorAnimation   Storyboard.TargetProperty="BorderBrush.Color" To="DarkCyan" Duration="0:0:0.1" />
        <ColorAnimation   Storyboard.TargetProperty="Background.Color" To="DarkBlue" Duration="0:0:0.1" />
    </Storyboard>

    <Style x:Key="ButtonStepperStyle" TargetType="Button">
       <!--Same as Above-->            
    </Style>
</Window.Resources>

<强> XAML

这里我使用了相同的 x：Key =“A”nimationTarget 而不是Tag来定义Taeget Name，如下面的xaml

对于按钮A =目标名称是B

<Button.Resources>
    <sys:String x:Key="AnimationTarget">B</sys:String>
 </Button.Resources>

对于按钮B =目标名称是C

 <Button.Resources>
    <sys:String x:Key="AnimationTarget">C</sys:String>
 </Button.Resources>

    <StackPanel Orientation="Horizontal">
        <Button Name="A" Style="{StaticResource ButtonStepperStyle}" Tag="B"  Height="35" Width="100" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Foreground="White" FontFamily="Segoe Ui Dark" FontSize="14" BorderBrush="DarkCyan" BorderThickness="2" Background="MidnightBlue"  Content="Button1">
            <Button.Triggers>
                <EventTrigger RoutedEvent="MouseEnter"  >
                    <BeginStoryboard   Storyboard="{StaticResource Button_A_MouseOver}"/>
                </EventTrigger>
                <EventTrigger RoutedEvent="MouseLeave">
                    <BeginStoryboard   Storyboard="{StaticResource Button_A_MouseLeave}"/>
                </EventTrigger>
            </Button.Triggers>
            <Button.Resources>
                <sys:String x:Key="AnimationTarget">B</sys:String>
            </Button.Resources>
        </Button>
        <Button Name="B" Style="{StaticResource ButtonStepperStyle}"  Height="35" Width="100" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Foreground="White" FontFamily="Segoe Ui Dark" FontSize="14" BorderBrush="DarkCyan" BorderThickness="2" Background="MidnightBlue"  Content="Button2" Margin="20,0,0,0">
            <Button.Triggers>
                <EventTrigger RoutedEvent="MouseEnter"  >
                    <BeginStoryboard   Storyboard="{StaticResource Button_A_MouseOver}"/>
                </EventTrigger>
                <EventTrigger RoutedEvent="MouseLeave">
                    <BeginStoryboard   Storyboard="{StaticResource Button_A_MouseLeave}"/>
                </EventTrigger>
            </Button.Triggers>
            <Button.Resources>
                <sys:String x:Key="AnimationTarget">C</sys:String>
            </Button.Resources>
        </Button>
        <Button Name="C" Style="{StaticResource ButtonStepperStyle}"  Height="35" Width="100" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Foreground="White" FontFamily="Segoe Ui Dark" FontSize="14" BorderBrush="DarkCyan" BorderThickness="2" Background="MidnightBlue"  Content="Button2" Margin="20,0,0,0"/>
    </StackPanel

Update2 使用标记

<强>资源

<Window.Resources> 
    <Storyboard x:Key="Button_A_MouseOver" x:Shared="False"  Storyboard.TargetName="{Binding Path=Tag, RelativeSource={RelativeSource AncestorType=Button}}">            
        <DoubleAnimation  Storyboard.TargetProperty="Width" To="200" Duration="0:0:0.1"></DoubleAnimation>
        <DoubleAnimation  Storyboard.TargetProperty="Height" To="45" Duration="0:0:0.1"></DoubleAnimation>
        <DoubleAnimation  Storyboard.TargetProperty="FontSize" To="17" Duration="0:0:0.1"></DoubleAnimation>
        <ColorAnimation   Storyboard.TargetProperty="BorderBrush.Color" To="Black" Duration="0:0:0.1" />
        <ColorAnimation   Storyboard.TargetProperty="Background.Color" To="Red" Duration="0:0:0.1" />
    </Storyboard>

    <Storyboard x:Key="Button_A_MouseLeave" x:Shared="False" Storyboard.TargetName="{Binding Path=Tag, RelativeSource={RelativeSource AncestorType=Button}}">           
        <DoubleAnimation Storyboard.TargetProperty="Width" To="100" Duration="0:0:0.1"></DoubleAnimation>
        <DoubleAnimation  Storyboard.TargetProperty="Height" To="35" Duration="0:0:0.1"></DoubleAnimation>
        <DoubleAnimation  Storyboard.TargetProperty="FontSize" To="14" Duration="0:0:0.1"></DoubleAnimation>
        <ColorAnimation   Storyboard.TargetProperty="BorderBrush.Color" To="DarkCyan" Duration="0:0:0.1" />
        <ColorAnimation   Storyboard.TargetProperty="Background.Color" To="DarkBlue" Duration="0:0:0.1" />
    </Storyboard>

    <Style x:Key="ButtonStepperStyle" TargetType="Button">
     <!--Same style-->           
    </Style>
</Window.Resources>

<强>的Xaml

  <StackPanel Orientation="Horizontal">
        <Button Name="A" Style="{StaticResource ButtonStepperStyle}" Tag="B"  Height="35" Width="100" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Foreground="White" FontFamily="Segoe Ui Dark" FontSize="14" BorderBrush="DarkCyan" BorderThickness="2" Background="MidnightBlue"  Content="Button1">
            <Button.Triggers>
                <EventTrigger RoutedEvent="MouseEnter"  >
                    <BeginStoryboard   Storyboard="{StaticResource Button_A_MouseOver}"/>
                </EventTrigger>
                <EventTrigger RoutedEvent="MouseLeave">
                    <BeginStoryboard   Storyboard="{StaticResource Button_A_MouseLeave}"/>
                </EventTrigger>
            </Button.Triggers>               
        </Button>
        <Button Name="B" Style="{StaticResource ButtonStepperStyle}"  Height="35" Width="100" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Foreground="White" FontFamily="Segoe Ui Dark" FontSize="14" BorderBrush="DarkCyan" BorderThickness="2" Background="MidnightBlue"  Content="Button2" Margin="20,0,0,0"/>
    </StackPanel>

Answer 2

为要更改的按钮（按钮2）创建自定义样式（和默认样式）。在MouseEnter事件中：

  button2.Style=(your custom button style);

在MouseLeave事件中：

  button2.Style=(your default button style);

使用样式更改另一个控件的设计

2 个答案: