应用程序使用统计信息 – .NET CORE(C#) WPF界面设计

应用程序使用统计信息 - .NET CORE(C#) WPF界面设计

首发文章地址:https://dotnet9.com/10546.html

关键功能点

  1. 抽屉式菜单
  2. 圆形进度条

Demo演示:

应用程序使用统计信息 – .NET CORE(C#) WPF界面设计

1. 新建项目

使用 VS 2019 的 .NET Core 3.1 WPF 项目模板,创建名为 “MobileAppUsageDashboardCore” 的项目,NuGet 引入 MaterialDesign 的两个库 MaterialDesignThemes 和 MaterialDesignColors,整个项目工程文件如下:

<Project Sdk="Microsoft.NET.Sdk.WindowsDesktop">

  <PropertyGroup>
    <OutputType>WinExe</OutputType>
    <TargetFramework>netcoreapp3.1</TargetFramework>
    <UseWPF>true</UseWPF>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="MaterialDesignColors" Version="1.2.2" />
    <PackageReference Include="MaterialDesignThemes" Version="3.0.1" />
  </ItemGroup>

</Project>

2.抽屉式菜单

前面发过不少抽屉式菜单的Demo文章,套路都是一个竖直菜单隐藏在界面左边边界之外,左边边界留一个菜单按钮,点击该按钮呼出竖直菜单,即达到抽屉式菜单效果。

应用程序使用统计信息 – .NET CORE(C#) WPF界面设计

本文介绍的抽屉式菜单也不外如是,VS设计界面见上图,使用的MD控件的DrawerHost.LeftDrawerContent组件,换一种方式实现,下面是抽屉菜单布局代码:

<materialDesign:DrawerHost.LeftDrawerContent>
    <StackPanel Orientation="Vertical">
        <StackPanel Margin="10" VerticalAlignment="Top" Orientation="Horizontal">
            <TextBlock
                VerticalAlignment="Center"
                Margin="0,0,10,0">Dashboard</TextBlock>
            <Button Style="{StaticResource MaterialDesignFlatButton}"
                    Command="{x:Static materialDesign:DrawerHost.CloseDrawerCommand}"
                    >
                <materialDesign:PackIcon Kind="HamburgerMenuBack"></materialDesign:PackIcon>
            </Button>
        </StackPanel>
        <StackPanel Orientation="Vertical">
            <Button Style="{StaticResource MaterialDesignFlatButton}" Click="todayBtnClicked">今天</Button>
            <Button Style="{StaticResource MaterialDesignFlatButton}" Click="weekBtnClicked">本周</Button>
            <Button Style="{StaticResource MaterialDesignFlatButton}" Click="monthBtnClicked">本月</Button>
        </StackPanel>
    </StackPanel>
</materialDesign:DrawerHost.LeftDrawerContent>

跟随菜单隐藏的还有一个菜单关闭按钮,见上面代码中的第一个按钮,点击按钮触发 “DrawerHost.CloseDrawerCommand” 命令可关闭抽屉式菜单。

下面的是窗体边界之内的菜单按钮,点击则展开抽屉式菜单,触发的命令是“DrawerHost.OpenDrawerCommand”:

<Button Style="{StaticResource MaterialDesignFlatButton}" Command="{x:Static materialDesign:DrawerHost.OpenDrawerCommand}"
                        HorizontalAlignment="Left"
                        VerticalAlignment="Top"
                        >
                            <materialDesign:PackIcon Kind="HamburgerMenu"></materialDesign:PackIcon>
                        </Button>

3.圆形进度条

使用MD控件库实现圆形进度条,效果如下:

应用程序使用统计信息 – .NET CORE(C#) WPF界面设计

圆形进度条代码如下,使用的还是 ProgressBar 控件,样式使用了MD控件库的“MaterialDesignCircularProgressBar” 样式,组件加载时(Loaded事件),使用了双精度动画:

<ProgressBar Height="100"
            Width="100"
Value="40" Foreground="#FF68E843"
        x:Name="firstProgress"
            >
    <ProgressBar.Style>
        <Style TargetType="ProgressBar" BasedOn="{StaticResource MaterialDesignCircularProgressBar}">
            <Style.Triggers>
                <EventTrigger RoutedEvent="Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetProperty="Value" From="0" To="40"
                                            Duration="0:0:0.5"></DoubleAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Style.Triggers>
        </Style>
    </ProgressBar.Style>
</ProgressBar>

4. Demo源码

整个Demo也不难,除了上面两个小功能单独简单说说外,其他的就是一般的布局代码了,主界面XAML代码如下:

<Window x:Class="MobileAppUsageDashboardCore.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        TextElement.Foreground="{DynamicResource MaterialDesignBody}"
        TextElement.FontWeight="Regular"
        TextElement.FontSize="13"
        TextOptions.TextFormattingMode="Ideal"
        TextOptions.TextRenderingMode="Auto"
        Background="{DynamicResource MaterialDesignPaper}"
        FontFamily="{DynamicResource MaterialDesignFont}"
        Title="应用程序使用统计信息" Height="450" Width="800" 
        WindowStartupLocation="CenterScreen" AllowsTransparency="True" WindowStyle="None" MouseLeftButtonDown="dragME">
    <materialDesign:DrawerHost x:Name="mainDrawer">
        <materialDesign:DrawerHost.LeftDrawerContent>
            <StackPanel Orientation="Vertical">
                <StackPanel Margin="10" VerticalAlignment="Top" Orientation="Horizontal">
                    <TextBlock
                        VerticalAlignment="Center"
                        Margin="0,0,10,0">Dashboard</TextBlock>
                    <Button Style="{StaticResource MaterialDesignFlatButton}"
                            Command="{x:Static materialDesign:DrawerHost.CloseDrawerCommand}"
                            >
                        <materialDesign:PackIcon Kind="HamburgerMenuBack"></materialDesign:PackIcon>
                    </Button>
                </StackPanel>
                <StackPanel Orientation="Vertical">
                    <Button Style="{StaticResource MaterialDesignFlatButton}" Click="todayBtnClicked">今天</Button>
                    <Button Style="{StaticResource MaterialDesignFlatButton}" Click="weekBtnClicked">本周</Button>
                    <Button Style="{StaticResource MaterialDesignFlatButton}" Click="monthBtnClicked">本月</Button>
                </StackPanel>
            </StackPanel>
        </materialDesign:DrawerHost.LeftDrawerContent>
        <materialDesign:Card HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
            <materialDesign:Card.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="Black" Offset="1"/>
                    <GradientStop Color="#FF474747"/>
                </LinearGradientBrush>
            </materialDesign:Card.Background>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="2*"></ColumnDefinition>
                    <ColumnDefinition Width="*"></ColumnDefinition>
                    <ColumnDefinition Width="*"></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <StackPanel Grid.Column="0" Orientation="Vertical" Margin="10">
                    <StackPanel Orientation="Horizontal">
                        <Button Style="{StaticResource MaterialDesignFlatButton}" Command="{x:Static materialDesign:DrawerHost.OpenDrawerCommand}"
                        HorizontalAlignment="Left"
                        VerticalAlignment="Top"
                        >
                            <materialDesign:PackIcon Kind="HamburgerMenu"></materialDesign:PackIcon>
                        </Button>
                        <TextBlock VerticalAlignment="Center" Text="移动应用使用仪表板"></TextBlock>
                    </StackPanel>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="时间段" VerticalAlignment="Center"></TextBlock>
                        <StackPanel Orientation="Horizontal" Margin="4">
                            <RadioButton x:Name="todayRadio" Style="{StaticResource MaterialDesignTabRadioButton}"
                                         Margin="4"
                                         IsChecked="True"
                                         Content="今天"></RadioButton>
                            <RadioButton x:Name="weekRadio" Style="{StaticResource MaterialDesignTabRadioButton}"
                                         Margin="4"
                                         IsChecked="False"
                                         Content="本周"></RadioButton>
                            <RadioButton x:Name="monthRadio" Style="{StaticResource MaterialDesignTabRadioButton}"
                                         Margin="4"
                                         IsChecked="False"
                                         Content="本月"></RadioButton>
                        </StackPanel>
                    </StackPanel>
                    <UniformGrid Columns="3" Margin="0,10,0,0">
                        <materialDesign:TransitioningContent OpeningEffect="{materialDesign:TransitionEffect Kind=ExpandIn}">
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="2*"></RowDefinition>
                                    <RowDefinition Height="*"></RowDefinition>
                                </Grid.RowDefinitions>
                                <ProgressBar Height="100"
                                         Width="100"
                                Value="40" Foreground="#FF68E843"
                                        x:Name="firstProgress"
                                         >
                                    <ProgressBar.Style>
                                        <Style TargetType="ProgressBar" BasedOn="{StaticResource MaterialDesignCircularProgressBar}">
                                            <Style.Triggers>
                                                <EventTrigger RoutedEvent="Loaded">
                                                    <BeginStoryboard>
                                                        <Storyboard>
                                                            <DoubleAnimation Storyboard.TargetProperty="Value" From="0" To="40"
                                                                         Duration="0:0:0.5"></DoubleAnimation>
                                                        </Storyboard>
                                                    </BeginStoryboard>
                                                </EventTrigger>
                                            </Style.Triggers>
                                        </Style>
                                    </ProgressBar.Style>
                                </ProgressBar>
                                <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="2 小时 / 5 小时"></TextBlock>
                                <TextBlock Grid.Row="1" Text="百度" HorizontalAlignment="Center" Margin="0,5,0,0"></TextBlock>
                            </Grid>
                        </materialDesign:TransitioningContent>
                        <materialDesign:TransitioningContent OpeningEffect="{materialDesign:TransitionEffect Kind=ExpandIn}">

                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="2*"></RowDefinition>
                                    <RowDefinition Height="*"></RowDefinition>
                                </Grid.RowDefinitions>
                                <ProgressBar Height="100"
                                         Width="100"
                                        Value="70" Foreground="#FFE84343"
                                        x:Name="secondProgress" Margin="14,-1,13,1"
                                         >
                                    <ProgressBar.Style>
                                        <Style TargetType="ProgressBar" BasedOn="{StaticResource MaterialDesignCircularProgressBar}">
                                            <Style.Triggers>
                                                <EventTrigger RoutedEvent="Loaded">
                                                    <BeginStoryboard>
                                                        <Storyboard>
                                                            <DoubleAnimation Storyboard.TargetProperty="Value" From="0" To="70"
                                                                         Duration="0:0:0.5"></DoubleAnimation>
                                                        </Storyboard>
                                                    </BeginStoryboard>
                                                </EventTrigger>
                                            </Style.Triggers>
                                        </Style>
                                    </ProgressBar.Style>
                                </ProgressBar>
                                <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="2 小时 / 3 小时"></TextBlock>
                                <TextBlock Grid.Row="1" Text="阿里巴巴" HorizontalAlignment="Center" Margin="0,5,0,0"></TextBlock>
                            </Grid>
                        </materialDesign:TransitioningContent>
                        <materialDesign:TransitioningContent OpeningEffect="{materialDesign:TransitionEffect Kind=ExpandIn}">

                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="2*"></RowDefinition>
                                    <RowDefinition Height="*"></RowDefinition>
                                </Grid.RowDefinitions>
                                <ProgressBar Height="100"
                                         Width="100"
                                 Value="30" Foreground="#FFE8E843"
                                        x:Name="thirdProgress"
                                         >
                                    <ProgressBar.Style>
                                        <Style TargetType="ProgressBar" BasedOn="{StaticResource MaterialDesignCircularProgressBar}">
                                            <Style.Triggers>
                                                <EventTrigger RoutedEvent="Loaded">
                                                    <BeginStoryboard>
                                                        <Storyboard>
                                                            <DoubleAnimation Storyboard.TargetProperty="Value" From="0" To="30"
                                                                         Duration="0:0:0.5"></DoubleAnimation>
                                                        </Storyboard>
                                                    </BeginStoryboard>
                                                </EventTrigger>
                                            </Style.Triggers>
                                        </Style>
                                    </ProgressBar.Style>
                                </ProgressBar>
                                <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="1 小时 / 4 小时"></TextBlock>
                                <TextBlock Grid.Row="1" Text="腾讯" HorizontalAlignment="Center" Margin="0,5,0,0"></TextBlock>
                            </Grid>
                        </materialDesign:TransitioningContent>
                    </UniformGrid>
                    <materialDesign:TransitioningContent OpeningEffect="{materialDesign:TransitionEffect Kind=ExpandIn,Duration=0:0:1}">
                        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,80,0,0">
                            <TextBlock Text="订阅到 " VerticalAlignment="Center"></TextBlock>
                            <materialDesign:PackIcon Kind="DotNet" Foreground="#DDFF1212" Width="100" Height="100"></materialDesign:PackIcon>
                            <TextBlock Style="{StaticResource MaterialDesignBody1TextBlock}" Text="www.dotnet9.com" VerticalAlignment="Center"></TextBlock>
                        </StackPanel>
                    </materialDesign:TransitioningContent>
                </StackPanel>
                <materialDesign:TransitioningContent OpeningEffect="{materialDesign:TransitionEffect Kind=SlideInFromTop}" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                    <materialDesign:Card VerticalAlignment="Stretch">
                        <materialDesign:Card.Background>
                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                <GradientStop Color="#FF09A6A6" Offset="0"/>
                                <GradientStop Color="#FF044D4D" Offset="1"/>
                            </LinearGradientBrush>
                        </materialDesign:Card.Background>
                        <Grid >
                            <Grid.RowDefinitions>
                                <RowDefinition></RowDefinition>
                                <RowDefinition></RowDefinition>
                            </Grid.RowDefinitions>
                            <Grid Grid.Row="0" Margin="5,15,5,5">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"></ColumnDefinition>
                                    <ColumnDefinition Width="*"></ColumnDefinition>
                                </Grid.ColumnDefinitions>
                                <StackPanel Grid.Column="0">
                                    <TextBlock Text="充电" HorizontalAlignment="Center"></TextBlock>
                                    <materialDesign:TransitioningContent OpeningEffect="{materialDesign:TransitionEffect Kind=FadeIn, Duration=0:0:2}">
                                        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,10,0,0">
                                            <TextBlock Style="{StaticResource MaterialDesignCaptionTextBlock}" Text="4" HorizontalAlignment="Center"></TextBlock>
                                            <TextBlock Text=" 次" VerticalAlignment="Center"></TextBlock>
                                        </StackPanel>
                                    </materialDesign:TransitioningContent>
                                    <TextBlock Text="最高温度" HorizontalAlignment="Center" Margin="0,25,0,0"></TextBlock>
                                    <materialDesign:TransitioningContent 
                                        OpeningEffect="{materialDesign:TransitionEffect Kind=FadeIn, Duration=0:0:2}">

                                        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,10,0,0">
                                            <TextBlock Style="{StaticResource MaterialDesignCaptionTextBlock}" Text="40" HorizontalAlignment="Center"></TextBlock>
                                            <TextBlock Text=" ℃" VerticalAlignment="Center"></TextBlock>
                                        </StackPanel>
                                    </materialDesign:TransitioningContent>
                                    <TextBlock Text="解锁" HorizontalAlignment="Center" Margin="0,25,0,0"></TextBlock>
                                    <materialDesign:TransitioningContent OpeningEffect="{materialDesign:TransitionEffect Kind=FadeIn,Duration=0:0:2}">
                                        <TextBlock Style="{StaticResource MaterialDesignCaptionTextBlock}"  Text="75" HorizontalAlignment="Center" Margin="0,10,0,0"></TextBlock>
                                    </materialDesign:TransitioningContent>
                                </StackPanel>

                                <StackPanel Grid.Column="1">
                                    <TextBlock Text="开机" HorizontalAlignment="Center"></TextBlock>
                                    <materialDesign:TransitioningContent OpeningEffect="{materialDesign:TransitionEffect Kind=FadeIn, Duration=0:0:2}">

                                        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,10,0,0">
                                            <TextBlock Style="{StaticResource MaterialDesignCaptionTextBlock}" Text="6" HorizontalAlignment="Center"></TextBlock>
                                            <TextBlock Text=" 小时" VerticalAlignment="Center"></TextBlock>
                                        </StackPanel>
                                    </materialDesign:TransitioningContent>
                                    <TextBlock Text="最后一次充电" HorizontalAlignment="Center" Margin="0,25,0,0"></TextBlock>
                                    <materialDesign:TransitioningContent OpeningEffect="{materialDesign:TransitionEffect Kind=FadeIn, Duration=0:0:2}">
                                        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,10,0,0">
                                            <TextBlock Style="{StaticResource MaterialDesignCaptionTextBlock}" Text="4" HorizontalAlignment="Center"></TextBlock>
                                            <TextBlock Text=" 小时以前" VerticalAlignment="Center"></TextBlock>
                                        </StackPanel>
                                    </materialDesign:TransitioningContent>
                                    <TextBlock Text="通知" HorizontalAlignment="Center" Margin="0,25,0,0"></TextBlock>
                                    <materialDesign:TransitioningContent OpeningEffect="{materialDesign:TransitionEffect Kind=FadeIn,Duration=0:0:2}">
                                        <TextBlock Style="{StaticResource MaterialDesignCaptionTextBlock}"  Text="350" HorizontalAlignment="Center" Margin="0,10,0,0"></TextBlock>
                                    </materialDesign:TransitioningContent>
                                </StackPanel>
                            </Grid>
                            <Grid Grid.Row="1" Background="#FF086666">
                                <Grid.RowDefinitions>
                                    <RowDefinition></RowDefinition>
                                    <RowDefinition></RowDefinition>
                                    <RowDefinition></RowDefinition>
                                </Grid.RowDefinitions>
                                <StackPanel Orientation="Vertical" Grid.Row="0" Margin="5,15,5,5">
                                    <Grid>
                                        <TextBlock Style="{StaticResource MaterialDesignCaptionTextBlock}" Text="存储" HorizontalAlignment="Left" VerticalAlignment="Center"></TextBlock>
                                        <TextBlock Text="19.88 GB / 40 GB" HorizontalAlignment="Right" VerticalAlignment="Center"></TextBlock>
                                    </Grid>
                                    <ProgressBar Height="10" Value="19.88" Maximum="40" Margin="0,10,0,0" Foreground="#FF1E1E1E"></ProgressBar>
                                </StackPanel>
                                <StackPanel Orientation="Vertical" Grid.Row="1" Margin="5,15,5,5">
                                    <Grid>
                                        <TextBlock Style="{StaticResource MaterialDesignCaptionTextBlock}" 
                                                   Text="相册" HorizontalAlignment="Left" VerticalAlignment="Center"></TextBlock>
                                        <TextBlock Text="3 GB" HorizontalAlignment="Right" VerticalAlignment="Center"></TextBlock>
                                    </Grid>
                                    <ProgressBar Height="10" Value="3" Maximum="40" Margin="0,10,0,0" Foreground="#FF1E1E1E"></ProgressBar>
                                </StackPanel>
                                <StackPanel Orientation="Vertical" Grid.Row="2" Margin="5,15,5,5">
                                    <Grid>
                                        <TextBlock Style="{StaticResource MaterialDesignCaptionTextBlock}" Text="视频" HorizontalAlignment="Left" VerticalAlignment="Center"></TextBlock>
                                        <TextBlock Text="4 GB" HorizontalAlignment="Right" VerticalAlignment="Center"></TextBlock>
                                    </Grid>
                                    <ProgressBar Height="10" Value="4" Maximum="40" Margin="0,10,0,0" Foreground="#FF1E1E1E"></ProgressBar>
                                </StackPanel>
                            </Grid>
                        </Grid>

                    </materialDesign:Card>
                </materialDesign:TransitioningContent>
                <!--<TextBlock Style="{DynamicResource MaterialDesignTitleTextBlock}">My First Material Design App</TextBlock>-->
                <materialDesign:TransitioningContent Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Top" OpeningEffect="{materialDesign:TransitionEffect Kind=SlideInFromTop}">
                    <TextBlock Style="{StaticResource MaterialDesignCaptionTextBlock}" Text="最常用的应用程序" Margin="0,15,0,0"></TextBlock>
                </materialDesign:TransitioningContent>
                <materialDesign:TransitioningContent 
                    Grid.Column="2"
                    OpeningEffect="{materialDesign:TransitionEffect Kind=FadeIn}" Margin="0,40,0,0">
                    <ItemsControl>
                        <ItemsControl.ItemsPanel>
                            <ItemsPanelTemplate>
                                <UniformGrid Columns="2"></UniformGrid>
                            </ItemsPanelTemplate>
                        </ItemsControl.ItemsPanel>
                        <materialDesign:TransitioningContent OpeningEffectsOffset="{materialDesign:IndexedItemOffsetMultiplier 0:0:0.05}" OpeningEffect="{materialDesign:TransitionEffect Kind=ExpandIn}">
                            <Button Style="{StaticResource MaterialDesignIconButton}" ToolTip="Google Chrome">
                                <materialDesign:PackIcon Kind="GoogleChrome" Height="24" Width="24" ></materialDesign:PackIcon>
                            </Button>
                        </materialDesign:TransitioningContent>
                        <materialDesign:TransitioningContent OpeningEffectsOffset="{materialDesign:IndexedItemOffsetMultiplier 0:0:0.05}" OpeningEffect="{materialDesign:TransitionEffect Kind=ExpandIn}">

                            <Button Style="{StaticResource MaterialDesignIconButton}" ToolTip="YouTube">
                                <materialDesign:PackIcon Kind="Youtube" Height="24" Width="24"></materialDesign:PackIcon>
                            </Button>
                        </materialDesign:TransitioningContent>
                        <materialDesign:TransitioningContent OpeningEffectsOffset="{materialDesign:IndexedItemOffsetMultiplier 0:0:0.05}" OpeningEffect="{materialDesign:TransitionEffect Kind=ExpandIn}">
                            <Button Style="{StaticResource MaterialDesignIconButton}" ToolTip="Instagram">
                                <materialDesign:PackIcon Kind="Instagram" Height="24" Width="24"></materialDesign:PackIcon>
                            </Button>
                        </materialDesign:TransitioningContent>
                        <materialDesign:TransitioningContent OpeningEffectsOffset="{materialDesign:IndexedItemOffsetMultiplier 0:0:0.05}" OpeningEffect="{materialDesign:TransitionEffect Kind=ExpandIn}">
                            <Button Style="{StaticResource MaterialDesignIconButton}" ToolTip="Facebook">
                                <materialDesign:PackIcon Kind="Facebook" Height="24" Width="24"></materialDesign:PackIcon>
                            </Button>
                        </materialDesign:TransitioningContent>
                        <materialDesign:TransitioningContent OpeningEffectsOffset="{materialDesign:IndexedItemOffsetMultiplier 0:0:0.05}" OpeningEffect="{materialDesign:TransitionEffect Kind=ExpandIn}">
                            <Button Style="{StaticResource MaterialDesignIconButton}" ToolTip="Twitter">
                                <materialDesign:PackIcon Kind="Twitter" Height="24" Width="24"></materialDesign:PackIcon>
                            </Button>
                        </materialDesign:TransitioningContent>
                        <materialDesign:TransitioningContent OpeningEffectsOffset="{materialDesign:IndexedItemOffsetMultiplier 0:0:0.05}" OpeningEffect="{materialDesign:TransitionEffect Kind=ExpandIn}">

                            <Button Style="{StaticResource MaterialDesignIconButton}" ToolTip="YouTube Creator Studio">
                                <materialDesign:PackIcon Kind="YoutubeCreatorStudio" Height="24" Width="24"></materialDesign:PackIcon>
                            </Button>
                        </materialDesign:TransitioningContent>
                        <materialDesign:TransitioningContent OpeningEffectsOffset="{materialDesign:IndexedItemOffsetMultiplier 0:0:0.05}" OpeningEffect="{materialDesign:TransitionEffect Kind=ExpandIn}">

                            <Button Style="{StaticResource MaterialDesignIconButton}" ToolTip="Adobe Reader">
                                <materialDesign:PackIcon Kind="Adobe" Height="24" Width="24"></materialDesign:PackIcon>
                            </Button>
                        </materialDesign:TransitioningContent>
                        <materialDesign:TransitioningContent OpeningEffectsOffset="{materialDesign:IndexedItemOffsetMultiplier 0:0:0.05}" OpeningEffect="{materialDesign:TransitionEffect Kind=ExpandIn}">
                            <Button Style="{StaticResource MaterialDesignIconButton}" ToolTip="Camera">
                                <materialDesign:PackIcon Kind="Camera" Height="24" Width="24"></materialDesign:PackIcon>
                            </Button>
                        </materialDesign:TransitioningContent>
                    </ItemsControl>
                </materialDesign:TransitioningContent>
            </Grid>
        </materialDesign:Card>

    </materialDesign:DrawerHost>
</Window>

5. 主界面后台代码

代码不多,比较简单,源码如下:

using System;
using System.Windows;
using System.Windows.Input;

namespace MobileAppUsageDashboardCore
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
        private void todayBtnClicked(object sender, RoutedEventArgs e)
        {
            mainDrawer.IsLeftDrawerOpen = false;
            todayRadio.IsChecked = true;
            monthRadio.IsChecked = false;
            weekRadio.IsChecked = false;
        }

        private void weekBtnClicked(object sender, RoutedEventArgs e)
        {
            mainDrawer.IsLeftDrawerOpen = false;
            todayRadio.IsChecked = false;
            weekRadio.IsChecked = true;
            monthRadio.IsChecked = false;
        }

        private void monthBtnClicked(object sender, RoutedEventArgs e)
        {
            mainDrawer.IsLeftDrawerOpen = false;
            todayRadio.IsChecked = false;
            weekRadio.IsChecked = false;
            monthRadio.IsChecked = true;
        }

        private void dragME(object sender, MouseButtonEventArgs e)
        {
            try
            {
                DragMove();
            }
            catch (Exception)
            {

                //throw;
            }
        }
    }
}

3. Demo展示、源码下载

前面演示的Demo源码已经全部贴上。

参考视频:WPF Dashboard UI - Material Design [Speed Design]

参考源码:WPF-Dashboard-UI-Material-Design-Concept

上一篇:2021-07-08


下一篇:Linux下Zabbix安装与配置