Some 'Desktop Metro' things
Using Scott Hanselman's great
Guide to Installing and Booting Windows 8 Developer Preview off a VHD (Virtual Hard Disk) , I have a VHD on my i7 machine that lets me run the Developer preview at an amazing speed.
There are some differences obviously... the first being that my desktop machine does not have a touch interface, so I had to fumble through and find out what the navigation strategy was. Some of it was just plain intuitive, some other was clicking aorund, but I found out the following:
- The backstack in Metro that is normally available by swiping from off the left side of the slate onto the display area can be acquired by clicking right at the left border
- The Metro system menu that you would get to by swiping from off the bottom (or top) of the slate into the display area is opened with a right mouse click
- I have not found a combination for the setup screen... a swipe from off the right-hand side of the slate onto the desktop, but to be honest I didn't look for it long
- Hitting the Alt key takes you to the Metro desktop from wherever you are. Since I am running dual monitors, this opened the desktop up on the left and I still had VS2011 on the right
- Some happy surprises:
- If you just start typing at the Metro desktop, you'll get into Search. I guess I knew that... but if you use Alt to get there, then the sequence 'Alt Notepad' will open Notepad as if you were in Windows 7 and alt opened the 'Search' box and typed 'Notepad' ... or anythning else for that matter
- Alt-Tab will walk you through all open Metro/desktop apps:
On to the App
Since I had been saying that this Metro stuff looked a whole lot like Silverlight, I just jumped in and created an app to see how far I could get before running into trouble.
It didn't take much...
I had to go looking for help, and relied heavily on Colin Eberhardt's excellent writeup
TweetSearch – A Cross platform Metro UI WinRT and Silverlight Application, and pulled my simple app together fairly quickly.
My intent was to produce a very small app that just barely did something useful so I could use it as a starting point. I figured a couple things might be important: a Button with a Command, and a TextBlock bound to a string in the ViewModel. I figured if I could get the commanding and binding to work, that would take care of lots of the plumbing on anything larger.
Rather than show my stumbling path, I'll show the end result and highlight what I had to do differently.
xaml
Skipping the boilerplate put into the xaml by vs2011, I'm showing the default Grid and the StackPanel I added with the associated TextBlock and Button:
<Grid x:Name="LayoutRoot" Background="#FF0C0C0C">
<StackPanel Orientation="Vertical"
HorizontalAlignment="Center"
VerticalAlignment="Center">
<TextBlock Text="{Binding Path=ButtonString}"
FontSize="36"/>
<Button Width="150"
Height="30"
Content="Press Me"
HorizontalAlignment="Center"
Command="{Binding PressCommand}"/>
</StackPanel>
</Grid>
The only change from my original code that had to be made in the xaml was the binding on the TextBlock. Maybe I'm normally hitting a default or something, but I don't usually find myself using the "Path=" in cases like this. I couldn't figure out why my binding wasn't working, and referring to Colin's code, that jumped out at me.
CodeBehind
The codebehind came through unscathed. I had simply added the the normal DataContext hook to the ViewModel:
namespace Application2
{
partial class MainPage
{
public MainPage()
{
InitializeComponent();
DataContext = new App1ViewModel();
}
}
}
ViewModel
The ViewModel needed more work:
namespace Application2.ViewModel
{
class App1ViewModel : INotifyPropertyChanged
{
public App1ViewModel()
{
}
#region ICommand
public ICommand PressCommand
{
get
{
return new DelegateCommand(() => PressButton());
}
}
private void PressButton()
{
if (ButtonString == "Pressed")
ButtonString = "Hello Again";
else
ButtonString = "Pressed";
}
#endregion
#region INPC
private string buttonString = "Hello Metro";
public string ButtonString
{
get { return buttonString; }
set
{
if (buttonString != value)
{
buttonString = value;
NotifyPropertyChanged("ButtonString");
}
}
}
#endregion
#region DelegateCommand
class DelegateCommand : ICommand
{
private Action _action;
public DelegateCommand(Action action)
{
_action = action;
}
public bool CanExecute(object parameter)
{
return true;
}
public event Windows.UI.Xaml.EventHandler CanExecuteChanged;
public void Execute(object parameter)
{
_action();
}
}
#endregion
#region NotifyPropertyChanged
public event PropertyChangedEventHandler PropertyChanged;
protected void NotifyPropertyChanged(string propertyname)
{
var handler = PropertyChanged;
if (handler != null)
handler(this, new PropertyChangedEventArgs(propertyname));
}
#endregion
}
}
Starting right at the top, the INotifyPropertyChanged had to be defined by using Windows.UI.Xaml.Data as shown here:
A bit farther down, the ICommand had to be defined by using Windows.UI.Xaml.Input as shown in the refactoring intellisense:
The DelegateCommand class I took straight from Colin's post, but the PropertyChangedEventHandler is standard.
All in all
I set the button up to change the text that was bound to the TextBlock. If you run the app as shown you'll get the following:
Pressing the button will produce this change in text:
And pressing the button again will result in this:
A silly little app, but it answers some very basic questions that I can now build on.
This ended up very painless. If you're already a xaml developer, what I've shown here should be not only readable but very familiar... and hopefully will alleviate any fear of jumping in on this.
I'm not sure what I'm going to try next, but it all looks interesting, so stay close, and
Stay in the 'Light