2021-09-06 WPF数据采集与监控系统开发实战-主窗口布局

微软MVP Eleven

于 2021-09-06 08:46:56 发布

阅读量3.3w

点赞数

分类专栏： # WPF数据采集与监控系统开发实战文章标签： wpf python

本文链接：https://blog.csdn.net/zhaoxi2020/article/details/120126140

版权

WPF数据采集与监控系统开发实战专栏收录该内容

3 篇文章 5 订阅

订阅专栏

这个博客展示了如何使用WPF（Windows Presentation Foundation）设计一个节能管理控制系统的用户界面。内容包括了窗口布局、资源字典、样式定义、以及窗体控制按钮的实现。界面元素包括系统监控、实时曲线等选项卡，以及窗口拖动和关闭功能。此外，还涉及到数据绑定和命令处理，用于动态切换界面内容。

摘要由CSDN通过智能技术生成

在这里插入图片描述

一：页面布局

<Window x:Class="Zhaoxi.Industrial.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Zhaoxi.Industrial"
        mc:Ignorable="d"
        FontFamily="Microsoft YaHei" FontWeight="ExtraLight"
        Title="节能管理控制系统" Height="750" Width="1300"
        WindowStyle="None" AllowsTransparency="True" ResizeMode="CanResizeWithGrip" WindowStartupLocation="CenterScreen"
        MouseMove="Window_MouseMove">
    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/Zhaoxi.Industrial;component/Assets/Styles/ButtonStyles.xaml"/>

                <ResourceDictionary>
                    <Style TargetType="RadioButton" x:Key="NavTabButtonStyle">
                        <Setter Property="FontSize" Value="15"/>
                        <Setter Property="Foreground" Value="#DDD"/>
                        <Setter Property="Padding" Value="10,5"/>
                        <Setter Property="Margin" Value="5,0"/>
                        <Setter Property="Background" Value="Transparent"/>
                        <Setter Property="Command" Value="{Binding TabChangedCommand}"/>
                        <Setter Property="Template" >
                            <Setter.Value>
                                <ControlTemplate TargetType="RadioButton">
                                    <Border Background="{TemplateBinding Background}" CornerRadius="5,5,0,0">
                                        <Grid>
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="auto"/>
                                                <ColumnDefinition/>
                                            </Grid.ColumnDefinitions>
                                            <TextBlock Text="{TemplateBinding Tag}" FontFamily="Assets/Fonts/#iconfont"
                                           FontSize="14" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="10,0,0,0"/>
                                            <ContentPresenter Grid.Column="1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                                  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                  Margin="{TemplateBinding Padding}"/>
                                        </Grid>
                                    </Border>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                        <Style.Triggers>
                            <Trigger Property="IsChecked" Value="True">
                                <Setter Property="Foreground" Value="White"/>
                                <Setter Property="Background" Value="#FF6800"/>
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </ResourceDictionary>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>

    </Window.Resources>
    <Grid>
        <Grid.Background>
            <RadialGradientBrush Center="0.5,0.7" GradientOrigin="0.5,0.7" RadiusY="0.8" RadiusX="0.8">
                <GradientStop Color="#FFA4B3D3"/>
                <GradientStop Color="#FF302C5D" Offset="0.952"/>
                <GradientStop Color="#FF96AAD4" Offset="0.162"/>
            </RadialGradientBrush>
        </Grid.Background>
        <Grid.RowDefinitions>
            <RowDefinition Height="100"/>
            <RowDefinition/>
        </Grid.RowDefinitions>

        <Grid>
            <Border Width="55" Height="50" Margin="10,0,20,0" HorizontalAlignment="Left">
                <Border.Background>
                    <ImageBrush ImageSource="Assets/Images/Logo.png"/>
                </Border.Background>
            </Border>
            <StackPanel VerticalAlignment="Center">
                <TextBlock Text="朝夕科技节能管理控制系统" Foreground="White" FontSize="25" Margin="85,0,0,0"/>
                <Border Height="45" Background="Transparent" BorderBrush="#FF6800" BorderThickness="0,0,0,1"
                        Margin="10,0">
                    <StackPanel Orientation="Horizontal" VerticalAlignment="Bottom" Margin="70,0,0,0">
                        <RadioButton Content="系统监控" Tag="&#xe601;" Style="{StaticResource NavTabButtonStyle}" IsChecked="True"
                                     CommandParameter="Zhaoxi.Industrial.View.SystemMonitor"/>
                        <RadioButton Content="实时曲线" Tag="&#xe604;" Style="{StaticResource NavTabButtonStyle}"/>
                        <RadioButton Content="历史曲线" Tag="&#xe75c;" Style="{StaticResource NavTabButtonStyle}"/>
                        <RadioButton Content="控制策略" Tag="&#xe684;" Style="{StaticResource NavTabButtonStyle}"/>
                        <RadioButton Content="系统操作" Tag="&#xe600;" Style="{StaticResource NavTabButtonStyle}"/>
                        <RadioButton Content="报警管理" Tag="&#xe62e;" Style="{StaticResource NavTabButtonStyle}"/>
                        <RadioButton Content="报表管理" Tag="&#xe602;" Style="{StaticResource NavTabButtonStyle}"
                                     CommandParameter="Zhaoxi.Industrial.View.ReportManagement"/>
                    </StackPanel>
                </Border>
            </StackPanel>

            <!--窗口控制按钮-->
            <StackPanel Orientation="Horizontal" VerticalAlignment="Top" HorizontalAlignment="Right">
                <Button Content="&#xe6bf;" Style="{StaticResource IconButtonStyle}" FontSize="14"/>
                <Button Content="&#xe63e;" Style="{StaticResource IconButtonStyle}" FontSize="10"/>
                <Button Content="&#xe625;" Style="{StaticResource IconButtonStyle}" Click="Button_Click"/>
            </StackPanel>

            <StackPanel Orientation="Horizontal" VerticalAlignment="Bottom" HorizontalAlignment="Right"
                        Margin="20,15">
                <TextBlock Text="Jovan.Zhaoxi" Foreground="White" VerticalAlignment="Center" Margin="10,0"/>
                <Border Width="30" Height="30" CornerRadius="15" BorderThickness="1" BorderBrush="White">
                    <Border.Effect>
                        <DropShadowEffect BlurRadius="5" ShadowDepth="0" Direction="0" Opacity="0.4" Color="White"/>
                    </Border.Effect>
                    <Border.Background>
                        <ImageBrush ImageSource="Assets/Images/Avatar.png"/>
                    </Border.Background>
                </Border>
            </StackPanel>
        </Grid>

        <ContentControl Grid.Row="1" Content="{Binding MainContent}"/>
    </Grid>
</Window>

public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            this.DataContext = new MainViewModel();
        }

        private void Window_MouseMove(object sender, MouseEventArgs e)
        {
            if (e.LeftButton == MouseButtonState.Pressed)
                this.DragMove();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            this.Close();
        }
    }

public class MainViewModel : NotifyPropertyBase
    {
        private UIElement _mainContent;

        public UIElement MainContent
        {
            get { return _mainContent; }
            set
            {
                Set<UIElement>(ref _mainContent, value);
            }
        }

        public CommandBase TabChangedCommand { get; set; }

        public MainViewModel()
        {
            TabChangedCommand = new CommandBase(OnTabChanged);

            OnTabChanged("Zhaoxi.Industrial.View.SystemMonitor");
        }

        private void OnTabChanged(object obj)
        {
            if (obj == null) return;
            // 完整方式
            //string[] strValues = o.ToString().Split('|');
            //Assembly assembly = Assembly.LoadFrom(strValues[0]);
            //Type type = assembly.GetType(strValues[1]);
            //this.MainContent = (UIElement)Activator.CreateInstance(type);

            // 简化方式，必须在同一个程序集下
            Type type = Type.GetType(obj.ToString());
            this.MainContent = (UIElement)Activator.CreateInstance(type);
        }
    }

public class NotifyPropertyBase : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        public void RaisePropertyChanged([CallerMemberName] string propName = "")
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propName));
        }

        public void Set<T>(ref T field, T value, [CallerMemberName] string propName = "")
        {
            if (EqualityComparer<T>.Default.Equals(field, value))
                return;

            field = value;
            RaisePropertyChanged(propName);
        }
    }

public class CommandBase : ICommand
    {
        public event EventHandler CanExecuteChanged;

        public bool CanExecute(object parameter)
        {
            return true;
        }

        public void Execute(object parameter)
        {
            this.DoExecute?.Invoke(parameter);
        }
        public Action<object> DoExecute { get; set; }

        public CommandBase() { }
        public CommandBase(Action<object> action)
        {
            DoExecute = action;
        }
    }