Create a Simple Time Picker Control In Windows Phone 7

In this article, we will discuss how to easily create a Time Picker Control in Windows Phone 7. With this control we can set the time as needed. When we click on the Plus Buttons the hour and minutes will be incremented and when we will click on the Minus Button it will be decremented.

WP1.jpg

Step 1

First we will use the following buttons to show the hour and minute, increment and decrement and set the time. Here we can also use a TextBox to show the time.

WP2.jpg

<Button Content="+" Margin="10,76,349,459" Name="btnAddHour" Click="btnAddHour_Click" FontWeight="Bold" FontSize="28">

                <Button.Background>

                    <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">

                        <GradientStop Color="Black" Offset="0" />

                        <GradientStop Color="#FFC1BCBC" Offset="1" />

                    </LinearGradientBrush>

                </Button.Background>

            </Button>

            <Button Content="01" Height="72" Margin="10,121,349,0" Name="btnHour" VerticalAlignment="Top" />

            <Button Content="-" Height="72" Margin="10,167,349,0" Name="btnMinus" VerticalAlignment="Top" Click="btnMinus_Click" FontWeight="Bold" FontSize="28">

                <Button.Background>

                    <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">

                        <GradientStop Color="Black" Offset="0" />

                        <GradientStop Color="#FFC1BCBC" Offset="1" />

                    </LinearGradientBrush>

                </Button.Background>

            </Button>

            <Button Content="+" Height="72" Margin="113,76,246,0" Name="btnAddMinute" VerticalAlignment="Top" Click="btnAddMinute_Click" FontWeight="Bold" FontSize="28">

                <Button.Background>

                    <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">

                        <GradientStop Color="Black" Offset="0" />

                        <GradientStop Color="#FFC1BCBC" Offset="1" />

                    </LinearGradientBrush>

                </Button.Background>

            </Button>

            <Button Content="-" Height="72" Margin="113,167,246,0" Name="btnMinusMinute" VerticalAlignment="Top" Click="btnMinusMinute_Click" FontWeight="Bold" FontSize="28">

                <Button.Background>

                    <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">

                        <GradientStop Color="Black" Offset="0" />

                        <GradientStop Color="#FFC1BCBC" Offset="1" />

                    </LinearGradientBrush>

                </Button.Background>

            </Button>

            <Button Content="00" Margin="113,121,246,414" Name="btnMinute" />

            <TextBlock Height="30" HorizontalAlignment="Left" Margin="24,40,0,0" Name="textBlock1" Text="Hour" VerticalAlignment="Top" Width="83" FontWeight="Bold" FontSize="25" />

            <TextBlock FontSize="25" FontWeight="Bold" Height="30" HorizontalAlignment="Left" Margin="113,40,0,0" Name="textBlock2" Text="Minute" VerticalAlignment="Top" Width="97" />

            <Button Content="+" Margin="233,76,99,459" Name="btnPlusTime" Click="btnPlusTime_Click" FontWeight="Bold" FontSize="28">

                <Button.Background>

                    <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">

                        <GradientStop Color="Black" Offset="0" />

                        <GradientStop Color="#FFC1BCBC" Offset="1" />

                    </LinearGradientBrush>

                </Button.Background>

            </Button>

            <Button Content="AM" Margin="233,121,99,414" Name="btnTime" />

            <Button Content="-" Margin="233,167,99,368" Name="btnMinusTime" Click="btnMinusTime_Click" FontWeight="Bold" FontSize="28">

                <Button.Background>

                    <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">

                        <GradientStop Color="Black" Offset="0" />

                        <GradientStop Color="#FFC1BCBC" Offset="1" />

                    </LinearGradientBrush>

                </Button.Background>

            </Button>

            <TextBox Height="72" HorizontalAlignment="Left" Margin="6,319,0,0" Name="txtSetTime" Text="" VerticalAlignment="Top" Width="387" Visibility="Collapsed" Foreground="White" BorderBrush="{x:Null}" FontWeight="Bold" TextAlignment="Center">

                <TextBox.Background>

                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                        <GradientStop Color="Black" Offset="0" />

                        <GradientStop Color="White" Offset="1" />

                    </LinearGradientBrush>

                </TextBox.Background>

            </TextBox>

            <Button Content="Set Time" Margin="24,241,217,294" Name="btnSetTime" Click="btnSetTime_Click" FontWeight="Bold">

                <Button.Background>

                    <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">

                        <GradientStop Color="Black" Offset="0" />

                        <GradientStop Color="#FFBEB6B6" Offset="1" />

                    </LinearGradientBrush>

                </Button.Background>

            </Button>

Step 2

Now we will write the code for the "Add Hour" button:
 

private void btnAddHour_Click(object sender, RoutedEventArgs e)

{

    int h = Convert.ToInt16(btnHour.Content.ToString());

    if (h < 12)

    {

        int x = h + 1;

        if (h < 9)

        {

            btnHour.Content = "0" + x.ToString();

        }

        else

        {

            btnHour.Content = x.ToString();

        }

    }

}


Here we use the value of the btnHour (in my example its 04) and then we will increment it by 1 like this:

WP3.jpg

Step 3

Now we will write the code for "Minus" button like this:
 

private void btnMinus_Click(object sender, RoutedEventArgs e)

{

    int h = Convert.ToInt16(btnHour.Content.ToString());

    if (h > 1)

    {

        int x = h - 1;

        if (h < 11)

        {

            btnHour.Content = "0" + x.ToString();

        }

        else

        {

            btnHour.Content = x.ToString();

        }

    }

}

Here we use the value of the btnHour (in my example its 04) and then we will decrement it by 1 like this:

WP4.jpg

Step 4

Like our previous steps, we will write the same code for our Minute and other buttons Like this:
 

private void btnAddMinute_Click(object sender, RoutedEventArgs e)

{

    int h = Convert.ToInt16(btnMinute.Content.ToString());

    if (h < 59)

    {

        int x = h + 1;

        if (h < 9)

        {

            btnMinute.Content ="0"+ x.ToString();

        }

        else

        {

            btnMinute.Content = x.ToString();

        }

    }

}

 

private void btnMinusMinute_Click(object sender, RoutedEventArgs e)

{

    int h = Convert.ToInt16(btnMinute.Content.ToString());

    if (h > 1)

    {

        int x = h - 1;

        if (h < 11)

        {

            btnMinute.Content ="0"+ x.ToString();

        }

        else

        {

            btnMinute.Content = x.ToString();

        }

    }

}
 

private void btnPlusTime_Click(object sender, RoutedEventArgs e)

{

    btnTime.Content = "PM";

}

 

private void btnMinusTime_Click(object sender, RoutedEventArgs e)

{

    btnTime.Content = "AM";

}

Step 5

Now we will write the code for our SetTime Button. So when we click on it, the TextBox will be visible in which we will show our set Time:

WP5.jpg
 

private void btnSetTime_Click(object sender, RoutedEventArgs e)

{

    txtSetTime.Visibility = Visibility.Visible;

    int a, b;

    a = Convert.ToInt16(btnHour.Content.ToString());

    b = Convert.ToInt16(btnMinute.Content.ToString());

    if ((a<10))

    {

        txtSetTime.Text ="0"+ a + ":" + b + " " + btnTime.Content.ToString();

        if ((b < 10))

        {

            txtSetTime.Text = "0" + a + ":" + "0" + b + " " + btnTime.Content.ToString();

        }

    }

    if ((b < 10))

    {

        txtSetTime.Text = "0" + a + ":" + b + " " + btnTime.Content.ToString();

        if ((a < 10))

        {

            txtSetTime.Text = "0" + a + ":" + "0" + b + " " + btnTime.Content.ToString();

        }

     }

    else

    {

        a = Convert.ToInt16(btnHour.Content.ToString());

        b = Convert.ToInt16(btnMinute.Content.ToString());

        txtSetTime.Text = a + ":" + b + " " + btnTime.Content.ToString();

    }

}


Similar Articles