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

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

关键功能点

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

Demo演示：

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文章，套路都是一个竖直菜单隐藏在界面左边边界之外，左边边界留一个菜单按钮，点击该按钮呼出竖直菜单，即达到抽屉式菜单效果。

本文介绍的抽屉式菜单也不外如是,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控件库实现圆形进度条，效果如下：

圆形进度条代码如下，使用的还是 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

应用程序使用统计信息 – .NET CORE(C#) WPF界面设计的更多相关文章

  1. PLSQL_统计信息系列10_统计信息过旧导致程序出现性能问题

    2014-11-15 Created By BaoXinjian

  2. Oracle 11G统计信息自动收集及调整

    查询统计信息的收集所对应的task,以及当前状态 col CLIENT_NAME for a50col TASK_NAME for a20SELECT client_name, task_name, ...

  3. SQL Server2016 新功能实时查询统计信息

    SQL Server2016 新功能实时查询统计信息 很多时候有这样的场景,开发抱怨DBA没有调优好数据库,DBA抱怨开发写的程序代码差,因此,DBA和开发都成为了死对头,无法真正排查问题. DBA只 ...

  4. 创建ASP.NET Core MVC应用程序(3)-基于Entity Framework Core(Code First)创建MySQL数据库表

    创建ASP.NET Core MVC应用程序(3)-基于Entity Framework Core(Code First)创建MySQL数据库表 创建数据模型类(POCO类) 在Models文件夹下添 ...

  5. MS SQL 统计信息浅析上篇

    统计信息概念 统计信息是一些对象,这些对象包含在表或索引视图中一列或多列中的数据分布有关的统计信息.数据库查询优化器使用这些统计信息来估计查询结果中的基数或行数. 通过这些基数估计,查询优化器可以生成 ...

  6. 第六章第一个linux个程序：统计单词个数

    第六章第一个linux个程序:统计单词个数 从本章就开始激动人心的时刻——实战,去慢慢揭开linux神秘的面纱.本章的实例是统计一片文章或者一段文字中的单词个数.  第 1 步:建立 Linu x 驱 ...

  7. Oracle的自动统计信息不收集直方图的信息

    Oracle的自动统计信息不收集直方图的信息 在oracle9i中,默认的统计信息收集是不收集直方图信息的,也就是说默认的MOTHOD_OPT模式为FOR ALL COLUMNS SIZE 1 在10 ...

  8. dbms_stats包更新、导出、导入、锁定统计信息

    dbms_stats包问世以后,我们可通过一种新的方式来为CBO收集统计数据.目前,已经不再推荐使用老式的Analyze分析表和dbms_utility方法来生成CBO统计数据.dbms_stats能 ...

  9. oracle10g 统计信息查看、收集

      1. 统计信息查看 1.1 单个表的全局统计信息.统计效果查看 2. 统计信息分析(收集) 2.1 分析工具选择 2.2 分析前做index重建 2.3 分析某数据表,可以在PL/SQL的comm ...

  10. 收集oracle统计信息

    优化器统计范围: 表统计: --行数,块数,行平均长度:all_tables:NUM_ROWS,BLOCKS,AVG_ROW_LEN:列统计: --列中唯一值的数量(NDV),NULL值的数量,数据分 ...

随机推荐

  1. lca 学习笔记

    定义 最近公共祖先简称 \(LCA\) 两个节点的最近公共祖先,就是这两个点的公共祖先里,离根最远的的那个 为了方便,我们记某点集 \(S={v1,v2,...,vn}\) 的最近公共祖先为 \(LC ...

  2. ElasticSearch之cat nodes API

    命令样例如下: curl -X GET "https://localhost:9200/_cat/nodes?v=true&pretty" --cacert $ES_HOM ...

  3. 第三方登录--QQ登录--单体应用

    从零玩转第三方QQ登录 下面有源码 前后端分离版本 一样的思路 https://www.cnblogs.com/Yangbuyi/p/13194007.html 第三方GITEE登录 https:// ...

  4. 【pandas小技巧】--目录（完结）

    pandas小技巧系列是介绍的是使用pandas分析数据时,最常用的一些操作技巧. 具体包括: 创建测试数据 学习pandas的过程中,为了尝试pandas提供的各类功能强大的函数,常常需要花费很多时 ...

  5. 技术实践丨手把手教你使用MQTT方式对接华为IoT平台 华为云开发者社区

    摘要:本文主要讲述使用MQTT方式对接华为云IoT平台的具体过程. 使用的方案:目标板为STM32L431BearPI(带E53扩展板); TCPIP功能由开发板的ESP8266提供:MQTT使用Pa ...

  6. U2Net基于ModelArts Notbook的仿真实验

    摘要:U2Net是一个优秀的显著性目标检测算法,由Qin Xuebin等人发表在Pattern Recognition 2020期刊[Arxiv].U2Net名称的来源在于其网络结构由两层嵌套的Une ...

  7. 快来一起玩转LiteOS组件：Curl

    摘要:Curl是一个文件传输工具,常用于数据上传和下载,本demo基于Cloud_STM32F429IGTx_FIRE开发板演示了在curl demo中调用curl提供的API来下载一个文件,并将其保 ...

  8. CWE 视图层级关系解析：节点关系查询

    本文分享自华为云社区<CWE视图层级关系的解析 之 CWE节点关系的查询>,作者: Uncle_Tom. 1. CWE 转换成 SQLite 表 依据<CWE视图层级关系的解析 之 ...

  9. 音乐 APP 用户争夺战，火山引擎 VeDI 助力用户体验升级！

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,并进入官方交流群 国内数字音乐市场正在保持稳定增长. 根据华经产业研究院数据报告显示,2020 年数字音乐市场规模为 357.3 亿元,到 ...

  10. PS组件相关BAPI

    一.新增组件BAPI "-----------------------------------------@斌将军-------------------------------------- ...