Skip to content

docs: rework NumericUpDown examples in demo apps #4095

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Keboo merged 2 commits into from
Sep 25, 2026
+456 −43
Merged

docs: rework NumericUpDown examples in demo apps #4095

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c81951a
docs: rework NumericUpDown examples in demo apps
corvinsz Sep 14, 2026
f8945b2
docs: split NumericUpDown examples into granular XAML snippets
Keboo Sep 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 15 additions & 40 deletions src/MainDemo.Wpf/NumericUpDown.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:sharedNum="clr-namespace:MaterialDesignDemo.Shared.Examples.NumericUpDown;assembly=MaterialDesignDemo.Shared"
xmlns:smtx="clr-namespace:ShowMeTheXAML;assembly=ShowMeTheXAML"
d:DesignHeight="800"
d:DesignWidth="1000"
Expand All @@ -17,45 +18,19 @@
</ResourceDictionary>
</UserControl.Resources>

<DockPanel MinHeight="2000">
<TextBlock DockPanel.Dock="Top"
Style="{StaticResource MaterialDesignHeadline5TextBlock}"
Text="NumericUpDown Control" />
<StackPanel>
<TextBlock Style="{StaticResource MaterialDesignHeadline5TextBlock}" Text="NumericUpDown Control" />

<StackPanel Margin="0,16,0,0"
DockPanel.Dock="Top"
Orientation="Horizontal">

<smtx:XamlDisplay Margin="10,5"
VerticalAlignment="Top"
UniqueKey="numericUpDown_default">
<materialDesign:NumericUpDown />
</smtx:XamlDisplay>

<smtx:XamlDisplay Margin="10,5"
VerticalAlignment="Top"
UniqueKey="decimalUpDown_default">
<materialDesign:DecimalUpDown ValueStep="0.5" Minimum="-2.5" Maximum="2.5" />
</smtx:XamlDisplay>

<smtx:XamlDisplay Margin="10,5"
VerticalAlignment="Top"
UniqueKey="numericUpDown_customButtonContent">
<materialDesign:NumericUpDown>
<materialDesign:NumericUpDown.IncreaseContent>
<Border BorderBrush="{DynamicResource MaterialDesign.Brush.Foreground}" BorderThickness="1" CornerRadius="20">
<materialDesign:PackIcon Kind="ArrowUp" />
</Border>
</materialDesign:NumericUpDown.IncreaseContent>
<materialDesign:NumericUpDown.DecreaseContent>
<Border BorderBrush="{DynamicResource MaterialDesign.Brush.Foreground}" BorderThickness="1" CornerRadius="20">
<materialDesign:PackIcon Kind="ArrowDown" />
</Border>
</materialDesign:NumericUpDown.DecreaseContent>
</materialDesign:NumericUpDown>
</smtx:XamlDisplay>

</StackPanel>

</DockPanel>
<sharedNum:BasicUsageExample />
<Rectangle Style="{StaticResource PageSectionSeparator}" />
<sharedNum:MinMaxExample />
<Rectangle Style="{StaticResource PageSectionSeparator}" />
<sharedNum:ValueStepExample />
<Rectangle Style="{StaticResource PageSectionSeparator}" />
<sharedNum:TypesTableExample />
<Rectangle Style="{StaticResource PageSectionSeparator}" />
<sharedNum:KeyboardAndScrollExample />
<Rectangle Style="{StaticResource PageSectionSeparator}" />
<sharedNum:OverrideButtonsExample />
</StackPanel>
</UserControl>
7 changes: 5 additions & 2 deletions src/MaterialDesign3.Demo.Wpf/App.xaml.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
using MaterialDesign.Shared;
using System.Reflection;
using MaterialDesign.Shared;
using MaterialDesignThemes.Wpf;
using ShowMeTheXAML;

Expand Down Expand Up @@ -32,7 +33,9 @@ protected override void OnStartup(StartupEventArgs e)
XmlLanguage.GetLanguage(CultureInfo.CurrentCulture.IetfLanguageTag)));
*/

XamlDisplay.Init();
var sharedAssembly
= Assembly.GetAssembly(typeof(MaterialDesignDemo.Shared.IMaterialDesignDemoSharedAssemblyMarker));
XamlDisplay.Init(sharedAssembly);

// test setup for Persian culture settings
/*System.Threading.Thread.CurrentThread.CurrentCulture = new System.Globalization.CultureInfo("fa-Ir");
Expand Down
13 changes: 13 additions & 0 deletions src/MaterialDesign3.Demo.Wpf/Domain/MainWindowViewModel.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -491,6 +491,19 @@ private static IEnumerable<DemoItem> GenerateDemoItems(ISnackbarMessageQueue sna
],
selectedIcon: PackIconKind.Tooltip,
unselectedIcon: PackIconKind.Tooltip);

yield return new DemoItem(
nameof(NumericUpDown),
typeof(NumericUpDown),
[
DocumentationLink.DemoPageLink<NumericUpDown>(),
DocumentationLink.StyleLink(nameof(NumericUpDown)),
DocumentationLink.ApiLink<NumericUpDown>(),
DocumentationLink.ApiLink<DecimalUpDown>(),
DocumentationLink.ApiLink<UpDownBase>()
],
selectedIcon: PackIconKind.Counter,
unselectedIcon: PackIconKind.Counter);
}

private bool DemoItemsFilter(object obj)
Expand Down
2 changes: 1 addition & 1 deletion src/MaterialDesign3.Demo.Wpf/FieldsLineUp.xaml.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ private static void SetValue(Control control)
case TimePicker timePicker:
timePicker.SelectedTime = DateTime.Now;
break;
case NumericUpDown numericUpDown:
case MaterialDesignThemes.Wpf.NumericUpDown numericUpDown:
numericUpDown.Value = 0;
break;
default:
Expand Down
33 changes: 33 additions & 0 deletions src/MaterialDesign3.Demo.Wpf/NumericUpDown.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
<UserControl x:Class="MaterialDesign3Demo.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:sharedNum="clr-namespace:MaterialDesignDemo.Shared.Examples.NumericUpDown;assembly=MaterialDesignDemo.Shared"
xmlns:local="clr-namespace:MaterialDesign3Demo"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.NumericUpDown.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>

<StackPanel>
<TextBlock Style="{StaticResource MaterialDesignHeadline5TextBlock}" Text="NumericUpDown Control" />

<sharedNum:BasicUsageExample />
<Rectangle Style="{StaticResource PageSectionSeparator}" />
<sharedNum:MinMaxExample />
<Rectangle Style="{StaticResource PageSectionSeparator}" />
<sharedNum:ValueStepExample />
<Rectangle Style="{StaticResource PageSectionSeparator}" />
<sharedNum:TypesTableExample />
<Rectangle Style="{StaticResource PageSectionSeparator}" />
<sharedNum:KeyboardAndScrollExample />
<Rectangle Style="{StaticResource PageSectionSeparator}" />
<sharedNum:OverrideButtonsExample />
</StackPanel>
</UserControl>
9 changes: 9 additions & 0 deletions src/MaterialDesign3.Demo.Wpf/NumericUpDown.xaml.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
namespace MaterialDesign3Demo;

public partial class NumericUpDown : UserControl
{
public NumericUpDown()
{
InitializeComponent();
}
}
54 changes: 54 additions & 0 deletions src/MaterialDesignDemo.Shared/Examples/NumericUpDown/BasicUsageExample.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
<UserControl x:Class="MaterialDesignDemo.Shared.Examples.NumericUpDown.BasicUsageExample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:smtx="clr-namespace:ShowMeTheXAML;assembly=ShowMeTheXAML"
d:DesignHeight="400"
d:DesignWidth="800"
mc:Ignorable="d">

<materialDesign:Card Padding="16">
<StackPanel>
<TextBlock Margin="0,0,0,8"
Style="{StaticResource MaterialDesignHeadline6TextBlock}"
Text="Basic usage" />

<TextBlock Margin="0,0,0,16"
Text="NumericUpDown is used to allow users to pick or type numeric values with optional step/limits."
TextWrapping="Wrap" />

<WrapPanel Margin="0,0,0,8">
<StackPanel Margin="8">
<TextBlock Text="Default" />
<smtx:XamlDisplay UniqueKey="NumericUpDown_BasicUsage_1">
<materialDesign:NumericUpDown Width="120" />
</smtx:XamlDisplay>
</StackPanel>

<StackPanel Margin="8">
<TextBlock Text="Floating" />
<smtx:XamlDisplay UniqueKey="NumericUpDown_BasicUsage_2">
<materialDesign:NumericUpDown Width="150" Style="{StaticResource MaterialDesignFloatingHintNumericUpDown}" />
</smtx:XamlDisplay>

</StackPanel>

<StackPanel Margin="8">
<TextBlock Text="Filled" />
<smtx:XamlDisplay UniqueKey="NumericUpDown_BasicUsage_3">
<materialDesign:NumericUpDown Width="150" Style="{StaticResource MaterialDesignFilledNumericUpDown}" />
</smtx:XamlDisplay>
</StackPanel>

<StackPanel Margin="8">
<TextBlock Text="Outlined" />
<smtx:XamlDisplay UniqueKey="NumericUpDown_BasicUsage_4">
<materialDesign:NumericUpDown Width="150" Style="{StaticResource MaterialDesignOutlinedNumericUpDown}" />
</smtx:XamlDisplay>
</StackPanel>
</WrapPanel>
</StackPanel>
</materialDesign:Card>
</UserControl>
9 changes: 9 additions & 0 deletions src/MaterialDesignDemo.Shared/Examples/NumericUpDown/BasicUsageExample.xaml.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
namespace MaterialDesignDemo.Shared.Examples.NumericUpDown;

public partial class BasicUsageExample : UserControl
{
public BasicUsageExample()
{
InitializeComponent();
}
}
43 changes: 43 additions & 0 deletions src/MaterialDesignDemo.Shared/Examples/NumericUpDown/KeyboardAndScrollExample.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
<UserControl x:Class="MaterialDesignDemo.Shared.Examples.NumericUpDown.KeyboardAndScrollExample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:smtx="clr-namespace:ShowMeTheXAML;assembly=ShowMeTheXAML"
d:DesignHeight="220"
d:DesignWidth="700"
mc:Ignorable="d">
<materialDesign:Card Padding="16">
<StackPanel>
<TextBlock Margin="0,0,0,8"
Style="{StaticResource MaterialDesignHeadline6TextBlock}"
Text="Increment/Decrement with keyboard and mouse wheel" />
<TextBlock Margin="0,0,0,12"
Text="Allow changing value with Up/Down arrow keys and, when focused, mouse wheel scrolling (AllowChangeOnScroll=&quot;True&quot;)."
TextWrapping="Wrap" />

<WrapPanel>
<StackPanel Margin="8">
<TextBlock Text="Use arrows or wheel" />
<smtx:XamlDisplay UniqueKey="NumericUpDown_KeyboardAndScroll_1">
<materialDesign:NumericUpDown Width="140"
AllowChangeOnScroll="True"
Value="10" />
</smtx:XamlDisplay>

</StackPanel>

<StackPanel Margin="8">
<TextBlock Text="Decimal example" />
<smtx:XamlDisplay UniqueKey="NumericUpDown_KeyboardAndScroll_2">
<materialDesign:DecimalUpDown Width="140"
AllowChangeOnScroll="True"
ValueStep="0.25"
Value="1.5" />
</smtx:XamlDisplay>
</StackPanel>
</WrapPanel>
</StackPanel>
</materialDesign:Card>
</UserControl>
9 changes: 9 additions & 0 deletions src/MaterialDesignDemo.Shared/Examples/NumericUpDown/KeyboardAndScrollExample.xaml.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
namespace MaterialDesignDemo.Shared.Examples.NumericUpDown;

public partial class KeyboardAndScrollExample : UserControl
{
public KeyboardAndScrollExample()
{
InitializeComponent();
}
}
32 changes: 32 additions & 0 deletions src/MaterialDesignDemo.Shared/Examples/NumericUpDown/MinMaxExample.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<UserControl x:Class="MaterialDesignDemo.Shared.Examples.NumericUpDown.MinMaxExample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:smtx="clr-namespace:ShowMeTheXAML;assembly=ShowMeTheXAML"
mc:Ignorable="d">
<materialDesign:Card Padding="16">
<StackPanel>
<TextBlock Margin="0,0,0,8"
Style="{StaticResource MaterialDesignHeadline6TextBlock}"
Text="Minimum/Maximum" />

<TextBlock Margin="0,0,0,16"
Text="Use the Minimum or Maximum property to set boundaries."
TextWrapping="Wrap" />

<WrapPanel Margin="0,0,0,8">
<StackPanel Margin="8">
<TextBlock Text="Range 0-10" />
<smtx:XamlDisplay UniqueKey="NumericUpDown_MinMaxExample">
<materialDesign:NumericUpDown Width="120"
Maximum="10"
Minimum="0"
Value="5" />
</smtx:XamlDisplay>
</StackPanel>
</WrapPanel>
</StackPanel>
</materialDesign:Card>
</UserControl>
9 changes: 9 additions & 0 deletions src/MaterialDesignDemo.Shared/Examples/NumericUpDown/MinMaxExample.xaml.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
namespace MaterialDesignDemo.Shared.Examples.NumericUpDown;

public partial class MinMaxExample : UserControl
{
public MinMaxExample()
{
InitializeComponent();
}
}
60 changes: 60 additions & 0 deletions src/MaterialDesignDemo.Shared/Examples/NumericUpDown/OverrideButtonsExample.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
<UserControl x:Class="MaterialDesignDemo.Shared.Examples.NumericUpDown.OverrideButtonsExample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:smtx="clr-namespace:ShowMeTheXAML;assembly=ShowMeTheXAML"
d:DesignHeight="240"
d:DesignWidth="700"
mc:Ignorable="d">
<materialDesign:Card Padding="16">
<StackPanel>
<TextBlock Margin="0,0,0,8"
Style="{StaticResource MaterialDesignHeadline6TextBlock}"
Text="Custom button content" />
<TextBlock Margin="0,0,0,12"
Text="You can change the content of the IncreaseContent and DecreaseContent buttons."
TextWrapping="Wrap" />

<WrapPanel>
<StackPanel Margin="8">
<TextBlock Text="Custom icons" />
<smtx:XamlDisplay UniqueKey="NumericUpDown_OverrideButtonsExample_1">
<materialDesign:NumericUpDown>
<materialDesign:NumericUpDown.IncreaseContent>
<Border BorderBrush="{DynamicResource MaterialDesign.Brush.Foreground}"
BorderThickness="1"
CornerRadius="20">
<materialDesign:PackIcon Kind="ArrowUp" />
</Border>
</materialDesign:NumericUpDown.IncreaseContent>
<materialDesign:NumericUpDown.DecreaseContent>
<Border BorderBrush="{DynamicResource MaterialDesign.Brush.Foreground}"
BorderThickness="1"
CornerRadius="20">
<materialDesign:PackIcon Kind="ArrowDown" />
</Border>
</materialDesign:NumericUpDown.DecreaseContent>
</materialDesign:NumericUpDown>
</smtx:XamlDisplay>

</StackPanel>

<StackPanel Margin="8">
<TextBlock Text="Custom text" />
<smtx:XamlDisplay UniqueKey="NumericUpDown_OverrideButtonsExample_2">
<materialDesign:NumericUpDown Width="150">
<materialDesign:NumericUpDown.IncreaseContent>
<TextBlock Padding="4" Text="Inc" />
</materialDesign:NumericUpDown.IncreaseContent>
<materialDesign:NumericUpDown.DecreaseContent>
<TextBlock Padding="4" Text="Dec" />
</materialDesign:NumericUpDown.DecreaseContent>
</materialDesign:NumericUpDown>
</smtx:XamlDisplay>
</StackPanel>
</WrapPanel>
</StackPanel>
</materialDesign:Card>
</UserControl>
9 changes: 9 additions & 0 deletions src/MaterialDesignDemo.Shared/Examples/NumericUpDown/OverrideButtonsExample.xaml.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
namespace MaterialDesignDemo.Shared.Examples.NumericUpDown;

public partial class OverrideButtonsExample : UserControl
{
public OverrideButtonsExample()
{
InitializeComponent();
}
}
Loading
Loading