Анимация wpf / WPF, Silverlight

ReSQL.ru

Мобильная версия Контакт Правила FAQ Помощь

Гость

Войти | Регистрация | Профиль | Очистить

Новые сообщения | Избранное

Форумы | Пользователи | Статистика | Мод. лог | Поиск

Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр

Форумы / WPF, Silverlight [игнор отключен] [закрыт для гостей] / Анимация wpf

12 сообщений из 12, страница 1 из 1

Анимация wpf

#39237193

Oleg5555

Гость

Добрый день.

Подскажите пожалуйста с реализацией анимации. Создаю UserControl для анимации загрузки:

Код: xml

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.

<UserControl x:Class="BookLab.UserControls.CircularProgressBar"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             Height="120" Width="120" Background="Transparent">
    <Grid Background="Transparent" HorizontalAlignment="Center" VerticalAlignment="Center">
        <Canvas RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Center" VerticalAlignment="Center" Width="100" Height="100" >
            <Ellipse Width="20" Height="20" Canvas.Left="40" Canvas.Top="0" Stretch="Fill" Fill="Gray"  Opacity="1.0"/>
            <Ellipse Width="20" Height="20" Canvas.Left="80" Canvas.Top="40" Stretch="Fill" Fill="Gray"  Opacity="0.1"/>
            <Ellipse Width="20" Height="20" Canvas.Left="40" Canvas.Top="80" Stretch="Fill" Fill="Gray"  Opacity="0.4"/>
            <Ellipse Width="20" Height="20" Canvas.Left="0" Canvas.Top="40" Stretch="Fill" Fill="Gray"  Opacity="0.7"/>
            <Canvas.RenderTransform>
                <RotateTransform Angle="0" />
            </Canvas.RenderTransform>
        </Canvas>
        <Canvas RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Center" VerticalAlignment="Center" Width="100" Height="100" >
            <Ellipse Width="20" Height="20" Canvas.Left="40" Canvas.Top="0" Stretch="Fill" Fill="Gray"  Opacity="0.01"/>
            <Ellipse Width="20" Height="20" Canvas.Left="80" Canvas.Top="40" Stretch="Fill" Fill="Gray"  Opacity="0.2"/>
            <Ellipse Width="20" Height="20" Canvas.Left="40" Canvas.Top="80" Stretch="Fill" Fill="Gray"  Opacity="0.5"/>
            <Ellipse Width="20" Height="20" Canvas.Left="0" Canvas.Top="40" Stretch="Fill" Fill="Gray"  Opacity="0.8"/>
            <Canvas.RenderTransform>
                <RotateTransform Angle="30" />
            </Canvas.RenderTransform>
        </Canvas>
        <Canvas RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Center" VerticalAlignment="Center" Width="100" Height="100" >
            <Ellipse Width="20" Height="20" Canvas.Left="40" Canvas.Top="0" Stretch="Fill" Fill="Gray"  Opacity="0.05"/>
            <Ellipse Width="20" Height="20" Canvas.Left="80" Canvas.Top="40" Stretch="Fill" Fill="Gray"  Opacity="0.3"/>
            <Ellipse Width="20" Height="20" Canvas.Left="40" Canvas.Top="80" Stretch="Fill" Fill="Gray"  Opacity="0.6"/>
            <Ellipse Width="20" Height="20" Canvas.Left="0" Canvas.Top="40" Stretch="Fill" Fill="Gray"  Opacity="0.9"/>
            <Canvas.RenderTransform>
                <RotateTransform Angle="60" />
            </Canvas.RenderTransform>
        </Canvas>
        <Grid.RenderTransform>
            <RotateTransform x:Name="SpinnerRotate" CenterX="50" CenterY="50" />
        </Grid.RenderTransform>
    </Grid>
</UserControl>

В коде контрола пишу такой метод для запуска анимации:

Код: c#

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.

public void BeginAnimation()
        {
            DoubleAnimationUsingKeyFrames animation = new DoubleAnimationUsingKeyFrames();

            animation.Duration          = new Duration(TimeSpan.FromSeconds(12));
            animation.RepeatBehavior    = RepeatBehavior.Forever;
            animation.SpeedRatio        = 12;

            animation.KeyFrames.Add(new DiscreteDoubleKeyFrame() { KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(0)), Value = 0 });
            animation.KeyFrames.Add(new DiscreteDoubleKeyFrame() { KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(1)), Value = 30 });
            animation.KeyFrames.Add(new DiscreteDoubleKeyFrame() { KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(2)), Value = 60 });
            animation.KeyFrames.Add(new DiscreteDoubleKeyFrame() { KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(3)), Value = 90 });
            animation.KeyFrames.Add(new DiscreteDoubleKeyFrame() { KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(4)), Value = 120 });
            animation.KeyFrames.Add(new DiscreteDoubleKeyFrame() { KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(5)), Value = 150 });
            animation.KeyFrames.Add(new DiscreteDoubleKeyFrame() { KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(6)), Value = 180 });
            animation.KeyFrames.Add(new DiscreteDoubleKeyFrame() { KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(7)), Value = 210 });
            animation.KeyFrames.Add(new DiscreteDoubleKeyFrame() { KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(8)), Value = 240 });
            animation.KeyFrames.Add(new DiscreteDoubleKeyFrame() { KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(9)), Value = 270 });
            animation.KeyFrames.Add(new DiscreteDoubleKeyFrame() { KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(10)), Value = 300 });
            animation.KeyFrames.Add(new DiscreteDoubleKeyFrame() { KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(11)), Value = 330 });

            this.SpinnerRotate.BeginAnimation(RotateTransform.AngleProperty, animation);
        }

Контрол размещаю в своем окне:

Код: xml

1.
2.
3.

<Viewbox Grid.RowSpan="2" Name="ViewboxProgressBar" Visibility="Collapsed" Width="150" Height="150" HorizontalAlignment="Center" VerticalAlignment="Center">
            <Local_UC:CircularProgressBar x:Name="CircularProgressBar"/>
        </Viewbox>

При запуске метода в главном окне

Код: c#

this.CircularProgressBar.BeginAnimation();

анимация не отрабатывает.

Хотя если сделать все в xaml по триггеру события, например события загрузки, все работает:

Код: xml

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.

<UserControl x:Class="BookLab.UserControls.CircularProgressBar"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             Height="120" Width="120" Background="Transparent">
    <Grid Background="Transparent" HorizontalAlignment="Center" VerticalAlignment="Center">
        <Canvas RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Center" VerticalAlignment="Center" Width="100" Height="100" >
            <Ellipse Width="20" Height="20" Canvas.Left="40" Canvas.Top="0" Stretch="Fill" Fill="Gray"  Opacity="1.0"/>
            <Ellipse Width="20" Height="20" Canvas.Left="80" Canvas.Top="40" Stretch="Fill" Fill="Gray"  Opacity="0.1"/>
            <Ellipse Width="20" Height="20" Canvas.Left="40" Canvas.Top="80" Stretch="Fill" Fill="Gray"  Opacity="0.4"/>
            <Ellipse Width="20" Height="20" Canvas.Left="0" Canvas.Top="40" Stretch="Fill" Fill="Gray"  Opacity="0.7"/>
            <Canvas.RenderTransform>
                <RotateTransform Angle="0" />
            </Canvas.RenderTransform>
        </Canvas>
        <Canvas RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Center" VerticalAlignment="Center" Width="100" Height="100" >
            <Ellipse Width="20" Height="20" Canvas.Left="40" Canvas.Top="0" Stretch="Fill" Fill="Gray"  Opacity="0.01"/>
            <Ellipse Width="20" Height="20" Canvas.Left="80" Canvas.Top="40" Stretch="Fill" Fill="Gray"  Opacity="0.2"/>
            <Ellipse Width="20" Height="20" Canvas.Left="40" Canvas.Top="80" Stretch="Fill" Fill="Gray"  Opacity="0.5"/>
            <Ellipse Width="20" Height="20" Canvas.Left="0" Canvas.Top="40" Stretch="Fill" Fill="Gray"  Opacity="0.8"/>
            <Canvas.RenderTransform>
                <RotateTransform Angle="30" />
            </Canvas.RenderTransform>
        </Canvas>
        <Canvas RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Center" VerticalAlignment="Center" Width="100" Height="100" >
            <Ellipse Width="20" Height="20" Canvas.Left="40" Canvas.Top="0" Stretch="Fill" Fill="Gray"  Opacity="0.05"/>
            <Ellipse Width="20" Height="20" Canvas.Left="80" Canvas.Top="40" Stretch="Fill" Fill="Gray"  Opacity="0.3"/>
            <Ellipse Width="20" Height="20" Canvas.Left="40" Canvas.Top="80" Stretch="Fill" Fill="Gray"  Opacity="0.6"/>
            <Ellipse Width="20" Height="20" Canvas.Left="0" Canvas.Top="40" Stretch="Fill" Fill="Gray"  Opacity="0.9"/>
            <Canvas.RenderTransform>
                <RotateTransform Angle="60" />
            </Canvas.RenderTransform>
        </Canvas>
        <Grid.RenderTransform>
            <RotateTransform x:Name="SpinnerRotate" CenterX="50" CenterY="50" />
        </Grid.RenderTransform>
        <Grid.Triggers>
            <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimationUsingKeyFrames Duration="0:0:12" RepeatBehavior="Forever" SpeedRatio="12"
                                                       Storyboard.TargetName="SpinnerRotate"
                                                       Storyboard.TargetProperty="(RotateTransform.Angle)">
                            <DiscreteDoubleKeyFrame KeyTime="00:00:00" Value="0" />
                            <DiscreteDoubleKeyFrame KeyTime="00:00:01" Value="30" />
                            <DiscreteDoubleKeyFrame KeyTime="00:00:02" Value="60" />
                            <DiscreteDoubleKeyFrame KeyTime="00:00:03" Value="90" />
                            <DiscreteDoubleKeyFrame KeyTime="00:00:04" Value="120" />
                            <DiscreteDoubleKeyFrame KeyTime="00:00:05" Value="150" />
                            <DiscreteDoubleKeyFrame KeyTime="00:00:06" Value="180" />
                            <DiscreteDoubleKeyFrame KeyTime="00:00:07" Value="210" />
                            <DiscreteDoubleKeyFrame KeyTime="00:00:08" Value="240" />
                            <DiscreteDoubleKeyFrame KeyTime="00:00:09" Value="270" />
                            <DiscreteDoubleKeyFrame KeyTime="00:00:10" Value="300" />
                            <DiscreteDoubleKeyFrame KeyTime="00:00:11" Value="330" />
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Grid.Triggers>
    </Grid>
</UserControl>

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

...

Рейтинг:

0 / 0

17.05.2016, 11:33

| Ответить | Цитировать | Написать

Анимация wpf

#39237480

Roman Mejtes

Участник

Откуда: г. Пермь

Сообщения: 4 264

Рейтинг: 0 / 0

запускайте анимацию не в конструкторе, а по маршрутизируемому событию Control.LoadedEvent.
Оно возникает после расчета размеров, компоновки, рендеринга, связывания и прочего.
Loaded += (source, p) => \\TODO; как то так

...

Рейтинг:

0 / 0

17.05.2016, 15:12

| Ответить | Цитировать | Написать

Анимация wpf

#39237516

Oleg5555

Гость

В том то и дело, что мне не нужно по событию. В общем виде мне нужен контрол для анимации какого-то продолжительного действия. У этого контрола нужны методы, типо BeginAnimation(), EndAnimation(). И в коде, когда мне нужно по логике, я запускаю эту анимацию, когда нужно прекращаю.
По загрузке контрола все работает, последний пример, где все в разметке.

...

Рейтинг:

0 / 0

17.05.2016, 15:41

| Ответить | Цитировать | Написать

Анимация wpf

#39237554

Roman Mejtes

Участник

Откуда: г. Пермь

Сообщения: 4 264

Рейтинг: 0 / 0

Oleg5555,

нельзя через конструктор запустить анимацию, точка.
вы говорите, что вам нужно при запуске, чтоб анимация уже работала. Приводите пример на XAML, где через это же самое событие запускаете анимацию
сделайте методы запуска и остановки анимации и запустите её в событии Loaded.
Когда вызывается конструктор класса, объект еще не "сформирован" по этому нет ни чего удивительно в том, что анимация идет лесом.

...

Рейтинг:

0 / 0

17.05.2016, 16:01

| Ответить | Цитировать | Написать

Анимация wpf

#39237569

Oleg5555

Гость

Я не запускаю анимацию в конструкторе. И говорю как раз противоположные вещи. Мне как раз не нужно, чтобы при запуске анимация уже работала. При запуске она прекрасно работает. Но этого не нужно. Нужно следующее:

1. Пользователь открывает окно, на котором потом возможно будет запущена данная анимация. Все инициализируется. Пользователь что-то делает.

2. Далее пользователь выполняет команду, например кнопкой. Запускается какая-то логика. В коде эта логика анализируется, и при необходимости запускается анимация, типо this.CircularProgressBar.BeginAnimation().

3. Далее эта логика работает какое-то время, отрабатывает, запускается типо this.CircularProgressBar.EndAnimation(). Анимация потухает. пользователь продолжает что-то делать.

...

Рейтинг:

0 / 0

17.05.2016, 16:18

| Ответить | Цитировать | Написать

Анимация wpf

#39237581

Roman Mejtes

Участник

Откуда: г. Пермь

Сообщения: 4 264

Рейтинг: 0 / 0

Oleg5555,

Код: c#

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.

        public void BeginAnimation()
        {
            var storyboard = _storyboard ?? (_storyboard = new Storyboard
            {
                Children =
                {
                    new DoubleAnimationUsingKeyFrames
                    {
                        Duration = new Duration(TimeSpan.FromSeconds(12)),
                        RepeatBehavior = RepeatBehavior.Forever,
                        SpeedRatio = 12,
                        KeyFrames =
                        {
                            new DiscreteDoubleKeyFrame { KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(0)), Value = 0 },
                            new DiscreteDoubleKeyFrame { KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(1)), Value = 30 },
                            new DiscreteDoubleKeyFrame { KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(2)), Value = 60 },
                            new DiscreteDoubleKeyFrame { KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(3)), Value = 90 },
                            new DiscreteDoubleKeyFrame { KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(4)), Value = 120 },
                            new DiscreteDoubleKeyFrame { KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(5)), Value = 150 },
                            new DiscreteDoubleKeyFrame { KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(6)), Value = 180 },
                            new DiscreteDoubleKeyFrame { KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(7)), Value = 210 },
                            new DiscreteDoubleKeyFrame { KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(8)), Value = 240 },
                            new DiscreteDoubleKeyFrame { KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(9)), Value = 270 },
                            new DiscreteDoubleKeyFrame { KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(10)), Value = 300 },
                            new DiscreteDoubleKeyFrame { KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(11)), Value = 330 }
                        }
                    }
                }
            });
            Storyboard.SetTarget(storyboard, SpinnerRotate);
            Storyboard.SetTargetProperty(storyboard, new PropertyPath("(RotateTransform.AngleProperty)"));
            BeginStoryboard(storyboard);
        }

попробуй так

...

Рейтинг:

0 / 0

17.05.2016, 16:36

| Ответить | Цитировать | Написать

Анимация wpf

#39237750

Oleg5555

Гость

К сожалению не работает. Немного по-другому написал Ваш код в проекте для примера, но смысл от этого не меняется.

Пользовательский контрол, xaml:

Код: xml

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.

<UserControl x:Class="CustomProgressBar.CircularProgressBar"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             Height="120" Width="120" Background="Transparent">
    <Grid Background="Transparent" HorizontalAlignment="Center" VerticalAlignment="Center">
        <Canvas RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Center" VerticalAlignment="Center" Width="100" Height="100" >
            <Ellipse Width="20" Height="20" Canvas.Left="40" Canvas.Top="0" Stretch="Fill" Fill="Gray"  Opacity="1.0"/>
            <Ellipse Width="20" Height="20" Canvas.Left="80" Canvas.Top="40" Stretch="Fill" Fill="Gray"  Opacity="0.1"/>
            <Ellipse Width="20" Height="20" Canvas.Left="40" Canvas.Top="80" Stretch="Fill" Fill="Gray"  Opacity="0.4"/>
            <Ellipse Width="20" Height="20" Canvas.Left="0" Canvas.Top="40" Stretch="Fill" Fill="Gray"  Opacity="0.7"/>
            <Canvas.RenderTransform>
                <RotateTransform Angle="0" />
            </Canvas.RenderTransform>
        </Canvas>
        <Canvas RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Center" VerticalAlignment="Center" Width="100" Height="100" >
            <Ellipse Width="20" Height="20" Canvas.Left="40" Canvas.Top="0" Stretch="Fill" Fill="Gray"  Opacity="0.01"/>
            <Ellipse Width="20" Height="20" Canvas.Left="80" Canvas.Top="40" Stretch="Fill" Fill="Gray"  Opacity="0.2"/>
            <Ellipse Width="20" Height="20" Canvas.Left="40" Canvas.Top="80" Stretch="Fill" Fill="Gray"  Opacity="0.5"/>
            <Ellipse Width="20" Height="20" Canvas.Left="0" Canvas.Top="40" Stretch="Fill" Fill="Gray"  Opacity="0.8"/>
            <Canvas.RenderTransform>
                <RotateTransform Angle="30" />
            </Canvas.RenderTransform>
        </Canvas>
        <Canvas RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Center" VerticalAlignment="Center" Width="100" Height="100" >
            <Ellipse Width="20" Height="20" Canvas.Left="40" Canvas.Top="0" Stretch="Fill" Fill="Gray"  Opacity="0.05"/>
            <Ellipse Width="20" Height="20" Canvas.Left="80" Canvas.Top="40" Stretch="Fill" Fill="Gray"  Opacity="0.3"/>
            <Ellipse Width="20" Height="20" Canvas.Left="40" Canvas.Top="80" Stretch="Fill" Fill="Gray"  Opacity="0.6"/>
            <Ellipse Width="20" Height="20" Canvas.Left="0" Canvas.Top="40" Stretch="Fill" Fill="Gray"  Opacity="0.9"/>
            <Canvas.RenderTransform>
                <RotateTransform Angle="60" />
            </Canvas.RenderTransform>
        </Canvas>
        <Grid.RenderTransform>
            <RotateTransform x:Name="SpinnerRotate" CenterX="50" CenterY="50" />
        </Grid.RenderTransform>
    </Grid>
</UserControl>

Пользовательский контрол, C#:

Код: c#

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.

public partial class CircularProgressBar : UserControl
    {
        private Storyboard Storyboard;

        public CircularProgressBar()
        {
            InitializeComponent();

            this.Storyboard = new Storyboard();

            this.Storyboard.Children.Add(this.GetAnimation());

            Storyboard.SetTarget(this.Storyboard, SpinnerRotate);
            Storyboard.SetTargetProperty(this.Storyboard, new PropertyPath(RotateTransform.AngleProperty));
        }

        private DoubleAnimationUsingKeyFrames GetAnimation()
        {
            DoubleAnimationUsingKeyFrames animation = new DoubleAnimationUsingKeyFrames();

            animation.Duration = new Duration(TimeSpan.FromSeconds(12));
            animation.RepeatBehavior = RepeatBehavior.Forever;
            animation.SpeedRatio = 12;

            animation.KeyFrames.Add(new DiscreteDoubleKeyFrame() { KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(0)), Value = 0 });
            animation.KeyFrames.Add(new DiscreteDoubleKeyFrame() { KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(1)), Value = 30 });
            animation.KeyFrames.Add(new DiscreteDoubleKeyFrame() { KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(2)), Value = 60 });
            animation.KeyFrames.Add(new DiscreteDoubleKeyFrame() { KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(3)), Value = 90 });
            animation.KeyFrames.Add(new DiscreteDoubleKeyFrame() { KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(4)), Value = 120 });
            animation.KeyFrames.Add(new DiscreteDoubleKeyFrame() { KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(5)), Value = 150 });
            animation.KeyFrames.Add(new DiscreteDoubleKeyFrame() { KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(6)), Value = 180 });
            animation.KeyFrames.Add(new DiscreteDoubleKeyFrame() { KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(7)), Value = 210 });
            animation.KeyFrames.Add(new DiscreteDoubleKeyFrame() { KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(8)), Value = 240 });
            animation.KeyFrames.Add(new DiscreteDoubleKeyFrame() { KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(9)), Value = 270 });
            animation.KeyFrames.Add(new DiscreteDoubleKeyFrame() { KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(10)), Value = 300 });
            animation.KeyFrames.Add(new DiscreteDoubleKeyFrame() { KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(11)), Value = 330 });

            return animation;
        }

        public void BeginAnimation()
        {
            this.Storyboard.Begin(this, true);
        }

        public void StopAnimation()
        {
            this.Storyboard.Stop(this);
        }
    }

Главное окно, xaml:

Код: xml

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

<Window x:Class="CustomProgressBar.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:CustomProgressBar"
        Title="MainWindow" Height="230" Width="230" ResizeMode="NoResize" WindowStartupLocation="CenterScreen">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition Height="40"/>
        </Grid.RowDefinitions>
        <local:CircularProgressBar x:Name="CircularProgressBar"/>
        <Button Grid.Row="1" Name="StartBtn" Content="Старт" Width="100" Height="30" Margin="0,0,110,5" VerticalAlignment="Bottom" HorizontalAlignment="Right" Click="StartBtn_Click"/>
        <Button Grid.Row="1" Name="StopBtn" Content="Стоп" Width="100" Height="30" Margin="0,0,5,5" VerticalAlignment="Bottom" HorizontalAlignment="Right" Click="StopBtn_Click"/>
    </Grid>
</Window>

Главное окно, C#:

Код: c#

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.

public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void StartBtn_Click(object sender, RoutedEventArgs e)
        {
            this.CircularProgressBar.BeginAnimation();
        }

        private void StopBtn_Click(object sender, RoutedEventArgs e)
        {
            this.CircularProgressBar.StopAnimation();
        }
    }

В примере просто для примера повесил старт и стоп анимации на кнопки. Старт и стоп не работают. Можете подсказать, в чем может быть проблема?

...

Рейтинг:

0 / 0

17.05.2016, 20:32

| Ответить | Цитировать | Написать

Анимация wpf

#39238525

Roman Mejtes

Участник

Откуда: г. Пермь

Сообщения: 4 264

Рейтинг: 0 / 0

вот вам рабочий пример:
в примере 2 типа кнопок, 1 ряд кнопок включают и выключают анимацию по средствам XAML разметки, 2 ряд реализован в CodeBehind файле формы. Остальное делайте сами

Код: xml

<Window x:Class="WpfApplication11.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <Storyboard x:Key="MyStoryboard">
            <DoubleAnimation From="0" To="90" 
                             Storyboard.TargetName="MyAnimatedObject" 
                             RepeatBehavior="Forever"
                             Storyboard.TargetProperty="RenderTransform.(TransformGroup.Children)[0].(RotateTransform.Angle)"
                             Duration="0:0:1"/>
        </Storyboard>
        <Style TargetType="{x:Type Button}">
            <Setter Property="Width" Value="150"/>
            <Setter Property="Height" Value="32"/>
            <Setter Property="Margin" Value="5"/>
        </Style>
    </Window.Resources>
    <Grid>
        <Grid.Triggers>
            <EventTrigger SourceName="PART_StartButton" RoutedEvent="ButtonBase.Click">
                <BeginStoryboard x:Name="MyBeginStoryboard" Storyboard="{StaticResource MyStoryboard}"/>
            </EventTrigger>
            <EventTrigger  SourceName="PART_StopButton"  RoutedEvent="ButtonBase.Click">
                <RemoveStoryboard BeginStoryboardName="MyBeginStoryboard"/>
            </EventTrigger>
        </Grid.Triggers>
        <DockPanel>
            <StackPanel>
                <StackPanel Orientation="Horizontal" DockPanel.Dock="Top">
                    <Button x:Name="PART_StartButton" Content="Start by Xaml"/>
                    <Button x:Name="PART_StopButton" Content="Stop by Xaml"/>
                </StackPanel>
                <StackPanel Orientation="Horizontal" DockPanel.Dock="Top">
                    <Button Content="Start by Code" Click="ButtonStart_OnClick"/>
                    <Button Content="Stop by Code" Click="ButtonStop_OnClick"/>
                </StackPanel>

            </StackPanel>
            
            <Rectangle x:Name="MyAnimatedObject" Width="100" Height="100" Fill="Tomato"
                       RenderTransformOrigin=".5,.5">
                <Rectangle.RenderTransform>
                    <TransformGroup>
                        <RotateTransform />
                    </TransformGroup>
                </Rectangle.RenderTransform>
            </Rectangle>
        </DockPanel>
    </Grid>
</Window>

Код: c#

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.

using System;
using System.Windows;
using System.Windows.Media.Animation;


namespace WpfApplication11
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private Storyboard _myStoryboard;

        private void ButtonStart_OnClick(object sender, RoutedEventArgs e)
        {
            var myStoryboard = GetMyStoryboard();
            myStoryboard.Begin(this, true);

        }

        private void ButtonStop_OnClick(object sender, RoutedEventArgs e)
        {
            var myStoryboard = GetMyStoryboard();
            myStoryboard.Remove(this);
        }

        private Storyboard GetMyStoryboard()
        {
            var result = _myStoryboard ?? (_myStoryboard = TryFindResource("MyStoryboard") as Storyboard);
            if (result == null) throw new Exception("Can't find resource 'MyStoryboard'");
            return result;
        }
    
    }
}

...

Рейтинг:

0 / 0

18.05.2016, 17:47

| Ответить | Цитировать | Написать

Анимация wpf

#39239008

Oleg5555

Гость

Отлично. Спасибо. Мне интересен именно вариант со вторым рядом кнопок.

...

Рейтинг:

0 / 0

19.05.2016, 12:48

| Ответить | Цитировать | Написать

Анимация wpf

#39240044

Oleg5555

Гость

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

1. Контрол, XAML:

Код: xml

<UserControl x:Class="App.UserControls.CircularProgressBar"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             Height="120" Width="120" Background="Transparent">
    <UserControl.Resources>
        <Storyboard x:Key="ProgressStoryboard">
            <DoubleAnimationUsingKeyFrames Duration="0:0:12" RepeatBehavior="Forever" SpeedRatio="12"
                                                       Storyboard.TargetName="ProgressGrid"
                                                       Storyboard.TargetProperty="RenderTransform.(TransformGroup.Children)[0].(RotateTransform.Angle)">
                <DiscreteDoubleKeyFrame KeyTime="00:00:00" Value="0" />
                <DiscreteDoubleKeyFrame KeyTime="00:00:01" Value="30" />
                <DiscreteDoubleKeyFrame KeyTime="00:00:02" Value="60" />
                <DiscreteDoubleKeyFrame KeyTime="00:00:03" Value="90" />
                <DiscreteDoubleKeyFrame KeyTime="00:00:04" Value="120" />
                <DiscreteDoubleKeyFrame KeyTime="00:00:05" Value="150" />
                <DiscreteDoubleKeyFrame KeyTime="00:00:06" Value="180" />
                <DiscreteDoubleKeyFrame KeyTime="00:00:07" Value="210" />
                <DiscreteDoubleKeyFrame KeyTime="00:00:08" Value="240" />
                <DiscreteDoubleKeyFrame KeyTime="00:00:09" Value="270" />
                <DiscreteDoubleKeyFrame KeyTime="00:00:10" Value="300" />
                <DiscreteDoubleKeyFrame KeyTime="00:00:11" Value="330" />
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
        <SolidColorBrush x:Key="ProgressColor" Color="Gray"/>
    </UserControl.Resources>

    <Grid RenderTransformOrigin=".5,.5" x:Name="ProgressGrid" Background="Transparent" HorizontalAlignment="Center" VerticalAlignment="Center">
        <Canvas RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Center" VerticalAlignment="Center" Width="100" Height="100" >
            <Ellipse Width="20" Height="20" Canvas.Left="40" Canvas.Top="0" Stretch="Fill" Fill="{StaticResource ProgressColor}" Opacity="1.0"/>
            <Ellipse Width="20" Height="20" Canvas.Left="80" Canvas.Top="40" Stretch="Fill" Fill="{StaticResource ProgressColor}" Opacity="0.1"/>
            <Ellipse Width="20" Height="20" Canvas.Left="40" Canvas.Top="80" Stretch="Fill" Fill="{StaticResource ProgressColor}" Opacity="0.4"/>
            <Ellipse Width="20" Height="20" Canvas.Left="0" Canvas.Top="40" Stretch="Fill" Fill="{StaticResource ProgressColor}" Opacity="0.7"/>
            <Canvas.RenderTransform>
                <RotateTransform Angle="0" />
            </Canvas.RenderTransform>
        </Canvas>
        <Canvas RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Center" VerticalAlignment="Center" Width="100" Height="100" >
            <Ellipse Width="20" Height="20" Canvas.Left="40" Canvas.Top="0" Stretch="Fill" Fill="{StaticResource ProgressColor}" Opacity="0.01"/>
            <Ellipse Width="20" Height="20" Canvas.Left="80" Canvas.Top="40" Stretch="Fill" Fill="{StaticResource ProgressColor}" Opacity="0.2"/>
            <Ellipse Width="20" Height="20" Canvas.Left="40" Canvas.Top="80" Stretch="Fill" Fill="{StaticResource ProgressColor}" Opacity="0.5"/>
            <Ellipse Width="20" Height="20" Canvas.Left="0" Canvas.Top="40" Stretch="Fill" Fill="{StaticResource ProgressColor}" Opacity="0.8"/>
            <Canvas.RenderTransform>
                <RotateTransform Angle="30" />
            </Canvas.RenderTransform>
        </Canvas>
        <Canvas RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Center" VerticalAlignment="Center" Width="100" Height="100" >
            <Ellipse Width="20" Height="20" Canvas.Left="40" Canvas.Top="0" Stretch="Fill" Fill="{StaticResource ProgressColor}" Opacity="0.05"/>
            <Ellipse Width="20" Height="20" Canvas.Left="80" Canvas.Top="40" Stretch="Fill" Fill="{StaticResource ProgressColor}" Opacity="0.3"/>
            <Ellipse Width="20" Height="20" Canvas.Left="40" Canvas.Top="80" Stretch="Fill" Fill="{StaticResource ProgressColor}" Opacity="0.6"/>
            <Ellipse Width="20" Height="20" Canvas.Left="0" Canvas.Top="40" Stretch="Fill" Fill="{StaticResource ProgressColor}" Opacity="0.9"/>
            <Canvas.RenderTransform>
                <RotateTransform Angle="60" />
            </Canvas.RenderTransform>
        </Canvas>
        <Grid.RenderTransform>
            <TransformGroup>
                <RotateTransform/>
            </TransformGroup>
        </Grid.RenderTransform>
    </Grid>
</UserControl>

2. Контрол, C#:

Код: c#

public partial class CircularProgressBar : UserControl
    {
        private Storyboard _storyboard;

        public CircularProgressBar()
        {
            InitializeComponent();
        }

        private Storyboard GetMyStoryboard()
        {
            string resourceName = "ProgressStoryboard";

            var result = _storyboard ?? (_storyboard = TryFindResource(resourceName) as Storyboard);
            if (result == null) throw new Exception(String.Format("Не найден ресурс {0}", resourceName));

            return result;
        }

        public void BeginAnimation()
        {
            var storyboard = GetMyStoryboard();
            storyboard.Begin(this, true);
        }

        public void PauseAnimation()
        {
            var storyboard = GetMyStoryboard();
            storyboard.Pause(this);
        }

        public void ResumeAnimation()
        {
            var storyboard = GetMyStoryboard();
            storyboard.Resume(this);
        }

        public void SkipToFillAnimation()
        {
            var storyboard = GetMyStoryboard();
            storyboard.SkipToFill(this);
        }

        public void SetPpeedRatioAnimation(double speedRatio)
        {
            var storyboard = GetMyStoryboard();
            storyboard.SetSpeedRatio(this, speedRatio);
        }

        public void SeekAnimation(TimeSpan offset, TimeSeekOrigin origin)
        {
            var storyboard = GetMyStoryboard();
            storyboard.Seek(this, offset, origin);
        }

        public void StopAnimation()
        {
            var storyboard = GetMyStoryboard();
            storyboard.Stop(this);
        }
    }

3. Использование в своем окне, XML:

Код: xml

1.
2.
3.

<Viewbox Grid.RowSpan="2" Name="CircularProgressBarViewbox" Visibility="Collapsed">
            <local_uc:CircularProgressBar x:Name="CircularProgressBar"/>
        </Viewbox>

4. Использование в своем окне, C#:

Код: c#

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

private void LoginProgressBeginAnimation()
        {
            this.CircularProgressBarViewbox.Visibility = System.Windows.Visibility.Visible;
            this.CircularProgressBar.BeginAnimation();
        }

        private void LoginProgressEndAnimation()
        {
            this.CircularProgressBar.StopAnimation();
            this.CircularProgressBarViewbox.Visibility = System.Windows.Visibility.Collapsed;
        }

...

Рейтинг:

0 / 0

20.05.2016, 14:00

| Ответить | Цитировать | Написать

Анимация wpf

#39240104

Roman Mejtes

Участник

Откуда: г. Пермь

Сообщения: 4 264

Рейтинг: 0 / 0

для таких целей нужно использовать не UserControl, а Control, у вас же ProgressBar не имеет ContentPresenter'ов, а UserControl именно ContentControl (то есть контрол с содержимым). Не знаю, кто как, а я его крайне не люблю.
Нет ничего лучше, чем просто создать класс на базе Control или базе другого существующего класса, задать стиль, шаблон и пользоваться.

В методе GetMyStoryboard вся эта возня с эксепшенами избыточна, есть метод FindResource, если ресурс не будет найден, то исключение вызовется само по себе. + на такой случай как у вас, припасён класс ResourceReferenceKeyNotFoundException.

Так же не совсем понятно, почему работает этот прогресс бар, только через код, такая реализация совершенно не подходит для шаблона MVVM, который в WPF используется повсеместно =)

А сам контрол мне очень понравился, заберу к себе в копилку, если вы не против :) за одно и допилю ):

...

Рейтинг:

0 / 0

20.05.2016, 14:55

| Ответить | Цитировать | Написать

Анимация wpf

#39241259

Oleg5555

Гость

Спасибо за комментарии, учту.

Я так же использую WPF в паттерне MVVM, но в моей конкретной реализации понадобилось управлять контролом именно в коде.

Да, забирайте. Если будет возможность, выложите пожалуйста свой, допиленный вариант. Хотелось бы изучить, расширить опыт.

...

Рейтинг:

0 / 0

23.05.2016, 11:20

| Ответить | Цитировать | Написать

12 сообщений из 12, страница 1 из 1

Форумы / WPF, Silverlight [игнор отключен] [закрыт для гостей] / Анимация wpf

Цитировать

Написать

Автор*:

Ввести пароль для входа

Тема*:

Сообщение

Данное сообщение тематическое

Сообщение содержит картинки или видео 18+

Автор:

ВНИМАНИЕ! На данном подфоруме действуют строгие правила. Удостоверьтесь, что ваше сообщение соответствует им!

Форум или тема закрыты для гостей. Необходима авторизация!

Загрузить последнюю сохраненную версию

Вложение:

Вставить как галерею

Максимальный размер вложений: 4,0 МБ, аудио/видео: 8,0 МБ. Картинки большего размера ужимаются, если возможно.

Введите код, изображенный на картинке. Если код нечитаемый, кликните картинку, чтобы загрузить другой вариант.

Отправляя сообщение, я выражаю свое согласие с правилами форума и принимаю пользовательское соглашение.

Читали тему (0):

Читали форум (0):

Пользователи онлайн (0):

start [/forum/topic.php?fid=21&fpage=12&tid=1440670]:	0ms
get settings:	10ms
get forum list:	14ms
check forum access:	4ms
check topic access:	4ms
track hit:	50ms
get topic data:	11ms
get forum data:	3ms
get page messages:	54ms
get tp. blocked users:	2ms
others:	15ms

total:	167ms