Customizing the “selected” HubSection Header 21. September 2015 Shawn Windows Phone (0) I saw a question today about changing the foreground color of the “visible” or “selected” HubSection. Someone had pointed out that I have a behavior for getting the selected index of a Hub and it could be combined with a converter to give the desired output. I thought the solution to this problem was actually quiet simpler. If we can change the visual state of the hub sections when they change, we can give them a “selected” or “unselected” state. For this we can listen to the SectionsIsViewChanged event public class CustomHub : Hub{ HubSection _lastSelectedSection = null; public CustomHub() { SectionsInViewChanged += OnSectionsInViewChanged; } private void OnSectionsInViewChanged(object sender, SectionsInViewChangedEventArgs sectionsInViewChangedEventArgs) { if (_lastSelectedSection == SectionsInView[0]) return; VisualStateManager.GoToState(SectionsInView[0], "Selected", true); if (_lastSelectedSection != null) {... [More]
A simpler FilePicker for Windows Phone and Windows apps 1. July 2015 Shawn Windows Runtime (0) If you’ve built a Windows Phone app that uses the FileOpenPicker you know that it can be a pain while the Windows variation is pretty simple to use. In Windows you use the PickSingleFileAsync method and continue code as you think you would. StorageFile storageFile = await openPicker.PickSingleFileAsync();// Do something with the file However in Windows Phone this becomes a little more complex. It’s especially complex when you look at the sample on MSDN. First you call the PickSingleFileAndContinue method, then in App.xaml.cs wait for the app to be activated, then somehow get back to where you were before. It’s a mess. I wanted to make this easier in a recent app I was working on and I wanted it to work the same for Windows and Windows Phone. To get started you’ll need to know that the CoreApplicationView can give us access to when the app is activated. With this, we can bypass all the weirdness of using the App class. CoreApplication.GetCurrentView().Activated += OnViewActivate... [More]
Animating list items within Windows apps 17. April 2015 Shawn Windows Apps (0) In a previous post I’ve talked about some page transitions and animations within Windows apps. There are many other locations where adding animations is very easy. One of these is animating items within any ItemsControl class. This includes controls like the ListView/GridView controls. The ItemsControl exposes the ItemContainerTransitions property. This property exposes a TransitionCollection, the same collection I talked about in the previous post. One of the key transitions you’ll want to look at is the EntranceThemeTransition. The EntranceThemeTransition defines how items will enter the region when they are rendered. It contains three properties. FromVerticalOffset and FromHorizontalOffset define the where the item should start rendering, with respect to where the final location will be. So if you have a FromVerticalOffset of 100, the item will begin an entrance animation 100 pixels below where it will end. The last property IsStaggeringEnabled, defines if all items should animate ... [More]
Creating a WrapPanel for your Windows Runtime apps 20. February 2015 Shawn Windows Runtime (0) Recently I saw a friend, Glenn Versweyveld, write a blog about showing a “tags” (eg blog tags) within an app. The blog documents how to create a horizontal list of tags that are not formed into columns and rows. The list would let the items flow naturally. He used something I never would have thought of to accomplish this. He used a RichTextBlock. This was a rather cool idea that again, I would have never thought of. When I saw the blog I quickly asked why he did not just use a GridView or a WrapGrid/ItemsWrapGrid. His simple reply was that it did not accomplish what he wanted due to the row/column layout.. If you are on “Big Windows” the GridView lays items out into columns and rows, by filling up columns from left to right. If you are on Windows Phone the Grid View also lays items in rows and columns, but it fills up rows first instead of columns. The right picture shows Big Windows and the left shows phone. Ok, so GridView is out, how about a ListView and change the ItemsPan... [More]
Why does my ListView scroll to the top when navigating backwards? 2. February 2015 Shawn Windows Runtime (0) I’ve seen a few people asking this question. They have a page which contains a ListView and when an item is selected it navigates to another page. When they navigate backwards the ListView is back up to the top again. This behavior is due to the NavigationCacheMode of the page. By default the page will not cache rendered content when navigating “forward”. So when you navigate back to the page it re-renders the content. When displaying content like a ListView this will cause it to show the top content. As with most things, there are a few solutions to this problem. The most common solution is to set the NaivationCacheMode to Enabled or Required. public ListPage(){ this.InitializeComponent(); this.NavigationCacheMode = NavigationCacheMode.Required;} These options do the following: Member Value Description Disabled 0 The page is never cached and a new instance of the page is created on each visit. Required 1 The page is cached and the cached insta... [More]
Displaying HTML content in a TextBlock 16. January 2015 Shawn Behavior, Universal Apps (0) So many apps are using third party services to display data. Some of these services may give detailed information in HTML format. Why would they give information in HTML? Simple it’s universal. Everyone can display HTML. All of the platforms have some form of a webview control to display HTML. I recently came across such a service that actually gave information in both plain text and HTML. The plain text did not offer the detail that the HTML content did. So I set out to create a way to display the HTML inside a TextBlock. You may ask why I did not use a Webview control and I’ll say with a smile “Because I didn’t want to”. I’ll be 100% honest here, I took some pointers from the HtmlAgilityPack. I should note that this is not intended to display an entire website. You can adjust it to work, but just don’t. To tackle this task I created a new Behavior that would adjust the text of a TextBlock when it was loaded. The Runtime Interactivity SDK does not include a base Behavior class like th... [More]
Getting and Setting the SeletedIndex (visible section) of the Hub, now with Binding! 26. August 2014 Shawn Universal Apps (0) In my last post I talked about how you can restore the last visible section of the Hub. In that post I talked about the lack of the SelectedIndex and SelectedItem properties in the Hub control. These properties were in the Panorama control. Not having these properties means setting the visible section from a view model requires access to the Hub. This is not ideal. When functionality is not available, create it! When you want to add functionality to a control there are two basic solutions. Extend the control by creating a new one. Extend the control with attached properties The first solution is generally accomplished by inheriting from the control itself. The second is most often solved with a behavior. Whenever possible I prefer option 1 over option 2. The downside to option 1 is adding more and more functionality trying to come up with a good name for your control. Extending existing controls is really easy. There [usually] is not a need to create a new style for the control. We ... [More]
Disabling tilt on a ListView or GridView 9. July 2014 Shawn Windows Phone (0) I have mentioned before that the tilt animation is enabled by default in Windows Phone 8.1 Runtime apps, but what happens when you want to display a collection of items but do not want to enable tilt? You may not want to enable tilt because there is no extra action that happens when you tap an item. As with most things, there are a few options here. The first is to not use a ListView/GridView at all. Instead just use an ItemsControl to display your items. This is great provided you do not have a lot of items you need to show. ItemsControl is not virtualized like the ListView/GridView so it uses a lot of memory when displaying a lot of items. This is my go to control for displaying a small collection of items that have no action associated with them. If you still want to use the ListView or GridView control then there is a simple way to disable the animation. You will need to modify the style of the ListViewItem or GridViewItem. For this post I will demonstrate using the ListViewItem,... [More]
Tilt animation for Windows Phone Runtime 8. July 2014 Shawn Windows Phone (0) In a previous post I talked about some of the awesome animations and transitions available in Window Phone 8.1 Runtime apps. These animations and transitions were previously only available with a second SDK like the Windows Phone Toolkit or Telerik’s phone controls. One of the most used animations from both toolkit was the tilt animation. This animation shows a user that what they are touching can be tapped and will probably do something when they do tap. I also previously blogged about how you can enable the tilt animation for “unselectable” items. I am happy to say that the tilt animation is now built into all “tappable” controls without having to do anything! So you would think that would be the end of the post right? I just said “it just works”. This is true for things like ListView/GridView/Buton, but what about when you want to display a StackPanel with a few items in it and those items should be tiltable? Some work is needed to get this working and there are a few ways to accom... [More]
Alternatives to OpacityMask 7. July 2014 Shawn Windows Runtime (0) In Windows Phone Silverlight apps you had the ability to take a png image and change the color of the image with an OpacityMask. This is a really handy tool to have when you want to show different state to a user or use one image and have it work with different backgrounds. Where is an example: <StackPanel Orientation="Horizontal"> <Image Source="Assets/appbar.book.png" Width="72" Height="72"></Image> <Rectangle Fill="Red" Width="72" Height="72" > <Rectangle.OpacityMask> <ImageBrush ImageSource="Assets/appbar.book.png" Stretch="Fill"/> </Rectangle.OpacityMask> </Rectangle> <Border Background="{StaticResource PhoneForegroundBrush}" Width="72" Height="72" > <Rectangle Fill="{StaticResource PhoneBackgroundBrush}" > <Rectangle.OpacityMask> <Image... [More]