Where is the WPF Numeric UpDown control?
WpfControlsNumericupdownUpdownWpf Problem Overview
Getting into the first serious WPF project. It seems like there are a lot of basic controls flat out missing. Specifically, I am looking for the Numeric UpDown control. Was there an out of band release that I missed? Really don't feel like writing my own control.
I do not want to use the WindowsFormHost and plop a WinForm ctl on it. I want it to be fully WPF without any legacy junk.
Thanks
Wpf Solutions
Solution 1 - Wpf
Simply use the IntegerUpDown control in the Extended.Wpf.Toolkit
You can use it like this:
-
Add to your XAML the following namespace:
xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit" -
In your XAML where you want the control use:
<xctk:IntegerUpDown Name="myUpDownControl" />
Solution 2 - Wpf
I made my own;
the xaml
<Grid Height="23" Margin="152,63,11,0" VerticalAlignment="Top">
<TextBox x:Name="txtNum" x:FieldModifier="private" Text="0" TextChanged="txtNum_TextChanged" Margin="3,2,13,3" />
<Button x:Name="cmdUp" x:FieldModifier="private" FontSize="10" Padding="0,-4,0,0" Content="▲" Width="10" Click="cmdUp_Click" Margin="33,2,1,13" />
<Button x:Name="cmdDown" x:FieldModifier="private" FontSize="10" Padding="0,-4,0,0" Content="▼" Width="10" Click="cmdDown_Click" Margin="33,12,1,3" />
</Grid>
and the code behind
private int _numValue = 0;
public int NumValue
{
get { return _numValue; }
set
{
_numValue = value;
txtNum.Text = value.ToString();
}
}
public NumberUpDown()
{
InitializeComponent();
txtNum.Text = _numValue.ToString();
}
private void cmdUp_Click(object sender, RoutedEventArgs e)
{
NumValue++;
}
private void cmdDown_Click(object sender, RoutedEventArgs e)
{
NumValue--;
}
private void txtNum_TextChanged(object sender, TextChangedEventArgs e)
{
if (txtNum == null)
{
return;
}
if (!int.TryParse(txtNum.Text, out _numValue))
txtNum.Text = _numValue.ToString();
}
Solution 3 - Wpf
This is example of my own UserControl with Up and Down key catching.
Xaml code:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="13" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="13" />
<RowDefinition Height="13" />
</Grid.RowDefinitions>
<TextBox Name="NUDTextBox" Grid.Column="0" Grid.Row="0" Grid.RowSpan="2" TextAlignment="Right" PreviewKeyDown="NUDTextBox_PreviewKeyDown" PreviewKeyUp="NUDTextBox_PreviewKeyUp" TextChanged="NUDTextBox_TextChanged"/>
<RepeatButton Name="NUDButtonUP" Grid.Column="1" Grid.Row="0" FontSize="8" FontFamily="Marlett" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" Click="NUDButtonUP_Click">5</RepeatButton>
<RepeatButton Name="NUDButtonDown" Grid.Column="1" Grid.Row="1" FontSize="8" FontFamily="Marlett" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" Height="13" VerticalAlignment="Bottom" Click="NUDButtonDown_Click">6</RepeatButton>
</Grid>
And the code:
public partial class NumericUpDown : UserControl
{
int minvalue = 0,
maxvalue = 100,
startvalue = 10;
public NumericUpDown()
{
InitializeComponent();
NUDTextBox.Text = startvalue.ToString();
}
private void NUDButtonUP_Click(object sender, RoutedEventArgs e)
{
int number;
if (NUDTextBox.Text != "") number = Convert.ToInt32(NUDTextBox.Text);
else number = 0;
if (number < maxvalue)
NUDTextBox.Text = Convert.ToString(number + 1);
}
private void NUDButtonDown_Click(object sender, RoutedEventArgs e)
{
int number;
if (NUDTextBox.Text != "") number = Convert.ToInt32(NUDTextBox.Text);
else number = 0;
if (number > minvalue)
NUDTextBox.Text = Convert.ToString(number - 1);
}
private void NUDTextBox_PreviewKeyDown(object sender, KeyEventArgs e)
{
if (e.Key == Key.Up)
{
NUDButtonUP.RaiseEvent(new RoutedEventArgs(Button.ClickEvent));
typeof(Button).GetMethod("set_IsPressed", BindingFlags.Instance | BindingFlags.NonPublic).Invoke(NUDButtonUP, new object[] { true });
}
if (e.Key == Key.Down)
{
NUDButtonDown.RaiseEvent(new RoutedEventArgs(Button.ClickEvent));
typeof(Button).GetMethod("set_IsPressed", BindingFlags.Instance | BindingFlags.NonPublic).Invoke(NUDButtonDown, new object[] { true });
}
}
private void NUDTextBox_PreviewKeyUp(object sender, KeyEventArgs e)
{
if (e.Key == Key.Up)
typeof(Button).GetMethod("set_IsPressed", BindingFlags.Instance | BindingFlags.NonPublic).Invoke(NUDButtonUP, new object[] { false });
if (e.Key == Key.Down)
typeof(Button).GetMethod("set_IsPressed", BindingFlags.Instance | BindingFlags.NonPublic).Invoke(NUDButtonDown, new object[] { false });
}
private void NUDTextBox_TextChanged(object sender, TextChangedEventArgs e)
{
int number = 0;
if (NUDTextBox.Text!="")
if (!int.TryParse(NUDTextBox.Text, out number)) NUDTextBox.Text = startvalue.ToString();
if (number > maxvalue) NUDTextBox.Text = maxvalue.ToString();
if (number < minvalue) NUDTextBox.Text = minvalue.ToString();
NUDTextBox.SelectionStart = NUDTextBox.Text.Length;
}
}
Solution 4 - Wpf
The given answers are OK. However, I wanted the buttons to auto hide, when mouse leave the control. Here is my code based on vercin answer above:
Style
<Style TargetType="{x:Type v:IntegerTextBox}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type v:IntegerTextBox}">
<Grid Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBox Name="tbmain" Grid.ColumnSpan="2" Grid.RowSpan="2"
Text="{Binding Value, Mode=TwoWay, NotifyOnSourceUpdated=True,
NotifyOnValidationError=True, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type v:IntegerTextBox}}}"
Style="{StaticResource ValidationStyle}" />
<RepeatButton Name="PART_UpButton" BorderThickness="0" Grid.Column="1" Grid.Row="0"
Width="13" Background="Transparent">
<Path Fill="Black" Data="M 0 3 L 6 3 L 3 0 Z"/>
</RepeatButton>
<RepeatButton Name="PART_DownButton" BorderThickness="0" Grid.Column="1" Grid.Row="1"
Width="13" Background="Transparent">
<Path Fill="Black" Data="M 0 0 L 3 3 L 6 0 Z"/>
</RepeatButton>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="False">
<Setter Property="Visibility" TargetName="PART_UpButton" Value="Collapsed"/>
<Setter Property="Visibility" TargetName="PART_DownButton" Value="Collapsed"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Code
public partial class IntegerTextBox : UserControl
{
public IntegerTextBox()
{
InitializeComponent();
}
public int Maximum
{
get { return (int)GetValue(MaximumProperty); }
set { SetValue(MaximumProperty, value); }
}
public readonly static DependencyProperty MaximumProperty = DependencyProperty.Register(
"Maximum", typeof(int), typeof(IntegerTextBox), new UIPropertyMetadata(int.MaxValue));
public int Minimum
{
get { return (int)GetValue(MinimumProperty); }
set { SetValue(MinimumProperty, value); }
}
public readonly static DependencyProperty MinimumProperty = DependencyProperty.Register(
"Minimum", typeof(int), typeof(IntegerTextBox), new UIPropertyMetadata(int.MinValue));
public int Value
{
get { return (int)GetValue(ValueProperty); }
set { SetCurrentValue(ValueProperty, value); }
}
public readonly static DependencyProperty ValueProperty = DependencyProperty.Register(
"Value", typeof(int), typeof(IntegerTextBox), new UIPropertyMetadata(0, (o,e)=>
{
IntegerTextBox tb = (IntegerTextBox)o;
tb.RaiseValueChangedEvent(e);
}));
public event EventHandler<DependencyPropertyChangedEventArgs> ValueChanged;
private void RaiseValueChangedEvent(DependencyPropertyChangedEventArgs e)
{
ValueChanged?.Invoke(this, e);
}
public int Step
{
get { return (int)GetValue(StepProperty); }
set { SetValue(StepProperty, value); }
}
public readonly static DependencyProperty StepProperty = DependencyProperty.Register(
"Step", typeof(int), typeof(IntegerTextBox), new UIPropertyMetadata(1));
RepeatButton _UpButton;
RepeatButton _DownButton;
public override void OnApplyTemplate()
{
base.OnApplyTemplate();
_UpButton = Template.FindName("PART_UpButton", this) as RepeatButton;
_DownButton = Template.FindName("PART_DownButton", this) as RepeatButton;
_UpButton.Click += btup_Click;
_DownButton.Click += btdown_Click;
}
private void btup_Click(object sender, RoutedEventArgs e)
{
if (Value < Maximum)
{
Value += Step;
if (Value > Maximum)
Value = Maximum;
}
}
private void btdown_Click(object sender, RoutedEventArgs e)
{
if (Value > Minimum)
{
Value -= Step;
if (Value < Minimum)
Value = Minimum;
}
}
}
Solution 5 - Wpf
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:numericButton2">
<Style TargetType="{x:Type local:NumericUpDown}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:NumericUpDown}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<RepeatButton Grid.Row="0" Name="Part_UpButton"/>
<ContentPresenter Grid.Row="1"></ContentPresenter>
<RepeatButton Grid.Row="2" Name="Part_DownButton"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
<Window x:Class="numericButton2.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:numericButton2"
Title="MainWindow" Height="350" Width="525">
<Grid>
<local:NumericUpDown Margin="181,94,253,161" x:Name="ufuk" StepValue="4" Minimum="0" Maximum="20">
</local:NumericUpDown>
<TextBlock Margin="211,112,279,0" Text="{Binding ElementName=ufuk, Path=Value}" Height="20" VerticalAlignment="Top"></TextBlock>
</Grid>
</Window>
public class NumericUpDown : Control
{
private RepeatButton _UpButton;
private RepeatButton _DownButton;
public readonly static DependencyProperty MaximumProperty;
public readonly static DependencyProperty MinimumProperty;
public readonly static DependencyProperty ValueProperty;
public readonly static DependencyProperty StepProperty;
static NumericUpDown()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(NumericUpDown), new FrameworkPropertyMetadata(typeof(NumericUpDown)));
MaximumProperty = DependencyProperty.Register("Maximum", typeof(int), typeof(NumericUpDown), new UIPropertyMetadata(10));
MinimumProperty = DependencyProperty.Register("Minimum", typeof(int), typeof(NumericUpDown), new UIPropertyMetadata(0));
StepProperty = DependencyProperty.Register("StepValue", typeof(int), typeof(NumericUpDown), new FrameworkPropertyMetadata(5));
ValueProperty = DependencyProperty.Register("Value", typeof(int), typeof(NumericUpDown), new FrameworkPropertyMetadata(0));
}
#region DpAccessior
public int Maximum
{
get { return (int)GetValue(MaximumProperty); }
set { SetValue(MaximumProperty, value); }
}
public int Minimum
{
get { return (int)GetValue(MinimumProperty); }
set { SetValue(MinimumProperty, value); }
}
public int Value
{
get { return (int)GetValue(ValueProperty); }
set { SetCurrentValue(ValueProperty, value); }
}
public int StepValue
{
get { return (int)GetValue(StepProperty); }
set { SetValue(StepProperty, value); }
}
#endregion
public override void OnApplyTemplate()
{
base.OnApplyTemplate();
_UpButton = Template.FindName("Part_UpButton", this) as RepeatButton;
_DownButton = Template.FindName("Part_DownButton", this) as RepeatButton;
_UpButton.Click += _UpButton_Click;
_DownButton.Click += _DownButton_Click;
}
void _DownButton_Click(object sender, RoutedEventArgs e)
{
if (Value > Minimum)
{
Value -= StepValue;
if (Value < Minimum)
Value = Minimum;
}
}
void _UpButton_Click(object sender, RoutedEventArgs e)
{
if (Value < Maximum)
{
Value += StepValue;
if (Value > Maximum)
Value = Maximum;
}
}
}
Solution 6 - Wpf
Let's enjoy some hacky things:
Here is a Style of Slider as a NumericUpDown, simple and easy to use, without any hidden code or third party library.
<Style TargetType="{x:Type Slider}">
<Style.Resources>
<Style x:Key="RepeatButtonStyle" TargetType="{x:Type RepeatButton}">
<Setter Property="Focusable" Value="false" />
<Setter Property="IsTabStop" Value="false" />
<Setter Property="Padding" Value="0" />
<Setter Property="Width" Value="20" />
</Style>
</Style.Resources>
<Setter Property="Stylus.IsPressAndHoldEnabled" Value="false" />
<Setter Property="SmallChange" Value="1" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Slider}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBox Grid.RowSpan="2" Height="Auto"
Margin="0" Padding="0"
VerticalAlignment="Stretch" VerticalContentAlignment="Center"
Text="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=Value}">
<TextBox.InputBindings>
<KeyBinding Gesture="Up" Command="{x:Static Slider.IncreaseSmall}" />
<KeyBinding Gesture="Down" Command="{x:Static Slider.DecreaseSmall}" />
<KeyBinding Gesture="PageUp" Command="{x:Static Slider.IncreaseLarge}" />
<KeyBinding Gesture="PageDown" Command="{x:Static Slider.DecreaseLarge}" />
</TextBox.InputBindings>
</TextBox>
<RepeatButton Grid.Row="0" Grid.Column="1"
Command="{x:Static Slider.IncreaseSmall}"
Style="{StaticResource RepeatButtonStyle}">
<Path Data="M4,0 L0,4 8,4 Z" Fill="Black" />
</RepeatButton>
<RepeatButton Grid.Row="1" Grid.Column="1"
Command="{x:Static Slider.DecreaseSmall}"
Style="{StaticResource RepeatButtonStyle}">
<Path Data="M0,0 L4,4 8,0 Z" Fill="Black" />
</RepeatButton>
<Border x:Name="TrackBackground" Visibility="Collapsed">
<Rectangle x:Name="PART_SelectionRange" Visibility="Collapsed" />
</Border>
<Thumb x:Name="Thumb" Visibility="Collapsed" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
If you want apply input restrictions on TextBox indeed, try this:
public static class InputLimit
{
public static string GetDecimalValueProxy(TextBox obj) => (string)obj.GetValue(DecimalValueProxyProperty);
public static void SetDecimalValueProxy(TextBox obj, string value) => obj.SetValue(DecimalValueProxyProperty, value);
// Using a DependencyProperty as the backing store for DecimalValueProxy. This enables animation, styling, binding, etc...
public static readonly DependencyProperty DecimalValueProxyProperty =
DependencyProperty.RegisterAttached("DecimalValueProxy", typeof(string), typeof(InputLimit),
new FrameworkPropertyMetadata("0", FrameworkPropertyMetadataOptions.BindsTwoWayByDefault, null, CoerceDecimalValueProxy));
private static object CoerceDecimalValueProxy(DependencyObject d, object baseValue)
{
if (decimal.TryParse(baseValue as string, out _)) return baseValue;
return DependencyProperty.UnsetValue;
}
}
And modify xaml TextBox part to:
<TextBox Grid.RowSpan="2" Height="Auto"
Margin="0" Padding="0"
VerticalAlignment="Stretch" VerticalContentAlignment="Center"
local:InputLimit.DecimalValueProxy="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=Value}"
Text="{Binding RelativeSource={RelativeSource Self}, Path=(local:InputLimit.DecimalValueProxy), UpdateSourceTrigger=PropertyChanged}">
EDIT:
But the above code has a nasty bug...
For example:
<Slider ... Value="{Binding SomeViewModelProperty}"/>
You will find that SomeViewModelProperty can will be assigned the value that out of range by TextBox inputs. Because the out of range value will be coerced to in range value, but it won't update to binding source, the source property will be set by a uncoerced value.
If you need to use Binding on Value, I strongly recommend you to wrap it as a custom control and add the following code in it.
public override void OnApplyTemplate()
{
base.OnApplyTemplate();
//hey, notice add x:Name="PART_InputTextBox" on TextBox in template,
//and set the NotifyOnSourceUpdated as True on Text property Binding
var inputTextBox = GetTemplateChild("PART_InputTextBox") as TextBox;
if (inputTextBox != null)
{
inputTextBoxBindingExpression = inputTextBox.GetBindingExpression(TextBox.TextProperty);
inputTextBox.SourceUpdated += InputTextBox_SourceUpdated;
}
}
//it will block an infinite loop that can cause stack overflow
bool updateSourceFlag = false;
private void InputTextBox_SourceUpdated(object sender, DataTransferEventArgs e)
{
if (e.Property == TextBox.TextProperty)
{
if (!updateSourceFlag)
{
updateSourceFlag = true;
//this line will reset the coerced value of Value on Value
inputTextBoxBindingExpression.UpdateSource();
updateSourceFlag = false;
}
}
}
Solution 7 - Wpf
Use VerticalScrollBar with the TextBlock control in WPF. In your code behind, add the following code:
In the constructor, define an event handler for the scrollbar:
scrollBar1.ValueChanged += new RoutedPropertyChangedEventHandler<double>(scrollBar1_ValueChanged);
scrollBar1.Minimum = 0;
scrollBar1.Maximum = 1;
scrollBar1.SmallChange = 0.1;
Then in the event handler, add:
void scrollBar1_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
FteHolderText.Text = scrollBar1.Value.ToString();
}
Here is the original snippet from my code... make necessary changes.. :)
public NewProjectPlan()
{
InitializeComponent();
this.Loaded += new RoutedEventHandler(NewProjectPlan_Loaded);
scrollBar1.ValueChanged += new RoutedPropertyChangedEventHandler<double>(scrollBar1_ValueChanged);
scrollBar1.Minimum = 0;
scrollBar1.Maximum = 1;
scrollBar1.SmallChange = 0.1;
// etc...
}
void scrollBar1_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
FteHolderText.Text = scrollBar1.Value.ToString();
}
Solution 8 - Wpf
You can use NumericUpDown control for WPF written by me as a part of WPFControls library.
Solution 9 - Wpf
Apologize for keep answering 9 years questions.
I have follow @Michael's answer and it works.
I do it as UserControl where I can drag and drop like a Controls elements. I use MaterialDesign Theme from Nuget to get the Chevron icon and button ripple effect.
The running NumericUpDown from Micheal with modification will be as below:-
The code for user control:-
TemplateNumericUpDown.xaml
<UserControl x:Class="UserControlTemplate.TemplateNumericUpDown"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:UserControlTemplate"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
mc:Ignorable="d" MinHeight="48">
<Grid Background="{DynamicResource {x:Static SystemColors.WindowFrameBrushKey}}">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="60"/>
</Grid.ColumnDefinitions>
<TextBox x:Name="txtNum" x:FieldModifier="private" Text="{Binding Path=NumValue}" TextChanged="TxtNum_TextChanged" FontSize="36" BorderThickness="0" VerticalAlignment="Center" Padding="5,0"/>
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="30*"/>
<RowDefinition Height="30*"/>
</Grid.RowDefinitions>
<Grid Background="#FF673AB7">
<Viewbox HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Height="Auto" Width="Auto">
<materialDesign:PackIcon Kind="ChevronUp" Foreground="White" Height="32.941" Width="32"/>
</Viewbox>
<Button x:Name="cmdUp" x:FieldModifier="private" Click="CmdUp_Click" Height="Auto" BorderBrush="{x:Null}" Background="{x:Null}"/>
</Grid>
<Grid Grid.Row="1" Background="#FF673AB7">
<Viewbox HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Height="Auto" Width="Auto">
<materialDesign:PackIcon Kind="ChevronDown" Foreground="White" Height="32.942" Width="32"/>
</Viewbox>
<Button x:Name="cmdDown" x:FieldModifier="private" Click="CmdDown_Click" Height="Auto" BorderBrush="{x:Null}" Background="{x:Null}"/>
</Grid>
</Grid>
</Grid>
</UserControl>
TemplateNumericUpDown.cs
using System.Windows;
using System.Windows.Controls;
namespace UserControlTemplate
{
/// <summary>
/// Interaction logic for TemplateNumericUpDown.xaml
/// </summary>
public partial class TemplateNumericUpDown : UserControl
{
private int _numValue = 0;
public TemplateNumericUpDown()
{
InitializeComponent();
txtNum.Text = _numValue.ToString();
}
public int NumValue
{
get { return _numValue; }
set
{
if (value >= 0)
{
_numValue = value;
txtNum.Text = value.ToString();
}
}
}
private void CmdUp_Click(object sender, RoutedEventArgs e)
{
NumValue++;
}
private void CmdDown_Click(object sender, RoutedEventArgs e)
{
NumValue--;
}
private void TxtNum_TextChanged(object sender, TextChangedEventArgs e)
{
if (txtNum == null)
{
return;
}
if (!int.TryParse(txtNum.Text, out _numValue))
txtNum.Text = _numValue.ToString();
}
}
}
On MyPageDesign.xaml, drag and drop created usercontrol will having <UserControlTemplate:TemplateNumericUpDown HorizontalAlignment="Left" Height="100" VerticalAlignment="Top" Width="100"/>
To get the value from the template, I use
string Value1 = JournalNumStart.NumValue;
string Value2 = JournalNumEnd.NumValue;
I'm not in good skill yet to binding the Height of the control based from FontSize element, so I set the from my page fontsize manually in usercontrol.
** Note:- I have change the "Archieve" name to Archive on my program =)
Solution 10 - Wpf
I have a naive solution but useful. Here is the code:
<Grid Name="TVGrid" Background="#7F000000"> <ScrollBar Background="Black" Orientation="Vertical" Height="35" HorizontalAlignment="Left" Margin="215,254,0,0" Minimum="0" Maximum="10" LargeChange="10" Value="{Binding ElementName=channeltext2, Path=Text}" x:Name="scroll" VerticalAlignment="Top" Width="12" RenderTransformOrigin="0.5,0.5" ValueChanged="scroll_ValueChanged" >
<ScrollBar.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="-180"/>
<TranslateTransform/>
</TransformGroup>
</ScrollBar.RenderTransform>
</ScrollBar>
<TextBox Name="channeltext" HorizontalContentAlignment="Center" FontSize="20" Background="Black" Foreground="White" Height="35" HorizontalAlignment="Left" Margin="147,254,0,0" VerticalAlignment="Top" Width="53" Text="0" />
<TextBox Name="channeltext2" Visibility="Hidden" HorizontalContentAlignment="Center" FontSize="20" Background="Black" Foreground="White" Height="35" HorizontalAlignment="Left" Margin="147,254,0,0" VerticalAlignment="Top" Width="53" Text="0" /> </Grid>
Solution 11 - Wpf
Here is another open source control that has many different input methods (mouse drag, mouse wheel, cursor keys, textbox editing), supports many data types and use cases:
Solution 12 - Wpf
This is a modification of another answer but with binding support
<UserControl x:Class="YourNamespace.Controls.NumericUpDown"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:NetReactorLM.Desktop.Controls"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<Grid VerticalAlignment="Top">
<TextBox x:Name="txtNum" x:FieldModifier="private" Text="0" TextChanged="txtNum_TextChanged" Margin="3,2,13,3" />
<Button x:Name="cmdUp" x:FieldModifier="private" FontSize="10" Padding="0,-4,0,0" Content="▲" Width="10" Click="cmdUp_Click" Margin="33,2,1,13" />
<Button x:Name="cmdDown" x:FieldModifier="private" FontSize="10" Padding="0,-4,0,0" Content="▼" Width="10" Click="cmdDown_Click" Margin="33,12,1,3" />
</Grid>
</UserControl>
using System.Windows;
using System.Windows.Controls;
namespace YourNamespace.Controls
{
public partial class NumericUpDown : UserControl
{
public static readonly DependencyProperty ValueProperty = DependencyProperty.Register(
"Value", typeof(int), typeof(NumericUpDown), new PropertyMetadata(default(int)));
public int Value
{
get { return (int) GetValue(ValueProperty); }
set
{
SetValue(ValueProperty, value);
txtNum.Text = value.ToString();
}
}
public NumericUpDown()
{
InitializeComponent();
txtNum.Text = Value.ToString();
}
private void cmdUp_Click(object sender, RoutedEventArgs e)
{
Value++;
}
private void cmdDown_Click(object sender, RoutedEventArgs e)
{
Value--;
}
private void txtNum_TextChanged(object sender, TextChangedEventArgs e)
{
if (txtNum == null)
{
return;
}
if (!int.TryParse(txtNum.Text, out var val))
{
Value = val;
txtNum.Text = val.ToString();
}
}
}
}
Solution 13 - Wpf
Just a pragmatic to do sample:
-Right click your Project (under Solution), select "Manage nuget Packages..."
-In Menu click Browse Tab search for "wpftoolkit", select "Extended.Wpf.Toolkit"
-Install it!
-Right click in your User Control Toolbox, select "Add Tab.." and name it "WPF Toolkit"
-Right click on the new "WPF Toolkit" Tab, select "Choose items..."
-In Menu click "Browse..." Button, look for nugets DLL folder, select all
"...\packages\Extended.Wpf.Toolkit.3.5.0\lib\net40\*.dll"
Ignore Warnings about some DLLs may not containing user controls!
Ready :)
Solution 14 - Wpf
Go to NugetPackage manager of you project-> Browse and search for mahApps.Metro -> install package into you project. You will see Reference added: MahApps.Metro. Then in you XAML code add:
"xmlns:mah="http://metro.mahapps.com/winfx/xaml/controls"</code>
Where you want to use your object add:
<mah:NumericUpDown x:Name="NumericUpDown" ... />
Enjoy the full extensibility of the object (Bindings, triggers and so on...).
Solution 15 - Wpf
Free version of Extended.Wpf.Toolkit doesn't support .net core and .net
You can use HandyControl, it has a NumericUpDown control and works good in Wpf and .net 5.
Solution 16 - Wpf
You can use "NumericUpDown".
<mah:NumericUpDown MinWidth="70" Height="35" Minimum="0" Maximum="10000" Interval="1" />
Here is the link https://mahapps.com/docs/controls/numericupdown