Time is like water, you can not go back into the flow!
Thumbs up again, a habit, which is that you give me creative power!
This article Dotnet9 https://dotnet9.com already been included, the owners are happy to share dotnet related technologies, such as Winform, WPF, ASP.NET Core, etc., are also related to the desktop C ++ Qt Quick and Qt Widgets, just share their own familiar, own will.
Read Navigation:
First, look at the effect of
two paper background
three code to achieve
four articles refer
five download
First, look at the effect
Second, text background
Xiao Bian whole is to look at Design com WPF gauge controls Code Great God video hand to knock, the video length 19:28, only background sound, borderless video distribution programs, and the great God only the code exchange, we are interested can go to the great god YouTube worship , watching videos to learn C # WPF technology I see the line.
Third, code implementation
The whole solution structure:
1, the project owners to use WPF .Net Core 3.1 was created, the name created for the "Gauge" solution.
2, add a user control, named "UserControlGauge.xaml"
Here is the xaml control of part of the instrument, the code much, generally is to use two Border draw the outline of the instrument panel, plus a hands Border, a numerical display TextBlock, plus a control instrument value Slider, it's that simple to make a rough look instrumentation control:
1 <UserControl x:Class="Gauge.UserControlGauge" 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:Gauge" 7 mc:Ignorable="d" 8 d:DesignHeight="450" d:DesignWidth="800"> 9 <Grid> 10 <Slider Minimum="0" Maximum="170" Width="300" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="40" Value="{Binding Path=Value}"/> 11 <Border HorizontalAlignment="Center" VerticalAlignment="Bottom" Height="300" Width="600" BorderBrush="#FFCF5D1D" 12 BorderThickness="2 2 2 0" CornerRadius="300 300 0 0" Background="#FF151515"/> 13 <Border HorizontalAlignment="Center" VerticalAlignment="Bottom" Height="290" Width="580" BorderBrush="#FFCF5D1D" 14 BorderThickness="0 2 0 0" CornerRadius="300 300 0 0"> 15 <Border.Effect> 16 <DropShadowEffect Color="#FFFFC7A7" BlurRadius="10" ShadowDepth="2"/> 17 </Border.Effect> 18 </Border> 19 <TextBlock HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="100" FontSize="80" 20 FontFamily="Agency FB" Foreground="#FF95D4FF" Text="{Binding Path=Value,Mode=TwoWay}"> 21 <TextBlock.Effect> 22 <DropShadowEffect BlurRadius="20" Color="#FF91DEFB" ShadowDepth="0" /> 23 </TextBlock.Effect> 24 </TextBlock> 25 <Border Width="5" CornerRadius="120 120 0 0" Background="#FFFF6901" RenderTransformOrigin="0.5 2" Height="140" Margin="0 0 0 140" 26 VerticalAlignment="Bottom" HorizontalAlignment="Center"> 27 <Border.RenderTransform> 28 <TransformGroup> 29 <ScaleTransform/> 30 <SkewTransform/> 31 <RotateTransform Angle="{Binding Path=Angle}"/> 32 <TranslateTransform/> 33 </TransformGroup> 34 </Border.RenderTransform> 35 </Border> 36 </Grid> 37 </UserControl>
3、添加仪表控件ViewModel
仪表控件实际使用场景，可能要在仪表盘上加上显示的刻度值，仪表值会根据业务实时变化等 ，这些都方便添加，读者可以自己扩展，下面的ViewModel只是绑定了仪表控件的指针摆动角度及显示的实际刻度值：
1 using System.ComponentModel; 2 3 namespace Gauge 4 { 5 public class GaugeViewModel : INotifyPropertyChanged 6 { 7 public event PropertyChangedEventHandler PropertyChanged; 8 private void NotifyPropertyChanged(string info) 9 { 10 if (PropertyChanged != null) 11 { 12 PropertyChanged(this, new PropertyChangedEventArgs(info)); 13 } 14 } 15 16 public GaugeViewModel() 17 { 18 Angle = -85; 19 Value = 0; 20 } 21 22 private int _angle; 23 public int Angle 24 { 25 get { return _angle; } 26 private set 27 { 28 if (value != _angle) 29 { 30 _angle = value; 31 NotifyPropertyChanged("Angle"); 32 } 33 } 34 } 35 36 private int _value; 37 public int Value 38 { 39 get { return _value; } 40 set 41 { 42 if (value != _value && value >= 0 && value <= 170) 43 { 44 _value = value; 45 Angle = value - 85; 46 NotifyPropertyChanged("Value"); 47 } 48 } 49 } 50 } 51 }
4、主窗体MainWindow
xaml部分简单，直接加入仪表控件即可：
1 <Window x:Class="Gauge.MainWindow" 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:Gauge" 7 mc:Ignorable="d" 8 Title="MainWindow" Height="450" Width="800" Background="#FF363636" WindowStyle="None" ResizeMode="NoResize" WindowStartupLocation="CenterScreen"> 9 <Grid> 10 <local:UserControlGauge/> 11 </Grid> 12 </Window>
后台绑定控件ViewModel
1 using System.Windows; 2 3 namespace Gauge 4 { 5 /// <summary> 6 /// Interaction logic for MainWindow.xaml 7 /// </summary> 8 public partial class MainWindow : Window 9 { 10 public MainWindow() 11 { 12 this.DataContext = new GaugeViewModel(); 13 InitializeComponent(); 14 } 15 } 16 }
四、文章参考
建议直接打开大神视频学习，他的YouTube上还有很多代码视频哦，参考：
Design com WPF： https://www.youtube.com/watch?v=KElruOV2EfE&t=930s 。
五、代码下载
文章中代码几乎已经全部贴出，就是这么多。
除非注明，文章均由 Dotnet9 整理发布，欢迎转载。
转载请注明本文地址：https://dotnet9.com/6662.html
欢迎扫描下方二维码关注 Dotnet9 的微信公众号，本站会及时推送最新技术文章（微信公众号“dotnet9_com”）：
如有收获，请大力转发，给Dotnet9赞助和支持，谢谢大家对dotnet技术的关注和支持 。