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


    应用程序使用统计信息 - .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

  • 相关阅读:
    PAT甲级1107. Social Clusters
    PAT甲级1103. Integer Factorization
    PAT甲级1098. Insertion or Heap Sort
    hihocoder 162周 1323 : 回文字符串
    PAT甲级1095. Cars on Campus
    PAT甲级1089. Insert or Merge
    PAT甲级1087. All Roads Lead to Rome
    PAT甲级1076. Forwards on Weibo
    PAT甲级1066. Root of AVL Tree
    PAT甲级1057. Stack
  • 原文地址:https://www.cnblogs.com/Dotnet9-com/p/12497461.html
Copyright © 2020-2023  润新知