We want to create a simple sample that has a TextView and a SearchInput components. When the user types a string and selects Search button, the string is shown in TextView automatically.
First of all, we create a page named Page-5 with this Markup code:
Page-5.zbl:
<z-Component z-type="Page5" z-base="Templates.Default" z-namespace="UI.Pages"
z-partial="true" Title="About us" data-TopMenu="MainMenu" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="./../.zebble-schema.xml">
<z-place inside="Body">
<TextView Id="txt1" ></TextView>
<SearchInput Id="MySearchInput" on-Searched="ApplySearch" />
</z-place>
</z-Component>
As you can see, we determine that when the on-Searched event is raised, the ApplySearch method is executed.
For implementing the ApplySearch method, you should go to Page-5.cs file:
{
public override async Task OnInitializing()
{
await base.OnInitializing();
await InitializeComponents();
}
async Task ApplySearch()
{
txt1.Text = MySearchInput.Text;
// In this example I want to pass the keywords to an API to implement the search logic on the server.
}
}
The result page is same this image:
Note:
Previously events like Tapped and LongPressed optionally provided an event argument of type Point.
Now all gesture events provide a single XXXEventArgs argument which will wrap the other parameters in them.
Following, the gesture events of Zebble have been described:
The tapped event is fired when the user tapps a view.
Sample:
in this sample, the user tapped on the TextView. After that, the alert with "Hello you!" is shown on the screen:
Sample 1:
on-Tapped="SomethingTapped" />
Sample 2:
{
if (Something.Width==50) Something.Width=100;
else
Something.Width=50;
return Task.CompletedTask;
}
Every view has a long press event. When you hold an element with your finger for a full second it will be fired.
Note: In Windows desktop (during development), you fire that event by right clicking the object instead of holding the mouse key down.
Sample 1 :
Sample 2:
This sample demonstrates using the LongPressed to implement dragging an image.
In this sample, we have an image in MarkUp:
on-LongPressed="CallDrag"/>
{
MyImage.Style.X= args.X;
MyImage.Style.Y= args.Y;
return Task.CompletedTask;
}
Sample 3:
In This sample, we demonstrate how using the LongPressed to implement dragging an image to the Remove box for simulating deleting an image. When users want to remove an image, they should select it and press for a long time for raising LongPressed events. After that, they drag it on a image which we called it Remove box.
In this sample, we have an image in MarkUp:
<ImageView Id="RemoveImage" Path="Images/remove.png" />
We use the argument which pass to the CallDrag for moving the image object:
{
MyImage.Style.X= args.X;
MyImage.Style.Y= args.Y;
if args.X >= RemoveImage.X && args.Y >= RemoveImage.Y
{
// Do something for removing
}
return Task.CompletedTask;
}
Every view in Zebble supports the following gesture events:
You can use these events to create custom user interactions and advanced scenarios.
Example:
Try the following example, which makes a draggable object that you can freely move around with a tiny bit of code!
<Canvas Id="Bullet" />
</Canvas>
Note:
Previously events like Tapped and LongPressed optionally provided an event argument of type Point.
Now all gesture events provide a single XXXEventArgs argument which will wrap the other parameters in them.
{
Bullet.X(args.To.X).Y(args.To.Y);
return Task.CompletedTask;
}
#Bullet { background: blue; height: 40px; width:40px; border-radius: 20px; position:absolute }
It's fired when the user pans towards left or right for at least 20 pixels.
Sample
{
switch (Something.BackgroundColor.Tostring())
{
case "brown":
Something.BackgroundColor = "black";
break;
case "black":
Something.BackgroundColor = "green";
break;
}
return Task.CompletedTask;
}
This event is fired when the user uses two fingers that go towards or away from each other.
The primary use case for this is to implement a custom zoom-in or zoom-out behaviour.
Note: In Windows desktop (during development) you should hold the Ctrl key and turn the mouse wheel up or down to invoke this event.
Example
{
MyImage.Height= args.X;
MyImage.Width= args.Y;
return Task.CompletedTask;
}
You can handle the UserRotating event to handle the gesture when the user is using two fingers in the motion demonstrated here.
The main use case for this gesture is to rotate your view on the Z index and it's common in Map applications.
Note: In Windows desktop (during development) you should hold the Shift key and turn the mouse wheel up or down to invoke this event.
Most of any application's code runs when the user provides an input, often in the form of a gesture. In other words often everything starts from an event handler such as tapping of a button.
Of course any code may have bugs including your event handler, and everything else that is invoked in a chain from there. If there is an unhandled exception the default behaviour of iOS, Android and Windows is to crash the app and close it immediately. That's not helpful for debugging, or for user experience.
To solve this problem event handlers in Zebble always catch any unhandled exception and display an error pop-up to the user, unless you're running the app with a Debugger attached, in which case the error will be thrown, allowing you go about your debugging the normal way.