Visually Located


Give your lists the space they deserve

This blog serves as a public service announcement to give your ListBox, ListView, ItemsControl, whatever you choose the space that they deserve. I have seen a lot of apps (and often forget to do this myself!) that do not extend their lists all the way to the right of the page and keep the page too close to the bottom. It is easy to fall into this trap because of the defaults within Visual Studio. Take a look at the following examples: Notice that huge gap to the side? Now take a look at the settings apps Look mom! No gap! So what causes this gap? It’s the default template for pages in Visual Studio. When you create a new page for Windows Phone Silverlight apps you get the following <!--ContentPanel - place additional content here--> <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> </Grid> Notice the side margin of 12? This is a design guideline to leave the gap, but lists give you this b... [More]

Transitioning your app from the Panorama control to the Hub control

At //build today Microsoft announced the new Universal Apps that will allow you to build desktop, tablet and phone apps using the same code. These are different than PCLs as they allow for platform functionality (I won’t get into differences between PCLs and Shared Projects here). These new apps will be based on the XAML platform that Windows tablet apps are built on. So this means that you can build Windows Phone apps with new XAML elements that are available in Windows [tablet] Apps like the GridView, ListView, Hub and more. This also means that Silverlight Windows Phone controls will not be available. One of these missing controls is the Panorama control. We’ll look at how we can take an existing Panorama app, and convert it to a Hub app. Migrating to the Hub control from the Panorama control is very easy. To start, I’ll create a new Windows Phone [Silverlight] Panorama app. I’ll call in PanoramaConversion. Next I’ll add a new project to the solution. For this project I’ll c... [More]

Using the new SettingsFlyout API in a Windows 8.1 AND Windows 8 Store app

Earlier today Ginny Caughey asked a question about how to maintain an app with support for Windows 8 and 8.1. It’s hard to answer a question that broad so I asked her what she wanted to take advantage of with 8.1. Her main use case is handling of screen [and app] sizes but while she was working, wanted to replace the Callisto SettingsFlyout control with the new native SettingsFlyout control in 8.1. I suggested a few ideas throughout the day from #if separation to MEF. I started tonight working on a sample on how you could inject a SettingsFlyout using MEF but decided that it was just too complex for this example. I took a step back and thought about how to make this as easy as possible. I recently blogged about how to use the new Geolocator API within a Windows Phone 8 and Phone 7 application and thought that wrapping the Callisto API would be best suited for this situation as well. The idea behind this blog is that you have one application that supports both Windows 8 and 8.1. Yo... [More]

We couldn’t get your developer license for Windows 8.1 Preview… SOLVED!

I’ve been trying to get going with developing Windows 8.1 Store apps on my new Surface Pro but was continually running into the following error. It turns out this error is due to how I configure my PCs. Every time I build a new computer or install a version of Windows I create an “admin” account. This account is only used for admin related stuff. My normal account is not an admin account. I have been doing this configuration since XP due to the lack of security that XP originally offered. I tried running Visual Studio 2013 as admin, I tried running powershell and the command “Show-WindowsDeveloperLicenseRegistration” but all failed. It wasn’t until a helpful Hermit Dave tried to diagnose this issue with me over twitter that I was able to solve it. The solution is to log in as your admin account and either run the powershell command or VS2013 to get the developer account prompt, enter you Microsoft account information and then log back into your regular account. Again, big thank... [More]

Creating a custom async dialog for your Win8 apps Part 2: CustomDialog

In Part 1 of this series I discussed how to create a custom async LoginDialog to use within your Windows Store apps. In this blog, I’ll explain how to turn that dialog into an async dialog that allows for custom content and works more like the MessageDialog. Most of the hard work was already completed in the LoginDialog. It has a constructor that takes content, a ShowAsync method that has the ability to show a dialog asynchronously, responds to a CancellationToken, it is shown as a Popup and responds to the size of the window changing and many more. To create the CustomDialog, I’ll start with the LoginDialog. For the CustomDialog, I wanted to make it almost identical to the MessageDialog class except replacing the content parameter of the constructor from string, to object. For the new constructors, we’ll be using a ContentPresenter to place the custom content. The ContentPresenter will be created in code when the dialog is shown. public CustomDialog(object content) ... [More]

Creating a Custom Async Dialog for your Win8 Apps Part 1 - LoginDialog

For a recent Windows Store App, I needed to create a way for people to log into it. I could have easily created a simple control or page that allowed the user to enter their login information, but I wanted to work with the new async/await architecture. I thought that creating a login dialog that fit this pattern would be a fun adventure. I wanted to follow the same pattern found in the MessageDialog class so it would be easy to use and understand how it works. This is part one of a two part blog. Part one will cover creating a LoginDialog class that only handles the ability to login. Part two will cover changing that class to be a more generic CustomDialog class that allows for custom content. By the end of the blog we’ll create a LoginDialog that will display a login to the user that looks a lot like the login you get from the People app. This first stab at the dialog will focus on the ability to login, so we need a class that will hold the information the user enters. pu... [More]

Easily create light themed styles for your Win8 Settings Flyout

One of the things I love about Windows Store apps is their ability to integrate with the system. One of these integration points is the Settings Charm. I’m not going to show you how to create a settings flyout. There are already lots of examples out there that do this. There are even some helpers like the SettingsFlyout available in Callisto and the helper created by Jerry Nixon. Recently Tim Heuer made a change to the SettingsFlyout to set the background to white. This change allows your app to follow the guidelines. He also added a property that allows you to change what you want the background to be if you are not a fan of white. This change to the background works great if your app has a light requested theme. If you are using the default dark theme then the new background on the flyout becomes a nightmare. It’s a nightmare because now you have to style all of the controls you use for your settings to work properly with a light theme. You could easily start changing the brushes of... [More]

Fixing the VisualState of your Win8 AppBar ToggleButton

This post would also be called Fixing the AppBarButtonStyle for ToggleButton support in you Win8 app: Part 2 In my last post I explained how to fix the AppBarButtonStyle to support ToggleButtons. This minor fix does give you the correct style, however there are more problems. I’m not sure if it is a problem with the style, or with the ToggleButton, but after checking and unchecking the button, the state becomes completely messed up. When the ToggleButton does not have an AppBarButtonStyle set, it works great. We only get this problem when we apply one of those styles. With that said, it would seem there is a problem with the style, but the style looks just fine. I’ve seen some solutions that change the Unchecked and/or Normal VisualState back to the original style. I have not seen this working and this should happen by default. It appeared to me that the VisualState was actually getting messed up. I tried subscribing to the Click event and changing the VisualState manually. ... [More]

Fixing the AppBarButtonStyle for ToggleButton support in your Win8 apps

With the RTM release of Visual Studio 2012 the Visual Studio team made some improvements to the various AppBar button styles. One of these awesome improvements was to add support for ToggleButtons. Now you can use any of these out-of-the-box styles with Buttons AND ToggleButtons. This is pretty awesome… Except for the fact that the style is missing a required TextBlock. This TextBlock toggles the color of the button. Without it you do not get a visual indication that the ToggleButton is checked. Even worse, is that the application crashes when the ToggleButton is checked. To fix this, open the StandardStyles.xaml file and go to the AppBarButtonStyle. Insert the following line directly under the “BackgroundGlyph” TextBlock <TextBlock x:Name="BackgroundCheckedGlyph" Visibility="Collapsed" Text="&#xE0A8;" FontFamily="Segoe UI Symbol" FontSize="53.333" Margin="-4,-19,0,0" Foreground="{StaticResource AppBarItemForegroundThemeBrush}"/> After inserting that line, th... [More]

Adding multiple lines of text to your Win8 tile update

Live tiles is one of the best things about Windows Phone and WinRT. I love how easy it is to add updates to your tiles in Windows Phone but hate how limited the updates are allowed to be. With WinRT comes a new API and more robust tile updates. There are many different types of tile updates and your app should support AT LEAST one square and one wide tile. If you’re like me (and I know I am), I started with the C# WinRT sample for App tiles and badges. I began looking at the code and could easily see that you use the TileUpdateManager to update your tile. The TileUpdateManager needs a TileNotification in order to update your tile. Here is where I quickly became lost in this rather complex sample. The TileNotification needs to be created with XML (an XmlDocumentto be exact) but I had not idea what XML elements are needed (Seriously, is all of the abstraction really needed here? This is suppose to be a simple sample to let devs see how to quickly and easily create a tile update). All I w... [More]