Error XF001: Xamarin.Forms targets have been imported multiple times

If you’re in the process of updating a Xamarin.Forms app to a more modern style project set up (NET Standard 2.0, PackageReference, etc), you may get the following error.

 

Error XF001: Xamarin.Forms targets have been imported multiple times. Please check your project file and remove the duplicate import(s).

 

This can be because of the move to using PackageReference for your NuGet packages and a simple fix awaits you.

  1. Close Visual Studio and navigate to the Solution in File Explorer
  2. Delete the hidden .vs folder
  3. Go into each affected project sub folder and delete the following files; project_name.nuget.props and project_name.nuget.targets
  4. Open the solution in Visual Studio, do a Clean and Rebuild, 

 

You should no longer see the error and be able to deploy.

 

 

 

 

Invalid XAML error updating from WP7

We are now seeing the beginning of the fast decline of Windows Phone 7 as it exits the market over the next several months, many of you will need to act to update your app to at least Windows Phone 8.  I did this for all of my WP7 apps and there was one error that was In just about every upgrade:

An error on this XAML namespace declaration:

xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"

Previous to Windows Phone 8, the Pivot and Panorama controls were part of a toolkit. The Windows Phone team did a solid by included these in the OS, they also added new controls like the LongListSelector to replace the toolkit’s ListPicker . These controls are now found in the Phone namespace.

It’s a very frustrating problem if you’re seeing it for the first time. Don’t worry, there is a really easy fix… Delete the xmlns:controls line and use only the xmlns:phone one or edit it and remove the “.Contols” part of the assembly pointer. Here is what it will look like after doing the edit option:

xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"

However, in many newer app templates, this is already used for the xmlns:phone declaration that looks like this:


xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"

If you do have the xmlns:phone declaraiton, simply delete the bad line xmlns:controls line and change any UI controls on the page to use the phone one instead. For example

Change:

<controls:Pivot x:Name="MyPivot"> foo </controls:Pivot>

to

<phone:Pivot x:Name="MyPivot"> foo </phone:Pivot>

I hope this blog post was found when you searched for the error and it fixed it for you 🙂 Let me know if this doesn’t fix it for you and I’ll take a look at your XAML.

Happy coding!

App Studio – Design-Time Sample Data

If you’re like me, you like to fiddle and tweak things to get just the right result. Recently, Microsoft has really beefed up App Studio apps and if you explore the downloaded source code you’ll see a new Universal app structure leveraging MVVM. Let’s start with the before and after photo (click any image to view larger):

The image on the left is the UI before changes and the one on the right is afterwards
Before and after changes to the items lists

Here is a screenshot of the App Studio solution structure in the Visual Studio Solution Explorer (since AppStudio.Data is a Portable Class Library, you’ll need Visual Studio 2013 Pro [Update 2] or higher. See Tim’s answer for a workaround):

Blog1

So, you’ve got yourself an App Studio app and want to make custom changes, this can be challenging because you won’t see anything in the designer because the data is not generated until runtime.  You’ll have to make educated guesses by using margins of the UI elements.  We can make this much easier this by creating design-time sample data.

This blog post is a tutorial on how to do just that. Keep in mind that even though I have the YouTube schema through out the app, it should work the same regardless of your app’s structure. Let’s get started…

Step One – Download and open the source code in Visual Studio 2013

You can find the source code’s download link on the same page you downloaded the publish package. By default, it is collapsed, just expand the “Source Code” section and click the “Download 8.1 Source Code” link. It is a zipped folder, unblock and then extract it. Once the app is open in Visual Studio 2013, Build (F6) the solution so that the nuget packages are retrieved and added.

Step Two – Generate Sample Data

Now let’s open the project in Blend for Visual Studio (Pro Tip: right-click on AppStudio.WindowsPhone/Views/MainPage.xaml and select “Open in Blend“) so that we can generate sample data for MainViewModel.

  • 0 – Prerequisite: See my blog post here and review Step 3
  • 1 – Open MainPage.xaml located inside AppStudio.WindowsPhone/Views in Blend. Note: Click “Cancel” when Blend asks if you want to set a Resource Dictionary for design-time. (FYI – these steps are the same for AppStudio.Windows project, which you can do after completing this Windows Phone tutorial).
  • 2 – Now create sample data for MainViewModel (Step 3 in my tutorial will show you how to do this) and “Save All” when it’s done.
  • 3 – While the Data tab still open, click the “Set design-time DataContext” link at the bottom, make sure “MainViewModelSampleData.xaml” is highlighted and then click OK. See the screenshot below. ( Alternatively, you can simply add this line to the top of your MainPage.xaml with the xmlns declarations: d:DataContext=”{d:DesignData /SampleData/MainViewModelSampleData.xaml}” )
Click to enlarge
Set Design-Time DataContext

Blog3

Now your MainPage’s design-time DataContext is set to the sample data. Next, we’ll edit the sample data with some image paths so that you can see an images in the designer.

Step Three – Images

One downside to automatically generated sample data is that sometimes you want a path to an image instead of Lorem Ipsum. This is very easy fix that makes life much easier in the designer because Image controls bound to that sample data’s property will show an image, here are the steps:

  • 1 – Add an image to your project (note: I created a “PlaylistIcon160.png” image and added it to the project’s Assets folder).
  • 2 – Open the sample data file, MainViewModelSampleData.xaml (you’ll find it under AppStudio.WindowsPhone/SampleData/, also you’ll want to change your tool window to the XAML-only view because you cannot edit sample data with the designer-only window ).
  • 3 – Find the places in your sample data that are for image paths and replace the lorem text with the image path. For example in my sample data, I have the YouTube schema, which has a property named “ImageUrl” in the Items list, I changed the sample text to the placeholder image’s path. Here is a screenshot of where you’ll find the ImageUrl property and my edit to it:

Blog4

  • 4 – I did this for every ImageUrl property in each of my project’s models in the sample data. This is the most lengthy process of getting the sample data ready, but it’s really worth it to have images visible.
  • 5 – Once all items have been edited, do a Build (F6).

Step Four – Setting d:DataContext

Now we need to set the design data context of your view items to point to the sample data. We already did this at the page level in step two, but we’ll need to set it for each HubItem to display the lists. Here are the steps:

  • 1 – Go back to MainPage.xaml and go to a split view (XAML and designer visible).
  • 2 – Scroll down until you see the <Hub> control. You’ll see a number of “HubSections”. Here is what you should see now:

Blog5

Now, add a d:DataContext=”{Binding ModelNameHere}” to each HubSection. You will find the names in the MainViewModelSampleData tree. In my demo, there are 5 HubSections, each has it’s own model. (App Studio models are outside the scope of this article, but you can read more here on the App Studio website).

This screenshot explains it more clearly:

Blog6

That’s it! You should now be seeing your images and sample data in the designer.

Step 5 – Editing DataTemplates

This is the same process as you do for editing any Template. I wanted to quickly cover it to round out this tutorial. I wanted to get rid of the extra space between items in the list because I don’t have the summary text. Here is what I did:

  • 1 – In the Objects And Timeline pane, expand the Hub control and right click on a HubSection
  • 2 – Select “Edit HubSection“. The Objects and Timeline focus will shift to the DataTemplate of that hub section.

Now let’s edit the ItemTemplate of the ListView that shows the list items:

  1. Right click on ListView
  2. Expand “Edit Additional Templates
  3. Expand “Edit Generated Items (Item Template)
  4. Select “Edit Current

You can now edit the template, I removed the second Grid.Row declaration because it wasn’t being used. I got back 60 pixels on unneeded padding, but remember empty space is just as important as content. So, I added a 12 px margin to the bottom of the Image control. This now allows more items to appear on the smaller phone form factor.

Conclusion

With a little sample data and some independent flavoring, you can customize your App Studio app to give it a truly unique feel. You can see the results of having design-time data right now, here is the app I used in this demo, enjoy!

Here is the Windows Phone version of the customized app

Here is the Windows version of the customized app

Now, go forth and design away!

 

 

 

Creating Design-Time Sample Data

One of the best things you can have when developing a Windows Phone app is design-time sample data. I will show you in this post how to create sample data from a class using Blend. (click images to view larger)

You can apply this technique to an existing class you have, but for the purposes of this tutorial I’ll be using a File > New Visual Studio 2013 Windows Phone project.  If you have an existing app, you can skip to Step 3, but I recommend skimming the first two.

Step One – Create a new Windows Phone Project

  1. Open Visual Studio, go to File and choose New.
  2. Choose the “Windows Phone DataBound App” template
  3. Name it and click OK

ImageOne

The reason I went with the databound template is because it has a ready-to-go ViewModel that I can use to demonstrate the process.

Step Two – Finish up in Visual Studio

Delete the template’s sample data

The template comes with sample data, but I’m going to delete it so we can start from scratch. Here are the steps:

1) Expand the SampleData folder and delete the file named MainViewModelSampleData.xaml

ImageTwo

Add a new property to ItemViewModel

1) Expand the ViewModels folder and open the file ItemViewModel.cs

2) Add the DateTime property named “Date” you see in the image below to ItemViewModel

ImageThree

Change the List’s ItemTemplate to display the new property

1) Open MainPage.xaml

2) Locate the LongListSelector named MainLongListSelector (on line 51)

3) Add the following TextBlock to the LongListSelector’s ItemTemplate  (see image)

<TextBlock Text="{Binding Date}" Style="{StaticResource PhoneTextAccentStyle}"/>

ImageFour

4) Rebuild the project (VS Menu bar > Build > Rebuild project)

Step Three: Generate Sample Data

Right click on MainPage.xaml in the Solution Explorer and select Open in Blend

ImageFive

Blend is an amazing tool, if you’re not using it then you’re missing out on things like animations and fine UI tweaks. It’s much easier to make your app “pixel perfect” using Blend than it is with Visual Studio.

Now that your project is open in Blend, we can create sample data with just a few clicks.

1) Open the Data tab behind the properties pane on the right

ImageSix

2) Click the Create Sample Data dropdown

ImageSeven

3) Select Create Sample Data From Class

ImageEight

4) Select MainViewModel and name it “MainViewModelSampleData” (it should prepopulate the name for you, but if it doesn’t, type it in) then click Ok to generate the sample data.

ImageNine

5) Expand the newly formed sample data in the Data tab, and notice how it created sample data for each of the objects in your MainViewModel.

Another really cool thing about Blend is that you can tweak the type of sample data is being used. Go ahead and drop down the “abc” button next to a string property. You’ll see options to edit Lorem Ipsum, use a Company Name, personal Name, email, Price, and more.

ImageTen

Now let’s see the result!

Now everything is in place, go ahead and rebuild the project. In Blend, it’s “Project > Rebuild Project”.

This is what you should now see:

ImageEleven

Summary

By generating sample data for design time, you will be able to properly design your UI and get that Pixel Perfect feel that a professionally designed app exudes.

Now go forth and multiply your awesomeness!

Lance

ProTip: You can drag and drop the sample data onto a UI element and Blend will automatically create the binding for you.

Monetizing App Studio with Ads

So, you’d like to put some ads in your awesome App Studio app? No problem! I thought I would write a post to show just how easy it can be. Follow these easy steps and you’ll start earning money from ads…

Ad provider

The ad provider is the service the AdControl in your app gets the ad to display and also where you earn the revenue. As of Windows Phone 8 there is a PubCenter AdControl built into the framework, all you need to do is get an ApplicationId and an AdUnitId. You get that information from Windows Phone DevCenter, find out how to get your ApplicationId and AdUnitId in this great blog post.

If you want to use a separate Ad provider, for example AdDuplex, you’ll need to add the provider’s DLLs to your project. I’m using AdDuplex in the example below, learn how to add AdDuplex to your project here.

Step One: Enable ads in App Studio

Before generating your App Studio app, you’ll want to enable ad support. On the Publish Info tab, turn on the Enable ad client in the source code switch (see #2 in this screenshot):

App Studio Screenshot

Next, generate the app and download the source code.

Step Two: Open App in Visual Studio

After downloading the source code, you might need to unblock the binaries before unzipping the folder. This is a built-in security feature that prevents internet-downloaded code from running on your machine. Since we know where these files came from, it’s ok to go and unblock them. Here is how to do that:

  1. Right click on the downloaded zip folder
  2. Select “Properties
  3. If you see an “Unblock” button, click it. If you do not, continue to step 4.
  4. Now you can safely unzip the folder

Next, drill down into the unzipped folder until you see the Visual Studio solution file. Double click to open it in Visual Studio (Note: You need Visual Studio installed. If you do not, you’ll need to download and install the Windows Phone SDK from here).

Step Three: AdControl on MainPage.xaml

Drill Down to MainPage.xaml, see this screenshot to help you find it:

Visual Studio Solution Explorer

Near the top of the page, you will see a commented out section of code (approximately line #50). This is the built-in AdControl. All you need to do is:

  1. Uncomment the AdControl (delete the <!– and –> characters before and after the AdControl)
  2. Replace the placeholder ApplicationId and AdUnitId with yours

In this screenshot, I demonstrate how to use an AdDuplex ad control instead of the built-in AdControl.

MainPage

That’s all there is to it! Now you can do a Build and publish the generated XAP file. (If you are not familiar with how to publish an app built with Visual Studio, see this documentation)

This image shows what the published app looks like running on a phone, see for yourself and download the app.

NetduinoNinjaScreenshot

Happy coding!

Lance

Here are some follow-up resources to help you monetize your apps:

Registering Extensions

With the entrance of Visual Studio 2012 we saw a new interface to edit your WMAppManifest file. This is a great tool to help you properly setup your app’s meta data. There is one limitation you should be aware of… there is no support for extensions. What are extensions? They are the added functionality that lets you tie your app into other parts of the OS and user experience. This blog post will cover the extensions for photos, but the process is the same for other extensions.

Here is a list of the photo related extensions:

Extension point Extension name URI keywords Learn more…
Photos Hub Photos_Extra_Hub 7.1, 8.0 Extending the Photos Hub for Windows Phone
Share picker Photos_Extra_Share ShareContent, FileId 7.1, 8.0 Extending the share picker for Windows Phone
Rich media app Photos_Rich_Media_Edit RichMediaEdit, token 8.0 Rich media extensibility for Windows Phone 8
Photo edit picker Photos_Extra_Image_Editor EditPhotoContent, FileId 8.0 Extending the photo edit picker for Windows Phone 8
Photo apps picker Photos_Extra_Viewer token 7.1 Extending the photo apps picker for Windows Phone 7

Each extension has it’s own target, make sure you are using the right one for your app. In my case, I am targeting Windows Phone 8 only. So I’ll be using all of the above except for the “Photos_Extra_Viewer” extension (it only targets WP7).

Now comes the confusing part. when you open your WMAppManifest file in Visual Studio 2012, you’ll be greeted with the new editor (image below, click for full size).

editor1new

If you were to look for a way to give your app extensibility, you won’t find any options in the new editor to do that. So what do you do? Edit the XML manually.

Here’s how:

  1. Go to your Solution Explorer
  2. Expand the “Properties” folder
  3. Right click on WMAppManifest.xml file
  4. Select XML (Text) editor

editor2

Visual Studio will open the file in the text editor and you will be able to make direct changes to your file. You’ll even have IntelliSense support to help guide you. With the file open, create a new Extensions parent ( like this: <Extensions></Extensions> ) inside the <App></App> parent and add the extensions you want your app to use.

Here are mine (click image for full size):

editor3

That’s it! Your app will now register the extensions with the OS. I recommend reading this section of the documentation on Photo Extensibility for Windows Phone. It will give you a better understanding of how this works, pitfalls to avoid and possible incompatibilities.  Armed with this information, you will be well on your way to providing the user with a more integrated experience.

Good luck and Happy Coding!

From The Ground Up

This post is to get you started on Windows Phone Development “from the ground up” and is targeted towards people who have no prior experience with the Windows Phone SDK.  At any time you can refer to my resources page for additional links to WPDev assets, tutorials and example code.

Ok, let’s begin.

The first thing you should know is that is does not cost a penny to develop for Windows Phone! The SDK and the tools are free. The only time you will need to pay is when you sign up for your Microsoft DevCenter account. The DevCenter is your portal to the Windows Phone Store. It is where you will submit, update and track your apps. I can help mitigate those costs for you. If you are an Android or iOS Developer and are porting an app, or a true “from the ground up” developer,  I will pay for your first year’s DevCenter fee. Contact me for details.

Now, we need to go over some minimum requirements that you’ll need to meet in order to use the different versions of the SDK.

Step 1: Minimum Environment Requirements

Windows Phone 8 SDK: If you are looking to write Windows Phone 8 (WP8) apps, here are the minimum requirements. If you do not have access to a Windows 8 (Win8) machine or cannot upgrade your machine to Win8, you can install and run Win8 in a VM. If you install the WP8 SDK, you also can develop for Windows Phone 7.x (WP7).

Supported operating systems: Windows 8, Windows 8 Pro

Operating system type:

  • Windows 8 64-bit (x64) client versions

Hardware:

  • 6.5 GB of free hard disk space
  • 4 GB RAM
  • 64-bit (x64) CPU

Windows Phone 8 Emulator:

  • Windows 8 Pro edition or greater
  • Requires a processor that supports Second Level Address Translation (SLAT)

If your computer meets the hardware and operating system requirements, but does not meet the requirements for the Windows Phone 8 Emulator, the Windows Phone SDK 8.0 will install and run. However, the Windows Phone 8 Emulator will not function but you can still deploy to a physical phone!

Windows Phone 7 SDK: Whenever I reference Windows Phone 7 in my posts, I am speaking about Windows Phone 7.1 (AKA Mango/Tango).

Supported operating systems: Windows 7, Windows Vista

  • Windows® Vista® (x86 and x64) with Service Pack 2 – all editions except Starter Edition
  • Windows 7 (x86 and x64) – all editions except Starter Edition
  • Installation requires 4 GB of free disk space on the system drive.
  • 3 GB RAM
  • Windows Phone Emulator requires a DirectX 10 or above capable graphics card with a WDDM 1.1 driver

The Windows Phone SDK 7.1 is compatible with the final version of Visual Studio 2010 SP1.

Step 2: Download and install the SDK

In the links below it is very important to read the “Overview” section before installing the SDKs. There are nuances that may apply to you and are good to know in general. The download you’ll get is a small file that when run will start the installation. You will need a data connection to install, however if you don’t have a connection, you can alternatively download an ISO version.

Windows Phone 8 SDK (download it from here):

  • Choose the language version you want to install and click the Download button for the WPexpress_full.exe file. Follow the instructions to install the SDK. Note that each localized version of Windows Phone SDK 8.0 is designed to function with the corresponding localized operating system and localized version of Visual Studio 2012.  Note – Windows Phone SDK 8.0 installs side-by-side with previous versions of the Windows Phone SDK. You don’t need to uninstall previous versions before beginning this installation.
  • Download the release notes which are in a separate file. For Windows Phone SDK 8.0 documentation and samples, see theWindows Phone Dev Center.
  • To start VS Express for Windows Phone, click the application in the Apps list. If you have Visual Studio Professional, Premium or Ultimate installed on the computer, the VS Express for Windows Phone shortcut won’t appear. Instead, start your Visual Studio instance as usual and then create Windows Phone SDK 8.0 projects using the installed Windows Phone templates.
  • If you try to run a project in Windows Phone Emulator and Hyper-V is not enabled, you will be prompted to turn on Hyper-V. Turning on Hyper-V requires you to restart your computer.

Note: this release is also available in .iso format. Choose one of the following options for handling downloaded ISO images:

  • (Recommended) Write the image file to a blank DVD.
  • (Alternative) Mount the image file virtually as DVD devices.

For more information about these options, see “What are ISO image files and how do I use them?” on the FAQ page.

Windows Phone 7 SDK (Get the 7.1 SDK here and the 7.1.1 SDK here)

There are two SDKs for WP7 development, the first one (7.1) is the full SDK and the second (7.1.1) is an update that adds support to develop for low memory devices. Install 7.1 first, then download and install 7.1.1 immediately afterwards. The 7.1.1 update adds an additional emulator with a lower memory cap (256MB). Windows Phone has low end devices in a lot of “emerging markets”. This is a huge opportunity for you to reach millions of devices.

Instructions for the 7.1 SDK (Do this one first):

If a pre-release version of the Windows Phone SDK 7.1 (Beta or RC) is installed on the machine, please uninstall it before installing this product. 
Click on the vm_web2.exe file in the download section above. This will start the installation of Windows Phone SDK 7.1 and install necessary components on your computer.
Please refer to the Release Notes in the download section above for additional details before running setup.
Note: this release is also available in .iso format.
Choose one of the following options for handling downloaded ISO images:

  • (Recommended) Write the image file to a blank DVD.
  • (Alternative) Mount the image file virtually as DVD devices.

For more information about these options, see “What are ISO image files and how do I use them?” on the FAQ page.

Instructions for the 7.1.1 SDK update (Do this one second):

Windows Phone SDK 7.1 must be installed on your computer before you can install Windows Phone SDK 7.1.1. For more information, see Installing Windows Phone SDK.
To install Windows Phone SDK 7.1.1 Update, click the Download button for WPSDK-7.1.1-KB2669191-x86.exe file, and then follow the instructions to install the SDK.

Note: This update configures a 256-MB emulator and a 512-MB emulator as part of the installation, and so might take longer to install than a typical SDK.

Step 3: Fire it up!

Congratulations! Now that you have the environment and tools installed, you are ready to roll. You may be asking yourself, “What do I do now?”. That’s a good question. To answer it, I will have you  write your very first Windows Phone app. My instructions from now on will be using the Windows Phone 8 SDK, most of the steps are the same. If you are using the WP7 SDK and something doesn’t make sense to you, contact me and I’ll give you a custom lesson.

  • Open Visual Studio Express (If you already have Visual Studio installed on your machine, use it instead of the Express version)
  • Go to File > New > Project
  • In the window that just opened select the following

StepsForNewPanoApp

  1. Make sure you have Windows Phone selected
  2. Select Windows Phone Panorama App
  3. Name your project
  4. Click OK.

Visual Studio will now ask you to choose a Windows Phone version. There is one thing you should know at this point. If you build an app as a WP7 app, it will work on WP7 and WP8 devices. If you build a WP8 app, it will only work on WP8 devices. In most basic scenarios, you should choose WP7 (7.1) and then update your app to WP8 afterwards. You will only be able to target WP8 if you need a feature that only WP8 offers (ex. NFC, Bluetooth, etc).

TargetVersionSS

Once you click OK, Visual Studio will automatically generate all the files you need to run and deploy the app. In fact, this app you just created is ready to build and deploy. Complete with example data and ViewModel!

Step 4: Build and Deploy

Now that you’ve got a project open in Visual Studio and it is ready to be deployed to an emulator or device (you can debug/deploy to a developer unlocked device via USB cable), it’s time to build and debug. Familiarize yourself with the image below (full size image):

VS2012ui

I always say the best lesson is the one you did hands-on, so go ahead and click the little green debug arrow to debug your project. If the emulator isn’t already open, Visual Studio will fire it up for you. If this is your first time running the emulator, Windows 8 will ask for Hyper-V permission, this only happens once. Once that’s done, your app will launch inside the emulator.

It will take some time to become more familiar with the process involved and learn more about the infrastructure of a Windows Phone app, but you are on your way. Congrats, you are now officially a Windows Phone developer.