WPF: how to implement a button that make 2 other buttons visible with fading -

i want implement special button , don't know how start this.

i want button's content property be: play. when clicking on it, want 2 other buttons pop in left , in right sides: single play , parallel play

after lot of discussion, here result solve problem:

xaml:

<window x:class="wpfapplication3.mainwindow"     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"     xmlns:my="clr-namespace:wpfapplication3"     title="mainwindow" height="350" width="525"> <grid>     <stackpanel orientation="horizontal">         <button name="btnsingleplay" visibility="collapsed" my:visibilityanimation.isactive="true">singleplay</button>         <button name="btnplay" click="btnplay_click">play</button>         <button name="btnparallelplay" visibility="collapsed" my:visibilityanimation.isactive="true">parallelplay</button>     </stackpanel> </grid> 

c# set 2 sides button visible.

private void btnplay_click(object sender, routedeventargs e)         {             btnsingleplay.visibility = visibility.visible;             btnparallelplay.visibility = visibility.visible;         } 

and c# code permit fade in/fade out. comes wpf fade animation props anvaka, not me.

using system; using system.collections; using system.collections.generic; using system.linq; using system.text; using system.threading.tasks; using system.windows; using system.windows.media.animation;  namespace wpfapplication3 {     public class visibilityanimation : dependencyobject     {         private const int duration_ms = 200;          private static readonly hashtable _hookedelements = new hashtable();          public static readonly dependencyproperty isactiveproperty =           dependencyproperty.registerattached("isactive",           typeof(bool),           typeof(visibilityanimation),           new frameworkpropertymetadata(false, new propertychangedcallback(onisactivepropertychanged)));          public static bool getisactive(uielement element)         {             if (element == null)             {                 throw new argumentnullexception("element");             }              return (bool)element.getvalue(isactiveproperty);         }          public static void setisactive(uielement element, bool value)         {             if (element == null)             {                 throw new argumentnullexception("element");             }             element.setvalue(isactiveproperty, value);         }          static visibilityanimation()         {             uielement.visibilityproperty.addowner(typeof(frameworkelement),                                                   new frameworkpropertymetadata(visibility.visible, new propertychangedcallback(visibilitychanged), coercevisibility));         }          private static void visibilitychanged(dependencyobject d, dependencypropertychangedeventargs e)         {             // what? ignore.         }          private static void onisactivepropertychanged(dependencyobject d, dependencypropertychangedeventargs e)         {             var fe = d frameworkelement;             if (fe == null)             {                 return;             }             if (getisactive(fe))             {                 hookvisibilitychanges(fe);             }             else             {                 unhookvisibilitychanges(fe);             }         }          private static void unhookvisibilitychanges(frameworkelement fe)         {             if (_hookedelements.contains(fe))             {                 _hookedelements.remove(fe);             }         }          private static void hookvisibilitychanges(frameworkelement fe)         {             _hookedelements.add(fe, false);         }          private static object coercevisibility(dependencyobject d, object basevalue)         {             var fe = d frameworkelement;             if (fe == null)             {                 return basevalue;             }              if (checkandupdateanimationstartedflag(fe))             {                 return basevalue;             }             // if here, means have start fade in or fade out             // animation. in case return value of method             // visibility.visible.               var visibility = (visibility)basevalue;              var da = new doubleanimation             {                 duration = new duration(timespan.frommilliseconds(duration_ms))             };              da.completed += (o, e) =>             {                 // trigger value coercion again                 // checkandupdateanimationstartedflag() function reture true                 // time, , animation not triggered.                 fe.visibility = visibility;                 // nb: small problem here. may , brake                  // binding visibility property.             };              if (visibility == visibility.collapsed || visibility == visibility.hidden)             {                 da.from = 1.0;                 da.to = 0.0;             }             else             {                 da.from = 0.0;                 da.to = 1.0;             }              fe.beginanimation(uielement.opacityproperty, da);             return visibility.visible;         }          private static bool checkandupdateanimationstartedflag(frameworkelement fe)         {             var hookedelement = _hookedelements.contains(fe);             if (!hookedelement)             {                 return true; // don't need animate unhooked elements.             }              var animationstarted = (bool)_hookedelements[fe];             _hookedelements[fe] = !animationstarted;              return animationstarted;         }     } }