2021-09-04 WPF上位机通用框架平台实战-主窗口

Posted 2021-09-20 微软MVP Eleven

一：主窗口布局和功能实现

<Window x:Class="Zhaoxi.HostComputer.Views.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.HostComputer"
        mc:Ignorable="d"
        FontFamily="Microsoft YaHei" FontWeight="ExtraLight" Foreground="#333"
        WindowStyle="None" AllowsTransparency="True"  WindowStartupLocation="CenterScreen" Background="#FFF6F7FC"
        ResizeMode="CanResizeWithGrip"
        Title="朝夕智控|上位机应用基础框架" Height="850" Width="1400">
    <Window.Resources>
        <Style TargetType="RadioButton" x:Key="LeftMenuItemButtonStyle">
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="FontSize" Value="24"/>
            <Setter Property="Cursor" Value="Hand"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="RadioButton">
                        <Grid Background="Transparent" Height="50" Name="back">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="60"/>
                                <ColumnDefinition Width="auto"/>
                            </Grid.ColumnDefinitions>
                            <TextBlock Text="{TemplateBinding Content}" FontFamily="{StaticResource iconfont}" 
                                       VerticalAlignment="Center" HorizontalAlignment="Center"
                                       Foreground="White"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background" Value="#11FFFFFF" TargetName="back"/>
                            </Trigger>
                            <Trigger Property="IsChecked" Value="True">
                                <Setter Property="Background" Value="#33FFFFFF" TargetName="back"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style TargetType="Button" x:Key="SettingsButtonStyle">
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="FontSize" Value="20"/>
            <Setter Property="Cursor" Value="Hand"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid Background="Transparent" Height="50" Name="back">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="60"/>
                                <ColumnDefinition Width="auto"/>
                            </Grid.ColumnDefinitions>
                            <TextBlock Text="{TemplateBinding Content}" FontFamily="{StaticResource iconfont}" 
                                       VerticalAlignment="Center" HorizontalAlignment="Center"
                                       Foreground="White"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background" Value="#11FFFFFF" TargetName="back"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style TargetType="Button" x:Key="ControlButtonStyle">
            <Setter Property="FontSize" Value="12"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid Background="Transparent" Height="30" Width="45" Name="back">
                            <Border Name="hover" Background="{TemplateBinding Background}" Visibility="Collapsed"/>
                            <TextBlock Text="{TemplateBinding Content}" FontFamily="{StaticResource iconfont}" 
                                       VerticalAlignment="Center" HorizontalAlignment="Center" Name="txt"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Visibility" Value="Visible" TargetName="hover"/>
                                
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Foreground" Value="{Binding Tag,RelativeSource={RelativeSource Mode=Self}}"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <Grid Background="Transparent" MouseLeftButtonDown="Grid_MouseLeftButtonDown">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="60"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Border Background="#FF3269DE">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="90"/>
                    <RowDefinition/>
                    <RowDefinition Height="100"/>
                </Grid.RowDefinitions>
                <Image Source="pack://application:,,,/Zhaoxi.HostComputer;component/Assets/Images/Logo.png" Width="35"/>

                <StackPanel Grid.Row="1" VerticalAlignment="Center">
                    <RadioButton Content="&#xe65c;" Height="80" IsChecked="True" Style="{StaticResource LeftMenuItemButtonStyle}"
                                 ToolTip="Dashboard"
                                 Command="{Binding MenuItemCommand}"
                                 CommandParameter="Zhaoxi.HostComputer.Views.MonitorView"/>
                    <RadioButton Content="&#xe661;" Height="80" Style="{StaticResource LeftMenuItemButtonStyle}"
                                 ToolTip="设备"
                                 Command="{Binding MenuItemCommand}"
                                 CommandParameter="Zhaoxi.HostComputer.Views.DeviceView" Cursor="Hand"/>
                    <RadioButton Content="&#xe62e;" Height="80" Style="{StaticResource LeftMenuItemButtonStyle}"
                                 ToolTip="报警"
                                 Command="{Binding MenuItemCommand}"
                                 CommandParameter="Zhaoxi.HostComputer.Views.AlarmView" Cursor="Hand"/>
                    <RadioButton Content="&#xe62a;" Height="80" Style="{StaticResource LeftMenuItemButtonStyle}"
                                 ToolTip="报表"
                                 Command="{Binding MenuItemCommand}"
                                 CommandParameter="Zhaoxi.HostComputer.Views.ReportView" Cursor="Hand"/>
                </StackPanel>
                <TextBlock Grid.Row="2" Text="&#xe618;" FontFamily="{StaticResource iconfont}" Foreground="White"
                           FontSize="20" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                <Button Height="50" Content="&#xe618;" Style="{StaticResource SettingsButtonStyle}" Grid.Row="2"/>
            </Grid>
        </Border>


        <Grid Grid.Column="1">
            <Grid.RowDefinitions>
                <RowDefinition Height="65"/>
                <RowDefinition/>
                <RowDefinition Height="50"/>
            </Grid.RowDefinitions>
            <Border BorderBrush="#EEE" BorderThickness="0,0,0,1"/>
            <StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="30,0">
                <TextBlock Text="智能平台    |    上位机应用基础框架" FontSize="15"/>
            </StackPanel>
            <StackPanel VerticalAlignment="Top" HorizontalAlignment="Right" Orientation="Horizontal">
                <Button Content="&#xe7e6;" Style="{StaticResource ControlButtonStyle}" Background="#11000000" Tag="#333"/>
                <Button Content="&#xe694;" Style="{StaticResource ControlButtonStyle}" Background="#11000000" Tag="#333"/>
                <Button Content="&#xe653;" Style="{StaticResource ControlButtonStyle}" Background="#FFE63535" Tag="White"
                        Command="{Binding CloseCommand}" CommandParameter="{Binding Path=.,RelativeSource={RelativeSource AncestorType=Window}}"/>
            </StackPanel>
            <TextBlock Text="{Binding MainModel.Time}" VerticalAlignment="Bottom" HorizontalAlignment="Right" Margin="15,10" 
                       FontSize="16" FontFamily="pack://application:,,,/Zhaoxi.HostComputer;component/Assets/Fonts/#digital display"/>

            <Border Background="#F7F9FA" Grid.Row="2" BorderBrush="#F0F4F1" BorderThickness="0,1,0,0"/>
            <StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="20,0" Grid.Row="2">
                <TextBlock Text="Administrator" VerticalAlignment="Center" Margin="10,0"/>
                <Border Width="35" Height="35" CornerRadius="20" BorderThickness="2" BorderBrush="White">
                    <Border.Background>
                        <ImageBrush ImageSource="pack://application:,,,/Zhaoxi.HostComputer;component/Assets/Images/avatar.png"/>
                    </Border.Background>
                    <Border.Effect>
                        <DropShadowEffect BlurRadius="5" ShadowDepth="0" Direction="0" Opacity="0.3"/>
                    </Border.Effect>
                </Border>
            </StackPanel>

            <StackPanel Orientation="Horizontal" Grid.Row="2" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="20,0">
                <TextBlock Text="通信状态"/>
                <TextBlock Text="已连接" Margin="20,0,10,0"/>
                <Border Background="Green" Width="10" Height="10" CornerRadius="5"/>
            </StackPanel>


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

/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();

        this.DataContext = new MainViewModel();

        WindowManager.Register<DeviceEditWindow>("DeviceEditWindow", this);
    }

    private void Grid_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        this.DragMove();
    }
}

public class MainModel : NotifyBase
{
    private string _time;

    public string Time
    {
        get { return _time; }
        set { _time = value; this.NotifyChanged(); }
    }

    private string _userName;

    public string UserName
    {
        get { return _userName; }
        set { _userName = value; this.NotifyChanged(); }
    }

    private string _avatar;

    public string Avatar
    {
        get { return _avatar; }
        set { _avatar = value; this.NotifyChanged(); }
    }

    private UIElement _mainContent;

    public UIElement MainContent
    {
        get { return _mainContent; }
        set { _mainContent = value; this.NotifyChanged(); }
    }

}

public class MainViewModel
{
    public MainModel MainModel { get; set; } = new MainModel();


    private CommandBase _closeCommand;

    public CommandBase CloseCommand
    {
        get
        {
            if (_closeCommand == null)
            {
                _closeCommand = new CommandBase();
                _closeCommand.DoExecute = new Action<object>(obj =>
                {
                    (obj as System.Windows.Window).DialogResult = false;
                });
            }
            return _closeCommand;
        }
    }

    private CommandBase _menuItemCommand;

    public CommandBase MenuItemCommand
    {
        get
        {
            if (_menuItemCommand == null)
            {
                _menuItemCommand = new CommandBase();
                _menuItemCommand.DoExecute = new Action<object>(obj =>
                {
                    NavPage(obj.ToString());
                });
            }
            return _menuItemCommand;
        }
    }


    private void NavPage(string name)
    {
        Type type = Type.GetType(name);
        this.MainModel.MainContent = (System.Windows.UIElement)Activator.CreateInstance(type);
    }

    public MainViewModel()
    {
        this.NavPage("Zhaoxi.HostComputer.Views.MonitorView");

        Task.Run(async () =>
        {
            while (true)
            {
                await Task.Delay(500);
                this.MainModel.Time = DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss");
            }
        });
    }
}