Skip to content

feat(controls): Implement SpinButtonPlacementMode.Compact for NumberBox #1709

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
pomianowski merged 5 commits into from
May 4, 2026
Merged

feat(controls): Implement SpinButtonPlacementMode.Compact for NumberBox #1709

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f3fcab0
Gallery: add NumberBox sample with all spin button placement modes
chucker May 3, 2026
921b6db
NumberBox: add PART_CompactIncrementDecrementButton button
chucker May 3, 2026
4cc0364
NumberBox: add a flyout for compact mode
chucker May 3, 2026
a1dd8a3
Gallery: change the wording back to "a spin button", which is how Win…
chucker May 3, 2026
6262369
fix: Adjust height according to label
pomianowski May 4, 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
31 changes: 30 additions & 1 deletion src/Wpf.Ui.Gallery/ViewModels/Pages/Text/NumberBoxViewModel.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,35 @@
// Copyright (C) Leszek Pomianowski and WPF UI Contributors.
// All Rights Reserved.

using Wpf.Ui.Controls;

namespace Wpf.Ui.Gallery.ViewModels.Pages.Text;

public partial class NumberBoxViewModel : ViewModel;
public partial class NumberBoxViewModel : ViewModel
{
private int _numberBoxSpinButtonPlacementModeSelectedIndex = 2;

public int NumberBoxSpinButtonPlacementModeSelectedIndex
{
get => _numberBoxSpinButtonPlacementModeSelectedIndex;
set
{
_ = SetProperty(ref _numberBoxSpinButtonPlacementModeSelectedIndex, value);

UpdateSpinButtonPlacementMode(value);
}
}

[ObservableProperty]
private NumberBoxSpinButtonPlacementMode _spinButtonPlacementMode = NumberBoxSpinButtonPlacementMode.Inline;

private void UpdateSpinButtonPlacementMode(int placementModeIndex)
{
SpinButtonPlacementMode = placementModeIndex switch
{
0 => NumberBoxSpinButtonPlacementMode.Hidden,
1 => NumberBoxSpinButtonPlacementMode.Compact,
_ => NumberBoxSpinButtonPlacementMode.Inline,
};
}
}
38 changes: 36 additions & 2 deletions src/Wpf.Ui.Gallery/Views/Pages/Text/NumberBoxPage.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:Wpf.Ui.Gallery.Views.Pages.Text"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:system="clr-namespace:System;assembly=System.Runtime"
xmlns:ui="http://schemas.lepo.co/wpfui/2022/xaml"
Title="NumberBoxPage"
controls:PageControlDocumentation.DocumentationType="{x:Type ui:NumberBox}"
Expand All @@ -27,6 +26,41 @@
<ui:NumberBox PlaceholderText="Enter your age" />
</controls:ControlExample>

<controls:ControlExample
Margin="0,36,0,0"
HeaderText="A NumberBox with a spin button."
XamlCode="&lt;ui:NumberBox PlaceholderText=&quot;Enter your age&quot; /&gt;">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>

<ui:NumberBox
Margin="0,23,0,0"
Icon="{ui:SymbolIcon NumberSymbolSquare24}"
LargeChange="2.25"
Maximum="10"
Minimum="-10"
PlaceholderText="Enter your age"
SmallChange="0.25"
SpinButtonPlacementMode="{Binding ViewModel.SpinButtonPlacementMode}"
Value="1.50" />

<StackPanel
Grid.Column="1"
Margin="12,0,0,0"
VerticalAlignment="Top">
<Label Content="Spin button placement mode" Target="{Binding ElementName=SpinButtonPlacementModeComboBox}" />
<ComboBox x:Name="SpinButtonPlacementModeComboBox" SelectedIndex="{Binding ViewModel.NumberBoxSpinButtonPlacementModeSelectedIndex, Mode=TwoWay}">
<ComboBoxItem Content="Hidden" />
<ComboBoxItem Content="Compact" />
<ComboBoxItem Content="Inline" />
</ComboBox>
</StackPanel>
</Grid>
</controls:ControlExample>

<controls:ControlExample
Margin="0,36,0,0"
HeaderText="WPF UI NumberBox with icon."
Expand Down Expand Up @@ -56,4 +90,4 @@
Value="12" />
</controls:ControlExample>
</StackPanel>
</Page>
</Page>
17 changes: 16 additions & 1 deletion src/Wpf.Ui/Controls/NumberBox/NumberBox.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,13 @@ public partial class NumberBox : Wpf.Ui.Controls.TextBox
{
// Template part names
private const string PART_ClearButton = nameof(PART_ClearButton);
private const string PART_CompactIncrementDecrementButton = nameof(PART_CompactIncrementDecrementButton);
private const string PART_CompactIncrementDecrementFlyout = nameof(PART_CompactIncrementDecrementFlyout);
private const string PART_CompactIncrementButton = nameof(PART_CompactIncrementButton);
private const string PART_CompactDecrementButton = nameof(PART_CompactDecrementButton);
private const string PART_InlineIncrementButton = nameof(PART_InlineIncrementButton);
private const string PART_InlineDecrementButton = nameof(PART_InlineDecrementButton);

private bool _valueUpdating;

/// <summary>Identifies the <see cref="Value"/> dependency property.</summary>
Expand Down Expand Up @@ -330,6 +334,9 @@ public override void OnApplyTemplate()
PART_ClearButton,
() => OnClearButtonClick()
);
SubscribeToButtonClickEvent<System.Windows.Controls.Button>(PART_CompactIncrementDecrementButton, () => OnCompactIncrementDecrementButtonClick());
SubscribeToButtonClickEvent<System.Windows.Controls.Button>(PART_CompactIncrementButton, () => StepValue(SmallChange));
SubscribeToButtonClickEvent<System.Windows.Controls.Button>(PART_CompactDecrementButton, () => StepValue(-SmallChange));
SubscribeToButtonClickEvent<RepeatButton>(PART_InlineIncrementButton, () => StepValue(SmallChange));
SubscribeToButtonClickEvent<RepeatButton>(PART_InlineDecrementButton, () => StepValue(-SmallChange));

Expand All @@ -346,6 +353,14 @@ public override void OnApplyTemplate()
base.OnApplyTemplate();
}

private void OnCompactIncrementDecrementButtonClick()
{
if (GetTemplateChild(PART_CompactIncrementDecrementFlyout) is Flyout flyout)
{
flyout.IsOpen = true;
}
}

private void SubscribeToButtonClickEvent<TButton>(string elementName, Action action)
where TButton : ButtonBase
{
Expand Down
45 changes: 44 additions & 1 deletion src/Wpf.Ui/Controls/NumberBox/NumberBox.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,6 +124,41 @@
IsTabStop="False">
<controls:SymbolIcon FontSize="{StaticResource NumberBoxButtonIconSize}" Symbol="Dismiss24" />
</Button>

<Button
x:Name="PART_CompactIncrementDecrementButton"
Width="{StaticResource NumberBoxButtonHeight}"
Height="{StaticResource NumberBoxButtonHeight}"
Margin="{StaticResource NumberBoxButtonMargin}"
Padding="{StaticResource NumberBoxButtonPadding}"
HorizontalAlignment="Center"
VerticalAlignment="Top"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center"
Background="Transparent"
BorderBrush="Transparent"
Foreground="{DynamicResource TextControlButtonForeground}"
IsTabStop="False"
Visibility="Collapsed">
<controls:SymbolIcon FontSize="{StaticResource NumberBoxButtonIconSize}" Symbol="ChevronUpDown24" />
</Button>

<controls:Flyout x:Name="PART_CompactIncrementDecrementFlyout" Placement="Center">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>

<Button x:Name="PART_CompactIncrementButton">
<controls:SymbolIcon FontSize="{StaticResource NumberBoxButtonIconSize}" Symbol="ChevronUp24" />
</Button>
<Button x:Name="PART_CompactDecrementButton" Grid.Row="1">
<controls:SymbolIcon FontSize="{StaticResource NumberBoxButtonIconSize}" Symbol="ChevronDown24" />
</Button>
</Grid>
</controls:Flyout>

<RepeatButton
x:Name="PART_InlineIncrementButton"
Width="{StaticResource NumberBoxButtonHeight}"
Expand Down Expand Up @@ -181,6 +216,7 @@
BorderThickness="{StaticResource NumberBoxAccentBorderThemeThickness}"
CornerRadius="{TemplateBinding Border.CornerRadius}" />
</Grid>

<ControlTemplate.Triggers>
<Trigger Property="CurrentPlaceholderEnabled" Value="False">
<Setter TargetName="PlaceholderTextBox" Property="Visibility" Value="Collapsed" />
Expand All @@ -196,8 +232,15 @@
<Trigger Property="SpinButtonPlacementMode" Value="Hidden">
<Setter TargetName="PART_InlineIncrementButton" Property="Margin" Value="0" />
<Setter TargetName="PART_InlineDecrementButton" Property="Margin" Value="0" />
<Setter TargetName="PART_CompactIncrementDecrementButton" Property="Margin" Value="0" />
</Trigger>
<Trigger Property="SpinButtonPlacementMode" Value="Compact">
<Setter TargetName="PART_InlineIncrementButton" Property="Margin" Value="0" />
<Setter TargetName="PART_InlineDecrementButton" Property="Margin" Value="0" />
<Setter TargetName="PART_CompactIncrementDecrementButton" Property="Visibility" Value="Visible" />
</Trigger>
<Trigger Property="SpinButtonPlacementMode" Value="Inline">
<Setter TargetName="PART_CompactIncrementDecrementButton" Property="Margin" Value="0" />
<Setter TargetName="PART_InlineIncrementButton" Property="Visibility" Value="Visible" />
<Setter TargetName="PART_InlineDecrementButton" Property="Visibility" Value="Visible" />
</Trigger>
Expand Down Expand Up @@ -256,4 +299,4 @@

<Style BasedOn="{StaticResource DefaultUiNumberBoxStyle}" TargetType="{x:Type controls:NumberBox}" />

</ResourceDictionary>
</ResourceDictionary>
Loading