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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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