一、前言
今天分享一下如何實作帶遞增遞減按鈕的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、實作效果如下，基礎功能已經算實作了，但還不完善，有需要的可以自己完善完善，今天的分享就到這了
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/397109.html
標籤：.NET技术