Slider "animation" in WPF? -

Slider "animation" in WPF? -

i have button , slider, when press button want slider tick 1 step until reach maximum value. however, don't work. 1 time click button, sleeps while , show slider @ maximum value, without showing each tick.

here's xaml code:

<stackpanel orientation="horizontal"> <button x:name="animationgobutton" content="go" /> <slider x:name="animationslider" tickfrequency="1" tickplacement="bottomright" issnaptotickenabled="true" width="200" maximum="20" value="0" /> </stackpanel>

and here's code behind:

private sub animationgobutton_click(sender system.object, e system.windows.routedeventargs) handles animationgobutton.click while (me.animationslider.value < me.animationslider.maximum) me.animationslider.value += 1 system.threading.thread.sleep(100) end while end sub

i have tried utilize dynamic resource, result same.

xaml:

<window.resources> <sys:double x:key="animationslidervalue">0</sys:double> </window.resources>

and changed value slider in xaml to:

value="{dynamicresource animationslidervalue}"

and alter code behind to:

while (me.animationslider.value < me.animationslider.maximum) resources("animationslidervalue") += 1 system.threading.thread.sleep(100) end while

but said, result same. when press button ui doesn't update until has reached maximum value.

so question is, how create "animation" want slider? point me right direction look, please. :) give thanks you!

you can utilize storyboard animations.

<window x:class="wpfapplication1.mainwindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" title="mainwindow" height="350" width="525" x:name="usercontrol"> <window.resources> <booleantovisibilityconverter x:key="booleantovisibilityconverter" /> <storyboard x:key="slideupanimation"> <doubleanimationusingkeyframes storyboard.targetproperty="(rangebase.value)" storyboard.targetname="slider1"> <easingdoublekeyframe keytime="0:0:1" value="10"/> </doubleanimationusingkeyframes> </storyboard> <storyboard x:key="slidedownanimation"> <doubleanimationusingkeyframes storyboard.targetproperty="(rangebase.value)" storyboard.targetname="slider1"> <splinedoublekeyframe keytime="0:0:1" value="0"/> </doubleanimationusingkeyframes> </storyboard> </window.resources> <window.triggers> <eventtrigger routedevent="frameworkelement.loaded"> <beginstoryboard storyboard="{staticresource slideupanimation}"/> </eventtrigger> </window.triggers> <stackpanel orientation="horizontal" horizontalalignment="left" verticalalignment="top"> <button x:name="btnslidedown" click="btnslidedown_click" content="slide down" horizontalalignment="center" verticalalignment="center"/> <slider height="23" x:name="slider1" width="100" /> <button x:name="btnslideup" click="btnslideup_click" horizontalalignment="center" verticalalignment="center" content="slide up" /> </stackpanel>

and start storyboards on button clicks:

public partial class mainwindow : window { public mainwindow() { initializecomponent(); } private void btnslideup_click(object sender, system.windows.routedeventargs e) { this.beginstoryboard((storyboard)this.findresource("slideupanimation")); } private void btnslidedown_click(object sender, system.windows.routedeventargs e) { this.beginstoryboard((storyboard)this.findresource("slidedownanimation")); } }

note: need add together presentationframework.dll in project references in order access storyboard class in code.

update per comment below

you want increment slider.value whole integers using animations. since target value type double, animation calculates , applies double values target, based on animation frame rate. (the animation frame rate 60 fps default, if did cut down it, still may or may not give values depending on origin value). don't know of ways tell doubleanimation utilize values only. there exists int32animation class cannot apply slider.value of type double.

here's hacky solution (which don't quite like): add together sliderintvalue (int32) dependency property parent (e.g. mainwindow or maybe viewmodel) , bind slider.value using two-way binding. binding class magically take care of type conversion. apply animations sliderintvalue instead of slider itself:

<window x:class="wpfapplication1.mainwindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" title="mainwindow" height="350" width="525" x:name="usercontrol"> <window.resources> <booleantovisibilityconverter x:key="booleantovisibilityconverter" /> <storyboard x:key="slideupanimation"> <int32animationusingkeyframes storyboard.targetproperty="sliderintvalue" storyboard.targetname="usercontrol"> <easingint32keyframe keytime="0:0:1" value="10"/> </int32animationusingkeyframes> </storyboard> <storyboard x:key="slidedownanimation"> <int32animationusingkeyframes storyboard.targetproperty="sliderintvalue" storyboard.targetname="usercontrol"> <easingint32keyframe keytime="0:0:1" value="0"/> </int32animationusingkeyframes> </storyboard> </window.resources> <stackpanel orientation="horizontal" horizontalalignment="left" verticalalignment="top"> <button x:name="btnslidedown" click="btnslidedown_click" content="slide down" horizontalalignment="center" verticalalignment="center"/> <slider height="23" x:name="slider1" width="100" issnaptotickenabled="true" value="{binding sliderintvalue, elementname=usercontrol, mode=twoway, updatesourcetrigger=propertychanged}" /> <button x:name="btnslideup" click="btnslideup_click" horizontalalignment="center" verticalalignment="center" content="slide up" /> <textbox textwrapping="wrap" text="{binding value, elementname=slider1}" margin="20,0,0,0"/> </stackpanel>

and here's dependency property added mainwindow class:

public partial class mainwindow : window { public static readonly dependencyproperty sliderintvalueproperty = dependencyproperty.register("sliderintvalue", typeof(int), typeof(mainwindow)); public mainwindow() { initializecomponent(); } private void btnslideup_click(object sender, system.windows.routedeventargs e) { this.beginstoryboard((storyboard)this.findresource("slideupanimation")); } private void btnslidedown_click(object sender, system.windows.routedeventargs e) { this.beginstoryboard((storyboard)this.findresource("slidedownanimation")); } }

wpf animation user-interface slider