Example Metro app /WinRT: Homemade Chart and DatePicker for Metro Apps
Iris Classon on Twitter 18 July:
I’ll make my own darn charts, and they will be FREE. HA! I’ll use rectangles for bar-series :D
Here is how the charts turned out (I’m not ready to share this code yet, but I will once I clean it up a little!) - The barchart is by be, and the Piechart by another developer, I just did the legends. I’ll ask him if he is fine with sharing, and I’ll post the code here.
Homemade XAML/Metro App charts. Barchart and legends by me, Pichart by another dev.
a Telerik’s charts for windows 8 sample I made earlier this week, beta is out- you should try!
And so I did. Out of pure frustration I decided to remove third party libraries from my Metro app to make it model-skinny,- and to get total control. And talking about controls, I made some of them- and I don’t mind sharing :) - starting with my datepicker. A simple control that anybody can throw together, but it is all those extra hours here and there that breaks deadlines, and that is why I at least like getting some help. Maybe I can be the one to help this time? Anyways, here you go - use it as you please. DatePicker a lá Iris.
simple datepicker for Metro apps by me
You can download the sample of the datepicker here
The View
[sourcecode language=“XML”]
<Page
x:Class="DIYDatePicker.MainPage"
IsTabStop="false"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
DataContext="{Binding RelativeSource={RelativeSource Self}}"
mc:Ignorable="d">
<Page.Resources>
</Page.Resources>
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Border Background="White" Padding="2" Width="350" Height="100" BorderBrush="White" BorderThickness="10">
<StackPanel Orientation="Horizontal">
<ComboBox ScrollViewer.VerticalScrollBarVisibility="Hidden" ItemTemplate="{StaticResource DateTemplate}" ItemsSource="{Binding Date.Year}" Width="100" MaxDropDownHeight="1" SelectedItem="{Binding Year, Mode=TwoWay}" Style="{StaticResource ComboBoxStyle1}"/>
<ComboBox ScrollViewer.VerticalScrollBarVisibility="Hidden" ItemTemplate="{StaticResource DateTemplate}" ItemsSource="{Binding Date.Month}" Width="100" MaxDropDownHeight="1" SelectedItem="{Binding Month, Mode=TwoWay}" Style="{StaticResource ComboBoxStyle1}"/>
<ComboBox ScrollViewer.VerticalScrollBarVisibility="Hidden" ItemTemplate="{StaticResource DateTemplate}" ItemsSource="{Binding Date.Day}" Width="100" MaxDropDownHeight="1" SelectedItem="{Binding Day, Mode=TwoWay}" Style="{StaticResource ComboBoxStyle1}"/>
</StackPanel>
</Border>
</Grid>
Code (You should of course not have everything in one class/file, it’s just to keep it simple I’m doing this in my examples)
[sourcecode language=“csharp”]
using System;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Linq;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Navigation;
namespace DIYDatePicker
{
public sealed partial class MainPage : Page, INotifyPropertyChanged
{
private int _day;
private int _month;
private int _year;
private Date _date = new Date();
public int Day
{
get { return _day; }
set
{
if (_day == value) return;
_day = value;
NotifyPropertyChanged("Day");
}
}
public int Month
{
get { return _month; }
set
{
if (_month == value) return;
_month = value;
_date.Day =
new ObservableCollection((Enumerable.Range(1, DateTime.DaysInMonth(DateTime.Now.Year, _month))));
NotifyPropertyChanged("Month");
}
}
public int Year
{
get { return _year; }
set
{
if (_year == value) return;
_year = value;
_date.Day = new ObservableCollection((Enumerable.Range(1, DateTime.DaysInMonth(_year, _month))));
NotifyPropertyChanged("Year");
}
}
public Date Date
{
get { return _date; }
}
private int GetDaysInMonth(int year, int month)
{
return DateTime.DaysInMonth(year, month);
}
public MainPage()
{
this.InitializeComponent();
SetTodaysDate();
SetDataSource();
}
private void SetTodaysDate()
{
Day = DateTime.Now.Day;
Month = DateTime.Now.Month;
Year = DateTime.Now.Year;
}
private void SetDataSource()
{
int year = DateTime.Now.Year - 10;
_date.Day = new ObservableCollection(Enumerable.Range(1, GetDaysInMonth(Year, 1)));
_date.Month = new ObservableCollection(Enumerable.Range(1, 12));
_date.Year = new ObservableCollection(Enumerable.Range(year, 20));
}
protected override void OnNavigatedTo(NavigationEventArgs e){}
public event PropertyChangedEventHandler PropertyChanged;
private void NotifyPropertyChanged(String info)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(info));
}
}
}
public class Date : INotifyPropertyChanged
{
private ObservableCollection _day;
private ObservableCollection _month;
private ObservableCollection _year;
public ObservableCollectionDay
{
get { return _day; }
set
{
if (_day == value) return;
_day = value;
NotifyPropertyChanged("Day");
}
}
public ObservableCollectionMonth
{
get { return _month; }
set
{
if (_month == value) return;
_month = value;
NotifyPropertyChanged("Month");
}
}
public ObservableCollectionYear
{
get { return _year; }
set
{
if (_year == value) return;
_year = value;
NotifyPropertyChanged("Year");
}
}
public event PropertyChangedEventHandler PropertyChanged;
private void NotifyPropertyChanged(String info)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(info));
}
}
}
}
[/sourcecode]
You will have to re-design the comboboxes, add this as an resource.
[sourcecode language=“XML”]
[/sourcecode]
Comments
Hi Iris, any news on the pie chart code? I'm currently reaching the point of just doing it myself, but if your friend would be willing to share that'd be great. :-)
I'm desperately in need of a charting solution for a metro app I'm working on. Would greatly appreciate you sharing some code, no matter how rough... Thanks, Matt
I think the Piechart Code is mine right :)
I'm gone to say to my little brother, that he should also pay a visit this website on regular basis to get updated from newest reports.
Hi Simon / Iris, I am looking for pie chart control for Windows 8 Metro apps...are you planning to share the code..?
Hi there, was able to achieve something like this datepicker by using combobox and carouselpanel. But i can't for the life of me, remove the visibility of the dropdownbutton. have set the DropDownGlyph's opacity to 0 and that removed the arrow. but the button is still visible.
Why can't you try out new beta (it doesn't expire) version of Syncfusion WinRT XAML controls. http://www.syncfusion.com/products/winrt
I tried your DatePicker and it's working wonders Iris! Thanks for sharing! I found what seems to be a bug though. When I run your code on the simulator, switch to touch mode and touch any of the three comboboxes, the app crashes. Did this happen to anyone else? Here's what I get: https://www.dropbox.com/s/o8wcqvexzwxdvz2/datepicker_touch_error.png I hope this only happens on the simulator though, and not on a real touch device :P I don't have one to test though..
Remove the MaxDropDownHeight on the combobox's. It's causing the crash when using touch.
Try this, https://nuget.org/packages/WinRTDatePicker
Last modified on 2012-07-19