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

<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");
}
});
}
}