Assets Here http://cid-bdfb7845c22e26b6.skydrive.live.com/self.aspx/Projects/TechFriday/Assets.zip
DESIGN YOUR SCREEN
A. Setting Transparent Windows
With the Window selected, go to properties and tick on AllowsTransparency
B. Enabling Drag and Drop
With the your “main screen” selected, go to the Properties tab and click on events
Double click on the MouseDown event and this should take you to the CodeBehind editor.
Now add the following code:
private void Rectangle_MouseDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
this.DragMove();
}
C. Adding an Exit Button
Add a your exit button to the screen, and hook the following code up to the Click event.
private void Button_Click(object sender, System.Windows.RoutedEventArgs e)
{
Application.Current.Shutdown();
}
BUILDING THE MENU AND SCREENS
A. Creating the Menu
Add a StackPanel with 4 Buttons to your screens, one for each of the Menu options: Me, Friends, Free, Exit. Style as you like, add different looks to the states, etc:
B. Creating the Screens
a. MeScreen – Adding Live Data and Using ItemsControl
For the MeScreen, we’ll simple load up an RSS feed from twitter and display it in our application. To do this, go to the Data tab in blend and add a live data source:
Add a Canvas and name it MeScreen and in the MeScreen canvas, add an ItemsControl and set its width and height to auto.
Go back to the Data tab, and select item from the RSS and drag and drop it onto the ItemsControl
Resize the ItemsControl so it fits nicely onto your screen. Next with the ItemsControl selected, right click and select Edit Additional templates –> Edit Generated Items –>Edit Current. Here how your items are presented.
When you view the XAML codebehind, notice how the elements are DataBound
To get the look we want, paste this code into the StackPanel:
<StackPanel>
<TextBlock Text="{Binding XPath=description}" TextWrapping="Wrap"/>
<TextBlock TextAlignment="Right">
<Hyperlink NavigateUri="{Binding XPath=link}" RequestNavigate="HandleRequestNavigate">
<TextBlock Text="{Binding XPath=pubDate}" FontSize="8"/>
</Hyperlink>
</TextBlock>
</StackPanel>
Your screen should then look like this:
To have our Hyperlink actually navigate on our default browser, we need to add the code to our event handler on this line:
To do this, right click on your solution and click on “Edit in Visual Studio”. When you have the project loaded, navigate to the same code snippet, rightclick on HandleRequestNavigate and click on Navigate to Event handler
Add the following code to the code behind file and when you run your application, clicking on the hyperlinks should open up your default web browser, and navigate to the tweet you were browsing.
private void HandleRequestNavigate(object sender, System.Windows.Navigation.RequestNavigateEventArgs e)
{
string navigateUri = (sender as Hyperlink).NavigateUri.ToString();
Process.Start(new ProcessStartInfo(navigateUri));
e.Handled = true;
}
B. FriendsScreen – Quickly Adding Mock Data for Your Applications
Now that we’re done with the MeScreen, let’s set the Opacity to 0 and lock the Canvas so we don’t accidentally make changes to it.
Let’s go back to our Data tab and this time, let’s Define new Sample Data and name it FriendsMessages
You can then define the fields (in this case Name, Message, Avatar) you want to generate in the sample data and afterwards, drag and drop the collection onto the screen. You can again, edit the template so it looks the way you want.
Once you are done styling, right click on the List and group it into a Canvas and name it FriendsScreen. Once we are done, we’ll again set the opacity to 0.
This template has the following XAML code:
<Grid Height="96" Width="215">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.321*"/>
<ColumnDefinition Width="0.679*"/>
</Grid.ColumnDefinitions>
<Image Source="{Binding Avatar}" HorizontalAlignment="Left" Height="Auto" Width="64" Margin="0,0,0,32"/>
<StackPanel Orientation="Vertical" VerticalAlignment="Stretch" Grid.ColumnSpan="1" Margin="0" d:LayoutOverrides="Height" Grid.Column="1">
<TextBlock Text="{Binding Name}" VerticalAlignment="Stretch" d:LayoutOverrides="Width" Foreground="#FFC60000"/>
<TextBlock Text="{Binding Message}" Margin="9,7,0,0" VerticalAlignment="Stretch" TextWrapping="Wrap"/>
</StackPanel>
</Grid>
C. Managing Screens
Now that we have 2 screens, let’s look at how we can use States as a way to show these screens based on our selection. Let’s start by creating the VisualStates in our window. To do this, we go to the States panel. I created 4 states, one for every menu: me, friends, free, exit
We then select the appropriate state, and set the opacity of the corresponding screen to 100%. You can also fiddle around with the transitions.
Once we’re done, we will use Behaviors to manage interactivity in our app. To do this, we search for the GoToStateAction behavior and add it to each of our menu buttons and set the appropriate state to activate.
.
WINDOWS 7 SPECIFIC
A. JumpLists
public MainWindow()
{
InitializeComponent();
initializeJumplist();
string[] arguments = Environment.GetCommandLineArgs();
if (arguments.Length > 1)
{
ProcessArguments(arguments[1]);
}
}
private void ProcessArguments(string p)
{
VisualStateManager.GoToElementState(LayoutRoot, p, false);
}
private void initializeJumplist()
{
var strAppDir = System.IO.Path.GetDirectoryName(Assembly.GetEntryAssembly().Location);
JumpTask HomeTask = new JumpTask
{
Title = "me",
Arguments = "me",
Description = "Me Screen",
CustomCategory = "Screens",
IconResourceIndex = -1,
ApplicationPath = Assembly.GetEntryAssembly().CodeBase
};
JumpTask AboutTask = new JumpTask
{
Title = "friends",
Arguments = "friends",
Description = "Friends Screen",
CustomCategory = "Screens",
IconResourceIndex = -1,
ApplicationPath = Assembly.GetEntryAssembly().CodeBase
};
JumpList jumplist = new JumpList();
jumplist.JumpItems.Add(HomeTask);
jumplist.JumpItems.Add(AboutTask);
jumplist.ShowFrequentCategory = false;
jumplist.ShowRecentCategory = false;
JumpList.SetJumpList(Application.Current, jumplist);
}
B. TaskBar Custom Switchers
Use VS Designer to define Clip Margin and ThumbButtonInfo
<Window.TaskbarItemInfo>
<TaskbarItemInfo x:Name="TBII"
Description="IC BootCamp"
ThumbnailClipMargin="{Binding ElementName=FriendsScreen, Path=Margin}">
<TaskbarItemInfo.ThumbButtonInfos>
<ThumbButtonInfo ImageSource="/ICBootCamp;component/Resources/prevArrow.ico" Click="Prev_Click" />
<ThumbButtonInfo ImageSource="/ICBootCamp;component/Resources/nextArrow.ico" Click="Next_Click" />
</TaskbarItemInfo.ThumbButtonInfos>
</TaskbarItemInfo>
</Window.TaskbarItemInfo>
Code Behind:
int currentstate = -1;
private void Prev_Click(object sender, EventArgs e)
{
var states = (VisualStateManager.GetVisualStateGroups(LayoutRoot)[0] as VisualStateGroup).States;
if (–currentstate < 0) currentstate = states.Count – 1;
VisualStateManager.GoToElementState(LayoutRoot, (states[currentstate] as VisualState).Name, true);
}
private void Next_Click(object sender, EventArgs e)
{
var states = (VisualStateManager.GetVisualStateGroups(LayoutRoot)[0] as VisualStateGroup).States;
if (++currentstate >= states.Count) currentstate = 0;
VisualStateManager.GoToElementState(LayoutRoot, (states[currentstate] as VisualState).Name, true);
}