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.
<UserControlx:Name="control"x:Class="WP81ControlsDemo.NumberPicker"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="using:WP81ControlsDemo"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"mc:Ignorable="d"d:DesignHeight="50"d:DesignWidth="300"><BorderBorderBrush="#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
<GridHorizontalAlignment="Stretch"Background="White"><Grid.ColumnDefinitions><ColumnDefinitionWidth="50"></ColumnDefinition><ColumnDefinitionWidth="*"></ColumnDefinition><ColumnDefinitionWidth="50"></ColumnDefinition></Grid.ColumnDefinitions><BorderBorderBrush="#FFF2F2F2"BorderThickness="0,0,3,0"Tapped="Reduce_Tapped"><TextBlockFontSize="25"Grid.Column="0"HorizontalAlignment="Center"VerticalAlignment="Center"Foreground="#FF72D3FF">-</TextBlock></Border><TextBlockx:Name="content"FontSize="25"Grid.Column="1"HorizontalAlignment="Center"VerticalAlignment="Center"Foreground="#FF72D3FF">0</TextBlock><BorderBorderBrush="#FFF2F2F2"BorderThickness="2,0,0,0"Grid.Column="2"Tapped="Increase_Tapped"><TextBlockFontSize="25"HorizontalAlignment="Center"VerticalAlignment="Center"Foreground="#FF72D3FF">+</TextBlock></Border></Grid>
#3 code behind
publicsealedpartialclassNumberPicker : UserControl {publicNumberPicker() {this.InitializeComponent(); }privatevoidReduce_Tapped(object sender, TappedRoutedEventArgs e) {var currentValue = int.Parse(content.Text);if(currentValue == 0) {return; } content.Text = (currentValue - 1).ToString(); }privatevoidIncrease_Tapped(object sender, TappedRoutedEventArgs e) {var currentValue = int.Parse(content.Text); content.Text = (currentValue + 1).ToString(); } }