Search

Search results

  1. In this example we show how to create a drag-to-reorder behaviour on a list of items. This was made possible by the introduction of IdentityKey property on Each tag, which takes care of figuring out which items are where after a list has been modified. Making a component Since we want to have code that we can reuse in multiple places, we build a custom ux:Class component for our SortableList element. We will need to change the order of items that we pass in through ux:Property, so that list ha...

    Custom control JavaScript Reusable components Animation
  2. In this example, we are making a button with a fancy loading animation. The icons used in this example are from Font Awesome. Note: Although this example contains a complete app screen for context, the focus of this article is only on the button itself. Making the button We begin by declaring our SendButton component. It has a boolean property, IsLoading, which controls the animation. The animation begins when IsLoading becomes true, and plays until it becomes false. From here on, we'll refe...

    Animation Custom control
  3. Fuse has a flexible and powerful system to help you style your own and existing controls. Let's look at how it works by styling a ToggleControl control inspired by this example by Ramotion. In this example, we'll be using: * Subclassing of the ToggleControl to create our own control that has multiple states (in this case, on and off) * Allowing the user of the control to choose between swiping the thumb using SwipeGesture, or clicking the control to toggle the state The main things we are ...

    Custom control Gesture
  4. This example shows how we can create a segmented code input control with neat animations between focused and non-focused states. Design inspiration was taken from the clean and attractive Code input field concept by Samuel Kantala. Our SegmentedInput is a reusable component and contains both UX code for layout and JavaScript for the logic. Let's take a look at the basic structure of it: <StackPanel ux:Class="SegmentedInput" HitTestMode="LocalBounds"> <string ux:Property="Label" /> <str...

    Animation Custom control JavaScript Reusable components
  5. This example illustrates how you can build a custom radio button control using Selection and Selectable. When Selected, each button sets the value of an Attractor, which in turn changes the background color. The Attractor is used to make a smooth transition between colors. <App> <iOS.StatusBarConfig Style="Light" /> <Rectangle ux:Class="SelectableRectangle" Width="35" Height="35" CornerRadius="2" Color="{Property SelectionColor}"> <string ux:Property="ID" /> <float4 ux:...

    Custom control Selection
  6. In this example we'll implement a custom switch control by using the ToggleControl, with separate forward and backward animations. The design was inspired by this awesome piece by Ramakrishna V (which was later animated by Tsuriel). In this example, we will: * Define our own ToggleControl with our own custom animation * Utilize the BackwardAnimation attribute on TriggerAnimation in order to get separate activating and deactivating animations * Have animations with several steps, using Key...

    Custom control Gesture Animation
  7. In this example, we make a custom toggle control using SwipeGesture and SwipingAnimation. <App> <Panel ux:Class="MyToggle" Width="80" Height="34" PrimaryColor="#9b59b6" SecondaryColor="#fff"> <float4 ux:Property="PrimaryColor" /> <float4 ux:Property="SecondaryColor" /> <bool ux:Property="IsActive" /> <SwipeGesture ux:Name="swipe" Length="46" Direction="Right" Type="Active" IsActive="{Property IsActive}" /> <SwipingAnimation Source="swipe"> ...

    Custom control Swipe gesture
  8. This example shows how you can make your own transitions for pages within a PageControl. The trick is setting Transition="None" on the PageControl, which removes the default page animations. This lets you add your own EnteringAnimation and ExitingAnimation to each page, which controls how they animate in and out. <App Background="#222"> <Page ux:Class="MyPage"> <EnteringAnimation> <Move X="-1" RelativeTo="ParentSize" /> </EnteringAnimation> <ExitingAnima...

    Navigation Custom control
  9. Using the JavaScript Camera API, we create a small app that lets you take pictures with a halftone effect. The effect parameters can then be tweaked with some custom styled slider controls. Taking a picture We create a function in JavaScript called takePicture which we bind to from UX. var picture = Observable('Icons/background.jpg'); var filterApplied = Observable(false); function takePicture(){ Camera.takePicture(1000, 1200).then(function(file){ picture.value = file; fi...

    Effects Custom control Camera
  10. This example shows how to make a neat loading button with different success and error states. The button The button uses a StateGroup to animate between four states: defaultState, loadingState, success and error. The check and error icons are contained inside WhileTrue triggers, which are activated by their respective states. The loading animation is achieved by animating the StartAngleDegrees and EndAngleDegrees properties of a Circle. <Panel ux:Class="LoadButton" Width="150" Height="60"> ...

    Custom control Animation
  11. This example shows how to create an immersive swipeable cards experience. The screen pops with color and you can even interact with the products shown! Inspiration: this good-looking cards animation by Artem Miskevich. All images are taken from unsplash.com. Animated folder and vinyl The products in our application are represented as "cards", so we start out by creating a reusable ux:Class component for them. Although the Card class holds the whole layout for a product, we'll take a look at h...

    Animation Basics Cards Custom control Layout Navigation Transition
  12. We discovered a blog post by MaterialUp with a nice list of UX designs and felt like taking on the challenge of turning it into code. Here is an implementation of their material up-vote design. Update: watch a video of Jake going through this example. The structure The structure can be split into three parts. The button, the background and the animation. The inner circles The actual button is composed of two filled circles. They each contain a Scaling with Factor="0" which gives them a size...

    Custom control Animation