devbox
木道寻08
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：木道寻08 | 2024-07-31 23:51:16

赞

踩

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.         <!--  深色背景  -->
  21.         <SolidColorBrush x:Key="MainForegroundBrush" Color="#CCFFFFFF" />
  22.         <SolidColorBrush x:Key="TitleForegroundBrush" Color="#CCFFFFFF" />
  23.         <SolidColorBrush x:Key="MainBorderBackgroundBrush" Color="#0AFFFFFF" />
  24.         <SolidColorBrush x:Key="MainBorderBorderBrush" Color="#33FFFFFF" />
  25.         <Color x:Key="MainBorderTitleColor1">#01FFFFFF</Color>
  26.         <Color x:Key="MainBorderTitleColor2">#22FFFFFF</Color>
  27.         <SolidColorBrush x:Key="LineBrush" Color="#555555" />
  28.  
  29.         <Style x:Key="SettingItemBorderStyle" TargetType="Border">
  30.             <Setter Property="Height" Value="140" />
  31.             <Setter Property="Background" Value="{StaticResource MainBorderBackgroundBrush}" />
  32.             <Setter Property="Margin" Value="10" />
  33.             <Setter Property="CornerRadius" Value="10" />
  34.         </Style>
  35.         <Style x:Key="IconButton" TargetType="Button">
  36.             <Setter Property="Width" Value="200" />
  37.             <Setter Property="Height" Value="70" />
  38.             <Setter Property="FontSize" Value="35" />
  39.             <Setter Property="Opacity" Value=".8" />
  40.             <Setter Property="Foreground" Value="White" />
  41.             <Setter Property="FontWeight" Value="Bold" />
  42.             <Setter Property="FontFamily" Value="MicrosoftYahei" />
  43.             <Setter Property="Background" Value="#7960E8" />
  44.             <Setter Property="Template">
  45.                 <Setter.Value>
  46.                     <ControlTemplate TargetType="Button">
  47.                         <Grid
  48.                             x:Name="grid"
  49.                             Width="{TemplateBinding Width}"
  50.                             Height="{TemplateBinding Height}"
  51.                             Background="Transparent">
  52.                             <Border
  53.                                 x:Name="bd"
  54.                                 Width="{TemplateBinding Width}"
  55.                                 Height="{TemplateBinding Height}"
  56.                                 Background="{TemplateBinding Background}"
  57.                                 CornerRadius="10" />
  58.                             <Label
  59.                                 HorizontalAlignment="Center"
  60.                                 VerticalAlignment="Center"
  61.                                 Content="{TemplateBinding Tag}"
  62.                                 FontFamily="{TemplateBinding FontFamily}"
  63.                                 FontSize="{TemplateBinding FontSize}"
  64.                                 FontWeight="{TemplateBinding FontWeight}"
  65.                                 Foreground="{TemplateBinding Foreground}" />
  66.                         </Grid>
  67.                         <ControlTemplate.Triggers>
  68.                             <Trigger Property="IsMouseOver" Value="True">
  69.                                 <Setter TargetName="bd" Property="Background" Value="#9980E8" />
  70.                                 <!--<Setter TargetName="bd" Property="Background" Value="#426FFF" />-->
  71.                             </Trigger>
  72.                             <Trigger Property="IsEnabled" Value="False">
  73.                                 <Setter TargetName="bd" Property="Background" Value="#777777" />
  74.                             </Trigger>
  75.                             <Trigger Property="IsPressed" Value="True">
  76.                                 <Setter Property="Opacity" Value="0.6" />
  77.                             </Trigger>
  78.                         </ControlTemplate.Triggers>
  79.                     </ControlTemplate>
  80.                 </Setter.Value>
  81.             </Setter>
  82.         </Style>
  83.     </UserControl.Resources>
  84.     <Grid>
  85.         <Border
  86.             BorderBrush="{StaticResource MainBorderBorderBrush}"
  87.             BorderThickness="0,0,0,3"
  88.             Style="{StaticResource SettingItemBorderStyle}">
  89.             <Grid>
  90.                 <Grid.RowDefinitions>
  91.                     <RowDefinition Height="35" />
  92.                     <RowDefinition />
  93.                     <RowDefinition Height="25" />
  94.                 </Grid.RowDefinitions>
  95.                 <Border VerticalAlignment="Top" CornerRadius="10,10,0,0">
  96.                     <Border.Background>
  97.                         <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
  98.                             <LinearGradientBrush.RelativeTransform>
  99.                                 <TransformGroup>
  100.                                     <ScaleTransform CenterX="0.5" CenterY="0.5" />
  101.                                     <SkewTransform CenterX="0.5" CenterY="0.5" />
  102.                                     <RotateTransform Angle="90" CenterX="0.5" CenterY="0.5" />
  103.                                     <TranslateTransform />
  104.                                 </TransformGroup>
  105.                             </LinearGradientBrush.RelativeTransform>
  106.                             <GradientStop Color="{StaticResource MainBorderTitleColor1}" />
  107.                             <GradientStop Offset="1" Color="{StaticResource MainBorderTitleColor2}" />
  108.                         </LinearGradientBrush>
  109.                     </Border.Background>
  110.                     <Label
  111.                         Margin="10,0,0,0"
  112.                         HorizontalAlignment="Left"
  113.                         VerticalAlignment="Center"
  114.                         Content="{Binding ItemTitle, RelativeSource={RelativeSource AncestorType=UserControl}, UpdateSourceTrigger=PropertyChanged}"
  115.                         FontSize="16"
  116.                         Foreground="{StaticResource TitleForegroundBrush}" />
  117.                 </Border>
  118.                 <Grid Grid.Row="1" Margin="30,0,30,0">
  119.                     <Button
  120.                         Name="btn_Dec"
  121.                         Width="60"
  122.                         Height=" 45"
  123.                         Margin="10"
  124.                         HorizontalAlignment="Left"
  125.                         Click="btn_Dec_Click"
  126.                         Foreground="White"
  127.                         Style="{StaticResource IconButton}"
  128.                         Tag="－" />
  129.                     <StackPanel HorizontalAlignment="Center" Orientation="Horizontal">
  130.                         <Label
  131.                             MinWidth="100"
  132.                             VerticalAlignment="Center"
  133.                             HorizontalContentAlignment="Center"
  134.                             Content="{Binding Value, RelativeSource={RelativeSource AncestorType=UserControl}, UpdateSourceTrigger=PropertyChanged}"
  135.                             FontSize="32"
  136.                             Foreground="{StaticResource MainForegroundBrush}" />
  137.                         <Label
  138.                             MinWidth="80"
  139.                             Margin="10,0,0,0"
  140.                             HorizontalAlignment="Center"
  141.                             VerticalAlignment="Center"
  142.                             Content="{Binding Unit, RelativeSource={RelativeSource AncestorType=UserControl}, UpdateSourceTrigger=PropertyChanged}"
  143.                             FontSize="30"
  144.                             Foreground="{StaticResource MainForegroundBrush}" />
  145.                     </StackPanel>
  146.                     <Button
  147.                         Name="btn_Inc"
  148.                         Width="60"
  149.                         Height=" 45"
  150.                         Margin="10"
  151.                         HorizontalAlignment="Right"
  152.                         Click="btn_Inc_Click"
  153.                         Style="{StaticResource IconButton}"
  154.                         Tag="＋" />
  155.                 </Grid>
  156.                 <Border
  157.                     Grid.Row="1"
  158.                     Height="1"
  159.                     Margin="20,0,20,0"
  160.                     VerticalAlignment="Bottom"
  161.                     Background="{StaticResource LineBrush}" />
  162.                 <Label
  163.                     Grid.Row="2"
  164.                     Margin="20,0,0,0"
  165.                     Content="{Binding Describe, RelativeSource={RelativeSource AncestorType=UserControl}, UpdateSourceTrigger=PropertyChanged}"
  166.                     Foreground="#BB888888" />
  167.             </Grid>
  168.         </Border>
  169.     </Grid>
  170. </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.         // 依赖属性注册 单位 
  20.         public static readonly DependencyProperty UnitProperty =
  21.             DependencyProperty.Register(
  22.                 "Unit",
  23.                 typeof(string),
  24.                 typeof(SettingsItem),
  25.                 new PropertyMetadata(default(string)));
  26.         public string Unit
  27.         {
  28.             get { return (string)GetValue(UnitProperty); }
  29.             set { SetValue(UnitProperty, value); }
  30.         }
  31.  
  32.         // 依赖属性注册 描述
  33.         public static readonly DependencyProperty DescribeProperty =
  34.             DependencyProperty.Register(
  35.                 "Describe",
  36.                 typeof(string),
  37.                 typeof(SettingsItem),
  38.                 new PropertyMetadata(default(string)));
  39.         public string Describe
  40.         {
  41.             get { return (string)GetValue(DescribeProperty); }
  42.             set { SetValue(DescribeProperty, value); }
  43.         }
  44.         // 依赖属性注册 加减按钮步长 
  45.         public static readonly DependencyProperty StepProperty =
  46.             DependencyProperty.Register(
  47.                 "Step",
  48.                 typeof(float),
  49.                 typeof(SettingsItem),
  50.                 new PropertyMetadata(default(float)));
  51.         public float Step
  52.         {
  53.             get { return (float)GetValue(StepProperty); }
  54.             set { SetValue(StepProperty, value); }
  55.         }
  56.  
  57.         // 依赖属性注册 显示数值
  58.         public static readonly DependencyProperty ValueProperty =
  59.             DependencyProperty.Register(
  60.                 "Value",
  61.                 typeof(float),
  62.                 typeof(SettingsItem),
  63.                 new PropertyMetadata(default(float)));
  64.         public float Value
  65.         {
  66.             get { return (float)GetValue(ValueProperty); }
  67.             set { SetValue(ValueProperty, value); }
  68.         }
  69.  
  70.         // 依赖属性注册 最大值
  71.         public static readonly DependencyProperty MaxValueProperty =
  72.             DependencyProperty.Register(
  73.                 "MaxValue",
  74.                 typeof(float),
  75.                 typeof(SettingsItem),
  76.                 new PropertyMetadata(default(float)));
  77.         public float MaxValue
  78.         {
  79.             get { return (float)GetValue(MaxValueProperty); }
  80.             set { SetValue(MaxValueProperty, value); }
  81.         }
  82.  
  83.         // 依赖属性注册 最小值
  84.         public static readonly DependencyProperty MinValueProperty =
  85.             DependencyProperty.Register(
  86.                 "MinValue",
  87.                 typeof(float),
  88.                 typeof(SettingsItem),
  89.                 new PropertyMetadata(default(float)));
  90.         public float MinValue
  91.         {
  92.             get { return (float)GetValue(MinValueProperty); }
  93.             set { SetValue(MinValueProperty, value); }
  94.         }
  95.  
  96.         public SettingsItem()
  97.         {
  98.             InitializeComponent();
  99.         }
  100.  
  101.         private void btn_Inc_Click(object sender, RoutedEventArgs e)
  102.         {
  103.             float f = this.Value + this.Step;
  104.             if (f <= this.MaxValue)
  105.             {
  106.                 this.Value = f;
  107.             }
  108.         }
  109.  
  110.         private void btn_Dec_Click(object sender, RoutedEventArgs e)
  111.         {
  112.             float f = this.Value - this.Step;
  113.             if (f>=this.MinValue)
  114.             {
  115.                 this.Value = f;
  116.             }
  117.         }
  118.     }

在主页使用时：先引用名称空间：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
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号