Scott Hanselman

Using a Surface 2 (RT/ARM) to get actual work done + Remote Desktop + Visual Studio + Azure

October 31, '13 Comments [35] Posted in Azure
Sponsored By
Using Visual Studio in the Cloud running in Azure

I'm using just a Surface 2 today for work. Remember that the Surface 2 runs Office plus any apps in the Microsoft Store. It doesn't support installing desktop apps like Visual Studio or QuickBooks. It comes with Outlook, PowerPoint, Word, Excel, etc.

I didn't plan on this experiment this morning. In fact, I was supposed to go on a field trip with my son but the bus was full. Because I was going to be out all day I didn't bring my laptop. I had only my Surface 2 in the car, so when I wasn't able to go on the field trip, it was either go home and get a "real" computer or see what I could get done on the Surface.

NOTE: If I had my iPad and a Bluetooth keyboard and a stand, plus a remote desktop client for iOS I could do something similar.

I use it for Hulu, Netflix, Halo, email, Twitter, Facebook, Trello, Calendaring, etc and for that it's great. Split screen is cool, as I did email while watching a show on the plane yesterday. (What I really want is a full Surface 2 Pro but with the same exact size and weight of the Surface 2 proper.)

Surface remoted into Azure running Visual Studio

Anyway, I went to a bagel shop and figured I'd be limited to email today. I had my heart set on working on an project today (hacking on Project Kudu in Azure) and that was nagging at me. I also forgot my power adapter so I had only the battery life that I started with in order to get a day's work done.

I remembered that the Azure team recently added Visual Studio 2013 Virtual Machines to Azure accounts that are hooked up to MSDN. If you connect your Azure to your MSDN you get as much as US$150 in Azure Credits, and I never use all mine.

REMINDER: There are lots of Linux Virtual Machines (hundreds, in fact, if you include the VMDepot gallery of images) as well as a number of good SSH clients in the Windows Store that work on Surface. I use the "Remote Terminal" app. Here is a screenshot of me running htop on my Ubuntu machine where my mailing system runs in Azure. It's usually full screen, but I have the menus open here.
SSH'ed into my Linux Machine from my Surface RT

Here's some of the VMs to pick from. Soon the MSDN ones will move into an MSDN section on the left.

e Visual Studio in Azure

You can pick a VM from a small shared-core with less than a gig to a crazy 8 core 56 gig machine. I picked a "Medium" because it seemed similar to my laptop. It's got 2 dedicated cores and 3.5 gigs of RAM. There's also a 4 core 7 gig one, but since I'm not going to run Outlook or anything BUT Visual Studio (and some other small tools) I figured it would save money if I went a little small.

I named it "VSinTheSky" and noted that both PowerShell and RDP (Remote Desktop Protocol) ports were open in the firewall. I also put the new VM in a datacenter near me, so in the Western US region.

NOTE: Virtual Machines are billed when they are running, and you only pay for storage when they are shut down. Make sure to shut them down if you're not using them.

My friend Javier uses a Large VM for 10 hours a day and says it costs him about $3.60. I am cheap, so I'm using a Medium, so at 18 cents an hour, that will be $1.80 for the day if I work for 10 hours.

Remoting into Azure from a Surface 2 (RT/ARM)

There's a full-screen Remote Desktop client in the Windows Store that works nicely, but I like the sense of control I get from the "MSTSC.exe" desktop client, plus I can resize it a little more. You can run this on a Surface 2/RT with WindowsKey+R, then "mstsc" and enter. You can also save RDP files, as I have, on the desktop of my Surface 2. You can see in the screenshot at the top that there's a "Connect" button that lets you launch your Remote Desktop session directly from within the browser. It'll download and open the RDP there as well.

Optimizing the Azure VM for Performance

Azure Virtual Machines are allocated, I'm told, 500 IOPs (IO operations) per second, per disk. However, a great (and important) optimization is to add a data disk (or several) which gives you 500 more IOPS since each disk gets its own.

Make sure to get an empty disk for your Azure VM

In the Azure Portal, click Attach Empty Disk.

TIP: To save time, if you have a lot of files, a large data disk, or a large project, make a VHD locally on your machine, mount it as a disk (you DID know that was built into Windows since Windows 7, right?) and get it ready. Then upload it to a Storage Blob in Azure and attach it to your VM.

When asked how big you want the disk, pick a large size. Some size you wouldn't think you'd need. Why? Turns out that Azure VHDs are "sparse." You are only billed for actual usage. If you make a 1TB disk but it only has 5 gigs used up, you're only charged for 5 gigs. I made my data disk 64 gigs since I'm just putting code on it for building in Visual Studio.

Remote into your Azure VM now, log in, and hit WindowsKey+X. Click Disk Management and partition and format your new drive. It may end up being your F drive as C is the system and D is for temp space. That temp disk is where the Windows swapfile goes,etc. That disk may go away so don't put anything on Temporary Storage.

I added a DATA VHD in the Azure VM

I also moved my %TEMP% environment variable to D:\TEMP. I haven't measured if this was useful, but it feels more correct.

I moved TEMP to D:

Here's "My PC" on the remote machine now:

My optimized Azure VM drives

It came with Visual Studio installed, I also pinned IE to the Taskbar, installed Github for Windows, Chrome, and VS Web Essentials, as well as Windows Live Writer that I'm typing in right now.

Speed, both Local and Remote

The Surface 2 is just SO much faster than the original. At least twice as fast, to me. It has a 1920x1080 screen plus I was remoted into a VM running also at 1920x1080 and I often forgot which was the host and which was local. There's really no lag when connecting to this machine in Azure. Perhaps it's because I'm using the Windows 8.x Remote Desktop client to connect to a Windows 2012R2 Server? I don't know. It's fast and clear, and I'm doing this from a café. SpeedTest.net says this café has 16Mbs down measured running on the Surface. I get 7Mbs on my LTE device it was also fast, so this tells me that if the VM is near you (the one I made in Azure is just one state over from where I live) then you should see similar speeds.

I thought perhaps the Azure VM had slow internet. Um. No.

Azure VM reporting 381 Mbps down and 72 Mbps up

Not Just a Dumb Terminal

I didn't use the Surface 2 exclusively as a dumb-ish terminal. Since it has IE11 and Outlook, I also did email while builds happened in the Remote Session. In this screenshot I'm setting up the remote machine, and installing Chrome after installing GitHub for Windows. I've got Outlook running there, The Verge, plus Twitter docked to the right. The remote session is the window in the middle. It was also cool to run Music in the background tethered over bluetooth to my new headphones.

Surface2

imageImportant Productivity Tips for using Remote Desktop on a Surface 2 (RT/ARM)

There's a number of small but extremely useful things to remember when using RDP on a Surface.

  • You aren't limited to the Remote Desktop app that’s in the Microsoft Store.
    • Run mstsc.exe and you’ll get the full desktop version of the Remote Desktop Client.
    • This means you can use .RDP files and keep them on your desktop.
    • You can copy/paste files (like I have with the images in this blog post) between your remote session and your host session. For example, I took screenshots from "outside" and pasted them to the desktop of my remote session.
  • The Surface Type Cover has a row of Function keys that are also Charms keys. Invert their function to speed up your hotkey usage.
    • However, if you want to do something like ALT-F4, you're expected to FN+ALT+F4 which is unacceptable to a keyboard focused developer like myself. You can toggle (invert) FN usage with FN+CAPS on a Type Cover.
  • Know your basic hotkeys. Keep calm and use your keyboard.
    • Win+X is something you'll use a lot in both the Remote and Local sessions. You can run command prompts, check device manager, setup disks in disk management, launch apps, and much more. Use it.
  • Find a balance between your touchscreen and keyboard. If you haven’t brought an actual mouse, accept that you'll never be fast on the Surface Touchpad. It’s just too small and too felt-y. It's there for emergencies.
    • Move quickly between touching the screen and your keyboard. Most times – even over a remote desktop session – using touch to drag a file or click an icon will be faster than the touchpad. Touch isn’t a replacement for input, it's an augmentation for what you’re already using.
    • I have found that touch is the fastest way to get the text insert cursor (I-bar) pretty close to where I want it when editing text. I touch, then move one or two to the left or right. I've found this is WAY faster than using the mouse and WAY faster than cursor-ing around with the keyboard.
  • While I made it through the day without a mouse, I think having an Arc Mouse or some small bluetooth mouse would have made things nicer. That said, it wasn't a huge deal as I'm mostly a keyboard + touch person. YMMV.

All in all, I'm impressed. I'm going to keep this VM around. This isn't a setup I will use every day as I have an X1 Carbon Touch, but it's comforting to know that I can go 7+ hours with a Surface in a café if it comes to that.

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by SherWeb

How to install the nodejs Ghost blogging software on Azure Websites

October 24, '13 Comments [26] Posted in Azure | nodejs | Open Source
Sponsored By
The Ghost Admin running in Azure

UPDATE - These instructions are out of date!

GO HERE for a one-click installation of Ghost to Azure technique.

Like many folks, I watched the recent Kickstarter for the nodejs-based Ghost Blogging Platform with great interest. There are lots of folks, myself included, who believe that WordPress has jumped from blog to complete and complex CMS, and there's value in a simple platform for "just blogging."

SIDE NOTE: Every time a post something I get at least 4 emails from well-meaning readers about how my spelling and grammar sucks. And I appreciate you all. For a few posts, I'm trying an online service called Grammarly that promises to be 10x better than word processors in proofreading. 10x is like 9 x's more than 1 x and it's clearly a much more bigger number. We shall be seeing how it do. ;)
(Of course, Grammarly HATED this paragraph.)

Ghost is very minimal, evocative of Medium in style and essence. Ghost is basic and clean publishing, plus it's open source and being very actively developed on GitHub. As of the time of this writing, it's version 0.3.3, and I will do my best to keep this blog post up to date. Things are moving fast.

It'd be nice to get Ghost running on Azure, and since it's a reasonably complex node application, it's good exercise for everyone. Jeremiah Billmann and a number of others have been working on some of the small compatibility issues (like image uploads and pathing), and soon we'll be able to get Ghost up and running in just a few commands. Jeremiah has a great writeup here. He and I spent part of the afternoon Skyping and pairing and trying alternate ways to get Ghost running. My instructions are different and not meant to take away from his. There's more than one way to deploy a site.

I'll point out workarounds, and again, remove them (strike them out) as Ghost takes PRs. (BTW, the Ghost Team is SO NICE. So nice.)

Installing Ghost on Azure Web Sites

I'm using Windows, but these commands should also work on Macs.

IMPORTANT CHOICE: You can just go download Ghost at https://ghost.org/download/ and everything comes pre-built.
If you download it, you can SKIP getting Grunt, Ruby, Sass, below. Just get node, and move to the Configuring Ghost before you Deploy section further down!
Otherwise, if you "git clone" like I did, you're doing stuff manually, certainly more than is needed, but perhaps learning more about node.
So, want it prebuilt and ready to go? Download Ghost.
Learning, hacking? git clone https://github.com/TryGhost/Ghost.git.

Prerequisites

To start, you'll want these things locally:

  • nodejs - Get 0.10 or above. Install from http://nodejs.org
    • Then get the node Azure command line
      • npm install azure-cli --g
  • Git - Get it from http://git-scm.com/downloads
  • Get Grunt
    • npm install grunt-cli --g
  • ruby - Get 2.0 or above. Install from https://www.ruby-lang.org
  • Bourbon and Sass. Bourbon brings in Sass.
    • gem install bourbon
  • Get an Azure Trial if you don't have one.
    • You get 10 websites free and can run whatever you want, node, php, ASP.NET, etc.

Setup the Azure Command Line

Connect the Azure CLI (command line interface) to your account like this:

  • azure account download
    • launches browser, sign in, get cert
  • azure account  import
  • [optional] azure account set "account name"

Getting Ghost

You can either download Ghost prebuilt or get the source and build it. Here's both ways. The Source is harder, but I learned some things.

Getting Ghost from Download

Download Ghost and unzip it into a folder.

> azure site create [Site Name] --location "West US" --git
# note that this line setups the "git remote add..." and you can confirm with "git remote show"
> azure site config add NODE_ENV=production
# sets an env var for node, up in azure
> npm install
# get all the modules locally, only needed if you are running locally
> copy con server.js
var GhostServer = require('./index');
CTRL-Z, ENTER
# Ghost uses index.js, not server.js. Make a server.js.

Now, skip over this to the Configuring section. The --git switch above set up your remote git repo in Azure.

Getting Ghost from Source

Now, run these commands from the command line. Read carefully, and think. You can change Site Name, Location. You can confirm the git remote. Things with # are my comments, don't type them. Note the copy con. Don't like it? Use a text editor.

> git clone https://github.com/TryGhost/Ghost.git
> azure site create [Site Name] --location "West US" --git
# note that this line setups the "git remote add..." and you can confirm with "git remote show"
> azure site config add NODE_ENV=production
# sets an env var for node, up in azure
> npm install
# get all the modules locally
> grunt init
> grunt prod
#preps your CSS and JS
> copy con server.js
var GhostServer = require('./index');
CTRL-Z, ENTER
# Ghost uses index.js, not server.js. Make a server.js.

At this point, you have a site running in Azure with nothing in it.

You currently have a local Git repo with a Git Remote pointing to Azure.

Configuring Ghost before you Deploy

Your cloned Ghost includes a config.example.js. I renamed it to config.js and made a few changes.

production: {
url: 'http://YOURSITE.azurewebsites.net/',
mail: {
transport: 'SMTP',
options: {
auth: {
user: 'poop',
pass: 'alsopoop'
}
}
},
database: {
client: 'sqlite3',
connection: {
filename: path.join(__dirname, '/content/data/ghost.db')
},
debug: false
},
server: {
host: '127.0.0.1',
port: process.env.PORT
}
}

Go to the production section, check your URL, your user/pass for mail (mine is invalid, I'll do it later), and check the port: section. Make it "process.env.PORT" which is what Azure uses to get the Port number.

Now open your .gitignore, comment out these lines. enabling you to check in these files and directories.

# /core/client/assets/css
# /core/built
# /core/client/assets/fonts
# config.js

When you ran grunt prod earlier, it built files into /core/built, that's why we need that checked in.

NOTE: Of course, we are using Git for deployment. If you don't want to use Git, you can just FTP the files into Azure.

Deploy

Now, add, commit, push.

> git add .
> git commit -m "hope this works"
> git push azure master

Azure (specifically the Kudu subsystem) will run npm install, so this deployment may take a while. You can watch it live in the Azure Portal if you like.

There's my deployment in the Azure Portal

You can also look at deployments from the command line:

C:\Ghost>azure site deployment list hanselmanghost
info: Executing command site deployment list
+ Getting deployments
data: Time Commit id Status Author Message
data: ------------------- ---------- ------ --------------- ----------------
data: 2013-10-23 15:59:38 783746f6a1 Active Scott Hanselman adding server.js
info: site deployment list command OK

OK. It's deployed...except, today...there's a bug.

The Big Hack as of October 23rd...THIS HAS BEEN CLOSED AND MERGED!

Here's the hack/workaround. There's a node module called Express-HBS that is a handlebars template engine that supports partials. It has a caching bug, but there's been a Pull Request opened for express-hbs with the fix. As soon as that fix gets merged in, this whole workaround just goes away.

But, for now, you need to patch the express-hbs/lib/hbs.js with this version (link to RAW file)

How do you patch this in Azure? You can either FTP it, or use this super-secret Azure Kudu DebugConsole that is public but no one has noticed it yet.

Visit https://YOURSITEHERE.scm.azurewebsites.net/DebugConsole/ in your browser. The name and password are the same as your Git Deployment name and password.

Kudu DebugConsole

Navigate to site/wwwroot/node_modules/express-hbs/lib by clicking folders. Click the Edit button, which brings you to a live multiline textbox. Copy paste the patched hbs.js into the textbox, and click Save.

Once you've patched hbs.js, you're all good. Go hit http://YOURSITE.azurewebsites.net/ghost and sign in.

My ghost blog works

Where are the images for my posts stored? They are right there on the file system where Ghost put them. Here's me remoted into the Azure WebSite with the Kudu Debug Console. There's the images.

Images in Ghost in the Azure Kudu Debug Console

You might not want to scale this website out to more than once instance, as you'll have file contention, but you could certainly scale it up. Since it does so little, I don't see Ghost having much trouble scaling to the average blog's traffic.

Myself, Jeremiah, and lots of other folks are going to work on getting Ghost up and running even easier. Once that hack is gone, there's about 2 or 3 steps could be removed and this will be really quite streamlined. I've got some ideas about using Custom Azure Websites Deployment Scripts to move the Grunt build steps into Azure. They would happen after the push. We'll see!

Have fun, I am! Also, check out http://friday.azure.com, my new show where I learn Azure from the folks that built it...coming soon!

UPDATE: Felix Rieseberg built an Azure Ghost Updater! Try using it to update your Ghost installations on Azure!

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by SherWeb

Make a Windows 8.1 Pinned Live Tile for YOUR website in minutes

October 21, '13 Comments [34] Posted in Win8
Sponsored By

imageI actually set this up on my site a few months back when Windows 8.1 preview showed up, but I didn't mention it. If you've got Windows 8.1, you've likely figured out that the most fun apps are ones that have active live tiles.

I'm a web guy and I like web sites, though. Certainly there's no reason or need for a "Hanselman" app anymore than there's a need for an app for, say, The Verge.com. We have perfectly lovely sites today and work just fine. We also have RSS feeds that contain our content and let folks know when a site has been updated.

You can add some HTML META markup to your site now and have a multi-size automatically updating Live Tile for Windows 8.1 in minutes. It's very cool.

Pin a Site to your Windows 8.1 Start Screen

  • Open Full Screen IE (that's the big blue IE from the Start Screen, not the one on your Desktop).
  • Visit the site you want to pin, like http://hanselman.com/blog.
  • Click the Star to Favorite the site, then the Pin to Pin it as a Live Tile
    • Before you finally pin the site, you can click the arrows left or right to pick the size of the Tile.
    • You can change the size whenever from your Start Screen by right clicking the Tile and clicking Resize.

Don't worry about my creepy eyes staring at you. My RSS feed will start coming in soon and the Live Tile will flip over.

Get a Large Live Tile for Your Site

The easiest way to make one of these is to visit http://buildmypinnedsite.com as they have a wizard that helps you make four file sizes and setup notifications from your RSS feed, as well as pick the background color for your Tile.

ASIDE: Back when IE9 came out, I added Site Pinning support to my site in a similar way. You can still do that for your Windows Taskbar, in fact, and get a nice right-click context menu with lots of quick access to my site, archives and podcasts. View Source or visit the link there for details.

There's a very detailed API on MSDN if you'd like to understand all the little details of Pinned SItes with IE9, 10 and 11. It's literally minutes of work on the low end, and maybe an hour if you go nuts with JavaScript.

You can put all your META tags in the HEAD and just have a pile of them if you want, which is fine:







More on that crazy notification one in a second.

Or, if you want a tidy META area, just move this stuff into a static XML file:



And that file, is predictably similar. Again, it's not needed, but you can either put the stuff in META tags, or in a file.









#83382b



360
1


Now, let's look at those notifications. The service above is speeding things up by making the little Tile Notifications XML file for me. This is similar to Facebook's open graph stuff or Twitter Cards, where you want an image (if available) plus the title of a post to show up as a "card" or in this case, a Tile.

ASIDE: You can do similar type things in other browsers with nice custom PNGs and Icons, like Opera's Speed Dial, or iPhone Home Screen icons. I've done all those for my site. There's a lot, but it's minutes each and then it's done.

You get some amount of control as to text and images that can appear in your live tile if you make the notification yourself. The BuildMyPinnedSite service, as you can see in the URL above, takes your RSS feed and makes it WAY smaller (mine is too large to poll, for example) and pulls out prominent images. I set my Frequency at a few hours, since I'm a blog, not a news site. No need to poll me every 30 minutes!

Here's a Wide title generated by a recent post:

image

Or a Large tile:

image

The site will generate those, but if you're a really high-traffic site you might just write a little handler to make these Notification Tile Files from your RSS feed.




CollectionViewSource is crazy useful for binding to filtered Observable Collections on Windows Phone 8



CollectionViewSource is crazy useful for binding to filtered Observable Collections on Windows Phone 8


CollectionViewSource is crazy useful for binding to filtered Observable Collections on Windows Phone 8
SCREENCASTS: What's New in Visual Studio 2013 - learn over lunch!
IE10 and IE11 and Windows 8.1 and __doPostBack


I wonder how hard it would be to write a WordPress, Drupal, Ghost, or MiniBlog plugin to make these notification files? Not hard I think.

UPDATE: Looks like Nick Halsey has already crated a Windows Pinned Sites Plugin for WordPress. Nice job, Nick!

UPDATE: Drupal has Pinned Sites also!

I'm looking forward to seeing tiles like this for sites I visit like LifeHacker, The Verge, CNN, etc. I'll be more likely to pin a site to the home screen if it also shows me updated headlines.

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by SherWeb

CollectionViewSource is crazy useful for binding to filtered Observable Collections on Windows Phone 8

October 21, '13 Comments [8] Posted in WinPhone
Sponsored By

I've been working on this Windows Phone 8 app on the side (it's a news app, but mark my words, it's gonna be huge). 

For the initial development I've been binding to a Pivot to a basic ObservableCollection of type "FeedItem," so basically my XAML was like this.

Really, the only thing you care about here is that FIRST line...ItemsSource=""

<phone:Pivot Title="MAGICAL FREAKING NEWS" x:Name="MainPivot" 
ItemsSource="{Binding Path=NewsData.Feeds}" >
<phone:Pivot.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding Path=key}"/>
</DataTemplate>
</phone:Pivot.HeaderTemplate>

<phone:Pivot.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0">
<TextBlock Text="{Binding Path=title}" Style="{StaticResource PhoneTextTitle2Style}" HorizontalAlignment="Center"/>
<TextBlock Text="{Binding Path=updated_at, StringFormat=F}" HorizontalAlignment="Center" TextWrapping="Wrap" />
<Button x:Name="PlayButton" Margin="0,40,0,0" HorizontalAlignment="Center" Style="{StaticResource PlayStyle}" Click="Play_Click">
<Button.RenderTransform>
<!-- Changes to .5 when in Landscape -->
<ScaleTransform x:Name="OrientationScale" ScaleX="1" ScaleY="1" CenterX="60" CenterY="0"/>
</Button.RenderTransform>
</Button>
</StackPanel>

...snip...you get the idea.

As an aside, I really like the idea of Design Time Data, meaning that I can layout my page in Visual Studio and it will actually LOOK like my app using static data that happens at Design Time. For this, I just add this at the PhoneApplicationPage level:

 d:DataContext="{d:DesignData Content/NewsDataSample.xaml}"

And that sample XAML file just looks like a "XAML-shaped" version of my Object Model, which is actually fed by JSON at runtime:

<vm:AppViewModel
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:vm="clr-namespace:toawesometolive_portable.Data;assembly=icantstandit-portable"
    OperationInProgress="True"
    >
    <vm:AppViewModel.NewsData Force="False">
        <vm:NewsData>
            <vm:NewsData.Feeds>
                <vm:Feed id="0" key="NPR" subtitle="National Public Radio"
...snip...

Fast forward some and requirements changed. Now I needed to be able to individually enable and disable new sources, as well as reorder sources on the fly.

image

That means, if a source is not enabled, it shouldn't be in the first page's pivot. The Sources page and the Main Pivot both bind to the same ObservableCollection, except I need a filter of some kind of the Pivot for "where enabled == true."

I tried lots of stuff things like other sub-collections, properties that returned filtered collections, IQueryable this and that, then discovered the (not really well documented) CollectionViewSource.

Turns out, though, that WPF folks have been using this for YEARS. Here's Beth Massi talking about CollectionViewSource in 2008, for crying out loud (as I discover it a half-decade later on the phone.)

You can have more than one CollectionViewSource on your page. You can use them with Master/Detail forms, for Pathing and for Filtering, which is what I'm interested in. It's also nice because any controls that you bind to the same CollectionViewSource will always have the same current item.

I put one in my Phone Page's Resources like this:

<phone:PhoneApplicationPage.Resources>
    <CollectionViewSource x:Key="src" Source="{Binding Path=NewsData.Feeds}"/>
</phone:PhoneApplicationPage.Resources>

Later, my Pivot binds to the CollectionViewSource by name:

ItemsSource="{Binding Source={StaticResource src}}"

I know folks love to do EVERYTHING in their XAML, but that's not how I roll. (Nor do I have any idea what I'm doing.)

In my page's code behind I set a filter:

collectionView.Source = App.ViewModel.NewsData.Feeds;
collectionView.View.Filter = item =>
{
Feed f = item as Feed;
if (f == null) return false;
if (!f.enabled) return false;
return true;
};

That's it. Now I can enable and disable my items in my source view and the Pivot updates nicely only showing those news sources that are enabled.

Ideally I would have been able to express this somehow in XAML with some kind of where clause as an attribute, but once I figured this solution out it worked famously. I suspect there's actually a LOT of depth to CollectionViewSource and I may end up using it in other parts of my app.

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by SherWeb

SCREENCASTS: What's New in Visual Studio 2013 - learn over lunch!

October 21, '13 Comments [65] Posted in ASP.NET | Screencasts | VS2013
Sponsored By

I could write a whole epic post about what's new in VS2013 for Web folks and front-end developers, but this time instead I did some videos. I'm proud of them and I think they really show some of the cool new features in a very clear way.

These are short, clear and to the point. I did them on my own and there's no marketing-speak, just "here's what we built." Here's the full release notes for ASP.NET and Web Tools for you to check out if you really like reading.

Otherwise, take about 30 minutes total, perhaps over lunch, and watch these short videos with live demos of what's new in Visual Studio for Web Developers and Front End Devs.

HTML5 in VS2013

CSS in VS2013

BrowserLink in VS2013

Page Inspector in VS2013

JavaScript in VS2013

Publishing in VS2013

If you've been paying attention over the last year, you may have seen some of these features. I realize that these may not ALL feel like "amazing new surprises." That's the price for being open, eh? If you'd prefer we hide out for a year and make stuff then appear and DROP it on you, let me now. Otherwise, we're sticking with a more Open Web.

Hope you enjoy the tools and the direction.

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by SherWeb

Disclaimer: The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.