I just can not figure out the animation. I'm trying to do something such:

<Button Content="x" Width="25" Height="25"> <Button.Template> <ControlTemplate TargetType="Button"> <Grid> <Ellipse Name="x0"/> <Label Name="x1" Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center"/> </Grid> </ControlTemplate> </Button.Template> <Button.Style> <Style TargetType="Button"> <Style.Triggers> <EventTrigger RoutedEvent="MouseEnter"> <BeginStoryboard> <Storyboard> <ColorAnimation Duration="0:0:1" Storyboard.TargetName="x0" Storyboard.TargetProperty="Fill" To="Red"/> <ColorAnimation Duration="0:0:1" Storyboard.TargetName="x1" Storyboard.TargetProperty="Foreground" To="White"/> </Storyboard> </BeginStoryboard> </EventTrigger> </Style.Triggers> </Style> </Button.Style> </Button>

But this generally gives a compilation error: the TargetName property cannot be set for the Style Setter type. In general, if specifically it should be a button to close a tab in TabControl, something like that is done in chrome.

    1 answer 1

    This is done like this.

    Firstly, the style does not see the names defined in the template, so I transferred the triggers to the template.

    Secondly, the reading is from top to bottom, so I added triggers after the content so that the names are visible.

    Thirdly, you can not animate Brush , you can only animate color. But to get to the color, you need to set it manually to be sure that our Brush is a SolidColorBrush , and not something incomprehensible.

    Fourthly, to access the color, you need to use a strange one. a construction of the Fill.(SolidColorBrush.Color) type Fill.(SolidColorBrush.Color) (means: take the Fill property, find in this object the Color property (or dependency property, or attached property) defined in the SolidColorBrush type.

    Result:

     <Button Content="x" Width="25" Height="25"> <Button.Template> <ControlTemplate TargetType="Button"> <Grid> <Ellipse Name="x0"> <Ellipse.Fill> <SolidColorBrush Color="Transparent"/> </Ellipse.Fill> </Ellipse> <Label Name="x1" Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center"> <Label.Foreground> <SolidColorBrush Color="Black"/> </Label.Foreground> </Label> </Grid> <ControlTemplate.Triggers> <EventTrigger RoutedEvent="MouseEnter"> <BeginStoryboard> <Storyboard> <ColorAnimation Duration="0:0:1" Storyboard.TargetName="x0" Storyboard.TargetProperty="Fill.(SolidColorBrush.Color)" To="Red"/> <ColorAnimation Duration="0:0:1" Storyboard.TargetName="x1" Storyboard.TargetProperty="Foreground.(SolidColorBrush.Color)" To="White"/> </Storyboard> </BeginStoryboard> </EventTrigger> </ControlTemplate.Triggers> </ControlTemplate> </Button.Template> </Button>

    If you need an instant change, then there are enough triggers with setters.

     <Button Content="x" Width="25" Height="25"> <Button.Template> <ControlTemplate TargetType="Button"> <Grid> <Ellipse Name="x0"/> <Label Name="x1" Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center"/> </Grid> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter TargetName="x0" Property="Fill" Value="Red"/> <Setter TargetName="x1" Property="Foreground" Value="White"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Button.Template> </Button>
    • not exactly ... First, the animation is too smooth. I actually don't need any animation. I need to just instantly turn the button red. Secondly, it is necessary that when you remove the mouse from the button everything returns back as it was, but now it does not return. - PECHAPTER
    • @DarkByte: I did not touch the animation, it remained as you wrote. So the claim here is not to me. And if you need instantaneous - then yes, probably triggers are better. Well, to return, you need a reverse animation, of course. Or reverse trigger. - VladD
    • and how to do instantly? In terms of triggers? What are the triggers? I have no trigger chtoli? And as for the return, shouldn't it automatically return ??? This is usually the case with triggers ... - PECHAILTER
    • @DarkByte: This is with DataTriggers. Now rewrite. - VladD
    • one
      @DarkByte: Put the trigger on IsPressed to IsPressed . - VladD