App Bar icons for Windows 8 Metro
These are the icons available by default for the App Bar:
Click to see a large version of the image.
Windows 8 Metro
App Settings in Windows 8 WinRT using Callisto
As I am currently working in a Windows 8 Metro app, I needed to implement several Settings Flyouts. I didn’t want to reinvent the wheel, so I decided to use Callisto toolkit.
1. Installing Callisto from NuGet:
Right click in your project -> Manage NuGet Packages…
2. Adding custom settings to your App:
As I am using the same settings menu in the whole app, I can register it in my Application class. In the App Class:
protected override void OnLaunched(LaunchActivatedEventArgs args)
{
// Do not repeat app initialization when already running, just ensure that
// the window is active
if (args.PreviousExecutionState == ApplicationExecutionState.Running)
{
Window.Current.Activate();
return;
}
// Settings
SettingsPane.GetForCurrentView().CommandsRequested += Settings_CommandsRequested;
// Etcetera
}
{
// Do not repeat app initialization when already running, just ensure that
// the window is active
if (args.PreviousExecutionState == ApplicationExecutionState.Running)
{
Window.Current.Activate();
return;
}
// Settings
SettingsPane.GetForCurrentView().CommandsRequested += Settings_CommandsRequested;
// Etcetera
}
I need to implement an Event Handler to provide the OS with my new Settings menu items.
private void Settings_CommandsRequested(SettingsPane sender, SettingsPaneCommandsRequestedEventArgs args)
{
// Settings Wide
SettingsCommand settingsw = new SettingsCommand("SettingsW", "Settings Wide", (x) =>
{
SettingsFlyout settings = new SettingsFlyout();
settings.FlyoutWidth = Callisto.Controls.SettingsFlyout.SettingsFlyoutWidth.Wide;
settings.HeaderText = "Settings Wide";
settings.Content = new CallistoSettings.SettingsViews.SettingsWide();
settings.IsOpen = true;
});
args.Request.ApplicationCommands.Add(settingsw);
}
{
// Settings Wide
SettingsCommand settingsw = new SettingsCommand("SettingsW", "Settings Wide", (x) =>
{
SettingsFlyout settings = new SettingsFlyout();
settings.FlyoutWidth = Callisto.Controls.SettingsFlyout.SettingsFlyoutWidth.Wide;
settings.HeaderText = "Settings Wide";
settings.Content = new CallistoSettings.SettingsViews.SettingsWide();
settings.IsOpen = true;
});
args.Request.ApplicationCommands.Add(settingsw);
}
As you can notice in the code, the Content is a User Control. So I can edit it in Blend, and it’s much easier to make it look nice.
Download sample source code
Some screen-shoots:
Implementing a custom DataTemplateSelector in WinRT
In one of the projects that I am currently working on I needed to implement this. I needed this because I am using the ItemsControlto display a list of Items. The problem that I had is that I have several type of objects in my list, and I wanted to use a different template for each of them.
1. Markup for a standard ItemsControl
- Define the DataTemplate as a static resource:
<Page.Resources>
<DataTemplate x:Key="TempA">
<Border Background="Red">
<TextBlock Text="{Binding Title}" />
</Border>
</DataTemplate>
</Page.Resources>
<DataTemplate x:Key="TempA">
<Border Background="Red">
<TextBlock Text="{Binding Title}" />
</Border>
</DataTemplate>
</Page.Resources>
- Declare your Items Control to use the Data Template:
<ItemsControl x:Name="items"
ItemsSource="{Binding Items}"
ItemsTemplate="{StaticResource TempA}" />
ItemsSource="{Binding Items}"
ItemsTemplate="{StaticResource TempA}" />
2. Implement a DataTemplateSelector to use several Templates in an ItemsControl
- Implement the selector to use a different template based in the object type:
public class ItemsTemplateSelector : DataTemplateSelector
{
public DataTemplate TemplateA { get; set; }
public DataTemplate TemplateB { get; set; }
protected override DataTemplate SelectTemplateCore
(object item, DependencyObject container)
{
if (item is ObjectTypeA)
{
return TemplateA;
}
else if (item is ObjectTypeB)
{
return TemplateB;
}
else
{
return base.SelectTemplate(item, container);
}
}
}
{
public DataTemplate TemplateA { get; set; }
public DataTemplate TemplateB { get; set; }
protected override DataTemplate SelectTemplateCore
(object item, DependencyObject container)
{
if (item is ObjectTypeA)
{
return TemplateA;
}
else if (item is ObjectTypeB)
{
return TemplateB;
}
else
{
return base.SelectTemplate(item, container);
}
}
}
- Declare your DataTemplates in Resources
<Page.Resources>
<DataTemplate x:Key="TempA">
<Border Background="Red">
<TextBlock Text="{Binding Title}" />
</Border>
</DataTemplate>
<DataTemplate x:Key="TempB">
<Border Background="Blue">
<TextBlock Text="{Binding Title}" />
</Border>
</DataTemplate>
</Page.Resources>
<DataTemplate x:Key="TempA">
<Border Background="Red">
<TextBlock Text="{Binding Title}" />
</Border>
</DataTemplate>
<DataTemplate x:Key="TempB">
<Border Background="Blue">
<TextBlock Text="{Binding Title}" />
</Border>
</DataTemplate>
</Page.Resources>
- Declare your DataTemplateSelector in Resources
<views:ItemsTemplateSelector x:Key="itemsTemplateSelector"
TemplateA="{StaticResource TempA}"
TemplateB="{StaticResource TempB}" />
TemplateA="{StaticResource TempA}"
TemplateB="{StaticResource TempB}" />
- Update the ItemsControl to use your DataTemplateSelector
<ItemsControl x:Name="items"
ItemsSource="{Binding Items}"
ItemTemplateSelector="{StaticResource itemsTemplateSelector}" />
ItemsSource="{Binding Items}"
ItemTemplateSelector="{StaticResource itemsTemplateSelector}" />
Search contract in Windows 8 Metro
This is a functionality that many apps will need, and the OS is making it very easy to integrate. Metro introduces the concept of Contracts, they are like interfaces to indicate the OS that our app can perform certain functionalities (Search / Share / File Picker). This post will focus on integrating SEARCH.
1. Open your project in Visual Studio 2012, open the App Manifest (Package.appxmanifest). Under the tab “Declarations” add Search.
2. Declare the Search Pane in your App class. If you want to provide search suggestions, also declare the array in the App class.
sealed partial class App : Application
{
private SearchPane searchPane;
private static string[] suggestionList;
public App()
{
this.InitializeComponent();
this.Suspending += OnSuspending;
}
protected override async void OnLaunched(LaunchActivatedEventArgs args)
{
// Do not repeat app initialization when already running, just ensure that
// the window is active
if (args.PreviousExecutionState == ApplicationExecutionState.Running)
{
Window.Current.Activate();
return;
}
// SearchPane
this.searchPane = SearchPane.GetForCurrentView();
// Suggestion list
suggestionList = DataService.GetSearchSuggestions().ToArray();
searchPane.SuggestionsRequested +=
new TypedEventHandler<SearchPane, SearchPaneSuggestionsRequestedEventArgs>
(OnSearchPaneSuggestionsRequested);
}
/* Continue with the window initialization */
}
{
private SearchPane searchPane;
private static string[] suggestionList;
public App()
{
this.InitializeComponent();
this.Suspending += OnSuspending;
}
protected override async void OnLaunched(LaunchActivatedEventArgs args)
{
// Do not repeat app initialization when already running, just ensure that
// the window is active
if (args.PreviousExecutionState == ApplicationExecutionState.Running)
{
Window.Current.Activate();
return;
}
// SearchPane
this.searchPane = SearchPane.GetForCurrentView();
// Suggestion list
suggestionList = DataService.GetSearchSuggestions().ToArray();
searchPane.SuggestionsRequested +=
new TypedEventHandler<SearchPane, SearchPaneSuggestionsRequestedEventArgs>
(OnSearchPaneSuggestionsRequested);
}
/* Continue with the window initialization */
}
3. Add the method to provide the search suggestions to the search pane (For simplicity in this sample it is done in the App class too)
private void OnSearchPaneSuggestionsRequested(SearchPane sender, SearchPaneSuggestionsRequestedEventArgs e)
{
var queryText = e.QueryText;
if (!string.IsNullOrEmpty(queryText))
{
var request = e.Request;
foreach (string suggestion in suggestionList)
{
if (suggestion.StartsWith(queryText, StringComparison.CurrentCultureIgnoreCase))
{
// Add suggestion to Search Pane
request.SearchSuggestionCollection.AppendQuerySuggestion(suggestion);
// Break since the Search Pane can show at most 5 suggestions
if (request.SearchSuggestionCollection.Size >= 5)
{
break;
}
}
}
}
}
{
var queryText = e.QueryText;
if (!string.IsNullOrEmpty(queryText))
{
var request = e.Request;
foreach (string suggestion in suggestionList)
{
if (suggestion.StartsWith(queryText, StringComparison.CurrentCultureIgnoreCase))
{
// Add suggestion to Search Pane
request.SearchSuggestionCollection.AppendQuerySuggestion(suggestion);
// Break since the Search Pane can show at most 5 suggestions
if (request.SearchSuggestionCollection.Size >= 5)
{
break;
}
}
}
}
}
4. Now we need a UI to display the search results. Visual Studio has a template.
This action will also add the method OnSearchActivated to the App class to declare the Search Contract, indicating to Windows 8 that our app allows Searching.
/// <summary>
/// Invoked when the application is activated to display search results.
/// </summary>
/// <param name="args">Details about the activation request.</param>
protected override void OnSearchActivated(Windows.ApplicationModel.Activation.SearchActivatedEventArgs args)
{
App1.SearchResultsPage1.Activate(args.QueryText, args.PreviousExecutionState);
}
/// Invoked when the application is activated to display search results.
/// </summary>
/// <param name="args">Details about the activation request.</param>
protected override void OnSearchActivated(Windows.ApplicationModel.Activation.SearchActivatedEventArgs args)
{
App1.SearchResultsPage1.Activate(args.QueryText, args.PreviousExecutionState);
}
5. Implement your search functionality and provide the results to the Search Results view:
protected override void LoadState(Object navigationParameter, Dictionary<String, Object> pageState)
{
var queryText = navigationParameter as String;
// TODO: Application-specific searching logic. The search process is responsible for
// creating a list of user-selectable result categories:
//
// filterList.Add(new Filter("<filter name>", <result count>));
//
// Only the first filter, typically "All", should pass true as a third argument in
// order to start in an active state. Results for the active filter are provided
// in Filter_SelectionChanged below.
// TODO: Add your results
this.DefaultViewModel["Results"] = new List<SearchResult>()
{
new SearchResult()
{
Title = "Result 1",
Subtitle = "Subtitl",
Description = "Description",
Image = null
}
};
var filterList = new List<Filter>();
filterList.Add(new Filter("All", 0, true));
// Communicate results through the view model
this.DefaultViewModel["QueryText"] = '\u201c' + queryText + '\u201d';
this.DefaultViewModel["CanGoBack"] = this._previousContent != null;
this.DefaultViewModel["Filters"] = filterList;
this.DefaultViewModel["ShowFilters"] = filterList.Count > 1;
}
{
var queryText = navigationParameter as String;
// TODO: Application-specific searching logic. The search process is responsible for
// creating a list of user-selectable result categories:
//
// filterList.Add(new Filter("<filter name>", <result count>));
//
// Only the first filter, typically "All", should pass true as a third argument in
// order to start in an active state. Results for the active filter are provided
// in Filter_SelectionChanged below.
// TODO: Add your results
this.DefaultViewModel["Results"] = new List<SearchResult>()
{
new SearchResult()
{
Title = "Result 1",
Subtitle = "Subtitl",
Description = "Description",
Image = null
}
};
var filterList = new List<Filter>();
filterList.Add(new Filter("All", 0, true));
// Communicate results through the view model
this.DefaultViewModel["QueryText"] = '\u201c' + queryText + '\u201d';
this.DefaultViewModel["CanGoBack"] = this._previousContent != null;
this.DefaultViewModel["Filters"] = filterList;
this.DefaultViewModel["ShowFilters"] = filterList.Count > 1;
}
6. Use the search pane, and you will get a list of suggestions as well.
7. Search results (Not implemented):
Good luck!
Using an existent SQLite database in a Windows 8 Metro app
Currently I am working in an app for Windows 8 Metro, and I need to use a SQLite database. The steps to get it set up are not really straight forward, but Tim Heuer created a really good tutorial. He recommends to use a little wrapper (ORM), called sqlite-net available in GitHub. It works pretty well, but the main problem is that only supports databases auto-generated from your class model. That’s a problem for my use case, since the database that I need to use already exists. I need to create my own mappings. Ouch! For this reason I forked the library in GitHub to support custom mappings using two simple annotations:
[MapToTable("StockTable")]
public class Stock
{
[MapToColumn("StockId")]
[PrimaryKey, AutoIncrement]
public int Id { get; set; }
[MapToColumn("StockSymbol")]
[MaxLength(8)]
public string Symbol { get; set; }
}
public class Stock
{
[MapToColumn("StockId")]
[PrimaryKey, AutoIncrement]
public int Id { get; set; }
[MapToColumn("StockSymbol")]
[MaxLength(8)]
public string Symbol { get; set; }
}
This class would try to use a table called ‘StockTable’ and the columns would be: StockId, StockSymbol. It is a simple modification that works nicely for my needs. Enjoy it!
Feedback appreciated.
Update: Now you don’t need to compile the Dll for SQLite for x86 and x64 WinRT, they are available to download in the SQLite website.
Update 2: Now you don’t even need to reference any static DLL, you can just install SQLite as a Visual Studio 2012 extension and it will embed the right DLL depending on the architecture of the build. Reference: SQLite with windows 8.