Форум программистов, компьютерный форум, киберфорум
Наши страницы
oblomingo
Войти
Регистрация
Восстановить пароль
Рейтинг: 5.00. Голосов: 1.

Windows Presentation Foundation в .NET 4. День 69 - 418-480 стр. Раскадровка, использование стилей и шаблонов

Запись от oblomingo размещена 27.08.2012 в 12:58
Метки .net, c-sharp, wpf

Нажмите на изображение для увеличения
Название: animation.jpg
Просмотров: 552
Размер:	118.6 Кб
ID:	1265
Гуд дей, евриуан! Я доволен - мое мастерство растет. На дня научился использовать стили, не боюсь пользоваться наследованием BasedOn. Для разминки сделал небольшое приложение - окно с анимированным меню и контентом. Когда жму кнопку меню контент меняется с интересной анимацией (текст с картинкой как бы вылетает из-из границы окна). Само меню тоже анимированно и приятно смотрится.
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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<Window x:Class="SimpleAnimationApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="600" Width="800">
    <Window.Resources>
        <Storyboard x:Key="elementAnimation">
            <DoubleAnimation Storyboard.TargetName="MyContent" DecelerationRatio="0.9"
                                         Storyboard.TargetProperty="RenderTransform.Children[1].Angle" 
                                         From="70" To="0" Duration="0:0:0.5"/>
            <DoubleAnimation Storyboard.TargetName="MyContent" DecelerationRatio="0.9"
                                         Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX" 
                                         From="0" To="1" Duration="0:0:0.5"/>
            <DoubleAnimation Storyboard.TargetName="MyContent" DecelerationRatio="0.9"
                                         Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY" 
                                         From="0" To="1" Duration="0:0:0.5"/>
        </Storyboard>
        <Storyboard x:Key="menuAnimationExit">
            <DoubleAnimation Storyboard.TargetProperty="Width" Duration="0:0:0.1" />
            <DoubleAnimation Storyboard.TargetProperty="Height" Duration="0:0:0.1" />
            <DoubleAnimation Storyboard.TargetProperty="Opacity" Duration="0:0:0.1" />
        </Storyboard>
        <Storyboard x:Key="menuAnimationEnter">
            <DoubleAnimation Storyboard.TargetProperty="Width" By="20" Duration="0:0:0.5">
                <DoubleAnimation.EasingFunction>
                    <BackEase EasingMode="EaseOut" Amplitude="1" />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetProperty="Height" By="20" Duration="0:0:0.5">
                <DoubleAnimation.EasingFunction>
                    <BackEase EasingMode="EaseOut" Amplitude="1" />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetProperty="Opacity" By="0.5" Duration="0:0:0.5">
                <DoubleAnimation.EasingFunction>
                    <BackEase EasingMode="EaseOut" Amplitude="1" />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
        <Style x:Key="icon">
            <Style.Triggers>
                <Trigger Property="Button.IsMouseOver" Value="True">
                    <Trigger.EnterActions>
                        <BeginStoryboard Storyboard="{StaticResource menuAnimationEnter}"/>
                    </Trigger.EnterActions>
                    <Trigger.ExitActions>
                        <BeginStoryboard Storyboard="{StaticResource menuAnimationExit}"/>
                    </Trigger.ExitActions>
                </Trigger>
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard Storyboard="{StaticResource elementAnimation}"/>
                </EventTrigger>
            </Style.Triggers>
        </Style>
        <Style x:Key="iconImage" BasedOn="{StaticResource icon}">
            <Setter Property="Image.Height" Value="50" />
            <Setter Property="Image.Width" Value="50" />
            <Setter Property="Image.Opacity" Value="0.5" />
            <Setter Property="Image.VerticalAlignment" Value="Top" />
        </Style>
    </Window.Resources>
    <Grid>
        <Canvas Name="opa"></Canvas>
        <DockPanel LastChildFill="True">
            <StackPanel DockPanel.Dock="Bottom" Orientation="Horizontal" Height="80" HorizontalAlignment="Center">
                <Button Click="Button_Click_1">
                    <Button.Template>
                        <ControlTemplate TargetType='{x:Type Button}'>
                            <Image Source="images/api.ico" Style="{StaticResource iconImage}" />
                        </ControlTemplate>
                    </Button.Template>
                    <Button.Triggers>
                        <EventTrigger RoutedEvent="Button.Click">
                            <BeginStoryboard Storyboard="{StaticResource elementAnimation}"/>
                        </EventTrigger>
                    </Button.Triggers>
                </Button>
                <Button Click="Button_Click_2">
                    <Button.Template>
                        <ControlTemplate TargetType='{x:Type Button}'>
                            <Image Source="images/database.ico" Style="{StaticResource iconImage}" />
                        </ControlTemplate>
                    </Button.Template>
                    <Button.Triggers>
                        <EventTrigger RoutedEvent="Button.Click">
                            <BeginStoryboard Storyboard="{StaticResource elementAnimation}"/>
                        </EventTrigger>
                    </Button.Triggers>
                </Button>
                <Button Click="Button_Click_3">
                    <Button.Template>
                        <ControlTemplate TargetType='{x:Type Button}'>
                            <Image Source="images/float.ico" Style="{StaticResource iconImage}" />
                        </ControlTemplate>
                    </Button.Template>
                    <Button.Triggers>
                        <EventTrigger RoutedEvent="Button.Click">
                            <BeginStoryboard Storyboard="{StaticResource elementAnimation}"/>
                        </EventTrigger>
                    </Button.Triggers>
                </Button>
                <Button Click="Button_Click_4">
                    <Button.Template>
                        <ControlTemplate TargetType='{x:Type Button}'>
                            <Image Source="images/Gear.ico" Style="{StaticResource iconImage}" />
                        </ControlTemplate>
                    </Button.Template>
                    <Button.Triggers>
                        <EventTrigger RoutedEvent="Button.Click">
                            <BeginStoryboard Storyboard="{StaticResource elementAnimation}"/>
                        </EventTrigger>
                    </Button.Triggers>
                </Button>
                <Button Click="Button_Click_5">
                    <Button.Template>
                        <ControlTemplate TargetType='{x:Type Button}'>
                            <Image Source="images/linux.ico" Style="{StaticResource iconImage}" />
                        </ControlTemplate>
                    </Button.Template>
                    <Button.Triggers>
                        <EventTrigger RoutedEvent="Button.Click">
                            <BeginStoryboard Storyboard="{StaticResource elementAnimation}"/>
                        </EventTrigger>
                    </Button.Triggers>
                </Button>
            </StackPanel>
            <Grid x:Name="MyContent" HorizontalAlignment="Center" VerticalAlignment="Center">
                <Grid.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform></ScaleTransform>
                        <RotateTransform></RotateTransform>
                    </TransformGroup>
                </Grid.RenderTransform>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Image Name="image" Grid.Column="0" Source="/images/sailor.jpg" Width="300"/>
                <TextBlock Name="text" Margin="20" Grid.Column="1" TextWrapping="Wrap" Width="400"
                           Text="Мопс — маленькая декоративная собачка, которую издавна держала знать. Собака с живым, веселым и при этом уравновешенным характером, благородная и привязчивая к хозяину. Недостатком мопсов, что встречается крайне редко, является агрессивность, робость, нервозность. Мопсы живут 13-15 лет.Мопс — древняя китайская порода. В ранних китайских рукописях упоминаются «квадратные, низкие собаки с короткой мордой». В Китае существовали собаки «Ха Па» и «Ло Цзе». Две эти разновидности были очень схожи и различались только длиной шерсти. «Ха Па» были длинношестными. Вероятно предками мопсов были «Ло Цзе», они походили на пекинесов, но обладали короткой шерстью. Мопсы были собаками знати и проживали в богатых домах. В те времена у мопсов еще не было столь глубоких морщин, но четкий рисунок складок на лбу проявлялся и был схож с иероглифами. Именно поэтому морщины на лбу мопса называли императорским знаком. Мопс попал во Францию с турецким флотом в 1553 году. Позже эта порода стала любима и в Нидерландах, где ее окрас уподоблял цветам правящего дома Оранских. Когда Вильгельм III Оранский стал английским королем, он и его жена Мария II привезли в 1689 году мопсов из Нидерландов. Эта порода была весьма популярна около двух столетий. Но постепенно мопсов становилось меньше. В 1864 году для английской королевы Виктории, пожелавшей иметь у себя эту породу, с трудом разыскали одну собаку. Через 20 лет был создан первый клуб любителей мопсов, и благодаря ему порода начала улучшаться и приобретать те стандарты, которые и поныне ценятся в этих собаках." />
            </Grid>
        </DockPanel>
    </Grid>
</Window>
Обработчики нажатия на кнопку просто меняют картинку и текст:
C#
1
2
3
4
private void Button_Click_1(object sender, RoutedEventArgs e) {
            image.Source = new BitmapImage(new Uri("/images/34.jpg", UriKind.Relative));
            text.Text = "бла-бла-бла";
        }
Размещено в Без категории
Просмотров 911 Комментарии 0
Всего комментариев 0
Комментарии
 
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Рейтинг@Mail.ru