1

Никак не могу разобраться с анимацией. Я пытаюсь сделать что то эдакое:

<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>

Но так вообще выдает ошибку компиляции: свойство TargetName не может быть задано для типа Style Setter. В общем то если конкретно это должна быть кнопка для закрытия вкладки в TabControl, что то по типу того как в хроме сделано.

1 ответ 1

1

Это делается вот как.

Во-первых, стиль не видит имена, определённые в темплейте, поэтому триггеры я перенёс в темплейт.

Во-вторых, чтение происходит сверху вниз, поэтому я добавил триггеры после контента, чтобы имена были видимы.

В-третьих, вы не можете анимировать Brush, анимировать можно лишь цвет. Но чтобы добраться до цвета, нужно установить его вручную, чтобы быть уверенным в том, что наш Brush есть SolidColorBrush, а не что-то непонятное.

В-четвёртых, чтобы доступиться до цвета, нужно использовать странную. конструкцию вида Fill.(SolidColorBrush.Color) (означает: возьми свойство Fill, найди в этом объекте свойство Color (или dependency property, или attached property), определённое в типе SolidColorBrush.

Результат:

<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>

Если нужно мгновенное изменение, то достаточно триггеров с сеттарами.

<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>
16
  • не совсем так... Во первых анимация слишком плавная. Мне фактически никакая анимация и не нужна. Мне нужно чтобы просто мгновенно кнопка стала красной. Во вторых надо чтобы когда убираешь мышку с кнопки все возвращалось обратно как было, а сейчас не возвращается.
    – Developer
    30 апр 2016 в 12:10
  • @DarkByte: Анимацию я не трогал, она осталась как вы написали. Так что претензии тут не ко мне. А если нужно мгновенно — тогда да, лучше наверное триггеры. Ну и чтобы возвращалось, нужна обратная анимация, понятно. Или обратный триггер.
    – VladD
    30 апр 2016 в 12:15
  • а как сделать мгновенно? В смысле триггеры? Какие триггеры? У меня что не триггер чтоли? А то что касается возврата, разве оно не должно автоматически возвращать??? Обычно так бывает с триггерами...
    – Developer
    30 апр 2016 в 12:17
  • @DarkByte: Это с DataTrigger'ами. Сейчас перепишу.
    – VladD
    30 апр 2016 в 12:48
  • 1
    @DarkByte: Для нажатия поставьте триггер на IsPressed.
    – VladD
    30 апр 2016 в 13:22

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.