Iris Classon
- CATALOG -
Iris Classon - In Love with Code

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=&quot;{StaticResource ApplicationPageBackgroundThemeBrush}&quot;>  
    <Border Background=&quot;White&quot; Padding=&quot;2&quot; Width=&quot;350&quot; Height=&quot;100&quot; BorderBrush=&quot;White&quot; BorderThickness=&quot;10&quot;>  
        <StackPanel Orientation=&quot;Horizontal&quot;>  
            <ComboBox ScrollViewer.VerticalScrollBarVisibility=&quot;Hidden&quot; ItemTemplate=&quot;{StaticResource DateTemplate}&quot; ItemsSource=&quot;{Binding Date.Year}&quot;  Width=&quot;100&quot; MaxDropDownHeight=&quot;1&quot; SelectedItem=&quot;{Binding Year, Mode=TwoWay}&quot; Style=&quot;{StaticResource ComboBoxStyle1}&quot;/>  
            <ComboBox ScrollViewer.VerticalScrollBarVisibility=&quot;Hidden&quot; ItemTemplate=&quot;{StaticResource DateTemplate}&quot; ItemsSource=&quot;{Binding Date.Month}&quot;  Width=&quot;100&quot; MaxDropDownHeight=&quot;1&quot; SelectedItem=&quot;{Binding Month, Mode=TwoWay}&quot; Style=&quot;{StaticResource ComboBoxStyle1}&quot;/>  
            <ComboBox ScrollViewer.VerticalScrollBarVisibility=&quot;Hidden&quot; ItemTemplate=&quot;{StaticResource DateTemplate}&quot; ItemsSource=&quot;{Binding Date.Day}&quot;  Width=&quot;100&quot; MaxDropDownHeight=&quot;1&quot; SelectedItem=&quot;{Binding Day, Mode=TwoWay}&quot; Style=&quot;{StaticResource ComboBoxStyle1}&quot;/>  
        </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

Leave a comment (via email)
Simon O'Beirne
7/19/2012 11:55:54 PM
Hi Iris - those charts look pretty good. I had exactly the same thought a little while ago and I'm currently working on some pie charts myself which I'm hoping to put on github when code is a little cleaner.

Would certainly be interested to see more on how you went about yours.

Simon 
Sebastian
7/23/2012 6:39:58 AM
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. :-) 
Matt
8/1/2012 11:23:08 AM
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 
Mahmoud Moussa
8/2/2012 1:16:47 PM
I think the Piechart Code is mine right :) 
my article tools
8/4/2012 2:07:00 AM
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. 
devs
9/17/2012 4:39:55 AM
Reply to: Simon O'Beirne
Hi Simon / Iris,

I am looking for pie chart control for Windows 8 Metro apps...are you planning to share the code..? 
ed
9/21/2012 12:03:23 AM
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. 
Jawahar
10/27/2012 9:42:56 PM
Why can't you try out new beta (it doesn't expire) version of Syncfusion WinRT XAML controls. 
http://www.syncfusion.com/products/winrt 
Diogo Castro
11/7/2012 3:30:00 PM
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.. 
Avery Pierce
12/20/2012 10:10:41 PM
Reply to: Diogo Castro
Remove the MaxDropDownHeight on the combobox's.  It's causing the crash when using touch. 
Farhan
3/11/2013 6:15:48 AM
Try this, https://nuget.org/packages/WinRTDatePicker 


Last modified on 2012-07-19