Visually Located

XAML and GIS

Update: Creating a custom MessageBox for your Windows Phone apps.

I was looking at my site traffic and noticed that one of my most popular posts was about creating a custom MessageBox. This post was written two years ago and continues to get a lot of traffic. Since writing that post, I’ve updated my MessageBox a lot. I’ve changed it to use async/await, modified the style, corrected some bugs, and added functionality. Since I’ve made a lot of changes, and that post continues to get a lot of readers, I thought it would be good to give the latest version. I continue to use a UserControl approach for this because I don’t want any overriding of styles. It has a set look, and should not be allowed to be changed (aside from the use of static resources). The xaml only need a small change to the bottom margin. Instead of 12 all around, it needed 18 on the bottom. I also changed the name of the first Grid from MessagePanel to LayoutRoot, this wasn’t needed, but made some code behind easier to understand what element was being modified. <Grid x:Cla... [More]

Keeping ads in the same location when the phone orientation changes to landscape

There has been a lot of information flying around about ads in apps these days. Microsoft recently updated PubCenter reporting to include fill rates and number of requests for ads. Dvlup recently partnered with AdDuplex to in its reward program. With all of this hype, I thought I would talk about a common problem with placing ads in apps. That issue is keeping ads in the same location when rotating the phone. Most apps are Portrait apps and display ads either at the top or bottom of the app. Displaying ads like this can be done with the following xaml <Grid x:Name="LayoutRoot" Background="Transparent"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <StackPanel Grid.Row="0" Margin="12,17,0,28"> <TextBlock Text="STATIONARY AD" Style="{Stat... [More]

Creating a Behavior to change text to any case

In a previous post we created a behavior that would capitalize any text. This Behavior served a great purpose allowing you to capitalize the text for any TextBlock. What happens when you need to lower case the text? You could create a second Behavior for this, or we could modify the Behavior so that it allows for multiple options. The first option just seems silly when we can reuse code, but how can we specify which text case we want to apply? In the previous post I talked about some reasons why I like behaviors. One reason I did not list is that you can add Dependency Properties to them. Dependency Properties allow us to set properties in xaml or even better bind to other properties. You can add Dependency Properties to value converters, but that requires your value converter to inherit from DependencyObject. A Behavior already is a DependencyObject! We’ll start with the ToUpperBehavior from before. We’ll first change the name to ChangeCaseBehavior and we’ll create an enum that will... [More]

Responding to the Windows Phone Toolkit ListPicker closing

I’ve often wondered why the ListPicker in the Windows Phone Toolkit does not have an Opened or Closed event, especially since the SelectionChanged event fires only when the selection changes (as it should). So how are you suppose to know when the ListPicker opens or closes. After all, the ComboBox control has DropDownOpened and DropDownClosed. But then I thought, “Do you really need those? You can always use the IsDropDownOpened property.” The ListPicker does not have an Opened or Closed event and it does not have an IsDropDownOpened property. What the ListPicker does have, is the ListPickerMode property. // // Summary: // Gets or sets the ListPickerMode (ex: Normal/Expanded/Full). public ListPickerMode ListPickerMode { get; } This property is actually a DependencyProperty that we can bind to! Let’s say you need to change the visibility of another control when the ListPicker opens/closes. Or maybe you need to change some text based on the... [More]

Creating a behavior to capitalize text

Many apps get data that they show from services. These services generally have their data cased a certain way. If you want to navigate to a page to show data, you may want to have the title of the page be information from the service. The title portion of the page tells the user that this is the profile for Shawn Kendrot. The text for “Shawn Kendrot” came from the service and is cased in Title Case. But if you wanted to follow design guidelines (which are not a requirement), you may want the name to be all upper case. To accomplish this you have three options, convert the text when you download it, create a value converter, or create a behavior. The first is really not an option, because that means that you can no longer use that text for anything else. Value converters are nice, easy to use, and sometimes overused. Behaviors are nice because they can easily be used within the designer of Blend. If you are not familiar with Blend, you should find time to use it. It is the tool to ... [More]

Create a consistent background for your Panorama Title

I was helping out a fellow Windows Phone developer with some app testing today and noticed that his app had a Panorama control with a background color that had a break between the last page and the first page. Here’s an example using the “Windows Phone Panorama App” project template.                This looks very weird and is distracting from the real content. This problem is very similar to the Changing the background color of your pivot headers post I did. You cannot just change the background within the TitleTemplate. The above images were created by modifying the TitleTemplate of the Panorama. <controls:Panorama.TitleTemplate> <DataTemplate> <Border Background="Blue"> <TextBlock Text="{Binding}" Width="800" FontSize="80" Margin="0,75,0,0"/> ... [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]

Easily create light themed styles for your Win8 Settings pane

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]

Creating an inline AppBar Button Style for your Win8 apps

As you have probably read, the Metro Windows Store projects in Visual Studio now comes preloaded with a ton of styles for your AppBar. I love this style of button. You get the nice icon and text to indicate what the icon is supposed to mean (sometimes the icon can be confusing). Having both the icon and the text removes the need for users to hover over an icon to see what it’s suppose to be. As awesome as the style is for buttons on the AppBar, they do have some limitations. They are big, and the text is on the bottom. This design makes it hard to put this style of icon in other parts of your app. Take a look at the Games app. Go all the way to the left and you’ll see your avatar along with ways to do more with your Xbox account. You accomplish these actions with buttons that look a lot like the AppBar buttons. Creating a style for these button is really easy. In the past you’ve needed Expression Blend to be really effective at editing or creating styles of controls. Now this can ... [More]