Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > WPF и Silverlight > DoubleAnimation для Button.Width в Silverlight 2.0


Автор: MarS 9.4.2008, 09:09
Сделал простейшую форму на Silverlight 2.0. Шаблон для кнопки, сверху кнопки — прямоугольник. При наведении курсора на кнопку запускается DoubleAnimation для Rectangle.Width. Все замечательно работает. При попытке сделать то же самое для Button.Width — не работает (ничего не происходит). Может, я в шаблонах чего-то не понял? Или понял, но не я?

Код

<UserControl x:Class="AnimationOverview.Page"
    xmlns="http://schemas.microsoft.com/client/2007" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300">
    <StackPanel>
        <StackPanel.Resources>
            <Style TargetType="Button" x:Key="newTemplate">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Button">
                            <StackPanel x:Name='RootElement'>
                                <StackPanel.Resources>
                                    <Storyboard x:Name="MouseOver State" >
                                        <DoubleAnimation Storyboard.TargetName="rect" 
                                            Storyboard.TargetProperty="Width" 
                                            To="300" Duration="0:0:1" 
                                            AutoReverse="True" RepeatBehavior="Forever" />
                                    </Storyboard>
                                </StackPanel.Resources>

                                <Rectangle x:Name="rect" 
                                    RadiusY="2" RadiusX="2" Width="200" Height="20" Fill="Red" />

                                <Button x:Name='btn'
                                        Margin="4"
                                        Content="{TemplateBinding Content}" 
                                        Foreground="{TemplateBinding Foreground}" 
                                        FontSize="{TemplateBinding FontSize}"
                                        Width="200" Height="20" />
                            </StackPanel>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </StackPanel.Resources>
        
        <Button x:Name="myButton" Style="{StaticResource newTemplate}" Content="resized button" />
    </StackPanel>
</UserControl>

Автор: Kefir 9.4.2008, 09:34
то есть?.. тут такое дело. вот твой темплейт:
Код

                          <ControlTemplate TargetType="Button">
                            <StackPanel x:Name='RootElement'>
                                <StackPanel.Resources>
                                    <Storyboard x:Name="MouseOver State" >
                                        <DoubleAnimation Storyboard.TargetName="rect" 
                                            Storyboard.TargetProperty="Width" 
                                            To="300" Duration="0:0:1" 
                                            AutoReverse="True" RepeatBehavior="Forever" />
                                    </Storyboard>
                                </StackPanel.Resources>
                                <Rectangle x:Name="rect" 
                                    RadiusY="2" RadiusX="2" Width="200" Height="20" Fill="Red" />
                                <Button x:Name='btn'
                                        Margin="4"
                                        Content="{TemplateBinding Content}" 
                                        Foreground="{TemplateBinding Foreground}" 
                                        FontSize="{TemplateBinding FontSize}"
                                        Width="200" Height="20" />
                            </StackPanel>
                        </ControlTemplate>

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

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="UntitledProject1.UserControl"
    x:Name="UserControl1"
    Width="640" Height="480">

    <StackPanel>
        <StackPanel.Resources>
            <Style x:Key="newTemplate" TargetType="Button">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Button">
                         <ControlTemplate.Resources>
                                <Storyboard x:Key="myStoryboard">
                                    <DoubleAnimation Storyboard.TargetName="rect" 
                                        Storyboard.TargetProperty="Width" 
                                        To="300" Duration="0:0:1" 
                                        AutoReverse="True" RepeatBehavior="Forever" />
                                    <DoubleAnimation Storyboard.TargetName="btn" 
                                        Storyboard.TargetProperty="Width" 
                                        To="300" Duration="0:0:1" 
                                        AutoReverse="True" RepeatBehavior="Forever" />
                                </Storyboard>
                         </ControlTemplate.Resources>
                         <ControlTemplate.Triggers>
                             <EventTrigger RoutedEvent="Mouse.MouseEnter" SourceName="btn">
                                 <BeginStoryboard x:Name="myStoryboard_BeginStoryboard" Storyboard="{StaticResource myStoryboard}"/>
                             </EventTrigger>
                             <EventTrigger RoutedEvent="Mouse.MouseLeave" SourceName="btn">
                                 <StopStoryboard BeginStoryboardName="myStoryboard_BeginStoryboard"/>
                             </EventTrigger>
                         </ControlTemplate.Triggers>
                            <StackPanel x:Name='RootElement'>
                                <Rectangle x:Name="rect" 
                                    RadiusY="2" RadiusX="2" Width="200" Height="20" Fill="Red" />
                                <Button x:Name='btn'
                                    Margin="4"
                                    Content="{TemplateBinding Content}" 
                                    Foreground="{TemplateBinding Foreground}" 
                                    FontSize="{TemplateBinding FontSize}"
                                    Width="200" Height="20" />
                            </StackPanel>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </StackPanel.Resources>
        
        <Button x:Name="myButton" Style="{StaticResource newTemplate}" Content="resized button" />
    </StackPanel>
</UserControl>

думаю, что в коде всё должно быть более-менее ясно. если нет - спрашивай.

ЗЫ я писал не для сильверлайта, но, думаю, что должно работать.

Автор: MarS 9.4.2008, 11:20
Так... по пунктам:
  • Как я понял из примеров с msdn2.microsoft.com , начало анимации определяется по x:Name="MouseOver State"
  • Хм... логично, но такой подход взят из примеров:
     - Styling and Templating Overview ( http://msdn2.microsoft.com/en-us/library/cc189093(VS.95).aspx )
     - Button Styles and Templates ( http://msdn2.microsoft.com/en-us/library/cc278069(VS.95).aspx )

    попробовал твое решение, студия 2008 отказывается билдить: <ControlTemplate.Resources> - The attachable property 'Resources' was not found in type 'ControlTemplate'. Действительно, если верить мсдн, нет такого свойства :(

Что странно, работает с прозрачностью шаблона кнопки... с шириной - только если сториборд применять к конкретной кнопке, а не к шаблону :(

Автор: Kefir 9.4.2008, 12:00
ok, значит сильверлайт обрезан намного больше, чем я думал. покажи, как ты пытаешься анимировать кнопку, а то я сейчас только анимацию прямоугольника вижу В) и будем разбираться

Автор: MarS 9.4.2008, 12:44
Ввожу вместо Storyboard.TargetName="rect" - Storyboard.TargetName="btn". Пример привел для прямоугольника, ибо он работает :) 
Очень странно, повторюсь, в случае с Opacity все в порядке.
Понравилась менюшка слева: http://silverlight.net/quickstarts/silverlight10/default.aspx
С кнопками пока не выходит :)

Автор: archeg 9.4.2008, 15:15
MarS, у меня твой пример полностью работает. Как с прямоугольником, так и с кнопкой.

Kefir, в Сильверлайте в отличии от WPF не поддерживаються триггеры и класc FrameworkTemplate не имеет свойства Resources. Класс FrameworkTemplate является родитилем для других темплейтов в среде

Автор: Kefir 9.4.2008, 18:48
archeg, да уж, сильверлайт мне ещё учить и учить smile 
однако да - поставил наконец себе новый бленд - всё работает как с кнопкой так и с прямоугольником.

MarS, если совсем не выходит - попробуй создать новый проект и проверить на "чистом листе", так сказать.  smile 

Автор: MarS 10.4.2008, 08:44
Блин, в чистом проекте работает. Старый запустил - тоже работает. Так и не понял, что это было. Но, правда, долго тупил :( Извините smile

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)