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();
}
}