发帖
翼度科技»论坛 › 编程开发 › .net › 查看内容

Simple WPF: WPF自定义一个可以定义步长的SpinBox

用户雾里看花

14

主题

14

帖子

42

积分

新手上路

Rank: 1

积分
42
显示全部楼层
最新内容优先发布于个人博客：小虎技术分享站，随后逐步搬运到博客园。
通过WPF的按钮、文本输入框实现了一个简单的SpinBox数字输入用户组件并可以通过数据绑定数值和步长。本文中介绍了通过Xaml代码实现自定义组件的布局，依赖属性的定义和使用等知识点。
完整代码见Github
组合Xaml组件实现基本的组件功能

SpinBox由一个文本输入框和两个箭头按钮组成，我们在Xaml 代码中先把基本的布局做好。其实可以发现自定义用户控件布局和普通的窗体布局的Xaml代码差不多，只不过Xaml的根标签从Window变成了UserControl 。
  1. <UserControl x:
  2.              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  5.              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  6.              xmlns:local="clr-namespace:SpinBox"
  7.              mc:Ignorable="d"
  8.              d:DesignHeight="36" d:DesignWidth="92">
  9.     <Grid>
  10.         <Grid.ColumnDefinitions>
  11.             <ColumnDefinition Width="*"/>
  12.             <ColumnDefinition Width="Auto"/>
  13.         </Grid.ColumnDefinitions>
  15.         <TextBox x:Name="txtBoxValue" Grid.Column="0"
  16. <Window x:
  17.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  18.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  19.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  20.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  21.         xmlns:local="clr-namespace:SpinBox"
  22.         mc:Ignorable="d"
  23.         Title="MainWindow" Height="450" Width="800">
  24.     <Grid>
  25.         <local:MySpinBox MaxHeight="64" MaxWidth="128" Step="2" Value="5"/>
  26.     </Grid>
  27. </Window> TextAlignment="Center" VerticalContentAlignment="Center"/>
  28.         <Grid Grid.Column="1">
  29.             <Grid.RowDefinitions>
  30. <Window x:
  31.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  32.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  33.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  34.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  35.         xmlns:local="clr-namespace:SpinBox"
  36.         mc:Ignorable="d"
  37.         Title="MainWindow" Height="450" Width="800">
  38.     <Grid>
  39.         <local:MySpinBox MaxHeight="64" MaxWidth="128" Step="2" Value="5"/>
  40.     </Grid>
  41. </Window><RowDefinition Height="5*"/>
  42. <Window x:
  43.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  44.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  45.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  46.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  47.         xmlns:local="clr-namespace:SpinBox"
  48.         mc:Ignorable="d"
  49.         Title="MainWindow" Height="450" Width="800">
  50.     <Grid>
  51.         <local:MySpinBox MaxHeight="64" MaxWidth="128" Step="2" Value="5"/>
  52.     </Grid>
  53. </Window><RowDefinition Height="5*"/>
  54.             </Grid.RowDefinitions>
  55.             <Button Grid.Row="0" x:Name="btnPlus">▲</Button>
  56.             <Button Grid.Row="1" x:Name="btnMinor">▼</Button>
  57.         </Grid>
  58.     </Grid>
  59. </UserControl>
复制代码

增加依赖属性

因为我们是WPF中制作的用户组件，因此希望输入的数值、步长的配置等可以在Xaml中实现。因此我们需要给我们新建的用户组件增加依赖属性。这里我们直接通过依赖属性值变化的回调函数来实现文本框信息的更新。
  1.     /// <summary>
  2.     /// SpinBox.xaml 的交互逻辑
  3.     /// </summary>
  4.     [ContentProperty("Value")]
  5.     public partial class MySpinBox : UserControl
  6.     {
  8.         /// <summary>
  9.         /// DepedencyProperty for Step
  10.         /// </summary>
  11.         public static readonly DependencyProperty StepProperty
  12.             = DependencyProperty.Register("Step", typeof(double),
  13. <Window x:
  14.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  15.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  16.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  17.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  18.         xmlns:local="clr-namespace:SpinBox"
  19.         mc:Ignorable="d"
  20.         Title="MainWindow" Height="450" Width="800">
  21.     <Grid>
  22.         <local:MySpinBox MaxHeight="64" MaxWidth="128" Step="2" Value="5"/>
  23.     </Grid>
  24. </Window>typeof(MySpinBox), new PropertyMetadata(1.0));
  26.         /// <summary>
  27.         /// DepedencyProperty for Value
  28.         /// </summary>
  29.         public static readonly DependencyProperty ValueProperty
  30.             = DependencyProperty.Register("Value", typeof(double),
  31. <Window x:
  32.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  33.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  34.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  35.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  36.         xmlns:local="clr-namespace:SpinBox"
  37.         mc:Ignorable="d"
  38.         Title="MainWindow" Height="450" Width="800">
  39.     <Grid>
  40.         <local:MySpinBox MaxHeight="64" MaxWidth="128" Step="2" Value="5"/>
  41.     </Grid>
  42. </Window>typeof(MySpinBox), new FrameworkPropertyMetadata(0.0,
  43. <Window x:
  44.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  45.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  46.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  47.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  48.         xmlns:local="clr-namespace:SpinBox"
  49.         mc:Ignorable="d"
  50.         Title="MainWindow" Height="450" Width="800">
  51.     <Grid>
  52.         <local:MySpinBox MaxHeight="64" MaxWidth="128" Step="2" Value="5"/>
  53.     </Grid>
  54. </Window>     FrameworkPropertyMetadataOptions.BindsTwoWayByDefault
  55. <Window x:
  56.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  57.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  58.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  59.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  60.         xmlns:local="clr-namespace:SpinBox"
  61.         mc:Ignorable="d"
  62.         Title="MainWindow" Height="450" Width="800">
  63.     <Grid>
  64.         <local:MySpinBox MaxHeight="64" MaxWidth="128" Step="2" Value="5"/>
  65.     </Grid>
  66. </Window>    | FrameworkPropertyMetadataOptions.Journal
  67. <Window x:
  68.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  69.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  70.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  71.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  72.         xmlns:local="clr-namespace:SpinBox"
  73.         mc:Ignorable="d"
  74.         Title="MainWindow" Height="450" Width="800">
  75.     <Grid>
  76.         <local:MySpinBox MaxHeight="64" MaxWidth="128" Step="2" Value="5"/>
  77.     </Grid>
  78. </Window>    | FrameworkPropertyMetadataOptions.AffectsRender,
  79. <Window x:
  80.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  81.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  82.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  83.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  84.         xmlns:local="clr-namespace:SpinBox"
  85.         mc:Ignorable="d"
  86.         Title="MainWindow" Height="450" Width="800">
  87.     <Grid>
  88.         <local:MySpinBox MaxHeight="64" MaxWidth="128" Step="2" Value="5"/>
  89.     </Grid>
  90. </Window>    new PropertyChangedCallback(OnValueChanged))
  91. <Window x:
  92.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  93.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  94.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  95.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  96.         xmlns:local="clr-namespace:SpinBox"
  97.         mc:Ignorable="d"
  98.         Title="MainWindow" Height="450" Width="800">
  99.     <Grid>
  100.         <local:MySpinBox MaxHeight="64" MaxWidth="128" Step="2" Value="5"/>
  101.     </Grid>
  102. </Window>);
  105.         public double Value
  106.         {
  107.             get => (double)GetValue(ValueProperty);
  108.             set
  109.             {
  110. <Window x:
  111.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  112.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  113.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  114.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  115.         xmlns:local="clr-namespace:SpinBox"
  116.         mc:Ignorable="d"
  117.         Title="MainWindow" Height="450" Width="800">
  118.     <Grid>
  119.         <local:MySpinBox MaxHeight="64" MaxWidth="128" Step="2" Value="5"/>
  120.     </Grid>
  121. </Window>if (Value != value)
  122. <Window x:
  123.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  124.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  125.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  126.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  127.         xmlns:local="clr-namespace:SpinBox"
  128.         mc:Ignorable="d"
  129.         Title="MainWindow" Height="450" Width="800">
  130.     <Grid>
  131.         <local:MySpinBox MaxHeight="64" MaxWidth="128" Step="2" Value="5"/>
  132.     </Grid>
  133. </Window>{
  134. <Window x:
  135.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  136.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  137.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  138.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  139.         xmlns:local="clr-namespace:SpinBox"
  140.         mc:Ignorable="d"
  141.         Title="MainWindow" Height="450" Width="800">
  142.     <Grid>
  143.         <local:MySpinBox MaxHeight="64" MaxWidth="128" Step="2" Value="5"/>
  144.     </Grid>
  145. </Window>    SetValue(ValueProperty, value);
  146. <Window x:
  147.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  148.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  149.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  150.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  151.         xmlns:local="clr-namespace:SpinBox"
  152.         mc:Ignorable="d"
  153.         Title="MainWindow" Height="450" Width="800">
  154.     <Grid>
  155.         <local:MySpinBox MaxHeight="64" MaxWidth="128" Step="2" Value="5"/>
  156.     </Grid>
  157. </Window>}
  158.             }
  159.         }
  161.         public double Step
  162.         {
  163.             get => (double)GetValue(StepProperty);
  164.             set
  165.             {
  166. <Window x:
  167.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  168.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  169.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  170.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  171.         xmlns:local="clr-namespace:SpinBox"
  172.         mc:Ignorable="d"
  173.         Title="MainWindow" Height="450" Width="800">
  174.     <Grid>
  175.         <local:MySpinBox MaxHeight="64" MaxWidth="128" Step="2" Value="5"/>
  176.     </Grid>
  177. </Window>if (Step != value)
  178. <Window x:
  179.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  180.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  181.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  182.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  183.         xmlns:local="clr-namespace:SpinBox"
  184.         mc:Ignorable="d"
  185.         Title="MainWindow" Height="450" Width="800">
  186.     <Grid>
  187.         <local:MySpinBox MaxHeight="64" MaxWidth="128" Step="2" Value="5"/>
  188.     </Grid>
  189. </Window>{
  190. <Window x:
  191.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  192.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  193.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  194.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  195.         xmlns:local="clr-namespace:SpinBox"
  196.         mc:Ignorable="d"
  197.         Title="MainWindow" Height="450" Width="800">
  198.     <Grid>
  199.         <local:MySpinBox MaxHeight="64" MaxWidth="128" Step="2" Value="5"/>
  200.     </Grid>
  201. </Window>    SetValue(StepProperty, value);
  202. <Window x:
  203.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  204.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  205.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  206.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  207.         xmlns:local="clr-namespace:SpinBox"
  208.         mc:Ignorable="d"
  209.         Title="MainWindow" Height="450" Width="800">
  210.     <Grid>
  211.         <local:MySpinBox MaxHeight="64" MaxWidth="128" Step="2" Value="5"/>
  212.     </Grid>
  213. </Window>}
  214.             }
  215.         }
  217.         private static void OnValueChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
  218.         {
  219.             var spinBox = d as MySpinBox;
  220.             if (spinBox != null)
  221.             {
  222. <Window x:
  223.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  224.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  225.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  226.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  227.         xmlns:local="clr-namespace:SpinBox"
  228.         mc:Ignorable="d"
  229.         Title="MainWindow" Height="450" Width="800">
  230.     <Grid>
  231.         <local:MySpinBox MaxHeight="64" MaxWidth="128" Step="2" Value="5"/>
  232.     </Grid>
  233. </Window>spinBox.txtBoxValue.Text = e.NewValue.ToString();
  234.             }
  235.         }
  236.     }
复制代码
接下来我们在MainWindow.xaml中增加刚刚编写好的MySpinBox组件
  1. <Window x:
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  5.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  6.         xmlns:local="clr-namespace:SpinBox"
  7.         mc:Ignorable="d"
  8.         Title="MainWindow" Height="450" Width="800">
  9.     <Grid>
  10.         <local:MySpinBox MaxHeight="64" MaxWidth="128" Step="2" Value="5"/>
  11.     </Grid>
  12. </Window>
复制代码

增加事件处理

我们在自定义组件中增加按钮组件的响应
  1. <Button Grid.Row="0" x:Name="btnPlus" Click="btnPlus_Click">▲</Button>
  2. <Button Grid.Row="1" x:Name="btnMinor" Click="btnMinor_Click">▼</Button>
复制代码
在C#代码中增加对应的响应逻辑就能实现完整的效果
  1. private void btnPlus_Click(object sender, RoutedEventArgs e)
  2. {
  3.     Value += Step;
  4. }
  6. private void btnMinor_Click(object sender, RoutedEventArgs e)
  7. {
  8.     Value -= Step;
  9. }
复制代码
最后需要说明下的是按钮的Unicode值得十六进制表示分别是0x25B2 和0x25BC 。Xaml本质是一种XML文本，因此在其中表示Unicode要使用XML对应的语法格式。
最终效果



来源:https://www.cnblogs.com/mrchip/p/18290697
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x

上一篇: 在Winform程序中增加隐藏的按键处理，用于处理一些特殊的界面显示或者系统

下一篇: Simple WPF: C# 使用基本的async/await实现异步

发表于 2024-7-9 14:24:20

举报 回复 使用道具

返回列表 发新帖

Archiver|手机版|小黑屋|翼度科技

Copyright © 2001-2020, Tencent Cloud.　Powered by Discuz! X3.4