[XAML] - Create Your Own Number Picker Control for Windows Phone
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();
}
}
Anonymous
August 16, 2015
Nice. thanks for sharing.Anonymous
August 16, 2015
nice control. Seen a good 'integer looping' selector for universal apps?