Creating a behavior to stretch header content when at the top of a scroller 31. August 2016 Shawn UWP, Composition (0) I’ve been playing around a lot with my wife’s new iPhone a lot lately. One feature I love on some of the apps is when you reach the top of a page a header image will stretch out to indicate you are at the top of the page. This is a fun feature that’s super easy to add using a behavior. The behavior will focus on scaling the image up by a factor but only when the ScrollerViewer is being “stretched”. public class StretchyHeaderBehavior : Behavior<FrameworkElement>{ private ScrollViewer _scroller; public double StretchyFactor { get { return (double)GetValue(ScaleFactorProperty); } set { SetValue(ScaleFactorProperty, value); } } public static readonly DependencyProperty ScaleFactorProperty = DependencyProperty.Register( nameof(StretchyFactor), typeof(double), typeof(StretchyHeaderBehavior), new PropertyMetadata(0.5)); protected override void OnAttached() { base.OnAttached(); AssociatedObj... [More]
Revisiting the ParallaxBehavior to work in both directions 30. August 2016 Shawn UWP, Composition (0) In my last post I explained how to create a behavior that would provide a parallax effect on any control. I was playing with the behavior the other day and I wanted to reverse the scrolling of a header image from going down to going up. I switched the ParallaxMultiplier property from a negative number to a positive number and noticed that the image started to scroll off the screen. This is not at all what I wanted. I want to see the image in the space provided, but scroll, or parallax, the image as I scroll the content. I want the image to scroll upwards so I can still see the top/center of the image as I scroll the page down. To fix this I need to adjust the expression. Currently the expression is "ScrollManipulation.Translation.Y * ParallaxMultiplier". We need to move the image down as the scroller moves. To do this we can subtract the Y Translation of the scroller. But we only want to do this for a multiplier greater than zero. ExpressionAnimation expression = compositor.CreateExp... [More]
Easily Create Parallax effects in Windows 10 apps 10. December 2015 Shawn UWP (0) In October James Clarke tweeted some source code to add a parallax effect to UWP apps using the new Windows Composition framework. At the time the new SDK was not available so you could not get it working. Now that the new SDK is released we can start building apps using Windows Composition. The sample that James posted is nice and short, but it’s still code that you would need to repeat over and over. As I’ve mentioned before, I’m not a fan of repeating code. I am however a fan of custom controls and behaviors. This effect can easily be made into a behavior. In James’ sample he is parallaxing an image, but there is no reason it has to be an image. It could be any visual element. This allows you to use graphics or whatever you want as a background. public class ParallaxBehavior : Behavior<FrameworkElement>{ /// <summary> /// Gets or sets the element that will parallax while scrolling. /// </summary> public UIElement ParallaxContent { get { r... [More]
Disable screen capture for your Universal Windows apps 3. August 2015 Shawn Windows Apps (0) If you are concerned about security within your apps, you will want to disable the ability to taker screenshots of your app. This was a feature introduced in Windows Phone 8 as well as Windows Store 8.1 apps. With universal apps, you can now disable screenshots with the same one line of code Windows.UI.ViewManagement.ApplicationView.GetForCurrentView().IsScreenCaptureEnabled = false; This allows the application itself to not allow screenshots. So if you are running on desktop and you take a screen shot, the application will show black. Here is what it looks like on desktop with screen capture enabled Here is what it looks like on desktop with screen capture disabled I’m not able to get the phone emulator to take a physical screenshot (just the emulator screenshot) so I cannot show this. And until a new phone build comes out I cannot show it.
Setting the device wallpaper in Windows Universal Apps 29. July 2015 Shawn Universal Apps (0) Windows 10 launched today and with it comes a new SDK for building “Universal Apps”. This new SDK comes with a lot of new functionality. One of those pieces is a new way to set the wallpaper of a device. This new API is available on the new UserProfilePersonalizationSettings class. This class is used for setting the lockscreen, and the device wallpaper. The new UserProfilePersonalizationSettings class has a TrySetWallpaperImageAsync method that accepts any local StorageFile (I have not been able to set the wallpaper using the FileOpenPicker). This means you can save an image to the local or roaming folders, or use an existing image packaged with your app. var file = await StorageFile.GetFileFromApplicationUriAsync(new Uri("ms-appx:///Assets/AwesomeWallpaper.jpg"));await Windows.System.UserProfile.UserProfilePersonalizationSettings.Current.TrySetWallpaperImageAsync(file); This example uses a file packaged with the app in the Assets folder. You should check if the device has the abi... [More]
Setting the lockscreen in Windows Universal Apps 29. July 2015 Shawn Universal Apps (0) Set lockscreen within Windows 10 universal apps [More]
In depth look at the Windows RelativePanel 9. April 2015 Shawn Windows Apps (0) Windows 10 released a lot of new functionality and controls. One of the new controls is the RelativePanel. This panel takes the great Grid panel and cranks it up to 11. The Grid panel gives a lot of control with how you layout controls. You specify rows and columns of various heights and widths and then place controls within the grid and define the row and/or column through attached properties. Instead of rows/columns, the RelativePanel places controls relative to itself or other controls within it. Just like the Grid, the RelativePanel uses 16 different attached properties to define where elements should be placed. In fact, the RelativePanel has no additional properties or methods from a regular Panel. It only contains attached properties. Aligning relative to the RelativePanel The relative panel does not respect controls with traditional alignment via HorizontalAlignment and VerticalAlignment. Instead there are six new properties to define how an element should align relative to th... [More]