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

WPF基础之界面设计（MaterialDesignThemes）_wpf materialdesign

作者：Monodyee | 2024-02-16 23:43:51

赞

踩

wpf materialdesign

界面设计源码地址：https://download.csdn.net/download/yigu4011/88011184

 

1、Nuget安装MaterialDesignThemes框架，安装LiveCharts、LiveCharts.Wpf（用来添加曲线，也可以下载LiveCharts.dll、LiveCharts.Wpf.dll，然后引用DLL）

 2、打开阿里巴巴素材库，下载素材，解压素材，将素材文件iconfont.ttf添加到项目

3、App.xaml中添加资源代码：

  1. <Application x:Class="WpfApp1.App"
  2.              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.              xmlns:local="clr-namespace:WpfApp1"
  5.              StartupUri="MainWindow.xaml">
  6.     <Application.Resources>
  7.         <ResourceDictionary>
  8.             <ResourceDictionary.MergedDictionaries>
  9.                 <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml" />
  10.                 <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
  11.                 <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.DeepPurple.xaml" />
  12.                 <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Lime.xaml" />
  13.             </ResourceDictionary.MergedDictionaries>
  14.         </ResourceDictionary>
  15.     </Application.Resources>
  16. </Application>

 4、在MainWindow.xaml添加MaterialDesignThemes、LiveCharts、LiveCharts.Wpf的引用

  1.     xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
  2.     xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"

5、左边菜单栏关键性代码如下：（全部源码可去上方CSDN代码地址自由下载）

  1.             <StackPanel Grid.Row="1">
  2.                 <Button
  3.                     Width="250"
  4.                     Height="50"
  5.                     Margin="15,30"
  6.                     HorizontalContentAlignment="Left"
  7.                     materialDesign:ShadowAssist.ShadowDepth="Depth3"
  8.                     Background="#9C27B3"
  9.                     BorderBrush="#9C27B3">
  10.                     <StackPanel Orientation="Horizontal">
  11.                         <!--  图标  -->
  12.                         <TextBlock
  13.                             FontFamily="/#iconfont"
  14.                             FontSize="26"
  15.                             Foreground="White"
  16.                             Text="&#xf0070;" />
  17.                         <!--  文字  -->
  18.                         <TextBlock
  19.                             Margin="15,0,0,0"
  20.                             VerticalAlignment="Center"
  21.                             Foreground="White"
  22.                             Text="Surface" />
  23.                     </StackPanel>
  24.                 </Button>
  25.  
  26.                 <Button
  27.                     Width="250"
  28.                     Height="50"
  29.                     Margin="15,30"
  30.                     HorizontalContentAlignment="Left"
  31.                     materialDesign:ShadowAssist.ShadowDepth="Depth3"
  32.                     Background="Transparent"
  33.                     BorderBrush="Transparent">
  34.                     <StackPanel Orientation="Horizontal">
  35.                         <!--  图标  -->
  36.                         <TextBlock
  37.                             FontFamily="/#iconfont"
  38.                             FontSize="26"
  39.                             Foreground="#848484"
  40.                             Text="&#xe69a;" />
  41.                         <!--  文字  -->
  42.                         <TextBlock
  43.                             Margin="15,0,0,0"
  44.                             VerticalAlignment="Center"
  45.                             Foreground="#848484"
  46.                             Text="Bing" />
  47.                     </StackPanel>
  48.                 </Button>
  49.  
  50.                 <Button
  51.                     Width="250"
  52.                     Height="50"
  53.                     Margin="15,30"
  54.                     HorizontalContentAlignment="Left"
  55.                     materialDesign:ShadowAssist.ShadowDepth="Depth3"
  56.                     Background="Transparent"
  57.                     BorderBrush="Transparent">
  58.                     <StackPanel Orientation="Horizontal">
  59.                         <!--  图标  -->
  60.                         <TextBlock
  61.                             FontFamily="/#iconfont"
  62.                             FontSize="26"
  63.                             Foreground="#848484"
  64.                             Text="&#xe86f;" />
  65.                         <!--  文字  -->
  66.                         <TextBlock
  67.                             Margin="15,0,0,0"
  68.                             VerticalAlignment="Center"
  69.                             Foreground="#848484"
  70.                             Text="Windows" />
  71.                     </StackPanel>
  72.                 </Button>
  73.  
  74.                 <Button
  75.                     Width="250"
  76.                     Height="50"
  77.                     Margin="15,30"
  78.                     HorizontalContentAlignment="Left"
  79.                     materialDesign:ShadowAssist.ShadowDepth="Depth3"
  80.                     Background="Transparent"
  81.                     BorderBrush="Transparent">
  82.                     <StackPanel Orientation="Horizontal">
  83.                         <!--  图标  -->
  84.                         <TextBlock
  85.                             FontFamily="/#iconfont"
  86.                             FontSize="26"
  87.                             Foreground="#848484"
  88.                             Text="&#xe8e8;" />
  89.                         <!--  文字  -->
  90.                         <TextBlock
  91.                             Margin="15,0,0,0"
  92.                             VerticalAlignment="Center"
  93.                             Foreground="#848484"
  94.                             Text="Xbox" />
  95.                     </StackPanel>
  96.                 </Button>
  97.  
  98.                 <Button
  99.                     Width="250"
  100.                     Height="50"
  101.                     Margin="15,30"
  102.                     HorizontalContentAlignment="Left"
  103.                     materialDesign:ShadowAssist.ShadowDepth="Depth3"
  104.                     Background="Transparent"
  105.                     BorderBrush="Transparent">
  106.                     <StackPanel Orientation="Horizontal">
  107.                         <!--  图标  -->
  108.                         <TextBlock
  109.                             FontFamily="/#iconfont"
  110.                             FontSize="26"
  111.                             Foreground="#848484"
  112.                             Text="&#xe8ce;" />
  113.                         <!--  文字  -->
  114.                         <TextBlock
  115.                             Margin="15,0,0,0"
  116.                             VerticalAlignment="Center"
  117.                             Foreground="#848484"
  118.                             Text="Hololens" />
  119.                     </StackPanel>
  120.                 </Button>
  121.  
  122.                 <Button
  123.                     Width="250"
  124.                     Height="50"
  125.                     Margin="15,30"
  126.                     HorizontalContentAlignment="Left"
  127.                     materialDesign:ShadowAssist.ShadowDepth="Depth3"
  128.                     Background="Transparent"
  129.                     BorderBrush="Transparent">
  130.                     <StackPanel Orientation="Horizontal">
  131.                         <!--  图标  -->
  132.                         <TextBlock
  133.                             FontFamily="/#iconfont"
  134.                             FontSize="26"
  135.                             Foreground="#848484"
  136.                             Text="&#xec16;" />
  137.                         <!--  文字  -->
  138.                         <TextBlock
  139.                             Margin="15,0,0,0"
  140.                             VerticalAlignment="Center"
  141.                             Foreground="#848484"
  142.                             Text="Azure" />
  143.                     </StackPanel>
  144.                 </Button>
  145.             </StackPanel>

 6、右边显示关键代码如下：

  1.             <UniformGrid Grid.Row="2" Columns="3">
  2.                 <Border
  3.                     Margin="20,20,20,20"
  4.                     Background="White"
  5.                     CornerRadius="5">
  6.                     <Grid>
  7.                         <Grid.RowDefinitions>
  8.                             <RowDefinition Height="1.7*" />
  9.                             <RowDefinition />
  10.                         </Grid.RowDefinitions>
  11.  
  12.                         <Grid Margin="20,-20,20,10" Panel.ZIndex="1">
  13.                             <Grid.Effect>
  14.                                 <DropShadowEffect
  15.                                     BlurRadius="15"
  16.                                     Direction="-90"
  17.                                     Opacity=".2"
  18.                                     RenderingBias="Quality"
  19.                                     ShadowDepth="1" />
  20.                             </Grid.Effect>
  21.                             <Grid.Resources>
  22.                                 <Style TargetType="lvc:ColumnSeries">
  23.                                     <Setter Property="StrokeThickness" Value="0" />
  24.                                     <Setter Property="Stroke" Value="White" />
  25.                                     <Setter Property="Fill" Value="White" />
  26.                                     <Setter Property="MaxColumnWidth" Value="5" />
  27.                                 </Style>
  28.                                 <Style TargetType="lvc:Axis">
  29.                                     <Setter Property="FontSize" Value="12" />
  30.                                     <Setter Property="Foreground" Value="#64FFFFFF" />
  31.                                     <Style.Triggers>
  32.                                         <Trigger Property="AxisOrientation" Value="Y">
  33.                                             <Setter Property="IsMerged" Value="True" />
  34.                                             <Setter Property="MaxValue" Value="10" />
  35.                                         </Trigger>
  36.                                     </Style.Triggers>
  37.                                 </Style>
  38.                                 <Style TargetType="lvc:Separator">
  39.                                     <Setter Property="StrokeThickness" Value="1" />
  40.                                     <Setter Property="Stroke" Value="#4BFFFFFF" />
  41.                                     <Style.Triggers>
  42.                                         <Trigger Property="AxisOrientation" Value="X">
  43.                                             <Setter Property="IsEnabled" Value="False" />
  44.                                             <Setter Property="Step" Value="1" />
  45.                                         </Trigger>
  46.                                     </Style.Triggers>
  47.                                 </Style>
  48.                             </Grid.Resources>
  49.                             <Grid.RowDefinitions>
  50.                                 <RowDefinition Height="Auto" />
  51.                                 <RowDefinition Height="Auto" />
  52.                                 <RowDefinition Height=".50*" />
  53.                             </Grid.RowDefinitions>
  54.                             <Border
  55.                                 x:Name="Border1"
  56.                                 Grid.Row="0"
  57.                                 Grid.RowSpan="4"
  58.                                 Background="White"
  59.                                 CornerRadius="5" />
  60.                             <Border Grid.RowSpan="3" Background="#51AB54" />
  61.                             <lvc:CartesianChart
  62.                                 Grid.Row="2"
  63.                                 Margin="10,0,10,20"
  64.                                 DataTooltip="{x:Null}"
  65.                                 Hoverable="False">
  66.                                 <lvc:CartesianChart.Series>
  67.                                     <lvc:ColumnSeries Values="5,9,8,6,1,5,7,3,6,3" />
  68.                                 </lvc:CartesianChart.Series>
  69.                             </lvc:CartesianChart>
  70.                         </Grid>
  71.  
  72.                         <Grid Grid.Row="1">
  73.                             <Grid.ColumnDefinitions>
  74.                                 <ColumnDefinition Width="101*" />
  75.                                 <ColumnDefinition Width="399*" />
  76.                             </Grid.ColumnDefinitions>
  77.                             <Grid.RowDefinitions>
  78.                                 <RowDefinition Height="1.5*" />
  79.                                 <RowDefinition />
  80.                             </Grid.RowDefinitions>
  81.                             <StackPanel
  82.                                 Grid.ColumnSpan="2"
  83.                                 VerticalAlignment="Bottom"
  84.                                 Orientation="Vertical">
  85.                                 <TextBlock
  86.                                     Margin="20,0"
  87.                                     FontSize="25"
  88.                                     Foreground="#959595"
  89.                                     Text="XBOX" />
  90.                                 <TextBlock
  91.                                     Margin="20,0"
  92.                                     FontSize="13"
  93.                                     Foreground="#C8C8C8"
  94.                                     Text="Get More Data" />
  95.                                 <Border
  96.                                     Margin="30,5,30,0"
  97.                                     VerticalAlignment="Bottom"
  98.                                     BorderBrush="DarkGray"
  99.                                     BorderThickness="0,0,0,1" />
  100.                             </StackPanel>
  101.                             <TextBlock
  102.                                 Grid.Row="1"
  103.                                 Grid.ColumnSpan="2"
  104.                                 Margin="20,0,20,0"
  105.                                 VerticalAlignment="Center"
  106.                                 FontSize="13"
  107.                                 Foreground="#C8C8C8"
  108.                                 Text="updated 4 minutes ago" />
  109.                         </Grid>
  110.                     </Grid>
  111.                 </Border>
  112.                 <Border
  113.                     Margin="20,20,20,20"
  114.                     Background="White"
  115.                     CornerRadius="5">
  116.                     <Grid>
  117.                         <Grid.RowDefinitions>
  118.                             <RowDefinition Height="1.7*" />
  119.                             <RowDefinition />
  120.                         </Grid.RowDefinitions>
  121.                         <Grid Margin="20,-20,20,10" Panel.ZIndex="1">
  122.                             <Grid.Effect>
  123.                                 <DropShadowEffect
  124.                                     BlurRadius="15"
  125.                                     Direction="-90"
  126.                                     Opacity=".2"
  127.                                     RenderingBias="Quality"
  128.                                     ShadowDepth="1" />
  129.                             </Grid.Effect>
  130.                             <Grid.Resources>
  131.                                 <Style TargetType="lvc:ColumnSeries">
  132.                                     <Setter Property="StrokeThickness" Value="0" />
  133.                                     <Setter Property="Stroke" Value="White" />
  134.                                     <Setter Property="Fill" Value="White" />
  135.                                     <Setter Property="MaxColumnWidth" Value="5" />
  136.                                 </Style>
  137.                                 <Style TargetType="lvc:Axis">
  138.                                     <Setter Property="FontSize" Value="12" />
  139.                                     <Setter Property="Foreground" Value="#64FFFFFF" />
  140.                                     <Style.Triggers>
  141.                                         <Trigger Property="AxisOrientation" Value="Y">
  142.                                             <Setter Property="IsMerged" Value="True" />
  143.                                             <Setter Property="MaxValue" Value="10" />
  144.                                         </Trigger>
  145.                                     </Style.Triggers>
  146.                                 </Style>
  147.                                 <Style TargetType="lvc:Separator">
  148.                                     <Setter Property="StrokeThickness" Value="1" />
  149.                                     <Setter Property="Stroke" Value="#4BFFFFFF" />
  150.                                     <Style.Triggers>
  151.                                         <Trigger Property="AxisOrientation" Value="X">
  152.                                             <Setter Property="IsEnabled" Value="False" />
  153.                                             <Setter Property="Step" Value="1" />
  154.                                         </Trigger>
  155.                                     </Style.Triggers>
  156.                                 </Style>
  157.                             </Grid.Resources>
  158.                             <Grid.RowDefinitions>
  159.                                 <RowDefinition Height="Auto" />
  160.                                 <RowDefinition Height="Auto" />
  161.                                 <RowDefinition Height=".50*" />
  162.                             </Grid.RowDefinitions>
  163.                             <Border
  164.                                 Grid.Row="0"
  165.                                 Grid.RowSpan="4"
  166.                                 Background="White"
  167.                                 CornerRadius="5" />
  168.                             <Border
  169.                                 Grid.Row="0"
  170.                                 Grid.RowSpan="3"
  171.                                 Background="#FD950E" />
  172.  
  173.                             <lvc:CartesianChart
  174.                                 Grid.Row="2"
  175.                                 Margin="10,0,10,20"
  176.                                 DataTooltip="{x:Null}"
  177.                                 Hoverable="False">
  178.                                 <lvc:CartesianChart.Series>
  179.                                     <lvc:LineSeries Stroke="White" Values="5,9,8,6,1,5,7,3,6,3" />
  180.                                 </lvc:CartesianChart.Series>
  181.                             </lvc:CartesianChart>
  182.                         </Grid>
  183.  
  184.                         <Grid Grid.Row="1">
  185.                             <Grid.RowDefinitions>
  186.                                 <RowDefinition Height="1.5*" />
  187.                                 <RowDefinition />
  188.                             </Grid.RowDefinitions>
  189.                             <StackPanel VerticalAlignment="Bottom" Orientation="Vertical">
  190.                                 <TextBlock
  191.                                     Margin="20,0"
  192.                                     FontSize="25"
  193.                                     Foreground="#959595"
  194.                                     Text="Office" />
  195.                                 <TextBlock
  196.                                     Margin="20,0"
  197.                                     FontSize="13"
  198.                                     Foreground="#C8C8C8"
  199.                                     Text="Get More Data" />
  200.                                 <Border
  201.                                     Margin="30,5,30,0"
  202.                                     VerticalAlignment="Bottom"
  203.                                     BorderBrush="DarkGray"
  204.                                     BorderThickness="0,0,0,1" />
  205.                             </StackPanel>
  206.                             <TextBlock
  207.                                 Grid.Row="1"
  208.                                 Margin="20,0"
  209.                                 VerticalAlignment="Center"
  210.                                 FontSize="13"
  211.                                 Foreground="#C8C8C8"
  212.                                 Text="compaign sent 2 days ago" />
  213.                         </Grid>
  214.                     </Grid>
  215.                 </Border>
  216.                 <Border
  217.                     Margin="20,20,20,20"
  218.                     Background="White"
  219.                     CornerRadius="5">
  220.                     <Grid>
  221.                         <Grid.RowDefinitions>
  222.                             <RowDefinition Height="1.7*" />
  223.                             <RowDefinition />
  224.                         </Grid.RowDefinitions>
  225.                         <Grid Margin="20,-20,20,10" Panel.ZIndex="1">
  226.                             <Grid.Effect>
  227.                                 <DropShadowEffect
  228.                                     BlurRadius="15"
  229.                                     Direction="-90"
  230.                                     Opacity=".2"
  231.                                     RenderingBias="Quality"
  232.                                     ShadowDepth="1" />
  233.                             </Grid.Effect>
  234.                             <Grid.Resources>
  235.                                 <Style TargetType="lvc:ColumnSeries">
  236.                                     <Setter Property="StrokeThickness" Value="0" />
  237.                                     <Setter Property="Stroke" Value="White" />
  238.                                     <Setter Property="Fill" Value="White" />
  239.                                     <Setter Property="MaxColumnWidth" Value="5" />
  240.                                 </Style>
  241.                                 <Style TargetType="lvc:Axis">
  242.                                     <Setter Property="FontSize" Value="12" />
  243.                                     <Setter Property="Foreground" Value="#64FFFFFF" />
  244.                                     <Style.Triggers>
  245.                                         <Trigger Property="AxisOrientation" Value="Y">
  246.                                             <Setter Property="IsMerged" Value="True" />
  247.                                             <Setter Property="MaxValue" Value="10" />
  248.                                         </Trigger>
  249.                                     </Style.Triggers>
  250.                                 </Style>
  251.                                 <Style TargetType="lvc:Separator">
  252.                                     <Setter Property="StrokeThickness" Value="1" />
  253.                                     <Setter Property="Stroke" Value="#4BFFFFFF" />
  254.                                     <Style.Triggers>
  255.                                         <Trigger Property="AxisOrientation" Value="X">
  256.                                             <Setter Property="IsEnabled" Value="False" />
  257.                                             <Setter Property="Step" Value="1" />
  258.                                         </Trigger>
  259.                                     </Style.Triggers>
  260.                                 </Style>
  261.                             </Grid.Resources>
  262.                             <Grid.RowDefinitions>
  263.                                 <RowDefinition Height="Auto" />
  264.                                 <RowDefinition Height="Auto" />
  265.                                 <RowDefinition Height=".50*" />
  266.                             </Grid.RowDefinitions>
  267.                             <Border
  268.                                 Grid.Row="0"
  269.                                 Grid.RowSpan="4"
  270.                                 Background="White"
  271.                                 CornerRadius="5" />
  272.                             <Border
  273.                                 Grid.Row="0"
  274.                                 Grid.RowSpan="3"
  275.                                 Background="#E94543" />
  276.                             <lvc:CartesianChart
  277.                                 Grid.Row="2"
  278.                                 Margin="0,0,0,0"
  279.                                 DataTooltip="{x:Null}"
  280.                                 Hoverable="True">
  281.                                 <lvc:CartesianChart.Series>
  282.                                     <lvc:LineSeries Stroke="White" Values="5,9,8,6,7,2,1,5,7,8," />
  283.                                 </lvc:CartesianChart.Series>
  284.                                 <lvc:CartesianChart.AxisX>
  285.                                     <lvc:Axis MinValue="2" />
  286.                                 </lvc:CartesianChart.AxisX>
  287.                             </lvc:CartesianChart>
  288.  
  289.                         </Grid>
  290.  
  291.                         <Grid Grid.Row="1">
  292.                             <Grid.RowDefinitions>
  293.                                 <RowDefinition Height="1.5*" />
  294.                                 <RowDefinition />
  295.                             </Grid.RowDefinitions>
  296.                             <StackPanel VerticalAlignment="Bottom" Orientation="Vertical">
  297.                                 <TextBlock
  298.                                     Margin="20,0"
  299.                                     FontSize="25"
  300.                                     Foreground="#959595"
  301.                                     Text="Surface" />
  302.                                 <TextBlock
  303.                                     Margin="20,0"
  304.                                     FontSize="13"
  305.                                     Foreground="#C8C8C8"
  306.                                     Text="Get More Data" />
  307.                                 <Border
  308.                                     Margin="30,5,30,0"
  309.                                     VerticalAlignment="Bottom"
  310.                                     BorderBrush="DarkGray"
  311.                                     BorderThickness="0,0,0,1" />
  312.                             </StackPanel>
  313.                             <TextBlock
  314.                                 Grid.Row="1"
  315.                                 Margin="20,0"
  316.                                 VerticalAlignment="Center"
  317.                                 FontSize="13"
  318.                                 Foreground="#C8C8C8"
  319.                                 Text="compaign sent 2 days ago" />
  320.                         </Grid>
  321.                     </Grid>
  322.                 </Border>
  323.             </UniformGrid>

6、关键事件代码如下：

  1. /// <summary>
  2.     /// MainWindow.xaml 的交互逻辑
  3.     /// </summary>
  4.     public partial class MainWindow : Window
  5.     {
  6.         public MainWindow()
  7.         {
  8.             InitializeComponent();
  9.         }
  10.  
  11.         Point _pressedPosition;
  12.         bool _isDragMoved = false;
  13.         private void Window_PreviewMouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
  14.         {
  15.             _pressedPosition = e.GetPosition(this);
  16.         }
  17.         private void Window_PreviewMouseMove(object sender, System.Windows.Input.MouseEventArgs e)
  18.         {
  19.             if (Mouse.LeftButton == MouseButtonState.Pressed && _pressedPosition != e.GetPosition(this))
  20.             {
  21.                 _isDragMoved = true;
  22.                 DragMove();
  23.             }
  24.         }
  25.         private void Window_PreviewMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
  26.         {
  27.             if (_isDragMoved)
  28.             {
  29.                 _isDragMoved = false;
  30.                 e.Handled = true;
  31.             }
  32.         }
  33.  
  34.  
  35.         private void btnMin_Click(object sender, RoutedEventArgs e)
  36.         {
  37.             this.WindowState = WindowState.Minimized;
  38.         }
  39.  
  40.         private void btnMax_Click(object sender, RoutedEventArgs e)
  41.         {
  42.             if (this.WindowState == WindowState.Maximized)
  43.             {
  44.                 this.WindowState = WindowState.Normal;
  45.             }
  46.             else
  47.             {
  48.                 this.WindowState = WindowState.Maximized;
  49.             }
  50.         }
  51.  
  52.         private void btnClose_Click(object sender, RoutedEventArgs e)
  53.         {
  54.             this.Close();
  55.         }
  56.  
  57.     }

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Monodyee/article/detail/97868
推荐阅读
相关标签

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

  

闽ICP备14008679号