Search

Search results

  1. In this example we will implement a pull to reload design inspired by this cool piece by Michael B. Mayers. The PullToReload-trigger Fuse has a Trigger called PullToReload, which we use in this example. The following snippet illustrates its basic usage. <PullToReload IsLoading="{isLoading}" ReloadHandler="{reloadHandler}"> <State ux:Binding="Pulling"> <!-- active while pulling --> </State> <State ux:Binding="PulledPastThreshold"> <!-- activates when pulled past thr...

    Animation Gesture
  2. A quite common use case is to use swipe gestures to perform actions on items in a list. This example uses SwipeGesture to create an inbox with items that can either be postponed or removed by swiping it to the left or right. Setting up the data The data is defined as a simple Observable collection of Message objects: function Message(icon, sender, subject, summary) { this.sender = sender; this.subject = subject; this.icon = icon; this.summary = summary; } var messages = Obser...

    Gesture
  3. This example shows how we can create sticky headers that hover at the top of the screen as we scroll the content. Pictures for this example are taken from unsplash.com. Design inspiration: Read App Interface by Kun-Li. The desired effect can be implemented with the use of the x() and y() UX expression functions. Since in this case we only need a vertical translation, we will use the y() function, which tells us the value of an elements' vertical position. The main structure of our app is a Scr...

    Animation Cards Gesture Layout
  4. 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
  5. In this example we will implement the card swipe control made famous by Tinder. Swipe to the right if you've visited a city, to the left if you have not. To achieve the desired effect, we will use PointAttractor and Draggable to give elements the ability to respond to dragging gestures. PointAttractor will create a zone that the elements are attracted to. We will use three of these to create the Tinder sorting effect. Let's start by looking at the JavaScript: <JavaScript> var Observable =...

    Physics Animation Gesture
  6. It is not uncommon that you want to select multiple items and delete them from a collection. In this example we will see how that can be done in a gallery-like application, similar to what you might find in your mobile operating system. In this example we will showcase: * Layout of pictures in a style similar to pinterest * Multi-selection of these images, allowing the user to tap pictures to add to selection * Switching to selection mode using the LongPressed trigger * Deleting picture...

    Gesture
  7. In this example we use PanGesture, ZoomGesture and RotateGesture to allow direct manipulation of an element's 2D transformation. All of these gestures require an InteractiveTransform, which is passed through the Target parameter. This InteractiveTransform is what actually transforms its parent element in response to the movement interpreted by Pan- Zoom- and RotateGesture. We've also included a Shadow whose parameters are controlled by UX Expressions to give the illusion of depth. Note: Some o...

    Gesture
  8. This example, based on the awesome Ecommerce-UX design by Levani Ambokadze, shows the use of SwipeGesture and SwipeNavigate, as well as how you can achieve 3D transformations using Rotate and Viewport. The icons are from Google's Material Icons pack. Swipe navigation Swiping left and right on both detail cards and the preview photos is done using a PageControl, which handles linear navigation between panels using swipes. The following is a simplification of the two PageControls used in the ap...

    3D Navigation Gesture
  9. 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
  10. In this example we are using WhileActive and ActivatingAnimation to create a dynamic tab bar. The design was inspired by this awesome concept by Sergii Ganushchak. Icons are from Google's excellent Material Icons and the font is Roboto. The placeholder graphics is from Sergii's original Form prototype. The tab bar We use a regular PageControl for the navigation and make sure to set its TransitionEasing to BackOut. The tab bar itself is defined as follows: <Panel Dock="Top" Height="60" > ...

    Tabs Navigation Gesture Reusable components