Главная » WPF » Развитая интеграция

0

Система визуализации в WPF поддерживает двумерную векторную графику, растровые  изображения, текст, анимацию,  видео, аудио и трехмерную  графику. Все это интегрировано в единый механизм  композиции, построенный поверх DirectX,  что, в свою очередь, позволяет  задействовать аппаратные  акселераторы, реализованные в современных  видеокартах.

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

<Window … >

<Window.Resources>

<SolidColorBrush x:Key=’bg’ Color=’Red’ />

</Window.Resources>

<DockPanel>

<WrapPanel DockPanel.Dock=’Top’>

<Button Background=’{StaticResource bg}’ Click=’HowdyClicked’>Howdy!</Button>

<Button  Background=’{StaticResource  bg}’>A  second

button</Button>

<TextBox x:Name=’_text1’>An editable text box</TextBox>

<CheckBox Content=’{Binding ElementName=_text1,Path=Text}’ />

<Slider Width=’75’ Minimum=’0’ Maximum=’100’ Value=’50’ />

</WrapPanel>

<Rectangle Margin=’5’>

<Rectangle.Fill>

<LinearGradientBrush>

<GradientStop Offset=’0’ Color=’Red’ />

<GradientStop Offset=’.5’ Color=’White’ />

<GradientStop Offset=’1’ Color=’Blue’ />

</LinearGradientBrush>

</Rectangle.Fill>

</Rectangle>

</DockPanel>

</Window>

Рис. 1.19. Прямоугольник с градиентной заливкой

Результат показан на рис. 1.19. Если изменить  размер окна, то размер прямо# угольника  тоже изменится,  а переход цвета всегда будет начинаться и заканчи# ваться в противоположных углах. Следовательно, двумерная графика интегриро# вана с системой размещения. Можно  пойти дальше и взять в качестве кисти на# бор элементов  управления. В следующем примере мы присвоим  панели WrapPanel имя и для заливки  прямоугольника применим  кисть VisualBrush. Та# кой кисти передается  некий элемент управления, и она повторяет  его изображе# ние, заполняя прямоугольник. С помощью свойств Viewport и TileMode  мы мо# жем задать режим многократного повторения.

Рис. 1.20. Применение кисти VisualBrush для заливки прямоугольника

<Window … >

<Window.Resources>

<SolidColorBrush x:Key=’bg’ Color=’Red’ />

</Window.Resources>

<DockPanel>

<WrapPanel x:Name=’panel’ DockPanel.Dock=’Top’>

<Button Background=’{StaticResource bg}’ Click=’HowdyClicked’>Howdy!</Button>

<Button  Background=’{StaticResource  bg}’>A  second

button</Button>

<TextBox x:Name=’_text1’>An editable text box</TextBox>

<CheckBox Content=’{Binding ElementName=_text1,Path=Text}’ />

<Slider Width=’75’ Minimum=’0’ Maximum=’100’ Value=’50’ />

</WrapPanel>

<Rectangle Margin=’5’>

<Rectangle.Fill>

<VisualBrush

Visual=’{Binding ElementName=panel}’ Viewport=’0,0,.5,.2’

TileMode=’Tile’ />

</Rectangle.Fill>

</Rectangle>

</DockPanel>

</Window>

Запустив эту программу  и начав редактировать элементы, расположенные вдоль верхнего края, мы увидим, что прямоугольник изменяется (рис. 1.20). Та# ким  образом,  можно  не только  пользоваться двумерными изображениями для рисования элементов  управления, но и сами элементы  могут быть частями  дву# мерных изображений. На самом деле, все элементы  реализованы как набор дву# мерных изображений.

Можно  пойти  еще  дальше.  WPF  предоставляет также  базовую  поддержку трехмерной  графики.  Можно  взять ту же самую визуальную кисть и воспользо# ваться  ей как  текстурой  трехмерного  изображения. Для  создания  трехмерной сцены  необходимо  пять  компонентов:  модель  (форма), материал  (чем  покрыть форму),  камера (откуда  смотреть),  свет (чтобы видеть)  и окно проекции  (внутри которого отображается сцена). В главе 5 мы будем рассматривать трехмерные сцены подробно, а пока отметим лишь, что в качестве материала  модели можно пользоваться визуальной кистью:

<Window … >

<Window.Resources>

<SolidColorBrush x:Key=’bg’ Color=’Red’ />

</Window.Resources>

<DockPanel>

<WrapPanel x:Name=’panel’ DockPanel.Dock=’Top’>

<Button Background=’{StaticResource bg}’ Click=’HowdyClicked’>Howdy!</Button>

<Button  Background=’{StaticResource  bg}’>A  second

button</Button>

<TextBox x:Name=’_text1’>An editable text box</TextBox>

<CheckBox Content=’{Binding ElementName=_text1,Path=Text}’ />

<Slider Width=’75’ Minimum=’0’ Maximum=’100’ Value=’50’ />

</WrapPanel>

<Viewport3D>

<Viewport3D.Camera>

<PerspectiveCamera LookDirection=’ .7, .8, 1’ Position=’3.8,4,4’ FieldOfView=’17’ UpDirection=’0,1,0’ />

</Viewport3D.Camera>

<ModelVisual3D>

<ModelVisual3D.Content>

<Model3DGroup>

<PointLight Position=’3.8,4,4’ Color=’White’ Range=’7’

ConstantAttenuation=’1.0’ />

<GeometryModel3D>

<GeometryModel3D.Geometry>

<MeshGeometry3D TextureCoordinates=

‘0,0 1,0 0, 1 1, 1 0,0 1,0 0, 1 0,0’ Positions=

‘0,0,0 1,0,0 0,1,0 1,1,0 0,1, 1 1,1, 1 1,1, 1 1,0, 1’ TriangleIndices=’0,1,2 3,2,1 4,2,3 5,4,3 6,3,1 7,6,1’

/>

</GeometryModel3D.Geometry>

<GeometryModel3D.Material>

<DiffuseMaterial>

<DiffuseMaterial.Brush>

<VisualBrush Viewport=’0,0,.5,.25’ TileMode=’Tile’

Visual=’{Binding ElementName=panel}’ />

</DiffuseMaterial.Brush>

</DiffuseMaterial>

</GeometryModel3D.Material>

</GeometryModel3D>

</Model3DGroup>

</ModelVisual3D.Content>

</ModelVisual3D>

</Viewport3D>

</DockPanel>

</Window>

На рис. 1.21 показано, что получается  в результате. Как и при заливке двумер# ного прямоугольника, изменение  элементов  управления отражается  на внешнем виде трехмерного объекта. Конечно, для описания трехмерной сцены требуется большой объем разметки. Поэтому, если вы собираетесь экспериментировать с трехмерной  графикой,  я настоятельно рекомендую  воспользоваться каким#ни# будь специализированным редактором.

И последнее,  что хотелось  бы упомянуть  в связи  с интеграцией.  Все, что мы видели до сих пор, было более#менее статичным.  Но в WPF все компоненты из# начально  поддерживают анимацию.  Анимация  позволяет   периодически изме# нять значение некоторого свойства. Чтобы анимировать нашу трехмерную сцену, добавим для начала преобразование поворота. Это преобразование позволяет  по# вернуть трехмерную модель, изменив  угол обзора. Затем  мы анимируем  изобра# жение, указав, что угол нужно изменять  периодически:

Рис. 1.21. Элементы управления в качестве материала трехмерной формы

<!— …прочие аспекты сцены… —>

<GeometryModel3D>

<GeometryModel3D.Transform>

<RotateTransform3D CenterX=’.5’ CenterY=’.5’ CenterZ=’ .5’>

<RotateTransform3D.Rotation>

<AxisAngleRotation3D x:Name=’rotation’ Axis=’0,1,0’

Angle=’0’ />

</RotateTransform3D.Rotation>

</RotateTransform3D>

</GeometryModel3D.Transform>

<!— …прочие аспекты сцены… —>

Теперь можно приступать  к определению  анимации.  Тут много разных дета# лей, но самым важным  видом анимации  является DoubleAnimation, когда изме# няется  некое значение  типа  double.  (Анимация вида ColorAnimation позволяет изменять  цвет.) Мы анимируем  угол поворота  от #25 до 25. Смена направления вращения  будет производиться автоматически, а на каждый  поворот  отводится

2.5 секунды.

<Window …>

<!— …прочие аспекты сцены… —>

<Window.Triggers>

<EventTrigger RoutedEvent=’FrameworkElement.Loaded’>

<EventTrigger.Actions>

<BeginStoryboard>

<BeginStoryboard.Storyboard>

<Storyboard>

<DoubleAnimation From=’ 25’ To=’25’

Storyboard.TargetName=’rotation’ Storyboard.TargetProperty=’Angle’ AutoReverse=’True’ Duration=’0:0:2.5’

RepeatBehavior=’Forever’

/>

</Storyboard>

</BeginStoryboard.Storyboard>

</BeginStoryboard>

</EventTrigger.Actions>

</EventTrigger>

</Window.Triggers>

<!— …прочие аспекты сцены… —>

При запуске этой программы вы увидите картину, изображенную на рис. 1.22, только анимированную. (Я пытался  убедить издателей  продавать  вместе с каж# дым экземпляром книги ноутбук, чтобы вы могли воочию наблюдать анимацию, но они решили, что это слишком расточительно.) Интеграция пользовательского интерфейса,  документов   и  мультимедийного  содержимого   встроены   в  WPF очень глубоко. Можно  наделять  кнопки  трехмерными  текстурами,  а в качестве фона текстового поля использовать видео – возможно  почти все. Такая гибкость облает большой мощностью, но может и вызывать сложности при неразумном использовании. Один из способов добиться развитого и в то же время последова# тельного изображения – система стилизации WPF.

Рис. 1.22. Анимирование трехмерной сцены

Источник: К. Андерсон  Основы  Windows Presentation Foundation. Пер. с англ. А. Слинкина — М.: ДМК Пресс, 2008 — 432 с.: ил.

По теме:

  • Комментарии