WPF開發隨筆收錄-帶遞增遞減按鈕TextBox

一、前言

今天分享一下如何實現帶遞增遞減按鈕的TextBox控件

二、正文

1、之前的博客分享了一篇自定義XamlIcon控件的文章，這次就直接在那個項目的基礎上實現今天這個自定義控件

2、首先添加兩個圖標資源，一個增加的按鈕，一個減小的按鈕，具體過程可以參考我之前寫的文章

3、接着新增一個自定義控件，如圖所示那個

4、添加后，項目中還會生成一個Themes文件夾，里面還有一個Generic.xaml的文件，這個文件可以用來寫控件樣式的，里面會自動生成一個最基礎的控件樣式，而那個NumberTextBox是用來后后台邏輯的

 5、先來把控件的樣式編寫一下，如下，樣式具體細節就不在描述，就是在里面添加了兩個自定義的XamlIcon控件來作為遞增和遞減按鈕，然后還添加了一個TextBlock來做提示文本

<Style TargetType="{x:Type ctls:NumberTextBox}">
    <Setter Property="Cursor" Value="IBeam" />
    <Setter Property="FocusVisualStyle" Value="{x:Null}" />
    <Setter Property="Foreground" Value="#555" />
    <Setter Property="VerticalAlignment" Value="Center" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ctls:NumberTextBox}">
                <Border
                    Name="Border"
                    Background="White"
                    BorderBrush="#AAA"
                    BorderThickness="1"
                    CornerRadius="3">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition />
                            <ColumnDefinition Width="30" />
                        </Grid.ColumnDefinitions>
                        <ScrollViewer
                            x:Name="PART_ContentHost"
                            Margin="6,0,0,0"
                            VerticalAlignment="{TemplateBinding VerticalAlignment}"
                            Focusable="false"
                            HorizontalScrollBarVisibility="Hidden"
                            VerticalScrollBarVisibility="Hidden" />
                        <TextBlock
                            x:Name="Hint"
                            Margin="6,0,0,0"
                            VerticalAlignment="{Binding ElementName=PART_ContentHost, Path=VerticalAlignment}"
                            Foreground="#c9ccd7"
                            Text="{TemplateBinding Tag}"
                            Visibility="Collapsed" />
                        <Border
                            Grid.Column="1"
                            Background="Transparent"
                            BorderBrush="#eee"
                            BorderThickness="1,0,0,0">
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition />
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition />
                                </Grid.RowDefinitions>
                                <ctls:XamlIcon
                                    x:Name="InButton"
                                    VerticalAlignment="Center"
                                    Cursor="Hand"
                                    Icon="angle_up" />
                                <Rectangle
                                    Grid.Row="1"
                                    Height="1"
                                    Fill="#eee" />
                                <ctls:XamlIcon
                                    x:Name="DeButton"
                                    Grid.Row="2"
                                    VerticalAlignment="Center"
                                    Cursor="Hand"
                                    Icon="angle_down" />
                            </Grid>
                        </Border>
                    </Grid>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="Text" Value="{x:Null}">
                        <Setter TargetName="Hint" Property="Visibility" Value="{x:Static Visibility.Visible}" />
                    </Trigger>
                    <Trigger Property="Text" Value="">
                        <Setter TargetName="Hint" Property="Visibility" Value="{x:Static Visibility.Visible}" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

6、接着就是編寫后台部分代碼，后台部分代碼也比較簡單，這里簡單的添加了兩個依賴屬性，一個是遞進值，一個是最小值。然后就是在OnApplyTemplate的重載中去給樣式那里添加的兩個控件添加鼠標點擊事件。就先這樣基礎的實現先，復雜的功能后續在增加進去，比如限制只能輸入數字之類的，今天主要先介紹實現的大致方法。

public class NumberTextBox : TextBox
{
    public int Step
    {
        get { return (int)GetValue(StepProperty); }
        set { SetValue(StepProperty, value); }
    }

    public static readonly DependencyProperty StepProperty =
        DependencyProperty.Register("Step", typeof(int), typeof(NumberTextBox), new PropertyMetadata(1));

    public int Minimum
    {
        get { return (int)GetValue(MinimumProperty); }
        set { SetValue(MinimumProperty, value); }
    }
    public static readonly DependencyProperty MinimumProperty =
        DependencyProperty.Register("Minimum", typeof(int), typeof(NumberTextBox), new PropertyMetadata(0));

    static NumberTextBox()
    {
        DefaultStyleKeyProperty.OverrideMetadata(typeof(NumberTextBox), new FrameworkPropertyMetadata(typeof(NumberTextBox)));
    }

    public NumberTextBox()
    {
        InputMethod.SetIsInputMethodEnabled(this, false);
    }

    public override void OnApplyTemplate()
    {
        base.OnApplyTemplate();
        XamlIcon DeButton = (XamlIcon)this.Template.FindName("DeButton", this);
        XamlIcon InButton = (XamlIcon)this.Template.FindName("InButton", this);

        DeButton.MouseLeftButtonDown += DeButton_MouseLeftButtonDown;
        InButton.MouseLeftButtonDown += InButton_MouseLeftButtonDown;
    }

    private void DeButton_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        if (!String.IsNullOrEmpty(this.Text))
        {
            this.Text = int.Parse(this.Text) - Step < Minimum ? Minimum + "" : int.Parse(this.Text) - Step + "";
            this.SelectionStart = this.Text.Length;
        }
        else
        {
            this.Text = Minimum + "";
            this.SelectionStart = this.Text.Length;
        }
    }

    private void InButton_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        if (!String.IsNullOrEmpty(this.Text))
        {
            this.Text = int.Parse(this.Text) + Step + "";
            this.SelectionStart = this.Text.Length;
        }
        else
        {
            this.Text = Minimum + "";
            this.SelectionStart = this.Text.Length;
        }
    }
}

7、測試控件功能，主界面添加自定義好的控件，如下

<Window x:Class="XamlIconDemo.MainWindow"
        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:ctls="clr-namespace:XamlIconDemo.Controls"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:XamlIconDemo"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <ctls:NumberTextBox
            Width="200"
            Height="40"
            FontSize="22"
            Minimum="0"
            Step="5"
            VerticalAlignment="Center"
            HorizontalAlignment="Center"
            Tag="請輸入數字..."/>
    </Grid>
</Window>

8、實現效果如下，基礎功能已經算實現了，但還不完善，有需要的可以自己完善完善，今天的分享就到這了