WPF 自定義一個UpDownNumberic控制元件

阿新 • • 發佈：2022-03-28

Winform有這個控制元件，WPF卻沒有，自己做一個吧。。

先看看效果

控制元件程式碼

 1     [TemplatePart(Name = "Part_UpRepeatButton", Type = typeof(RepeatButton))]
 2     [TemplatePart(Name = "Part_DownRepeatButton", Type = typeof(RepeatButton))]
 3     [TemplatePart(Name = "Part_ValueContentPresenter", Type = typeof(ContentPresenter))]
 
 4     public class UpDownNumeric : Control
 5     {
 6         // Using a DependencyProperty as the backing store for Increment.  This enables animation, styling, binding, etc...
 7         public static readonly DependencyProperty IncrementProperty =
 8             DependencyProperty.Register("Increment 
", typeof(double), typeof(UpDownNumeric), new PropertyMetadata(1d));
 9 
10         // Using a DependencyProperty as the backing store for MaxValue.  This enables animation, styling, binding, etc...
11         public static readonly DependencyProperty MaxValueProperty =
12             DependencyProperty.Register(" 
MaxValue", typeof(double), typeof(UpDownNumeric), new PropertyMetadata(100d));
13 
14         // Using a DependencyProperty as the backing store for MinValue.  This enables animation, styling, binding, etc...
15         public static readonly DependencyProperty MinValueProperty =
16             DependencyProperty.Register("MinValue", typeof(double), typeof(UpDownNumeric), new PropertyMetadata(0d));
17 
18         // Using a DependencyProperty as the backing store for Value.  This enables animation, styling, binding, etc...
19         public static readonly DependencyProperty ValueProperty =
20             DependencyProperty.Register("Value", typeof(double), typeof(UpDownNumeric), new FrameworkPropertyMetadata(0d));
21 
22         public double Increment
23         {
24             get { return (double)GetValue(IncrementProperty); }
25             set { SetValue(IncrementProperty, value); }
26         }
27 
28         public double MaxValue
29         {
30             get { return (double)GetValue(MaxValueProperty); }
31             set { SetValue(MaxValueProperty, value); }
32         }
33 
34         public double MinValue
35         {
36             get { return (double)GetValue(MinValueProperty); }
37             set { SetValue(MinValueProperty, value); }
38         }
39 
40         public double Value
41         {
42             get { return (double)GetValue(ValueProperty); }
43             set { SetValue(ValueProperty, value); }
44         }
45 
46         static UpDownNumeric()
47         {
48             DefaultStyleKeyProperty.OverrideMetadata(typeof(UpDownNumeric), new FrameworkPropertyMetadata(typeof(UpDownNumeric)));
49         }
50 
51         public override void OnApplyTemplate()
52         {
53             //樣式應用這裡繞了個大彎，開始以為數字呈現應該用TextBox,結果TextBox的Text屬性無法繫結Value值，型別不統一
54             //後面把內容控制元件換成了ContentControl,解決了問題
55             base.OnApplyTemplate();
56             var up = GetTemplateChild("Part_UpRepeatButton") as RepeatButton;
57             var down = GetTemplateChild("Part_DownRepeatButton") as RepeatButton;
58             up.Click += (s, e) =>
59             {
60                 if (Value >= MaxValue)
61                 {
62                     Value = MaxValue;
63                 }
64                 else
65                 {
66                     Value += Increment;
67                 }
68             };
69             down.Click += (s, e) =>
70             {
71                 if (Value <= MinValue)
72                 {
73                     Value = MinValue;
74                 }
75                 else
76                 {
77                     Value -= Increment;
78                 }
79             };
80         }
81     }

樣式程式碼

 1 <Style TargetType="{x:Type local:UpDownNumeric}">
 2         
 3         <Setter Property="Template">
 4             <Setter.Value>
 5                 <ControlTemplate TargetType="{x:Type local:UpDownNumeric}">
 6                     <Grid Height="{TemplateBinding Height}">
 7                         <Grid.ColumnDefinitions>
 8                             <ColumnDefinition Width="8*"/>
 9                             <ColumnDefinition Width="2*"/>
10                         </Grid.ColumnDefinitions>
11                         <Border
12                             Grid.Column="0"
13                             BorderBrush="Gray"
14                             BorderThickness=".5">
15                             <ContentControl
16                                 x:Name="Part_ValueContentPresenter"
17                                 VerticalAlignment="Center"
18                                 Content="{TemplateBinding Value}"
19                                 FontSize="{TemplateBinding FontSize}"/>
20                         </Border>
21                         <Grid Grid.Column="1">
22                             <Grid.RowDefinitions>
23                                 <RowDefinition Height="*"/>
24                                 <RowDefinition Height="*"/>
25                             </Grid.RowDefinitions>
26                             <RepeatButton
27                                 x:Name="Part_UpRepeatButton"
28                                 Grid.Row="0"
29                                 Padding="0"
30                                 HorizontalContentAlignment="Center"
31                                 VerticalContentAlignment="Center"
32                                 Content="+"/>
33                             <RepeatButton
34                                 x:Name="Part_DownRepeatButton"
35                                 Grid.Row="1"
36                                 Padding="0"
37                                 HorizontalContentAlignment="Center"
38                                 VerticalContentAlignment="Center"
39                                 Content="-"/>
40                         </Grid>
41                     </Grid>
42                 </ControlTemplate>
43             </Setter.Value>
44         </Setter>
45     </Style>

使用

 1 <Window
 2     x:Class="MvvmToolkit學習.MainWindow"
 3     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 4     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 5     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 6     xmlns:local="clr-namespace:MvvmToolkit學習"
 7     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 8     Title="MainWindow"
 9     Width="800"
10     Height="600"
11     d:DataContext="{d:DesignInstance Type=local:TestViewModel}"
12     mc:Ignorable="d">
13     <Grid>
14         <StackPanel
15             HorizontalAlignment="Center"
16             VerticalAlignment="Center"
17             Orientation="Vertical">
18             <local:UpDownNumeric
19                 Width="200"
20                 Height="70"
21                 VerticalAlignment="Center"
22                 FontSize="25"
23                 Increment="2"
24                 MaxValue="10"
25                 MinValue="-10"
26                 Value="5"/>
27         </StackPanel>
28     </Grid>
29 </Window>