|
In this article I will talk about how to provide feedback on click of any control in Windows Store apps. This is important because it makes the app more fluid and this is pretty simple to implement.
Let's write code to implement in javascript and then in silvelight.
Javascript
Step 1: Open VS2012 and select New Project from File Menu.
Step 2: Select template type as Windows Store under JavaScript.
Step 3: Open default.html and put below html code inside body element which will create a button and a checkbox.
< input type="button" id="btnFeedBack" value="Touch to get feedback" />
<input type="checkbox" id="chkFeedBack" />Touch checkbox to get feedback
Step 4: Create a js file feedback.js file inside js folder or the solution.
Step 5: Place below code in the feedback.js file. In the below code we are using "MSPointerDown" and "MSPointerUp" event to provide the animation on click or tap of button or checkbox.
The "MSPointerDown" event has method onPointerDown which calls WinJS.UI.Animation.pointerDown and "MSPointerUP" event has method onPointerUp method which calls WinJS.UI.Animation.pointerUp.
( function () {
"use strict";
var page = WinJS.UI.Pages.define("/default.html", {
ready: function (element, options) {
var btn = document.getElementById("btnFeedBack"),
chk = document.getElementById("chkFeedBack");
btn.addEventListener("MSPointerDown", onPointerDown, false);
btn.addEventListener("MSPointerUp", onPointerUp, false);
chk.addEventListener("MSPointerDown", onPointerDown, false);
chk.addEventListener("MSPointerUp", onPointerUp, false);
}
});
function onPointerDown(evt) {
WinJS.UI.Animation.pointerDown(evt.srcElement);
}
function onPointerUp(evt) {
WinJS.UI.Animation.pointerUp(evt.srcElement);
}
})();
Now run the application and tap or click on button or checkbox. You will notice the feedback of control.
Silverlight
Step 1: Open VS2012 and select New Project from File Menu.
Step 2: Select template type as Windows Store under Visual C#.
Step 3: Open MainPage.xaml and place a button and a checkbox inside.
<Button x:Name="btnFeedback" Content="Touch to get feedback"/>
<CheckBox x:Name="chkFeedback" Margin="200,0,0,0" Content="Touch checkbox to get feedback"></Checkbox>
Step 4:Place below code outside Grid of MainPage.Xaml. In the below code PointerDownThemeAnimation and PointerUpThemeAnimation is used inside Storyboard to provide animation.
<Page.Resources>
<Storyboard x:Name="ButtonPush">
<PointerDownThemeAnimation TargetName="btnFeedback" />
</Storyboard>
<Storyboard x:Name="ButtonPop">
<PointerUpThemeAnimation TargetName="btnFeedback" />
</Storyboard>
<Storyboard x:Name="ChkPush">
<PointerDownThemeAnimation TargetName="chkFeedback" />
</Storyboard>
<Storyboard x:Name="ChkPop">
<PointerUpThemeAnimation TargetName="chkFeedback" />
</Storyboard>
</Page.Resources>
Step 5: Now lets add PointerPressed and PointerReleased event to button and checkbox created in step 3.
<Button x:Name="btnFeedback" Content="Touch to get feedback" PointerPressed="btnFeedback_PointerPressed" PointerReleased="btnFeedback_PointerReleased"/>
<CheckBox x:Name="chkFeedback" Margin="200,0,0,0" Content="Touch checkbox to get feedback" PointerPressed="chkFeedback_PointerPressed" PointerReleased="chkFeedback_PointerReleased"></CheckBox>
Step 6: Now add the PointerPressed and PointerReleased event of Button and Checkbox.
private void btnFeedback_PointerPressed(object sender, PointerRoutedEventArgs e)
{
ButtonPush.Begin();
}
private void btnFeedback_PointerReleased(object sender, PointerRoutedEventArgs e)
{
ButtonPop.Begin();
}
private void chkFeedback_PointerPressed(object sender, PointerRoutedEventArgs e)
{
ChkPush.Begin();
}
private void chkFeedback_PointerReleased(object sender, PointerRoutedEventArgs e)
{
ChkPop.Begin();
}
Step 7: Now run the application, tap or click and you will notice there is no animation for feedback but right click will provide animation for feedback. But we want to provide feedback animation on tap or click as well.
Lets modify code a little.
Step 8: Remove PointerPressed and PointerRemoved event of button and checkbox from xaml and it should look like below.
<Button x:Name="btnFeedback" Content="Touch to get feedback"/>
<CheckBox x:Name="chkFeedback" Margin="200,0,0,0" Content="Touch checkbox to get feedback"></Checkbox>
Step 9: Now add the event handler from code behind like below in the MainPage constructor.
public MainPage()
{
this.InitializeComponent();
btnFeedback.AddHandler( Button.PointerPressedEvent, new PointerEventHandler(btnFeedback_PointerPressed), true);
btnFeedback.AddHandler(Button.PointerReleasedEvent, new PointerEventHandler(btnFeedback_PointerReleased), true);
chkFeedback.AddHandler( Button.PointerPressedEvent, new PointerEventHandler(chkFeedback_PointerPressed), true);
chkFeedback.AddHandler(Button.PointerReleasedEvent, new PointerEventHandler(chkFeedback_PointerReleased), true);
}
Step 10: Now run the application again, tap or click on button or checkbox. This time you will notice feedback animation on the control. Feedback animation will be available on right click as well.
This ends the article of Tap or Click feedback on control in Windows Store app.
|