当前位置:   article > 正文

WPF前端:一个简单的数值设置样式卡片,支持MVVM绑定

WPF前端:一个简单的数值设置样式卡片,支持MVVM绑定

默认是两套笔刷,如果是浅色背景,要把深色背景的画笔注释掉,然后把浅色画笔解除注释。

用于数量、范围是确定的,并且点击不需要太多次的情况(如果范围太大,需要点击太多次,使用滑动条而不是按钮)

为什么不用输入框?因为在触控屏上不方便输入,有时候范围比较小,举例:设置模块温度报警阈值,50-100℃,每5℃一个档位,就可以使用上面的自定义控件来设置。

使用时只需要设置如下几个简单参数即可,非常简单:

Describe:最下方的详细描述

ItemTitle:最上方显示的标题

MaxValue和MinValue:最大和最小值,对能更改的数值进行限制

Step:按钮每点击一次,更改的数值大小

Unit:单位

Value:实际数值,支持MVVM绑定,需要设置Mode为双向

引用:项目中添加Controls文件夹,存放自定义控件,然后新建一个用户控件,命名为SettingsItem

代码(前端):x:Class后面需要换成自己项目里的

  1. <UserControl
  2. x:Class="WpfApp1.Controls.SettingsItem"
  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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  7. d:DesignHeight="160"
  8. d:DesignWidth="540"
  9. mc:Ignorable="d">
  10. <UserControl.Resources>
  11. <!-- 浅色背景 -->
  12. <!--<SolidColorBrush x:Key="MainForegroundBrush" Color="#DD000000" />
  13. <SolidColorBrush x:Key="TitleForegroundBrush" Color="#DD5F3F9F" />
  14. <SolidColorBrush x:Key="MainBorderBackgroundBrush" Color="#0A222222" />
  15. <SolidColorBrush x:Key="MainBorderBorderBrush" Color="#33222222" />
  16. <Color x:Key="MainBorderTitleColor1">#015940A8</Color>
  17. <Color x:Key="MainBorderTitleColor2">#335940A8</Color>
  18. <SolidColorBrush x:Key="LineBrush" Color="#CCAAAAAA" />-->
  19. <!-- 深色背景 -->
  20. <SolidColorBrush x:Key="MainForegroundBrush" Color="#CCFFFFFF" />
  21. <SolidColorBrush x:Key="TitleForegroundBrush" Color="#CCFFFFFF" />
  22. <SolidColorBrush x:Key="MainBorderBackgroundBrush" Color="#0AFFFFFF" />
  23. <SolidColorBrush x:Key="MainBorderBorderBrush" Color="#33FFFFFF" />
  24. <Color x:Key="MainBorderTitleColor1">#01FFFFFF</Color>
  25. <Color x:Key="MainBorderTitleColor2">#22FFFFFF</Color>
  26. <SolidColorBrush x:Key="LineBrush" Color="#555555" />
  27. <Style x:Key="SettingItemBorderStyle" TargetType="Border">
  28. <Setter Property="Height" Value="140" />
  29. <Setter Property="Background" Value="{StaticResource MainBorderBackgroundBrush}" />
  30. <Setter Property="Margin" Value="10" />
  31. <Setter Property="CornerRadius" Value="10" />
  32. </Style>
  33. <Style x:Key="IconButton" TargetType="Button">
  34. <Setter Property="Width" Value="200" />
  35. <Setter Property="Height" Value="70" />
  36. <Setter Property="FontSize" Value="35" />
  37. <Setter Property="Opacity" Value=".8" />
  38. <Setter Property="Foreground" Value="White" />
  39. <Setter Property="FontWeight" Value="Bold" />
  40. <Setter Property="FontFamily" Value="MicrosoftYahei" />
  41. <Setter Property="Background" Value="#7960E8" />
  42. <Setter Property="Template">
  43. <Setter.Value>
  44. <ControlTemplate TargetType="Button">
  45. <Grid
  46. x:Name="grid"
  47. Width="{TemplateBinding Width}"
  48. Height="{TemplateBinding Height}"
  49. Background="Transparent">
  50. <Border
  51. x:Name="bd"
  52. Width="{TemplateBinding Width}"
  53. Height="{TemplateBinding Height}"
  54. Background="{TemplateBinding Background}"
  55. CornerRadius="10" />
  56. <Label
  57. HorizontalAlignment="Center"
  58. VerticalAlignment="Center"
  59. Content="{TemplateBinding Tag}"
  60. FontFamily="{TemplateBinding FontFamily}"
  61. FontSize="{TemplateBinding FontSize}"
  62. FontWeight="{TemplateBinding FontWeight}"
  63. Foreground="{TemplateBinding Foreground}" />
  64. </Grid>
  65. <ControlTemplate.Triggers>
  66. <Trigger Property="IsMouseOver" Value="True">
  67. <Setter TargetName="bd" Property="Background" Value="#9980E8" />
  68. <!--<Setter TargetName="bd" Property="Background" Value="#426FFF" />-->
  69. </Trigger>
  70. <Trigger Property="IsEnabled" Value="False">
  71. <Setter TargetName="bd" Property="Background" Value="#777777" />
  72. </Trigger>
  73. <Trigger Property="IsPressed" Value="True">
  74. <Setter Property="Opacity" Value="0.6" />
  75. </Trigger>
  76. </ControlTemplate.Triggers>
  77. </ControlTemplate>
  78. </Setter.Value>
  79. </Setter>
  80. </Style>
  81. </UserControl.Resources>
  82. <Grid>
  83. <Border
  84. BorderBrush="{StaticResource MainBorderBorderBrush}"
  85. BorderThickness="0,0,0,3"
  86. Style="{StaticResource SettingItemBorderStyle}">
  87. <Grid>
  88. <Grid.RowDefinitions>
  89. <RowDefinition Height="35" />
  90. <RowDefinition />
  91. <RowDefinition Height="25" />
  92. </Grid.RowDefinitions>
  93. <Border VerticalAlignment="Top" CornerRadius="10,10,0,0">
  94. <Border.Background>
  95. <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
  96. <LinearGradientBrush.RelativeTransform>
  97. <TransformGroup>
  98. <ScaleTransform CenterX="0.5" CenterY="0.5" />
  99. <SkewTransform CenterX="0.5" CenterY="0.5" />
  100. <RotateTransform Angle="90" CenterX="0.5" CenterY="0.5" />
  101. <TranslateTransform />
  102. </TransformGroup>
  103. </LinearGradientBrush.RelativeTransform>
  104. <GradientStop Color="{StaticResource MainBorderTitleColor1}" />
  105. <GradientStop Offset="1" Color="{StaticResource MainBorderTitleColor2}" />
  106. </LinearGradientBrush>
  107. </Border.Background>
  108. <Label
  109. Margin="10,0,0,0"
  110. HorizontalAlignment="Left"
  111. VerticalAlignment="Center"
  112. Content="{Binding ItemTitle, RelativeSource={RelativeSource AncestorType=UserControl}, UpdateSourceTrigger=PropertyChanged}"
  113. FontSize="16"
  114. Foreground="{StaticResource TitleForegroundBrush}" />
  115. </Border>
  116. <Grid Grid.Row="1" Margin="30,0,30,0">
  117. <Button
  118. Name="btn_Dec"
  119. Width="60"
  120. Height=" 45"
  121. Margin="10"
  122. HorizontalAlignment="Left"
  123. Click="btn_Dec_Click"
  124. Foreground="White"
  125. Style="{StaticResource IconButton}"
  126. Tag="-" />
  127. <StackPanel HorizontalAlignment="Center" Orientation="Horizontal">
  128. <Label
  129. MinWidth="100"
  130. VerticalAlignment="Center"
  131. HorizontalContentAlignment="Center"
  132. Content="{Binding Value, RelativeSource={RelativeSource AncestorType=UserControl}, UpdateSourceTrigger=PropertyChanged}"
  133. FontSize="32"
  134. Foreground="{StaticResource MainForegroundBrush}" />
  135. <Label
  136. MinWidth="80"
  137. Margin="10,0,0,0"
  138. HorizontalAlignment="Center"
  139. VerticalAlignment="Center"
  140. Content="{Binding Unit, RelativeSource={RelativeSource AncestorType=UserControl}, UpdateSourceTrigger=PropertyChanged}"
  141. FontSize="30"
  142. Foreground="{StaticResource MainForegroundBrush}" />
  143. </StackPanel>
  144. <Button
  145. Name="btn_Inc"
  146. Width="60"
  147. Height=" 45"
  148. Margin="10"
  149. HorizontalAlignment="Right"
  150. Click="btn_Inc_Click"
  151. Style="{StaticResource IconButton}"
  152. Tag="+" />
  153. </Grid>
  154. <Border
  155. Grid.Row="1"
  156. Height="1"
  157. Margin="20,0,20,0"
  158. VerticalAlignment="Bottom"
  159. Background="{StaticResource LineBrush}" />
  160. <Label
  161. Grid.Row="2"
  162. Margin="20,0,0,0"
  163. Content="{Binding Describe, RelativeSource={RelativeSource AncestorType=UserControl}, UpdateSourceTrigger=PropertyChanged}"
  164. Foreground="#BB888888" />
  165. </Grid>
  166. </Border>
  167. </Grid>
  168. </UserControl>

后端代码(.cs文件中):替换掉默认的类

  1. /// <summary>
  2. /// SettingsItem.xaml 的交互逻辑
  3. /// </summary>
  4. public partial class SettingsItem : UserControl
  5. {
  6. // 依赖属性注册 标题
  7. public static readonly DependencyProperty TiTleProperty =
  8. DependencyProperty.Register(
  9. "ItemTiTle",
  10. typeof(string),
  11. typeof(SettingsItem),
  12. new PropertyMetadata(default(string)));
  13. public string ItemTitle
  14. {
  15. get { return (string)GetValue(TiTleProperty); }
  16. set { SetValue(TiTleProperty, value); }
  17. }
  18. // 依赖属性注册 单位
  19. public static readonly DependencyProperty UnitProperty =
  20. DependencyProperty.Register(
  21. "Unit",
  22. typeof(string),
  23. typeof(SettingsItem),
  24. new PropertyMetadata(default(string)));
  25. public string Unit
  26. {
  27. get { return (string)GetValue(UnitProperty); }
  28. set { SetValue(UnitProperty, value); }
  29. }
  30. // 依赖属性注册 描述
  31. public static readonly DependencyProperty DescribeProperty =
  32. DependencyProperty.Register(
  33. "Describe",
  34. typeof(string),
  35. typeof(SettingsItem),
  36. new PropertyMetadata(default(string)));
  37. public string Describe
  38. {
  39. get { return (string)GetValue(DescribeProperty); }
  40. set { SetValue(DescribeProperty, value); }
  41. }
  42. // 依赖属性注册 加减按钮步长
  43. public static readonly DependencyProperty StepProperty =
  44. DependencyProperty.Register(
  45. "Step",
  46. typeof(float),
  47. typeof(SettingsItem),
  48. new PropertyMetadata(default(float)));
  49. public float Step
  50. {
  51. get { return (float)GetValue(StepProperty); }
  52. set { SetValue(StepProperty, value); }
  53. }
  54. // 依赖属性注册 显示数值
  55. public static readonly DependencyProperty ValueProperty =
  56. DependencyProperty.Register(
  57. "Value",
  58. typeof(float),
  59. typeof(SettingsItem),
  60. new PropertyMetadata(default(float)));
  61. public float Value
  62. {
  63. get { return (float)GetValue(ValueProperty); }
  64. set { SetValue(ValueProperty, value); }
  65. }
  66. // 依赖属性注册 最大值
  67. public static readonly DependencyProperty MaxValueProperty =
  68. DependencyProperty.Register(
  69. "MaxValue",
  70. typeof(float),
  71. typeof(SettingsItem),
  72. new PropertyMetadata(default(float)));
  73. public float MaxValue
  74. {
  75. get { return (float)GetValue(MaxValueProperty); }
  76. set { SetValue(MaxValueProperty, value); }
  77. }
  78. // 依赖属性注册 最小值
  79. public static readonly DependencyProperty MinValueProperty =
  80. DependencyProperty.Register(
  81. "MinValue",
  82. typeof(float),
  83. typeof(SettingsItem),
  84. new PropertyMetadata(default(float)));
  85. public float MinValue
  86. {
  87. get { return (float)GetValue(MinValueProperty); }
  88. set { SetValue(MinValueProperty, value); }
  89. }
  90. public SettingsItem()
  91. {
  92. InitializeComponent();
  93. }
  94. private void btn_Inc_Click(object sender, RoutedEventArgs e)
  95. {
  96. float f = this.Value + this.Step;
  97. if (f <= this.MaxValue)
  98. {
  99. this.Value = f;
  100. }
  101. }
  102. private void btn_Dec_Click(object sender, RoutedEventArgs e)
  103. {
  104. float f = this.Value - this.Step;
  105. if (f>=this.MinValue)
  106. {
  107. this.Value = f;
  108. }
  109. }
  110. }

在主页使用时:先引用名称空间:Controls(项目名称换成自己的)

使用:

  1. <controls:SettingsItem
  2. Grid.Row="1"
  3. Width="500"
  4. Height="160"
  5. Describe="设备温度报警阈值,超出此温度设备将报警"
  6. ItemTitle="报警阈值"
  7. MaxValue="100"
  8. MinValue="50"
  9. Step="5"
  10. Unit="℃"
  11. Value="{Binding Temp, Mode=TwoWay}" />

完整代码(含MVVM绑定示例)icon-default.png?t=N7T8https://download.csdn.net/download/XX_YZDY/89574685上传了一份简单的源码

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/木道寻08/article/detail/911336
推荐阅读
相关标签
  

闽ICP备14008679号