Visually Located


Customizing the “selected” HubSection Header

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]

Persist ListView scroll position without setting NavigationCacheMode

Use the ListViewPersistenceHelper to persist the scroll position of a ListView in Windows apps. [More]

A simpler FilePicker for Windows Phone and Windows apps

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

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 different page views for Windows Apps based on the device

Windows 10 has released the new Universal App Platform that brings new “Windows Apps”. These apps offer the ability to use one Visual Studio project to create apps for any platform/device. This offers the ability to have one XAML file for all of your views. This works much like the web does with responsive design. If you want your page to look different on a smaller device you can change the layout based on the width of the device. You can do this with StateTriggers. <VisualStateManager.VisualStateGroups> <VisualStateGroup> <VisualState x:Name="wideState"> <VisualState.StateTriggers> <AdaptiveTrigger MinWindowWidth="600"/> </VisualState.StateTriggers> <VisualState.Setters> <Setter Target="MyTextBlock.Text" Value="BIGGER!" /> </VisualState.Setters> </VisualState> <VisualState x:Name="narrowState"> <VisualState... [More]

Registering to any DependencyProperty changing in Windows 10 Apps

Many have argued that there are pieces still missing from Windows Runtime XAML that were in WPF. One item that was in WPF was the ability to be notified when a DependencyProperty changed. This functionality is now available in Windows Apps thanks to the new RegisterProperrtyChangedCallback method on DependencyObject. This opens up a world of opportunities for us. This functionality is extremely useful when creating custom controls or wrapping existing controls. Rather than getting into anything complex, I’ll show a quick sample. A TextBlock control has Text, but no way to be notified when the text changes. We do have the ability to bind to the Text, but we’ll ignore that for now. We’ll create two TextBlocks and one Button. <StackPanel> <TextBlock x:Name="CounterText"/> <Button Content="Click me" Click="OnButtonClicked"/> <TextBlock x:Name="DuplicateTextBlock"/></StackPanel> When the button is clicked we’ll set the text for the first TextBlock... [More]

The benefit of an AdDuplex campaign

I recently had the opportunity to give 11 lucky winners $200 in AdDuplex credits. They are allowed to use these credits for anything they want. I wanted to highlight the benefits of using those credits for a campaign. Last year I wanted to boost the downloads of my app 1:Clock. I decided to try a campaign through AdDuplex. I invested in a campaign for about three weeks. During that time I stopped and started the campaign. I targeted different country options and varied the amount of impressions. Overall I was very happy with the number of downloads I got during this period. The timelines are as follows Started the campaign US market focus only Worldwide market focus Lower impression amount Raise impression amount Campaign ended After the campaign ended my downloads were a little higher than before but did not maintain the download count I saw during the campaign. I did get quite a few reviews during this time which really helped out the app going forward! If you have some marketing ... [More]

Creating a WrapPanel for your Windows Runtime apps

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?

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

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]