Get Microsoft Silverlight

Monday, October 29, 2007

Time Picker User Control

The easiest way to create a WPF TimePicker control is to make a user control wrapped for TimeSpan CLR object. Here is a very simple sample which does that. Basically TimeControl is having 4 DPs one for the entire Value (Which is a TimeSpan) and individual Hours, Minutes and Seconds. (We can optionally add Days and Milliseconds also to make the control rich).

Here is a C# class TimeControl.xaml.cs


    public partial class TimeControl : UserControl
    {
        public TimeControl()
        {
            InitializeComponent();
        }
        public TimeSpan Value
        {
            get { return (TimeSpan)GetValue(ValueProperty); }
            set { SetValue(ValueProperty, value); }
        }
        public static readonly DependencyProperty ValueProperty =
        DependencyProperty.Register("Value", typeof(TimeSpan), typeof(TimeControl),
        new UIPropertyMetadata(DateTime.Now.TimeOfDay, new PropertyChangedCallback(OnValueChanged)));
 
        private static void OnValueChanged(DependencyObject obj, DependencyPropertyChangedEventArgs e)
        {
            TimeControl control = obj as TimeControl;
            control.Hours = ((TimeSpan)e.NewValue).Hours;
            control.Minutes = ((TimeSpan)e.NewValue).Minutes;
            control.Seconds = ((TimeSpan)e.NewValue).Seconds;
        }
 
        public int Hours
        {
            get { return (int)GetValue(HoursProperty); }
            set { SetValue(HoursProperty, value); }
        }
        public static readonly DependencyProperty HoursProperty =
        DependencyProperty.Register("Hours", typeof(int), typeof(TimeControl),
        new UIPropertyMetadata(0, new PropertyChangedCallback(OnTimeChanged)));
 
        public int Minutes
        {
            get { return (int)GetValue(MinutesProperty); }
            set { SetValue(MinutesProperty, value); }
        }
        public static readonly DependencyProperty MinutesProperty =
        DependencyProperty.Register("Minutes", typeof(int), typeof(TimeControl),
        new UIPropertyMetadata(0, new PropertyChangedCallback(OnTimeChanged)));
 
        public int Seconds
        {
            get { return (int)GetValue(SecondsProperty); }
            set { SetValue(SecondsProperty, value); }
        }
 
        public static readonly DependencyProperty SecondsProperty =
        DependencyProperty.Register("Seconds", typeof(int), typeof(TimeControl),
        new UIPropertyMetadata(0, new PropertyChangedCallback(OnTimeChanged)));
 
 
        private static void OnTimeChanged(DependencyObject obj, DependencyPropertyChangedEventArgs e)
        {
            TimeControl control = obj as TimeControl;
            control.Value = new TimeSpan(control.Hours, control.Minutes, control.Seconds);
        }
 
        private void Down(object sender, KeyEventArgs args)
        {
            switch (((Grid)sender).Name)
            {
                case "sec":
                    if (args.Key == Key.Up)
                        this.Seconds++;
                    if (args.Key == Key.Down)
                        this.Seconds--;
                    break;
 
                case "min":
                    if (args.Key == Key.Up)
                        this.Minutes++;
                    if (args.Key == Key.Down)
                        this.Minutes--;
                    break;
 
                case "hour":
                    if (args.Key == Key.Up)
                        this.Hours++;
                    if (args.Key == Key.Down)
                        this.Hours--;
                    break;
            }
        }
 
    } 



And here is the XAML for TimeControl.xaml





<UserControl

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    x:Class="DateTimeTest.TimeControl"

    Height="Auto" Width="Auto" x:Name="UserControl">

  <Grid x:Name="LayoutRoot" Width="Auto" Height="Auto">

    <Grid.ColumnDefinitions>

      <ColumnDefinition Width="0.2*"/>

      <ColumnDefinition Width="0.05*"/>

      <ColumnDefinition Width="0.2*"/>

      <ColumnDefinition Width="0.05*"/>

      <ColumnDefinition Width="0.2*"/>

    </Grid.ColumnDefinitions>

    <Grid x:Name="hour" Focusable="True" KeyDown="Down">

      <TextBlock x:Name="mmTxt" TextWrapping="Wrap" Text="{Binding Path=Hours, ElementName=UserControl, Mode=Default}"

                 TextAlignment="Center" VerticalAlignment="Center" FontFamily="Goudy Stout" FontSize="14"/>

    </Grid>

    <Grid  Grid.Column="1">

      <TextBlock  x:Name="sep1" TextWrapping="Wrap" VerticalAlignment="Center" Background="{x:Null}" FontFamily="Goudy Stout"

                  FontSize="14" Text=":" TextAlignment="Center"/>

    </Grid>

    <Grid  Grid.Column="2" x:Name="min" Focusable="True" KeyDown="Down">

      <TextBlock  x:Name="ddTxt"  TextWrapping="Wrap" Text="{Binding Path=Minutes, ElementName=UserControl, Mode=Default}"

                  TextAlignment="Center" VerticalAlignment="Center" FontFamily="Goudy Stout" FontSize="14"/>

    </Grid>

    <Grid  Grid.Column="3">

      <TextBlock x:Name="sep2"  TextWrapping="Wrap" VerticalAlignment="Center" Background="{x:Null}" FontFamily="Goudy Stout"

                 FontSize="14" Text=":" TextAlignment="Center"/>

    </Grid>

    <Grid  Grid.Column="4" Name="sec" Focusable="True" KeyDown="Down">

      <TextBlock x:Name="yyTxt"  TextWrapping="Wrap" Text="{Binding Path=Seconds, ElementName=UserControl, Mode=Default}"

                 TextAlignment="Center" VerticalAlignment="Center" FontFamily="Goudy Stout" FontSize="14"/>

    </Grid>

 

  </Grid>

</UserControl>


And the control can be used as

<ctrl:TimeControl Hours="10" Minutes="10" Seconds="30" x:Name="TimeControl"/>

Thursday, October 04, 2007

Blendables essentials mix v1.0 now available

A bunch of controls and utilities for Windows Presentation Foundation(WPF) has been released by Identitymine. You can take a look at Blendables here . And there is a WPF programming contest is also going on there.

Have you ever wished to have a Carousal3D in your WPF app? or a ready to use Zoombox or a TimelinePanel.
And have you ever thought of doing more things inside the XAML itself with out doing much C# coding? then you really need this exciting utility comming along with Blendables called EvalBinding and Simple Binding.

Cheers!!!