[XAML] - Create Your Own Number Picker Control for Windows Phone

  • Article

This is the screenshot of the number picker control I created.

 

Steps:

#1 in Visual Studio, Add -> New Item -> User Control, change the d:DesignHeight to 50 and d:DesignWidth to 300

To have some shadow effect, we need a border to wrap and the border need to have the same width and height with the user control.

 <UserControl
 x:Name="control"
 x:Class="WP81ControlsDemo.NumberPicker"
 xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:local="using:WP81ControlsDemo"
 xmlns:d="https://schemas.microsoft.com/expression/blend/2008"
 xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006"
 mc:Ignorable="d"
 d:DesignHeight="50"
 d:DesignWidth="300">
 <Border
 BorderBrush="#FFF2F2F2" 
 BorderThickness="2"
 Width="{Binding ElementName=control, Path=Width}"
 Height="{Binding ElementName=control, Path=Height}"
 >
 </Border>
 </UserControl>

#2 Layout the UI elements using Grid control

 <Grid HorizontalAlignment="Stretch" Background="White">
 <Grid.ColumnDefinitions>
 <ColumnDefinition Width="50"></ColumnDefinition>
 <ColumnDefinition Width="*"></ColumnDefinition>
 <ColumnDefinition Width="50"></ColumnDefinition>
 </Grid.ColumnDefinitions>
 <Border 
 BorderBrush="#FFF2F2F2" 
 BorderThickness="0,0,3,0"
 Tapped="Reduce_Tapped"
 >
 <TextBlock 
 FontSize="25" 
 Grid.Column="0"
 HorizontalAlignment="Center"
 VerticalAlignment="Center"
 Foreground="#FF72D3FF"
 
 >-</TextBlock>
 </Border>
 <TextBlock
 x:Name="content"
 FontSize="25" 
 Grid.Column="1"
 HorizontalAlignment="Center"
 VerticalAlignment="Center"
 Foreground="#FF72D3FF"
 >0</TextBlock>
 <Border 
 BorderBrush="#FFF2F2F2" 
 BorderThickness="2,0,0,0"
 Grid.Column="2"
 Tapped="Increase_Tapped"
 >
 <TextBlock 
 FontSize="25" 
 HorizontalAlignment="Center"
 VerticalAlignment="Center"
 Foreground="#FF72D3FF"
 >+</TextBlock>
 </Border>
 </Grid>

#3 code behind

 public sealed partial class NumberPicker : UserControl
 {
 public NumberPicker()
 {
 this.InitializeComponent();
 }
 private void Reduce_Tapped(object sender, TappedRoutedEventArgs e)
 {
 var currentValue = int.Parse(content.Text);
 
 if(currentValue == 0)
 {
 return;
 }
 content.Text = (currentValue - 1).ToString();
 }
 
 private void Increase_Tapped(object sender, TappedRoutedEventArgs e)
 {
 var currentValue = int.Parse(content.Text);
 content.Text = (currentValue + 1).ToString();
 }
 }