Search

Search results

  1. 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
  2. In this example we have implemented an awesome menu design by Gal Shir! The cards Each card is defined as follows. A translational offset is calculated in JavaScript based on the cards index. Name, background color and text color are also data-bound values. <Panel Offset="{offset}" ux:Name="unselected"> <Panel ux:Name="self" LayoutMaster="unselected"> <Grid ux:Name="hamburger" RowCount="3" Height="30" Width="30" Alignment="TopLeft" Margin="20" Opacity="0"> <Each Count=...

    Cards Menu Tabs
  3. In this example we are implementing a really cool card navigation with a "swipe to reveal details" action. Design by Leo Leung. Icons are from Google's excellent Material Icons and nature images from UnSplash. The swipe gesture Each card has a SwipeGesture with the Direction property set to Up. This means that one has to swipe upwards in order to activate the gesture. <SwipeGesture ux:Name="swipe" Direction="Up" Type="Active" /> Setting the Type property to Active means that this gesture wo...

    Swipe gesture Cards
  4. 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