VPF::анимация кнопки, событие "мышь над объектом"

gambit

Дата 29.8.2010, 20:09 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Награды: 1

Профиль
Группа: Комодератор
Сообщений: 1359
Регистрация: 25.6.2006
Где: я?

Репутация: нет
Всего: 40

надо что бы на время нахождения мыши над кнопкой, кнопка была покрашена в оранжевый цвет, делаю:

Код


<Style.Triggers>
                <EventTrigger RoutedEvent="Button.MouseEnter">
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
                                <SplineColorKeyFrame KeyTime="00:00:00.5000000" Value="#FFFFB300"/>
                            </ColorAnimationUsingKeyFrames>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>

                <EventTrigger RoutedEvent="Button.MouseLeave">
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
                                <SplineColorKeyFrame KeyTime="00:00:00.5000000" Value="#FFD6E1EE"/>
                            </ColorAnimationUsingKeyFrames>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Style.Triggers>

По идее, мышь поднесли, кнопка плавно(за пол сек) становится оранжевой, потом мышь увели, кнопка начинает становитться прежнего цвета. Но на практике, мы навели мышь, кнопка выделяется стандартными средствами (типа ярче цвета становятся), потом мышь убираем, кнопка резко становится оранжевой, и за пол сек приходит к стандартному виду.
Т.е. вторая анимация работает, и цвета переходов для анимации определяет правильно(как будто кнопка оранжевой была), а вот с первой анимацией косяк.
Как сделать нормально?

SKrivosein

Дата 30.8.2010, 00:49 (ссылка)

(нет голосов)

Загрузка ...

Идущий в даль

Профиль
Группа: Участник
Сообщений: 271
Регистрация: 9.6.2007
Где: Praha - Прага

Репутация: нет
Всего: 8

Я так понимаю что этот стиль налеплен на стандартную кнопку, а у неё остался стандартный хром, который всё и портит.

--------------------

Оптимист - это плохо информированный человек.

gambit

Дата 30.8.2010, 00:54 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Награды: 1

Профиль
Группа: Комодератор
Сообщений: 1359
Регистрация: 25.6.2006
Где: я?

Репутация: нет
Всего: 40

Цитата(SKrivosein @ 30.8.2010, 00:49

)

Я так понимаю что этот стиль налеплен на стандартную кнопку

да

Цитата(SKrivosein @ 30.8.2010, 00:49

)

а у неё остался стандартный хром, который всё и портит.

не знаю остался ли что то от стандартного стиля, но цвета, форму и вторую анимацию она подцепила из моего стиля, а вот с первой анимацией - косяк(

SKrivosein

Дата 30.8.2010, 01:02 (ссылка)

(нет голосов)

Загрузка ...

Идущий в даль

Профиль
Группа: Участник
Сообщений: 271
Регистрация: 9.6.2007
Где: Praha - Прага

Репутация: нет
Всего: 8

Не знаю весь твой код, надо посмотреть на кнопку в Blende.

Лучше приведу пример своей кнопки

Код


<Button Height="28" HorizontalAlignment="Right" Margin="0,0,36,15" x:Name="buttonClose" VerticalAlignment="Bottom" Width="105" 
                        Content="Закрыть" FontSize="14" FontFamily="Arial" Foreground="White" Click="buttonClose_Click" Template="{DynamicResource RedButtonTemplate}" IsEnabled="True" 
                        IsCancel="True"/>

темплейт

Код


<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <ControlTemplate x:Key="RedButtonTemplate" TargetType="{x:Type Button}">
        <ControlTemplate.Resources>
            <Storyboard x:Key="OnMouseEnter">
                <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="border1" Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Duration="00:00:00.0010000">
                    <SplineColorKeyFrame KeyTime="00:00:00" Value="#FFF5DE78"/>
                </ColorAnimationUsingKeyFrames>
                <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="border1" Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Duration="00:00:00.0010000">
                    <SplineColorKeyFrame KeyTime="00:00:00" Value="#FFC93D23"/>
                </ColorAnimationUsingKeyFrames>
                <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="border1" Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Duration="00:00:00.0010000">
                    <SplineColorKeyFrame KeyTime="00:00:00" Value="#FFE36A53"/>
                </ColorAnimationUsingKeyFrames>
                <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="border1" Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Duration="00:00:00.0010000">
                    <SplineColorKeyFrame KeyTime="00:00:00" Value="#FFFEB8AC"/>
                </ColorAnimationUsingKeyFrames>
                <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="border1" Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[4].(GradientStop.Color)">
                 <SplineColorKeyFrame KeyTime="00:00:00" Value="#FFFEB8AC"/>
                </ColorAnimationUsingKeyFrames>
            </Storyboard>
            <Storyboard x:Key="OnMouseLeave">
                <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="border1" Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Duration="00:00:00.0010000">
                 <SplineColorKeyFrame KeyTime="00:00:00" Value="#FFB4C3DB"/>
                </ColorAnimationUsingKeyFrames>
                <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="border1" Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Duration="00:00:00.0010000">
                 <SplineColorKeyFrame KeyTime="00:00:00" Value="#FF616AA3"/>
                </ColorAnimationUsingKeyFrames>
                <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="border1" Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Duration="00:00:00.0010000">
                 <SplineColorKeyFrame KeyTime="00:00:00" Value="#FF787FB1"/>
                </ColorAnimationUsingKeyFrames>
                <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="border1" Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Duration="00:00:00.0010000">
                 <SplineColorKeyFrame KeyTime="00:00:00" Value="#FFF89C8C"/>
                </ColorAnimationUsingKeyFrames>
                <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="border1" Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[4].(GradientStop.Color)" Duration="00:00:00.0010000">
                 <SplineColorKeyFrame KeyTime="00:00:00" Value="#FF9398BF"/>
                </ColorAnimationUsingKeyFrames>
            </Storyboard>
            <Storyboard x:Key="IsEnabledFalse">
             <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="border1" Storyboard.TargetProperty="(UIElement.Opacity)">
                 <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
                 <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0.7"/>
             </DoubleAnimationUsingKeyFrames>
            </Storyboard>
            <Storyboard x:Key="IsEnabledTrue">
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="border1" Storyboard.TargetProperty="(UIElement.Opacity)" Duration="00:00:00.0010000">
                 <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
            <Storyboard x:Key="IsFocusedTrue">
                <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="border" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)">
                    <SplineColorKeyFrame KeyTime="00:00:00" Value="#99FFFFFF"/>
                    <SplineColorKeyFrame KeyTime="00:00:00.1000000" Value="#FFC3CE00"/>
                </ColorAnimationUsingKeyFrames>
            </Storyboard>
            <Storyboard x:Key="IsFocusedFalse">
                <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="border" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)">
                    <SplineColorKeyFrame KeyTime="00:00:00" Value="#FFC3CE00"/>
                    <SplineColorKeyFrame KeyTime="00:00:00.1000000" Value="#99FFFFFF"/>
                </ColorAnimationUsingKeyFrames>
            </Storyboard>
        </ControlTemplate.Resources>
        <Border x:Name="border1" BorderThickness="1" CornerRadius="4">
            <Border.Effect>
                <DropShadowEffect BlurRadius="3" ShadowDepth="1" Opacity="0.5" Color="{DynamicResource DarkBlue}"/>
            </Border.Effect>
            <Border.Background>
                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                    <GradientStop Color="#E2EAF3" Offset="0" />
                    <GradientStop Color="#FF787FB1" Offset="0.45" />
                    <GradientStop Color="#FF616AA3" Offset="0.45" />
                    <GradientStop Color="#FFB4C3DB" Offset="1" />
                    <GradientStop Color="#FF9398BF"/>
                </LinearGradientBrush>
            </Border.Background>
            <Border.BorderBrush>
                <SolidColorBrush Color="{DynamicResource RedDark}"/>
            </Border.BorderBrush>
            <Border x:Name="border" Height="Auto" BorderBrush="#99FFFFFF" BorderThickness="1" CornerRadius="3" Background="#00000000">
                <ContentPresenter Width="Auto" Height="Auto" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </Border>
        </Border>
        <ControlTemplate.Triggers>
            <Trigger Property="IsFocused" Value="True">
                <Trigger.ExitActions>
                    <BeginStoryboard x:Name="IsFocusedFalse_BeginStoryboard" Storyboard="{StaticResource IsFocusedFalse}"/>
                </Trigger.ExitActions>
                <Trigger.EnterActions>
                    <BeginStoryboard x:Name="IsFocusedTrue_BeginStoryboard" Storyboard="{StaticResource IsFocusedTrue}"/>
                </Trigger.EnterActions>
            </Trigger>
            <Trigger Property="IsEnabled" Value="False">
                <Trigger.EnterActions>
                    <BeginStoryboard x:Name="IsEnabledFalse_BeginStoryboard" Storyboard="{StaticResource IsEnabledFalse}"/>
                </Trigger.EnterActions>
                <Trigger.ExitActions>
                    <BeginStoryboard x:Name="IsEnabledTrue_BeginStoryboard" Storyboard="{StaticResource IsEnabledTrue}"/>
                </Trigger.ExitActions>
            </Trigger>
            <Trigger Property="IsMouseOver" Value="True" SourceName="border">
                <Trigger.ExitActions>
                    <BeginStoryboard x:Name="OnMouseLeave_BeginStoryboard1" Storyboard="{StaticResource OnMouseLeave}"/>
                </Trigger.ExitActions>
                <Trigger.EnterActions>
                    <BeginStoryboard Storyboard="{StaticResource OnMouseEnter}"/>
                </Trigger.EnterActions>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
</ResourceDictionary>

--------------------

Оптимист - это плохо информированный человек.

gambit

Дата 30.8.2010, 09:16 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Награды: 1

Профиль
Группа: Комодератор
Сообщений: 1359
Регистрация: 25.6.2006
Где: я?

Репутация: нет
Всего: 40

Цитата(SKrivosein @ 30.8.2010, 01:02

)

надо посмотреть на кнопку в Blende.

я ручками анимацию пишу, без бленда.
Сейчас попробую твой вариант

SKrivosein

Дата 30.8.2010, 11:15 (ссылка)

(нет голосов)

Загрузка ...

Идущий в даль

Профиль
Группа: Участник
Сообщений: 271
Регистрация: 9.6.2007
Где: Praha - Прага

Репутация: нет
Всего: 8

Ручками это хорошо, в смысле познания. Но Blend это Blend.

Если на стандартной кнопке нечего не менять но у неё остаётся темплейт подобный такому

Код


<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero">
    <!-- Resource dictionary entries should be defined here. -->
    <Style x:Key="ButtonFocusVisual">
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate>
                    <Rectangle Stroke="Black" StrokeDashArray="1 2" StrokeThickness="1" Margin="2" SnapsToDevicePixels="true"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <LinearGradientBrush x:Key="ButtonNormalBackground" EndPoint="0,1" StartPoint="0,0">
        <GradientStop Color="#F3F3F3" Offset="0"/>
        <GradientStop Color="#EBEBEB" Offset="0.5"/>
        <GradientStop Color="#DDDDDD" Offset="0.5"/>
        <GradientStop Color="#CDCDCD" Offset="1"/>
    </LinearGradientBrush>
    <SolidColorBrush x:Key="ButtonNormalBorder" Color="#FF707070"/>
    <Style x:Key="ButtonStyle1" TargetType="{x:Type Button}">
        <Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
        <Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/>
        <Setter Property="BorderBrush" Value="{StaticResource ButtonNormalBorder}"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Padding" Value="1"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Microsoft_Windows_Themes:ButtonChrome x:Name="Chrome" SnapsToDevicePixels="true" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" RenderDefaulted="{TemplateBinding IsDefaulted}" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}">
                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" RecognizesAccessKey="True"/>
                    </Microsoft_Windows_Themes:ButtonChrome>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsKeyboardFocused" Value="true">
                            <Setter Property="RenderDefaulted" TargetName="Chrome" Value="true"/>
                        </Trigger>
                        <Trigger Property="ToggleButton.IsChecked" Value="true">
                            <Setter Property="RenderPressed" TargetName="Chrome" Value="true"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Foreground" Value="#ADADAD"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

а скрестить удовлетворительно свой код с этим у меня никогда не получилось...
Особено "ненавиденный" Chrome smile

--------------------

Оптимист - это плохо информированный человек.

gambit

Дата 30.8.2010, 11:49 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Награды: 1

Профиль
Группа: Комодератор
Сообщений: 1359
Регистрация: 25.6.2006
Где: я?

Репутация: нет
Всего: 40

Цитата(SKrivosein @ 30.8.2010, 11:15

)

Ручками это хорошо, в смысле познания.

а у меня сейчас задача такая, я в wpf полный новичек, по этому надо ручками все разобрать.

Цитата(SKrivosein @ 30.8.2010, 11:15

)

Но Blend это Blend.

вот я сейчас смотрю что наделано в бленде, это похоже на то, если вордовский документ сохранить в веб страницу - да она работает, но что там понаписано, хрен разберешь)))

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| WPF и Silverlight \| Следующая тема »