rooks, Приветствую. Спасибо за отклик. Сам хотел порыть в направлении свойств ScaleX и ScaleYВ общем решил задачу таким образом. В свойства внешнего контура(тут это border) кнопки(в шаблоне, задающем внешний вид) дописал следующее | Код | RenderTransformOrigin="0.5,0.5"
|
чтобы обеспечить начальную точку анимации (изменения размеров) в центре контрола. Далее, внутри тега внешнего контура вписал код для свойства, изменяющего свои параметры | Код | <Border.RenderTransform> <ScaleTransform x:Name="borderScaleTransform"/> </Border.RenderTransform>
|
далее в коде, описывающем анимацию(увеличение размера кнопки), я вызываю изменения этого свойства(Storyboard.TargetName=" borderScaleTransform" ) | Код | <DoubleAnimation Storyboard.TargetName="borderScaleTransform" Storyboard.TargetProperty="ScaleX" To="1.1" Duration="00:00:00.1"/> <DoubleAnimation Storyboard.TargetName="borderScaleTransform" Storyboard.TargetProperty="ScaleY" To="1.1" Duration="00:00:00.1"/>
|
Для обратной анимации(возвращения исходного размера кнопки) пишу то же самое, но значение атрибута То меняю на 1.0. И все в принципе получилось так, как и хотелось. Вот полный код для шаблона кнопки в стиле Vista | Код | <!-- Секция Resources для хранения ресурсов окна--> <Window.Resources>
<!-- Создаём шаблон с названием GlassButton для контролов типа Button --> <ControlTemplate x:Key="GlassButton" TargetType="{x:Type Button}" >
<!-- Секция для хранения ресурсов шаблона --> <ControlTemplate.Resources>
<!-- Секция Storyboard является контейнером для анимации, данный контейнер содержит в себе всю информацию отностительно анимации. Первый Storyboard называется Timeline1. Будет использоваться для "зажигания" кнопки --> <Storyboard x:Key="Timeline1"> <!-- Создание анимации для glow, и временем начала отсчёта 00:00:00, так - же указывается TargetProperty = UIElement.Opacity. Это означает, что данная анимация будет относится к прозрачности контрола. Происходит переход от 0 до 1, за установленное время --> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="glow" Storyboard.TargetProperty ="(UIElement.Opacity)"> <!-- Конечная точка анимации --> <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="1"/> </DoubleAnimationUsingKeyFrames> <DoubleAnimation Storyboard.TargetName="borderScaleTransform" Storyboard.TargetProperty="ScaleX" To="1.1" Duration="00:00:00.3000000"/> <DoubleAnimation Storyboard.TargetName="borderScaleTransform" Storyboard.TargetProperty="ScaleY" To="1.1" Duration="00:00:00.3000000"/> </Storyboard>
<!-- Создание Storyboard с именем Timeline2. Будет использоваться для "гашения" кнопки и придания ей первоначального размера. В настройках анимации происходит переход от 1 до 0(для свойства opacity) и от 1.1 до 1.0(для свойства Scale), за установленное время --> <Storyboard x:Key="Timeline2"> <DoubleAnimationUsingKeyFrames BeginTime= "00:00:00" Storyboard.TargetName ="glow" Storyboard.TargetProperty="(UIElement.Opacity)"> <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0"/> </DoubleAnimationUsingKeyFrames> <DoubleAnimation Storyboard.TargetName="borderScaleTransform" Storyboard.TargetProperty="ScaleX" To="1.0" Duration="00:00:00.3000000"/> <DoubleAnimation Storyboard.TargetName="borderScaleTransform" Storyboard.TargetProperty="ScaleY" To="1.0" Duration="00:00:00.3000000"/> </Storyboard> <!-- Конец хранения ресурсов контрола--> </ControlTemplate.Resources>
<!-- Начало описания графического представления нашей кнопки-->
<!-- Создание внешней (белой) границы кнопки. Кстати при описании цвета используется ARGB схема, это означает что первые 2 символа после # указывают на прозрачность--> <Border BorderBrush="#FFFFFFFF" BorderThickness="1,1,1,1" CornerRadius="4,4,4,4" RenderTransformOrigin="0.5,0.5">
<!-- это свойство для обеспечения анимации--> <Border.RenderTransform> <ScaleTransform x:Name="borderScaleTransform"/> </Border.RenderTransform>
<!-- Создание внутренней (чёрной) границы кнопки --> <Border x:Name= "border" Background="#7F000000" BorderBrush="#FF000000" BorderThickness="1,1,1,1" CornerRadius="4,4,4,4">
<!-- Разбиваем пространство на 2-е строки. Это нужно для реализации эффекта стеклянной поверхности --> <Grid> <Grid.RowDefinitions> <RowDefinition Height="0.507*"/> <RowDefinition Height="0.493*"/> </Grid.RowDefinitions>
<!-- Рисуем внутри кнопки "свечение". Тот самый эффект который происходит при наведении на кнопку курсором мыши. Название шейпа будет glow --> <!-- Задаём непрозрачность шейпа 0 (это начальное значение, то есть пока кнопка не активна) --> <Border x:Name ="glow" Width="Auto" Grid.RowSpan="2" CornerRadius="4,4,4,4" Opacity="0" HorizontalAlignment="Stretch">
<!-- Будем работать с фоном --> <Border.Background>
<!-- Создаём радиальный градиент --> <RadialGradientBrush>
<!-- Задаём смещение градиента, так чтобы оно было в середине кнопки по горизонтали и немного заходило за нижнюю границу кнопки по вертикали --> <RadialGradientBrush.RelativeTransform > <TransformGroup> <ScaleTransform ScaleX="1.702" ScaleY="2.243"/>
<SkewTransform AngleX="0" AngleY="0"/>
<RotateTransform Angle="0"/>
<TranslateTransform X="-0.368" Y="-0.152"/>
</TransformGroup> </RadialGradientBrush.RelativeTransform >
<!-- Устанавливаем цвета градиента в формате ARGB--> <GradientStop Color="#B28DBDFF" Offset="0"/> <GradientStop Color="#008DBDFF" Offset="1"/> </RadialGradientBrush> </Border.Background> </Border>
<!-- Завершаем работу со свечением --> <!-- Начинаем рисовать блик для придания "стеклянного эффекта" --> <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto" Grid.RowSpan="2"/>
<!-- Создаём шейп с названием shine --> <Border x:Name="shine" Width="Auto" CornerRadius="4,4,0,0" HorizontalAlignment= "Stretch" Margin="0,0,0,0">
<!-- Рисуем на фоне шейпа градиент, который и будет собственно стеклянным бликом --> <Border.Background> <LinearGradientBrush EndPoint= "0.494,0.889" StartPoint="0.494,0.028"> <GradientStop Color="#99FFFFFF" Offset="0"/> <GradientStop Color="#33FFFFFF" Offset="1"/> </LinearGradientBrush> </Border.Background> </Border> <!-- Блик нарисовали --> </Grid> </Border> </Border>
<!-- Переходим к описанию триггеров нашей кнопки. Триггеры управляют состоянием объекта и через него мы будем описывать действия кнопки на события мыши --> <ControlTemplate.Triggers>
<!-- Первый триггер IsPressed, состояние когда кнопка нажата. Просто устанавливаем соответствующие значения прозрачности, видимости и фона, для каждого из шейпов (указываем его имя в TargetName) --> <Trigger Property="IsPressed" Value="True">
<Setter Property="Opacity" TargetName="shine" Value="0.4"/>
<Setter Property="Background" TargetName="border" Value="#CC000000"/>
<Setter Property="Visibility" TargetName="glow" Value="Hidden"/> </Trigger>
<!-- Второй триггер который нас интересует, это триггер состояния когда курсор находится над кнопкой, но кнопка ещё не нажата. Тут есть тонкость: у этого триггера есть 2 состояния. Состояние 1 когда курсор "пришел" на кнопку и состояние 2, когда курсор "ушел с кнопки". Для эмуляции подсветки кнопки мы вызываем анимации Timeline1 и Timeline2, в которых прописано, что они будут менять значение прозрачности у шейпа с названием glow.-->
<Trigger Property="IsMouseOver" Value="True">
<!-- Описываем состояние, когда курсор "пришел" --> <Trigger.EnterActions> <!-- Вызываем анимацию Timeline1 --> <BeginStoryboard Storyboard="{StaticResource Timeline1}"/> </Trigger.EnterActions> <!-- Описываем состояние, когда курсор "ушел" --> <Trigger.ExitActions> <!-- Вызываем анимацию Timeline2 --> <BeginStoryboard Storyboard="{StaticResource Timeline2}"/> </Trigger.ExitActions> </Trigger> <!-- Заканчиваем описание триггеров --> </ControlTemplate.Triggers> <!-- Заканчиваем описание шаблона --> </ControlTemplate> <!-- Заканчиваем описание ресурсов --> </Window.Resources>
|
он прописан в ресурсы окна. Но можно его прописать и для всего приложения, тогда нужно поместить этот код в файл app.xaml. ЗЫ VS 2008 SP1 FW 3.5 SP1 Это сообщение отредактировал(а) thomas - 3.11.2008, 13:38
--------------------
Крепко жму горло, искренне ваш Thomas. (С)vingrad Некоторые сорта флоры буквально за одно мгновение превращают нас в фауну! Проблемы негров шерифа не волнуют.
|