How to make a button in a Textbox's ControlTemplate update the text of the TextBox?

Question

I currently have a custom control set up as shown below. (I am trying to make a custom numericupdown)

Basically, what this style does is it overlays two buttons on top of a styled text box. The two buttons should increase/decrease the value in the TextBox by one every time. The styling is fine, and the control displays correctly, but I do not know how to make it function.

WHAT I NEED

I need it so the buttons will decrease/increase the textbox's integer by one every time.

WHAT I HAVE TRIED

Just for your information, my current XAML ResourceDictionary is called Generic.xaml .

Try 1

I have tried creating a new C# class called Generic.xaml.cs and adding x:class="MyProject.Themes.Generic" and creating click events for the button. I would then add the appropriate event handlers into the Generic.xaml.cs file. I did manage to get the click events working, but I couldn't find a way to decrease the value of the TextBox.

For example:

<Button Click="increaseValue"></Button>

public partial class Generic
{
    private void increaseValue(object sender, RoutedEventArgs e)
    {
    // code to change the textbox's value would be here, but I didn't know how to do it
    }
}

Try 2

I have tried the exact same method as above, but with some differences. I nested all of my styles (in the code at the very bottom) into this:

<Style>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate>
                <TextBox>
                    <!-- Styles go here -->
                </TextBox>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

None of the above worked. Does anyone have any ideas?

Below is my full XAML code (it works fine). I mainly need assistance with the code-behind.

<Style TargetType="{x:Type local1:roundNumericUpDown}">
        <Setter Property="FontFamily" Value="{StaticResource SourceSansRegular}" />
        <Setter Property="Padding" Value="10, 0, 5, 1" />
        <Setter Property="FontSize" Value="15" />
        <Setter Property="Foreground" Value="White" />
        <Setter Property="Background" Value="{StaticResource initialColor}" />
        <Setter Property="Height" Value="28px" />
        <Setter Property="HorizontalContentAlignment" Value="Left" />
        <Setter Property="VerticalContentAlignment" Value="Center" />
        <Setter Property="Text" Value="0" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate>
                    <Border Background="{TemplateBinding Background}" x:Name="Bd" BorderThickness="0" CornerRadius="15" BorderBrush="#FF383838">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="32px" />
                            </Grid.ColumnDefinitions>
                            <ScrollViewer x:Name="PART_ContentHost" />
                            <Grid Grid.Column="1">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="13" />
                                    <RowDefinition Height="2" />
                                    <RowDefinition Height="13" />
                                </Grid.RowDefinitions>
                                <Button Grid.Row="0" Height="13" VerticalAlignment="Top"  x:Name="IncreaseButton">
                                    <Polygon Points="0,5 16,5 8,0" Stroke="{StaticResource decalColor}" Fill="{StaticResource decalColor}" />
                                    <Button.Style>
                                        <Style TargetType="{x:Type Button}">
                                            <Setter Property="Background" Value="{StaticResource hoverColor}" />
                                            <Setter Property="WindowChrome.IsHitTestVisibleInChrome" Value="True" />
                                            <Setter Property="Template">
                                                <Setter.Value>
                                                    <ControlTemplate TargetType="{x:Type Button}">
                                                        <Border CornerRadius="0, 13, 0 0" x:Name="Bd" Background="{TemplateBinding Background}">
                                                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                                                        </Border>
                                                    </ControlTemplate>
                                                </Setter.Value>
                                            </Setter>
                                            <Style.Triggers>
                                                <Trigger Property="IsMouseOver" Value="True">
                                                    <Setter Property="Background" Value="{StaticResource clickColor}" />
                                                </Trigger>
                                                <Trigger Property="IsPressed" Value="True">
                                                    <Setter Property="Background" Value="{StaticResource clickColor1}" />
                                                </Trigger>
                                            </Style.Triggers>
                                        </Style>
                                    </Button.Style>
                                </Button>
                                <Button Grid.Row="2" Height="13" VerticalAlignment="Bottom" x:Name="DecreaseButton">
                                    <Polygon Points="0,0, 16,0 8,5" Stroke="{StaticResource decalColor}" Fill="{StaticResource decalColor}" />
                                    <Button.Style>
                                        <Style TargetType="{x:Type Button}">
                                            <Setter Property="Background" Value="{StaticResource hoverColor}" />
                                            <Setter Property="WindowChrome.IsHitTestVisibleInChrome" Value="True" />
                                            <Setter Property="Template">
                                                <Setter.Value>
                                                    <ControlTemplate TargetType="{x:Type Button}">
                                                        <Border CornerRadius="0, 0, 13 0" x:Name="Bd" Background="{TemplateBinding Background}">
                                                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                                                        </Border>
                                                    </ControlTemplate>
                                                </Setter.Value>
                                            </Setter>
                                            <Style.Triggers>
                                                <Trigger Property="IsMouseOver" Value="True">
                                                    <Setter Property="Background" Value="{StaticResource clickColor1}" />
                                                </Trigger>
                                                <Trigger Property="IsPressed" Value="True">
                                                    <Setter Property="Background" Value="{StaticResource clickColor}" />
                                                </Trigger>
                                            </Style.Triggers>
                                        </Style>
                                    </Button.Style>
                                </Button>
                            </Grid>
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Answer 1

Try 1 is the right track

Of course I recommend to add try catch for the Convert method in-case user change the text to non-numeric value or switch TextBox to TextBlock making the value change only when the buttons are clicked and in that case you can guarantee it to be always number and you will not need the try and catch.

public partial class Generic
{
    private void increaseValue(object sender, RoutedEventArgs e)
    {
        TextBox textBox = (((((sender as Button).Parent as Grid).Parent as Grid)).Parent as Border).TemplatedParent as TextBox;

        textBox.Text = Convert.ToString(Convert.ToInt32(textBox.Text) + 1);
    }
}

Not recommended

I honestly do not recommend the way you are creating your control. It would have been much easier and simpler to create an actual UserControl for your textBox and buttons and and add style to each element (textBox, UpButton, DownButton). Then you will have the freedom to access all 3 element freely. usually Style is for styling :)

Hopefully this answers your question