Silverlight telerik Control Learning: radtransitioncontrol

If you want to display a cool image rotation effect, use the radtransitioncontrol control. It provides a cool effect!

The principle is not complex. For more information, see ListBox/style learning notes for Silverlight-image rotation advertisement for ListBox.

XAML section:

<Usercontrol xmlns: telerik = "http://schemas.telerik.com/2008/xaml/presentation" X: class = "telerik. sample. transition "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 "xmlns: Common =" CLR-namespace: commo N. silverlight; Assembly = Common. silverlight "xmlns: Model =" CLR-namespace: businessobject; Assembly = businessobject "xmlns: teleriktranstions =" CLR-namespace: telerik. windows. controls. transitioneffects; Assembly = telerik. windows. controls "MC: ignorable =" D "D: designheight =" 313 "D: designwidth =" 500 "> <usercontrol. resources> <! -- Style of the list box --> <style X: Key = "photoliststyle" targettype = "ListBox"> <setter property = "background" value = "{X: null} "/> <setter property =" borderthickness "value =" 0 "/> </style> <! -- List box-data item style --> <style X: key = "photolistitemstyle" targettype = "listboxitem"> <setter property = "padding" value = "0"/> <setter property = "margin" value = "1"/> <setter property = "horizontalcontentalignment" value = "center"/> <setter property = "verticalcontentalignment" value = "center"/> <setter property = "background" value = "{X: null} "/> <setter property =" borderthickness "value =" 0 "/> <setter property =" tabnavigat Ion "value =" local "/> <setter property =" template "> <setter. value> <controltemplate targettype = "listboxitem"> <grid cursor = "hand"> <visualstatemanager. visualstategroups> <visualstategroup X: Name = "commonstates"> <visualstate X: Name = "normal"/> <visualstate X: name = "Mouseover"> <storyboard> <doubleanimation duration = "0" to = ". 35 "storyboard. targetproperty = "opacity" storyboard. targetname = "rectmouseover"/> </Storyboard> </visualstate> <visualstate X: Name = "disabled"> <storyboard> <doubleanimation duration = "0" to = ". 55 "storyboard. targetproperty = "opacity" storyboard. targetname = "contentpresenter"/> </storyboard> </visualstate> </visualstategroup> <visualstategroup X: Name = "selectionstates"> <visualstate X: name = "unselected"/> <visualstate X: Name = "selected"> <storyboard> <doubleanimation duration = "0" to =". 75 "storyboard. targetproperty = "opacity" storyboard. targetname = "rectselected"/> </storyboard> </visualstate> </visualstategroup> <visualstategroup X: Name = "focusstates"> <visualstate X: name = "focused"> <storyboard> <objectanimationusingkeyframes duration = "0" storyboard. targetproperty = "visibility" storyboard. targetname = "focusvisualelement"> <discreteobjectkeyframe keytime = "0"> <discreteobjectkeyframe. Value> <visibility> visible </visibility> </discreteobjectkeyframe. value> </discreteobjectkeyframe> </objectanimationusingkeyframes> </storyboard> </visualstate> <visualstate X: Name = "unfocused"/> </visualstategroup> </visualstatemanager. visualstategroups> <rectangle X: name = "rectmouseover" fill = "aliceblue" ishittestvisible = "false" opacity = "0" strokethickness = "0" margin = "1"/> <rectangle X: Name = "rects Elected "fill =" antiquewhite "ishittestvisible =" false "opacity =" 0 "radiusy =" 1 "radiusx =" 1 "strokethickness =" 0 "margin =" 1 "/> <contentpresenter X: name = "contentpresenter" contenttemplate = "{templatebinding contenttemplate}" content = "{templatebinding content}" encoding = "{templatebinding encoding}" margin = "{templatebinding padding}"/> <rectangle X: name = "focusvisualelement" ra Diusy = "1" radiusx = "1" stroke = "# ffefef" strokethickness = "0.5" visibility = "visible" D: ishidden = "true"/> </GRID> </controltemplate> </setter. value> </setter> </style> <! -- List box-layout template --> <itemspaneltemplate X: Key = "horizontalitempanel"> <stackpanel orientation = "horizontal"/> </itemspaneltemplate> <! -- List box-data item (content) template --> <datatemplate X: key = "datatemplate"> <grid width = "22" Height = "22" background = "#11 ffffff"> <textblock text = "{binding text}" tooltipservice. tooltip = "{binding description}" horizontalalignment = "center" verticalignment = "center" foreground = "white" fontsize = "10" fontweight = "bold"> </textblock> </ grid> </datatemplate> <! -- Sample data source --> <common: objectcollection X: Key = "photoscollection"> <model: menuitem imageuri = "/Common. silverlight. resource; component/img/ireland01.jpg "text =" 1 "Description =" Ireland landscape 1 "> </model: menuitem> <model: menuitem imageuri ="/Common. silverlight. resource; component/img/ireland02.jpg "text =" 2 "Description =" Irish landscape 2 "> </model: menuitem> <model: menuitem imageuri ="/Common. silverlight. resource; component/img/ireland03.jpg "text =" 3 "Description =" Irish landscape 3 "> </model: menuitem> <model: menuitem imageuri ="/Common. silverlight. resource; component/img/ireland04.jpg "text =" 4 "Description =" Ireland landscape 4 "> </model: menuitem> <model: menuitem imageuri ="/Common. silverlight. resource; component/img/ireland05.jpg "text =" 5 "Description =" Ireland scenery 5 "> </model: menuitem> </common: objectcollection> </usercontrol. resources> <grid X: name = "layoutroot"> <grid verticalignment = "center" horizontalalignment = "center" width = "500" Height = "313" mouseenter = "grid_mouseenter" mouseleave = "grid_mouseleave"> <telerik: radtransitioncontrol content = "{binding selecteditem, elementname = photoslistbox}"> <telerik: radtransitioncontrol. transition> <teleriktranstions: motionblurredzoomtransition/> </telerik: radtransitioncontrol. transition> <telerik: radtransitioncontrol. contenttemplate> <datatemplate> <Image Source = "{binding imageuri}" stretch = "Uniform"/> </datatemplate> </telerik: radtransitioncontrol. contenttemplate> </telerik: radtransitioncontrol> <ListBox X: name = "photoslistbox" itemssource = "{staticresource photoscollection}" itemspanel = "{staticresource horizontalitempanel}" itemtemplate = "{staticresource datatemplate}" Expiration = "bottom" Expiration = "right" margin = "5" selectedindex = "0" itemcontainerstyle = "{staticresource photolistitemstyle}" style = "{staticresource photoliststyle}"/> </GRID> </usercontrol>

Backend CS code

Using system; using system. windows; using system. windows. controls; using system. windows. input; using system. windows. threading; namespace telerik. sample {public partial class transition: usercontrol {private dispatchertimer timer = new dispatchertimer (); Private bool isforward = true; Public transition () {initializecomponent (); this. loaded + = new routedeventhandler (transition_loaded);} void transition_loaded (Object sender, routedeventargs e) {timer. interval = new timespan (0, 0, 0, 0, 2000); timer. tick + = new eventhandler (timer_tick); timer. start ();} void timer_tick (Object sender, eventargs e) {VaR _ currentindex = This. photoslistbox. selectedindex; If (isforward) // if it is increased from left to right, {If (_ currentindex <this. photoslistbox. items. count-1) {This. photoslistbox. selectedindex ++;} else {This. photoslistbox. selectedindex --; isforward = false; // change direction} else {If (_ currentindex> 0) {This. photoslistbox. selectedindex --;} else {This. photoslistbox. selectedindex ++; isforward = true ;}} private void grid_mouseenter (Object sender, mouseeventargs e) {timer. stop ();} private void grid_mouseleave (Object sender, mouseeventargs e) {timer. start ();}}}