Программирование с использованием ajax. Программирование

Программирование >> Программирование с использованием ajax

1 ... 352 353 354 [ 355 ] 356 357 358 ... 396

Например, свойство Background определяется в рассматриваемом коде с помощью вложенного элемента <Window.Background> следующим образом:

<Window.Background>

В этом коде свойство Background устанавливается в экземпляр класса Linear GradientBrush. В WPF кисти применяются почти так же, как в технологии GDI+, о которой рассказывалось в главе 33. В данном случае для кисти задается градиент с переходом от белого цвета к персиковому в направлении сверху вниз.

Есть еще два других сложных свойства, которые определяются в этом коде во вложенных элементах: а именно - в элементе <Window. Resources>, где задаются анимационные эффекты, и элементе <Window. Triggers>, где задаются триггеры, отвечающие за управление этими анимационными эффектами. Оба этих свойства - Resource и Triggers - способны на гораздо большее, чем они делают здесь, и потому позже в этой главе будут рассматриваться более подробно.

Прежде чем переходить к анализу реализации этих свойств, не помешает забежать наперед и взглянуть на элемент <Grid>. В нем определяется экземпляр элемента управления System. Windows. Controls. Grid, который является одним из тех нескольких элементов управления, которые можно использовать для компоновки интерфейса в WPF-приложении, и позволяет размещать вложенные элементы управления путем задания координат относительно любого из четырех углов прямоугольника. Другие элементы управления позволяют делать это другими способами. Обо всех элементах управления, которые можно использовать для компоновки, более подробно будет рассказываться позже в этой главе, в разделе Компоновка элементов управления .

В анализируемом коде элемент <Grid> содержит пять элементов <Ellipse> (представляющих экземпляры элементов управления System.Windows. Shapes.Ellipse) и три элемента <Button> (представляющих экземпляры элементов System.Windows. Controls .Button). В них определяются, соответственно, эллипсы, которые должны использоваться для отображения вращающихся графических объектов в приложении, и кнопки, которые должны предоставляться для управления приложением.

Первый элемент <Ellipse> выглядит следующим образом:

Здесь видно, что в нем определяется экземпляр класса System. Windows . Shapes. Ellipse, применяемый для отображения фигуры-эллипса, и устанавливаются значения для нескольких свойств этого экземпляра, которые перечислены ниже.

□ Name. Идентификатор, который должен использоваться для данного элемента управления.

□ Margin. Задает месторасположение определенной в элементе управления Ellipse фигуры внутри содержащей его сетки путем указания полей вокруг фигуры. Эти поля предоставляются в рассматриваемом коде в пикселях. То, каким именно образом данное свойство будет отображаться на фактическое месторасположение фигуры, зависит от значений свойств HorizontalAlignment и VerticalAlignment.

□ HorizontalAlignment и VerticalAlignment. Используются для указания того, какие из краев определенного в Grid прямоугольника должны применяться для размещения фигуры. Например, значения Left и Bottom будут приводить к размещению фигуры относительно левого нижнего края сетки.

□ Height и Width. Размеры фигуры.

□ Stroke. Кисть, которая должна использоваться для прорисовывания контура определенной в Ellipse фигуры.

□ BitmapEf feet. Специальный эффект, который должен использоваться при отображении элемента управления Ellipse.

Для свойства Fill устанавливается кисть RadialGradientBrush. Подобные кисти уже встречались в коде GDI+. В данном случае кисть подразумевает использование градиентной заливки с переходом от белого (почти из центра эллипса) к черному (по краям).

Для свойства BitmapEf feet устанавливается эффект BlurBitmapEf f ect. Он является одним из нескольких эффектов, которые разрешено применять к графическим объектам в WPF, и подразумевает размытие фигуры до той степени, которая указана в свойстве BlurBitmapEf feet .Radius. Для Web-приложений этот эффект не доступен, из-за чего и был удален на шаге 11. Это и есть одно из тех нескольких отличий между настольными приложениями и Web-приложениями.

Четыре остальных элемента <Ellipse> в коде выглядят очень похоже. В каждом из них определяется один из четырех цветных анимируемых эллипсов. Первый выглядит следующим образом:

Этот код выглядит почти так же, как и код предыдущего эллипса, но имеет отличия, которые перечислены ниже.

□ Для свойства Stroke устанавливается значение {х: null}. В XAML значения, заключенные в фигурные скобки подобно этому, называются расширениями разметки (markup extensions) и используются для предоставления значений для таких свойств, значения которых не могут сокращаться в XAML-синтаксисе до простых строк. В данном случае {xrnull} предоставляет для свойства Stroke значение null, означающее, что для него не должна использоваться никакая кисть.

□ Задается свойство Opacity со значением 0. 5. Это указывает, что данный эллипс должен быть полупрозрачным.

□ В свойстве BitmapEf feet указывается использовать эффект BevelBitmapEf f ect, который и приводит к получению таких скошенных краев, как были показаны на рис. 34.5.

□ Задается свойство RenderTransform. В качестве значения для него устанавливается объект TransformGroup с одной единственной трансформацией - RotateTransform. Эта трансформация должна выполняться при анимировании эллипса и имеет одно единственное заданное свойство - Angle. Это свойство представляет угол вращения эллипса (в градусах) и первоначально устанавливается в 0.

□ Используется свойство RenderTransformOrigin для установки центральной точки, вокруг которой должно осуществляться вращение эллипса во время трансформации RotateTransform.

Два последних свойства имеют отношение к определяемой далее в XAML-коде анимации, за которую отвечает объект System.Windows .Media .Animation. Storyboard. Этот объект определяется в рамках элемента <Window. Resources>, а это означает, что он будет доступен через принадлежащую окну коллекцию Resources. Еще в этом коде определяется атрибут х:Кеу, позволяющий ссылаться на объект Storyboard через коллекцию Resources с помощью ключа:

<Window.Resources> <Storyboard х:Key= Spin >

</Storyboard> </Window.Resources>

Объект Storyboard содержит четыре объекта DoubleAnimationUsingKeyFrames. Эти объекты позволяют указывать, что свойство, содержащее значение double, должно со временем изменяться, вместе с деталями, конкретизирующими это поведение еще дальше. В данном коде в каждом элементе определяется анимационный эффект, который должен использоваться для одного из цветных эллипсов. Например, для рассматривавшегося выше эллипса ell ipse 1 этот анимационный эффект выглядит так:

<DoubleAnimationUsingKeyFrames BeginTime= 00:00:00

Storyboard.TargetName= ellipsel

Storyboard.TargetProperty= (UIElement.RenderTransform).(TransformGroup.Children) [0]. (RotateTransform.Angle)

RepeatBehavior= Forever >

В общем, здесь просто указывается, что первоначальное значение свойства Angle, принадлежащего описанной ранее трансформации RotateTransform, должно изменяться на значение 360 через 10 секунд и что по завершении это изменение должно повторяться снова. Об анимационных эффектах более подробно речь пойдет позже в этой главе, в разделе Анимация .

После определений эллипсов идет три элемента <Button>, в которых определяются кнопки (обратите внимание на то, что атрибут Click не был показан в коде примера; его добавила ШЕ-среда после выполнения вами в шаге 3 двойного щелчка на кнопке):

<Button Height= 23 HorizontalAlignment= Left Margin= 20,О,О,56 Name= goButton

VerticalAlignment= Bottom Width= 75 Content= Go /> <Button Height= 23 HorizontalAlignment= Left Margin- 152,0,0,56

Name= stopButton VerticalAlignment= Bottom Width= 75 Content- Stop /> <Button Height= 23 HorizontalAlignment= Left Margin= 85,0,86,16

Name= toggleButton VerticalAlignment= Bottom Width= 75 Content= Toggle

Click= toggleButton Click />

1 ... 352 353 354 [ 355 ] 356 357 358 ... 396