Skip to content
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

Jump to bottom

[Suggestion] Add a way to add trailing buttons to the interior of controls like TextBox and ComboBox #8

Closed
MPITech opened this issue Dec 5, 2024 · 10 comments
Closed

[Suggestion] Add a way to add trailing buttons to the interior of controls like TextBox and ComboBox #8

MPITech opened this issue Dec 5, 2024 · 10 comments
Labels
enhancement New feature or request

Comments

@MPITech
Copy link

MPITech commented Dec 5, 2024

Hi!

The application I am converting from WinForms to WinUI used DevExpress controls in WinForms. Their controls had a very useful UI feature for adding trailing buttons to the right side of textboxes, comboboxes, etc. Each could have their own icon, run its own code when clicked, and have their own tooltip when hovered over. This is great for when you need to add a related command button next to a field but not want to commit an entire button to it next to the field. It also makes things look cleaner.

It would be so awesome if you could either create new TextBox and ComboBox controls that have this capability, or even better, a reusable extension of some kind to add trailing buttons to the interior of other controls easily.

This would look similar to the WinUI "X" (clear) button when text is entered into a textbox:

image

Here are some examples from my WinForms app (each are explained to the user using a tooltip on hover):

image

image

image

Thanks for the consideration and your great work!
@ghost1372
Copy link
Owner

thanks for suggestion. i will consider this.
this is so easy currently you can do this by copy-paste MSFT source code and edit textbox template:

<Style x:Key="DefaultTextBoxStyle" TargetType="TextBox">
   <Setter Property="Foreground" Value="{ThemeResource TextControlForeground}" />
   <Setter Property="Background" Value="{ThemeResource TextControlBackground}" />
   <Setter Property="BorderBrush" Value="{ThemeResource TextControlBorderBrush}" />
   <Setter Property="SelectionHighlightColor" Value="{ThemeResource TextControlSelectionHighlightColor}" />
   <Setter Property="BorderThickness" Value="{ThemeResource TextControlBorderThemeThickness}" />
   <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
   <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
   <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Auto" />
   <Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto" />
   <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Hidden" />
   <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Hidden" />
   <Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False" />
   <Setter Property="MinHeight" Value="{ThemeResource TextControlThemeMinHeight}" />
   <Setter Property="MinWidth" Value="{ThemeResource TextControlThemeMinWidth}" />
   <Setter Property="Padding" Value="{ThemeResource TextControlThemePadding}" />
   <Setter Property="UseSystemFocusVisuals" Value="{ThemeResource IsApplicationFocusVisualKindReveal}" />
   <Setter Property="ContextFlyout" Value="{StaticResource TextControlCommandBarContextFlyout}" />
   <Setter Property="SelectionFlyout" Value="{StaticResource TextControlCommandBarSelectionFlyout}" />
   <Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}" />
   <Setter Property="BackgroundSizing" Value="InnerBorderEdge" />
   <Setter Property="Template">
     <Setter.Value>
       <ControlTemplate TargetType="TextBox">
         <Grid>
           <Grid.Resources>
             <Style x:Name="DeleteButtonStyle" TargetType="Button">
               <Setter Property="Template">
                 <Setter.Value>
                   <ControlTemplate TargetType="Button">
                     <Grid x:Name="ButtonLayoutGrid" Margin="{ThemeResource TextBoxInnerButtonMargin}" BorderBrush="{ThemeResource TextControlButtonBorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{ThemeResource TextControlButtonBackground}" BackgroundSizing="{TemplateBinding BackgroundSizing}" CornerRadius="{TemplateBinding CornerRadius}">
                       <VisualStateManager.VisualStateGroups>
                         <VisualStateGroup x:Name="CommonStates">
                           <VisualState x:Name="Normal" />
                           <VisualState x:Name="PointerOver">
                             <Storyboard>
                               <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonLayoutGrid" Storyboard.TargetProperty="Background">
                                 <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonBackgroundPointerOver}" />
                               </ObjectAnimationUsingKeyFrames>
                               <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonLayoutGrid" Storyboard.TargetProperty="BorderBrush">
                                 <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonBorderBrushPointerOver}" />
                               </ObjectAnimationUsingKeyFrames>
                               <ObjectAnimationUsingKeyFrames Storyboard.TargetName="GlyphElement" Storyboard.TargetProperty="Foreground">
                                 <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonForegroundPointerOver}" />
                               </ObjectAnimationUsingKeyFrames>
                             </Storyboard>
                           </VisualState>
                           <VisualState x:Name="Pressed">
                             <Storyboard>
                               <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonLayoutGrid" Storyboard.TargetProperty="Background">
                                 <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonBackgroundPressed}" />
                               </ObjectAnimationUsingKeyFrames>
                               <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonLayoutGrid" Storyboard.TargetProperty="BorderBrush">
                                 <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonBorderBrushPressed}" />
                               </ObjectAnimationUsingKeyFrames>
                               <ObjectAnimationUsingKeyFrames Storyboard.TargetName="GlyphElement" Storyboard.TargetProperty="Foreground">
                                 <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonForegroundPressed}" />
                               </ObjectAnimationUsingKeyFrames>
                             </Storyboard>
                           </VisualState>
                           <VisualState x:Name="Disabled">
                             <Storyboard>
                               <DoubleAnimation Storyboard.TargetName="ButtonLayoutGrid" Storyboard.TargetProperty="Opacity" To="0" Duration="0" />
                             </Storyboard>
                           </VisualState>
                         </VisualStateGroup>
                       </VisualStateManager.VisualStateGroups>
                       <TextBlock x:Name="GlyphElement" Foreground="{ThemeResource TextControlButtonForeground}" VerticalAlignment="Center" HorizontalAlignment="Center" FontStyle="Normal" FontSize="{ThemeResource TextBoxIconFontSize}" Text="&#xE894;" FontFamily="{ThemeResource SymbolThemeFontFamily}" AutomationProperties.AccessibilityView="Raw" />
                     </Grid>
                   </ControlTemplate>
                 </Setter.Value>
               </Setter>
             </Style>
           </Grid.Resources>
           <VisualStateManager.VisualStateGroups>
             <VisualStateGroup x:Name="CommonStates">
               <VisualState x:Name="Normal" />
               <VisualState x:Name="Disabled">
                 <Storyboard>
                   <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderContentPresenter" Storyboard.TargetProperty="Foreground">
                     <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlHeaderForegroundDisabled}" />
                   </ObjectAnimationUsingKeyFrames>
                   <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="Background">
                     <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBackgroundDisabled}" />
                   </ObjectAnimationUsingKeyFrames>
                   <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="BorderBrush">
                     <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBorderBrushDisabled}" />
                   </ObjectAnimationUsingKeyFrames>
                   <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentElement" Storyboard.TargetProperty="Foreground">
                     <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlForegroundDisabled}" />
                   </ObjectAnimationUsingKeyFrames>
                   <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextContentPresenter" Storyboard.TargetProperty="Foreground">
                     <DiscreteObjectKeyFrame KeyTime="0" Value="{Binding PlaceholderForeground, RelativeSource={RelativeSource TemplatedParent}, TargetNullValue={ThemeResource TextControlPlaceholderForegroundDisabled}}" />
                   </ObjectAnimationUsingKeyFrames>
                 </Storyboard>
               </VisualState>
               <VisualState x:Name="PointerOver">
                 <Storyboard>
                   <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="BorderBrush">
                     <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBorderBrushPointerOver}" />
                   </ObjectAnimationUsingKeyFrames>
                   <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="Background">
                     <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBackgroundPointerOver}" />
                   </ObjectAnimationUsingKeyFrames>
                   <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextContentPresenter" Storyboard.TargetProperty="Foreground">
                     <DiscreteObjectKeyFrame KeyTime="0" Value="{Binding PlaceholderForeground, RelativeSource={RelativeSource TemplatedParent}, TargetNullValue={ThemeResource TextControlPlaceholderForegroundPointerOver}}" />
                   </ObjectAnimationUsingKeyFrames>
                   <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentElement" Storyboard.TargetProperty="Foreground">
                     <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlForegroundPointerOver}" />
                   </ObjectAnimationUsingKeyFrames>
                 </Storyboard>
               </VisualState>
               <VisualState x:Name="Focused">
                 <Storyboard>
                   <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextContentPresenter" Storyboard.TargetProperty="Foreground">
                     <DiscreteObjectKeyFrame KeyTime="0" Value="{Binding PlaceholderForeground, RelativeSource={RelativeSource TemplatedParent}, TargetNullValue={ThemeResource TextControlPlaceholderForegroundFocused}}" />
                   </ObjectAnimationUsingKeyFrames>
                   <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="Background">
                     <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBackgroundFocused}" />
                   </ObjectAnimationUsingKeyFrames>
                   <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="BorderBrush">
                     <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBorderBrushFocused}" />
                   </ObjectAnimationUsingKeyFrames>
                   <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="BorderThickness">
                     <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBorderThemeThicknessFocused}" />
                   </ObjectAnimationUsingKeyFrames>
                   <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentElement" Storyboard.TargetProperty="Foreground">
                     <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlForegroundFocused}" />
                   </ObjectAnimationUsingKeyFrames>
                 </Storyboard>
               </VisualState>
             </VisualStateGroup>
             <VisualStateGroup x:Name="ButtonStates">
               <VisualState x:Name="ButtonVisible">
                 <Storyboard>
                   <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DeleteButton" Storyboard.TargetProperty="Visibility">
                     <DiscreteObjectKeyFrame KeyTime="0">
                       <DiscreteObjectKeyFrame.Value>
                         <Visibility>Visible</Visibility>
                       </DiscreteObjectKeyFrame.Value>
                     </DiscreteObjectKeyFrame>
                   </ObjectAnimationUsingKeyFrames>
                 </Storyboard>
               </VisualState>
               <VisualState x:Name="ButtonCollapsed" />
             </VisualStateGroup>
           </VisualStateManager.VisualStateGroups>
           <Grid.RowDefinitions>
             <RowDefinition Height="Auto" />
             <RowDefinition Height="*" />
             <RowDefinition Height="Auto" />
           </Grid.RowDefinitions>
           <Grid.ColumnDefinitions>
             <ColumnDefinition Width="*" />
             <ColumnDefinition Width="Auto" />
           </Grid.ColumnDefinitions>
           <ContentPresenter x:Name="HeaderContentPresenter" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}" FontWeight="Normal" Foreground="{ThemeResource TextControlHeaderForeground}" Margin="{ThemeResource TextBoxTopHeaderMargin}" TextWrapping="Wrap" VerticalAlignment="Top" Visibility="Collapsed" x:DeferLoadStrategy="Lazy" />
           <Border x:Name="BorderElement" Grid.Row="1" Grid.Column="0" Grid.RowSpan="1" Grid.ColumnSpan="2" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{TemplateBinding CornerRadius}" Control.IsTemplateFocusTarget="True" MinWidth="{TemplateBinding MinWidth}" MinHeight="{TemplateBinding MinHeight}" />
           <ScrollViewer x:Name="ContentElement" Grid.Row="1" Grid.Column="0" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" Margin="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" Foreground="{TemplateBinding Foreground}" IsTabStop="False" AutomationProperties.AccessibilityView="Raw" ZoomMode="Disabled" />
           <TextBlock x:Name="PlaceholderTextContentPresenter" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Foreground="{Binding PlaceholderForeground, RelativeSource={RelativeSource TemplatedParent}, TargetNullValue={ThemeResource TextControlPlaceholderForeground}}" Margin="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" Text="{TemplateBinding PlaceholderText}" TextAlignment="{TemplateBinding TextAlignment}" TextWrapping="{TemplateBinding TextWrapping}" IsHitTestVisible="False" />
           <Button x:Name="DeleteButton" Grid.Row="1" Grid.Column="1" Style="{StaticResource DeleteButtonStyle}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{TemplateBinding CornerRadius}" Padding="{ThemeResource HelperButtonThemePadding}" IsTabStop="False" Visibility="Collapsed" AutomationProperties.AccessibilityView="Raw" FontSize="{TemplateBinding FontSize}" Width="30" VerticalAlignment="Stretch" />
           <ContentPresenter x:Name="DescriptionPresenter" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" Content="{TemplateBinding Description}" Foreground="{ThemeResource SystemControlDescriptionTextForegroundBrush}" AutomationProperties.AccessibilityView="Raw" x:Load="False" />
         </Grid>
       </ControlTemplate>
     </Setter.Value>
   </Setter>
 </Style>

@ghost1372 ghost1372 added the enhancement New feature or request label Dec 5, 2024
@MPITech
Copy link
Author

MPITech commented Dec 5, 2024

Thank you, but I was hoping for a slightly easier and more reusable way, like a new control with properties or something like that. Thanks for considering it!

@MPITech
Copy link
Author

MPITech commented Dec 5, 2024

Something like:

<TextBox>
   <TextBox.InteriorButtons>
      <InteriorButton IconGlyph="&#xEC87;" Tooltip="Edit" Click="click_event" />
   </TextBox.InteriorButtons>
</TextBox>

@ghost1372
Copy link
Owner

Something like:

<TextBox>
   <TextBox.InteriorButtons>
      <InteriorButton IconGlyph="&#xEC87;" Tooltip="Edit" Click="click_event" />
   </TextBox.InteriorButtons>
</TextBox>

This is something that will almost certainly be implemented, but I don't agree with the names.
i will make something like this which you can have more control:

<dev:TextBox>
    <dev:TextBox.Content>
        <Button Content="&#xE895;" />
    </dev:TextBox.Content>
</dev:TextBox>

or

<dev:TextBox Header="TextBox with Content"
             PlaceholderText="PlaceHolder...">
    <dev:TextBox.Content>
        <StackPanel Orientation="Horizontal">
            <Button Content="&#xE895;" />
            <Button Content="&#xE896;" />
        </StackPanel>
    </dev:TextBox.Content>
</dev:TextBox>

ghost1372 added a commit that referenced this issue Dec 6, 2024
@ghost1372
Add TextBox Control #8
7335ffa
@ghost1372
Copy link
Owner

Hi @MPITech
I added a new TextBox control which support Content property and you can add button.

image

I didn't add this feature to the combobox because the combobox is a more complex control and I avoid any complexity.
If you need to implement this feature in a combobox, you need to use the TextBoxStyle property and provide your own custom template.

for example:

<ComboBox IsEditable="True"
          TextBoxStyle="{StaticResource MyTextBoxStyle}"/>


 <Style x:Key="MyTextBoxStyle"
        TargetType="TextBox">
     <Setter Property="Template">
         <Setter.Value>
             <ControlTemplate TargetType="TextBox">
                 <Border Background="Red">
                     <Grid>
                         <Border x:Name="BorderElement"
                                 Background="{TemplateBinding Background}"
                                 BorderBrush="{TemplateBinding BorderBrush}"
                                 BorderThickness="{TemplateBinding BorderThickness}"
                                 Control.IsTemplateFocusTarget="True"
                                 CornerRadius="{TemplateBinding CornerRadius}" />
                         <ScrollViewer x:Name="ContentElement"
                                       Margin="{TemplateBinding BorderThickness}"
                                       Padding="{TemplateBinding Padding}"
                                       AutomationProperties.AccessibilityView="Raw"
                                       HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
                                       HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
                                       IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
                                       IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
                                       IsTabStop="False"
                                       IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
                                       VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
                                       VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
                                       ZoomMode="Disabled" />
                         <TextBlock x:Name="PlaceholderTextContentPresenter"
                                    Margin="{TemplateBinding BorderThickness}"
                                    Padding="{TemplateBinding Padding}"
                                    Foreground="{Binding PlaceholderForeground, RelativeSource={RelativeSource TemplatedParent}, TargetNullValue={ThemeResource TextControlPlaceholderForeground}}"
                                    IsHitTestVisible="False"
                                    Text="{TemplateBinding PlaceholderText}"
                                    TextAlignment="{TemplateBinding TextAlignment}"
                                    TextWrapping="{TemplateBinding TextWrapping}" />

                     </Grid>
                 </Border>
             </ControlTemplate>
         </Setter.Value>
     </Setter>
 </Style>

This issue can now be closed.

@MPITech
Copy link
Author

MPITech commented Dec 6, 2024

Wow you are great, thanks so much! Looking forward to using it!

@ghost1372
Copy link
Owner

Wow you are great, thanks so much! Looking forward to using it!

The next preview version will be released when I add feature #3

@MPITech
Copy link
Author

MPITech commented Dec 28, 2024

Hi, my friend. Just wanted to say thanks again for the TextBox with Content - it works perfectly and looks great. Is there a way for you to do the same for NumberBoxes? Or are they just as complicated for you as the ComboBoxes?

@ghost1372
Copy link
Owner

Hi @MPITech
TextBox is a widely used control that is worth it. but NumberBox not!
It's easy to create, but the numberbox styles must be copied to the library and then modified.
I did the same for Textbox, copying and then changing its styles.
I don't want to copy and paste Microsoft styles and have trouble changing them later.
you can do this by yourself.
just create a new class and drive from Numberbox:

public partial NumberBoxEx : NumberBox{}

then copy-paste microsoft styles:

https://github.com/microsoft/microsoft-ui-xaml/blob/main/src/controls/dev/NumberBox/NumberBox.xaml

  <Style TargetType="local:NumberBoxEx">
    <Setter Property="IsTabStop" Value="False" />
    <Setter Property="SelectionHighlightColor" Value="{ThemeResource TextControlSelectionHighlightColor}" />
    <Setter Property="SelectionFlyout" Value="{StaticResource TextControlCommandBarSelectionFlyout}" />
    <Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}" />
    <Setter Property="Background" Value="{ThemeResource TextControlBackground}" />
    <Setter Property="BorderThickness" Value="{ThemeResource TextControlBorderThemeThickness}" />
    <Setter Property="BorderBrush" Value="{ThemeResource TextControlBorderBrush}" />
    <Setter Property="Foreground" Value="{ThemeResource TextControlForeground}" />
    <Setter Property="Padding" Value="{ThemeResource TextControlThemePadding}" />
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="local:NumberBoxEx">
          <Grid Height="{TemplateBinding Height}">
            <VisualStateManager.VisualStateGroups>
              <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal" />
                <VisualState x:Name="Disabled">
                  <VisualState.Setters>
                    <Setter Target="HeaderContentPresenter.Foreground" Value="{ThemeResource TextControlHeaderForegroundDisabled}" />
                  </VisualState.Setters>
                </VisualState>
              </VisualStateGroup>
              <VisualStateGroup x:Name="SpinButtonStates">
                <VisualState x:Name="SpinButtonsCollapsed" />
                <VisualState x:Name="SpinButtonsVisible">
                  <VisualState.Setters>
                    <Setter Target="DownSpinButton.Visibility" Value="Visible" />
                    <Setter Target="UpSpinButton.Visibility" Value="Visible" />
                    <Setter Target="InputEater.Visibility" Value="Visible" />
                    <Setter Target="InputBox.MinWidth" Value="{ThemeResource NumberBoxMinWidth}" />
                  </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="SpinButtonsPopup">
                  <VisualState.Setters>
                    <Setter Target="InputBox.Style" Value="{StaticResource NumberBoxTextBoxStyle}" />
                  </VisualState.Setters>
                </VisualState>
              </VisualStateGroup>
              <VisualStateGroup x:Name="UpSpinButtonEnabledStates">
                <VisualState x:Name="UpSpinButtonEnabled" />
                <VisualState x:Name="UpSpinButtonDisabled">
                  <VisualState.Setters>
                    <Setter Target="UpSpinButton.IsEnabled" Value="False" />
                    <Setter Target="PopupUpSpinButton.IsEnabled" Value="False" />
                  </VisualState.Setters>
                </VisualState>
              </VisualStateGroup>
              <VisualStateGroup x:Name="DownSpinButtonEnabledStates">
                <VisualState x:Name="DownSpinButtonEnabled" />
                <VisualState x:Name="DownSpinButtonDisabled">
                  <VisualState.Setters>
                    <Setter Target="DownSpinButton.IsEnabled" Value="False" />
                    <Setter Target="PopupDownSpinButton.IsEnabled" Value="False" />
                  </VisualState.Setters>
                </VisualState>
              </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <Grid.Resources>
              <ResourceDictionary>
                <ResourceDictionary.ThemeDictionaries>
                  <ResourceDictionary x:Key="Light">
                    <StaticResource x:Key="RepeatButtonBackground" ResourceKey="TextControlButtonBackground" />
                    <StaticResource x:Key="RepeatButtonBackgroundPointerOver" ResourceKey="TextControlButtonBackgroundPointerOver" />
                    <StaticResource x:Key="RepeatButtonBackgroundPressed" ResourceKey="TextControlButtonBackgroundPressed" />
                    <StaticResource x:Key="RepeatButtonForeground" ResourceKey="TextControlButtonForeground" />
                    <StaticResource x:Key="RepeatButtonForegroundPointerOver" ResourceKey="TextControlButtonForegroundPointerOver" />
                    <StaticResource x:Key="RepeatButtonForegroundPressed" ResourceKey="TextControlButtonForegroundPressed" />
                    <StaticResource x:Key="RepeatButtonBorderBrush" ResourceKey="TextControlButtonBorderBrush" />
                    <StaticResource x:Key="RepeatButtonBorderBrushPointerOver" ResourceKey="TextControlButtonBorderBrushPointerOver" />
                    <StaticResource x:Key="RepeatButtonBorderBrushPressed" ResourceKey="TextControlButtonBorderBrushPressed" />
                    <StaticResource x:Key="RepeatButtonBorderBrushDisabled" ResourceKey="TextControlButtonBorderBrush" />
                  </ResourceDictionary>
                  <ResourceDictionary x:Key="Dark">
                    <StaticResource x:Key="RepeatButtonBackground" ResourceKey="TextControlButtonBackground" />
                    <StaticResource x:Key="RepeatButtonBackgroundPointerOver" ResourceKey="TextControlButtonBackgroundPointerOver" />
                    <StaticResource x:Key="RepeatButtonBackgroundPressed" ResourceKey="TextControlButtonBackgroundPressed" />
                    <StaticResource x:Key="RepeatButtonForeground" ResourceKey="TextControlButtonForeground" />
                    <StaticResource x:Key="RepeatButtonForegroundPointerOver" ResourceKey="TextControlButtonForegroundPointerOver" />
                    <StaticResource x:Key="RepeatButtonForegroundPressed" ResourceKey="TextControlButtonForegroundPressed" />
                    <StaticResource x:Key="RepeatButtonBorderBrush" ResourceKey="TextControlButtonBorderBrush" />
                    <StaticResource x:Key="RepeatButtonBorderBrushPointerOver" ResourceKey="TextControlButtonBorderBrushPointerOver" />
                    <StaticResource x:Key="RepeatButtonBorderBrushPressed" ResourceKey="TextControlButtonBorderBrushPressed" />
                    <StaticResource x:Key="RepeatButtonBorderBrushDisabled" ResourceKey="TextControlButtonBorderBrush" />
                  </ResourceDictionary>
                  <ResourceDictionary x:Key="HighContrast">
                    <StaticResource x:Key="RepeatButtonBackground" ResourceKey="TextControlButtonBackground" />
                    <StaticResource x:Key="RepeatButtonBackgroundPointerOver" ResourceKey="TextControlButtonBackgroundPointerOver" />
                    <StaticResource x:Key="RepeatButtonBackgroundPressed" ResourceKey="TextControlButtonBackgroundPressed" />
                    <StaticResource x:Key="RepeatButtonForeground" ResourceKey="TextControlButtonForeground" />
                    <StaticResource x:Key="RepeatButtonForegroundPointerOver" ResourceKey="TextControlButtonForegroundPointerOver" />
                    <StaticResource x:Key="RepeatButtonForegroundPressed" ResourceKey="TextControlButtonForegroundPressed" />
                    <StaticResource x:Key="RepeatButtonBorderBrush" ResourceKey="TextControlButtonBorderBrush" />
                    <StaticResource x:Key="RepeatButtonBorderBrushPointerOver" ResourceKey="TextControlButtonBorderBrushPointerOver" />
                    <StaticResource x:Key="RepeatButtonBorderBrushPressed" ResourceKey="TextControlButtonBorderBrushPressed" />
                    <StaticResource x:Key="RepeatButtonBorderBrushDisabled" ResourceKey="TextControlButtonBorderBrush" />
                  </ResourceDictionary>
                </ResourceDictionary.ThemeDictionaries>
              </ResourceDictionary>
            </Grid.Resources>
            <Grid.RowDefinitions>
              <RowDefinition Height="Auto" />
              <RowDefinition Height="*" />
              <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="*" />
              <ColumnDefinition Width="Auto" />
              <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <ContentPresenter x:Name="HeaderContentPresenter" Grid.ColumnSpan="3" Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}" FontWeight="Normal" Foreground="{ThemeResource TextControlHeaderForeground}" Margin="{ThemeResource TextBoxTopHeaderMargin}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" TextWrapping="Wrap" VerticalAlignment="Top" Visibility="Collapsed" x:DeferLoadStrategy="Lazy" />
            <TextBox x:Name="InputBox" Grid.Row="1" Grid.ColumnSpan="3" Style="{StaticResource NumberBoxTextBoxStyle}" InputScope="{TemplateBinding InputScope}" PlaceholderText="{TemplateBinding PlaceholderText}" SelectionFlyout="{TemplateBinding SelectionFlyout}" SelectionHighlightColor="{TemplateBinding SelectionHighlightColor}" TextReadingOrder="{TemplateBinding TextReadingOrder}" PreventKeyboardDisplayOnProgrammaticFocus="{TemplateBinding PreventKeyboardDisplayOnProgrammaticFocus}" FontSize="{TemplateBinding FontSize}" FontWeight="{TemplateBinding FontWeight}" FontFamily="{TemplateBinding FontFamily}" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" Padding="{TemplateBinding Padding}" Foreground="{TemplateBinding Foreground}" TextAlignment="{TemplateBinding TextAlignment}" CornerRadius="{TemplateBinding CornerRadius}" />
            <Popup x:Name="UpDownPopup" Grid.Row="1" Grid.Column="1" VerticalOffset="{ThemeResource NumberBoxPopupVerticalOffset}" HorizontalOffset="{ThemeResource NumberBoxPopupHorizonalOffset}" ShouldConstrainToRootBounds="False" HorizontalAlignment="Left">
              <Grid x:Name="PopupContentRoot" Padding="6" Background="{ThemeResource NumberBoxPopupBackground}" BorderBrush="{ThemeResource NumberBoxPopupBorderBrush}" BorderThickness="{ThemeResource NumberBoxPopupBorderThickness}" CornerRadius="{ThemeResource OverlayCornerRadius}">
                <Grid.RowDefinitions>
                  <RowDefinition Height="*" />
                  <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Grid.Resources>
                  <ResourceDictionary>
                    <ResourceDictionary.ThemeDictionaries>
                      <ResourceDictionary x:Key="Light">
                        <StaticResource x:Key="RepeatButtonBackground" ResourceKey="TextControlButtonBackground" />
                        <StaticResource x:Key="RepeatButtonBackgroundPointerOver" ResourceKey="TextControlButtonBackgroundPointerOver" />
                        <StaticResource x:Key="RepeatButtonBackgroundPressed" ResourceKey="TextControlButtonBackgroundPressed" />
                        <StaticResource x:Key="RepeatButtonForeground" ResourceKey="TextControlButtonForeground" />
                        <StaticResource x:Key="RepeatButtonForegroundPointerOver" ResourceKey="TextControlButtonForegroundPointerOver" />
                        <StaticResource x:Key="RepeatButtonForegroundPressed" ResourceKey="TextControlButtonForegroundPressed" />
                        <StaticResource x:Key="RepeatButtonBorderBrush" ResourceKey="TextControlButtonBorderBrush" />
                        <StaticResource x:Key="RepeatButtonBorderBrushPointerOver" ResourceKey="TextControlButtonBorderBrushPointerOver" />
                        <StaticResource x:Key="RepeatButtonBorderBrushPressed" ResourceKey="TextControlButtonBorderBrushPressed" />
                        <StaticResource x:Key="RepeatButtonBorderBrushDisabled" ResourceKey="TextControlButtonBorderBrush" />
                      </ResourceDictionary>
                      <ResourceDictionary x:Key="Dark">
                        <StaticResource x:Key="RepeatButtonBackground" ResourceKey="TextControlButtonBackground" />
                        <StaticResource x:Key="RepeatButtonBackgroundPointerOver" ResourceKey="TextControlButtonBackgroundPointerOver" />
                        <StaticResource x:Key="RepeatButtonBackgroundPressed" ResourceKey="TextControlButtonBackgroundPressed" />
                        <StaticResource x:Key="RepeatButtonForeground" ResourceKey="TextControlButtonForeground" />
                        <StaticResource x:Key="RepeatButtonForegroundPointerOver" ResourceKey="TextControlButtonForegroundPointerOver" />
                        <StaticResource x:Key="RepeatButtonForegroundPressed" ResourceKey="TextControlButtonForegroundPressed" />
                        <StaticResource x:Key="RepeatButtonBorderBrush" ResourceKey="TextControlButtonBorderBrush" />
                        <StaticResource x:Key="RepeatButtonBorderBrushPointerOver" ResourceKey="TextControlButtonBorderBrushPointerOver" />
                        <StaticResource x:Key="RepeatButtonBorderBrushPressed" ResourceKey="TextControlButtonBorderBrushPressed" />
                        <StaticResource x:Key="RepeatButtonBorderBrushDisabled" ResourceKey="TextControlButtonBorderBrush" />
                      </ResourceDictionary>
                      <ResourceDictionary x:Key="HighContrast">
                        <StaticResource x:Key="RepeatButtonBackground" ResourceKey="TextControlButtonBackground" />
                        <StaticResource x:Key="RepeatButtonBackgroundPointerOver" ResourceKey="TextControlButtonBackgroundPointerOver" />
                        <StaticResource x:Key="RepeatButtonBackgroundPressed" ResourceKey="TextControlButtonBackgroundPressed" />
                        <StaticResource x:Key="RepeatButtonForeground" ResourceKey="TextControlButtonForeground" />
                        <StaticResource x:Key="RepeatButtonForegroundPointerOver" ResourceKey="TextControlButtonForegroundPointerOver" />
                        <StaticResource x:Key="RepeatButtonForegroundPressed" ResourceKey="TextControlButtonForegroundPressed" />
                        <StaticResource x:Key="RepeatButtonBorderBrush" ResourceKey="TextControlButtonBorderBrush" />
                        <StaticResource x:Key="RepeatButtonBorderBrushPointerOver" ResourceKey="TextControlButtonBorderBrushPointerOver" />
                        <StaticResource x:Key="RepeatButtonBorderBrushPressed" ResourceKey="TextControlButtonBorderBrushPressed" />
                        <StaticResource x:Key="RepeatButtonBorderBrushDisabled" ResourceKey="TextControlButtonBorderBrush" />
                      </ResourceDictionary>
                    </ResourceDictionary.ThemeDictionaries>
                  </ResourceDictionary>
                </Grid.Resources>
                <RepeatButton x:Name="PopupUpSpinButton" Style="{StaticResource NumberBoxPopupSpinButtonStyle}" Margin="0,0,0,4" Content="&#xE70E;" />
                <RepeatButton x:Name="PopupDownSpinButton" Style="{StaticResource NumberBoxPopupSpinButtonStyle}" Grid.Row="1" Content="&#xE70D;" />
              </Grid>
            </Popup>
            <Button x:Name="InputEater" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2" Visibility="Collapsed" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="4,0,0,0" IsTabStop="False" AutomationProperties.AccessibilityView="Raw">
              <Button.Template>
                <ControlTemplate TargetType="Button">
                  <Grid Background="Transparent" />
                </ControlTemplate>
              </Button.Template>
            </Button>
            <RepeatButton x:Name="UpSpinButton" Grid.Row="1" Grid.Column="1" Visibility="Collapsed" FontSize="{TemplateBinding FontSize}" Content="&#xE70E;" Style="{StaticResource NumberBoxSpinButtonStyle}" Margin="4" CornerRadius="{TemplateBinding CornerRadius}" />
            <RepeatButton x:Name="DownSpinButton" Grid.Row="1" Grid.Column="2" Visibility="Collapsed" FontSize="{TemplateBinding FontSize}" Content="&#xE70D;" Style="{StaticResource NumberBoxSpinButtonStyle}" Margin="0,4,4,4" CornerRadius="{TemplateBinding CornerRadius}" />
            <ContentPresenter x:Name="DescriptionPresenter" Grid.Row="2" Grid.ColumnSpan="3" Content="{TemplateBinding Description}" Foreground="{ThemeResource SystemControlDescriptionTextForegroundBrush}" AutomationProperties.AccessibilityView="Raw" />
          </Grid>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

find textbox and change as you want it.

also i added a TextBoxButtonStyle in DevWinUI so you can add a Button and change style to TextBoxButtonStyle, so they looks fine.

@MPITech
Copy link
Author

MPITech commented Dec 28, 2024

Got it, understood. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@ghost1372 @MPITech