【问题标题】:Change design of another control using style使用样式更改另一个控件的设计
【发布时间】:2014-06-27 23:27:59
【问题描述】:

当我的鼠标悬停在另一个控件上时,我试图调用控件的设计状态。 示例:我的鼠标悬停在“按钮 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>

这是我的按钮的样式,我处理了事件 Mouse Enter 和 mouse Leave 并将“button B”的 Tag 在“Button A”的 Mouse enter 上设置为 1,在“Button A”上设置为 0鼠标离开。

我的反应是如果 Tag=1 则更改背景和前景。我已经尝试了几个带有触发器和数据触发器的选项,但它们似乎都不起作用。

我该如何解决这个问题?

谢谢!

【问题讨论】:

    标签: wpf templates styles


    【解决方案1】:

    添加了在资源命名空间xmlns:sys="clr-namespace:System;assembly=mscorlib"中使用按钮“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>
    

    结果

    更新1

    资源

     <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 名称,如下面的 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>
    

    【讨论】:

    • 谢谢!但是有没有办法让它与 Tag 属性一起工作?我的按钮模板与许多其他按钮共享,我希望能够保留通用模板
    • 我不知道如何使用 Tag 属性,但您可以使用 x:string 和相同的键来使用 StoryBoard.TargetProperty 作为动态资源来保留通用模板。请查看更新希望这会有所帮助。跨度>
    • 请查看带有标签属性的更新答案“Update2”。
    【解决方案2】:

    为您想要更改的按钮 (button2) 创建自定义样式(和您的默认样式)。在您的 MouseEnter 事件中:

      button2.Style=(your custom button style);
    

    在您的 MouseLeave 事件中:

      button2.Style=(your default button style);
    

    【讨论】:

    • 问题是我的控件与资源字典位于不同的项目中,因此我无法在 mouseEnter 或 MouseLeave 中管理样式
    • 为什么不直接将资源添加到您的控件中?
    猜你喜欢
    • 1970-01-01
    • 2013-10-05
    • 1970-01-01
    • 2013-07-14
    • 1970-01-01
    • 1970-01-01
    • 2016-05-12
    • 2021-03-01
    • 2017-07-16
    相关资源
    最近更新 更多