Главная » Разработка для Windows Phone 7 » Такой необходимый Thumb

0

Уже несколько раз в данной книге у меня возникало желание применить элемент управления Thumb. В последний раз это было в проекте SplineKeyFrameExperiment из предыдущей главы. Две главы ранее я даже создал элемент управления PointDragger в приложении CubicBezier, чтобы компенсировать отсутствие элемента управления Thumb.

Thumb не только компонент шаблона Slider, он также может использоваться как элемент управления общего назначения для манипуляций. Проблема в том, что с шаблоном по умолчанию Thumb настолько уродлив, что его вполне можно зачислить в ряды «непригодных к использованию». Безусловно, для него необходимо создать пользовательский шаблон.

Thumb наследуется от Control, определяет метод IsDragging (Перетягивается) и три события: DragStarted (Перетягивание началось), DragDelta (Приращение в ходе перетягивания) и DragCompleted (Перетягивание завершено). Метод CancelDrag (Отменить перетягивание) позволяет отменить процесс на полпути .

Самым важным событием является DragDelta, имеющее два аргумента: HorizontalChange (Изменение по горизонтали) и VerticalChange (Изменение по вертикали). Thumb можно рассматривать как высокоуровневый интерфейс событий Manipulation, по крайней мере при работе с переносом.

Рассмотрим область содержимого приложения ThumbBezier (Кривая Безье с бегунком), которое аналогично приложению CubicBezier из главы 13 за исключением того, что в нем TranslateTransform используется для позиционирования четырех элементов Thumb в четырех точках.

Проект Silverlight: ThumbBezier Файл: MainPage.xaml (фрагмент)

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <Path Stroke="{StaticResource PhoneForegroundBrush}" StrokeThickness="2"> <Path.Data>

<PathGeometry>

<PathFigure x:Name="pathFig"

StartPoint="10 0 100"> <BezierSegment x:Name="pathSeg" Point1="300 100" Point2="300 400" Point3="100 400" />

</PathFigure> </PathGeometry> </Path.Data> </Path>

<Polyline Name="ctrl1Line"

Stroke="{StaticResource PhoneForegroundBrush}" StrokeDashArray="2 2" Points="100 100, 300 100" />

<Polyline Name="ctrl2Line"

Stroke="{StaticResource PhoneForegroundBrush}" StrokeDashArray="2 2" Points="300 400, 100 400" />

<Thumb Name="pt0Thumb"

Style="{StaticResource thumbStyle}" DragDelta="OnThumbDragDelta"> <Thumb.RenderTransform>

<TranslateTransform X="100" Y="100" /> </Thumb.RenderTransform> </Thumb>

<Thumb Name="pt1Thumb"

Style="{StaticResource thumbStyle}" DragDelta="OnThumbDragDelta"> <Thumb.RenderTransform>

<TranslateTransform X="300" Y="100" /> </Thumb.RenderTransform> </Thumb>

<Thumb Name="pt2Thumb"

Style="{StaticResource thumbStyle}" DragDelta="OnThumbDragDelta"> <Thumb.RenderTransform>

<TranslateTransform X="300" Y="400" /> </Thumb.RenderTransform> </Thumb>

<Thumb Name="pt3Thumb"

Style="{StaticResource thumbStyle}" DragDelta="OnThumbDragDelta"> <Thumb.RenderTransform>

<TranslateTransform X="100" Y="400" /> </Thumb.RenderTransform> </Thumb> </Grid>

Все четыре элемента управления Thumb используют совместно один и тот же обработчик событий DragDelta, описание которого является практически единственной задачей файла выделенного кода в данном случае. Для работы с Thumb и аргументами его событий понадобится посредством директивы using подключить пространство имен System.Windows.Control.Primitives.

Проект Silverlight: ThumbBezier Файл: MainPage.xaml.cs (фрагмент)

void OnThumbDragDelta(object sender, DragDeltaEventArgs args) {

Thumb thumb = sender as Thumb;

TranslateTransform translate = thumb.RenderTransform as TranslateTransform; translate.X += args.HorizontalChange; translate.Y += args.VerticalChange;

if (thumb == pt0Thumb) {

pathFig.StartPoint =

Move(pathFig.StartPoint, args.HorizontalChange, args.VerticalChange); ctrl1Line.Points[0] =

Move(ctrl1Line.Points[0], args.HorizontalChange, args.VerticalChange);

}

else if (thumb == pt1Thumb) {

pathSeg.Point1 =

Move(pathSeg.Point1, args.HorizontalChange, args.VerticalChange); ctrl1Line.Points[1] =

Move(ctrl1Line.Points[1], args.HorizontalChange, args.VerticalChange);

}

else if (thumb == pt2Thumb) {

pathSeg.Point2 =

Move(pathSeg.Point2, args.HorizontalChange, args.VerticalChange); ctrl2Line.Points[0] =

Move(ctrl2Line.Points[0], args.HorizontalChange, args.VerticalChange);

}

else if (thumb == pt3Thumb) {

pathSeg.Point3 =

Move(pathSeg.Point3, args.HorizontalChange, args.VerticalChange); ctrl2Line.Points[1] =

Move(ctrl2Line.Points[1], args.HorizontalChange, args.VerticalChange);

}

}

Point Move(Point point, double horzChange, double vertChange) {

return new Point(point.X + horzChange, point.Y + vertChange);

}

Style и ControlTemplate, описанные в коллекции Resources, делают Thumb на вид очень похожим на полупрозрачные круглые элементы, используемые мною в предыдущей версии приложения. Единственным визуальным элементом ControlTemplate является Path с EllipseGeometry:

Проект Silverlight: ThumbBezier Файл: MainPage.xaml (фрагмент)

<phone:PhoneApplicationPage.Resources>

<Style x:Key="thumbStyle" TargetType="Thumb">

<Setter Property="HorizontalAlignment" Value="Left" /> <Setter Property="VerticalAlignment" Value="Top" /> <Setter Property="Template"> <Setter.Value>

<ControlTemplate TargetType="Thumb">

<Path Name="path"

Fill="{StaticResource PhoneAccentBrush}" 0pacity="0.5"> <Path.RenderTransform>

<ScaleTransform x:Name="scale" /> </Path.RenderTransform>

<Path.Data>

<EllipseGeometry x:Name="ellipseGeometry"

RadiusX="4 8" RadiusY="48" />

</Path.Data>

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal"> <Storyboard>

<DoubleAnimation

Storyboard.TargetName="path" Storyboard.TargetProperty="Opacity" Duration="0:0:0.25" /> <DoubleAnimation

Storyboard.TargetName="scale" Storyboard.TargetProperty="ScaleX" Duration="0:0:0.25" /> <DoubleAnimation

Storyboard.TargetName="scale" Storyboard.TargetProperty="ScaleY" Duration="0:0:0.25" />

</Storyboard> </VisualState>

<VisualState x:Name="MouseOver" /> <VisualState x:Name="Disabled" />

<VisualState x:Name="Pressed"> <Storyboard>

<DoubleAnimation

Storyboard.TargetName="path" Storyboard.TargetProperty="Opacity" To="0.75" Duration="0:0:0.25" /> <DoubleAnimation

Storyboard.TargetName="scale" Storyboard.TargetProperty="ScaleX" To="1.25" Duration="0:0:0.25" /> <DoubleAnimation

Storyboard.TargetName="scale" Storyboard.TargetProperty="ScaleY" To="1.25" Duration="0:0:0.25" /> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups>

</Path> </ControlTemplate> </Setter.Value> </Setter> </Style>

</phone:PhoneApplicationPage.Resources>

У Thumb есть визуальное состояние Pressed, т.е. может быть введена возможность, которой не было в предыдущих приложениях: Thumb будет показывать, что он нажат и перетягивается, немного увеличиваясь в размере и изменяя цвет. Несколько анимаций – это все что требуется для добавления этой возможности в шаблон.

Источник: Чарльз Петзольд, Программируем Windows Phone 7, Microsoft Press, © 2011.

По теме:

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