Application usage statistics -. Net core (C ා) WPF interface design

Application usage statistics -. Net core (C ා) WPF interface design

First article address: https://dotnet9.com/10546.html

Key function points

  1. Drawer menu
  2. Round progress bar

Demo demo:

1. New project

Use the. NET Core 3.1 WPF project template of VS 2019 to create a project named "MobileAppUsageDashboardCore". NuGet introduces two libraries of MaterialDesign, MaterialDesignThemes and MaterialDesignColors. The whole project engineering file is as follows:

<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. Drawer menu

There are many Demo articles on the drawer menu in the front. The routine is that a vertical menu is hidden outside the left boundary of the interface, and a menu button is left at the left boundary. Click this button to call out the vertical menu, and the drawer menu effect is achieved.

The drawer menu introduced in this paper is just like that. The VS design interface is shown in the figure above. The DrawerHost.LeftDrawerContent component of MD control is implemented in another way. The following is the drawer menu layout code:

<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">Today</Button>
            <Button Style="{StaticResource MaterialDesignFlatButton}" Click="weekBtnClicked">This week</Button>
            <Button Style="{StaticResource MaterialDesignFlatButton}" Click="monthBtnClicked">This month</Button>
        </StackPanel>
    </StackPanel>
</materialDesign:DrawerHost.LeftDrawerContent>

There is also a menu close button hidden with the menu. See the first button in the above code. Click the button to trigger the command "DrawerHost.CloseDrawerCommand" to close the drawer menu.

The following is the menu button within the window boundary. Click to expand the drawer menu. The triggered command is "DrawerHost.OpenDrawerCommand":

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

3. Round progress bar

Using MD control library to realize circular progress bar, the effect is as follows:

The code of the circular progress bar is as follows: the ProgressBar control is used. The MD control library's "MaterialDesignCircularProgressBar" style is used. When the component is Loaded (load event), the double precision animation is used:

<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 source code

The whole Demo is not difficult. In addition to the above two small functions, the other is the general layout code. The main interface XAML code is as follows:

<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="Application usage statistics" 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">Today</Button>
                    <Button Style="{StaticResource MaterialDesignFlatButton}" Click="weekBtnClicked">This week</Button>
                    <Button Style="{StaticResource MaterialDesignFlatButton}" Click="monthBtnClicked">This month</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="Dashboard for mobile apps"></TextBlock>
                    </StackPanel>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="Time slot" VerticalAlignment="Center"></TextBlock>
                        <StackPanel Orientation="Horizontal" Margin="4">
                            <RadioButton x:Name="todayRadio" Style="{StaticResource MaterialDesignTabRadioButton}"
                                         Margin="4"
                                         IsChecked="True"
                                         Content="Today"></RadioButton>
                            <RadioButton x:Name="weekRadio" Style="{StaticResource MaterialDesignTabRadioButton}"
                                         Margin="4"
                                         IsChecked="False"
                                         Content="This week"></RadioButton>
                            <RadioButton x:Name="monthRadio" Style="{StaticResource MaterialDesignTabRadioButton}"
                                         Margin="4"
                                         IsChecked="False"
                                         Content="This month"></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 hour / 5 hour"></TextBlock>
                                <TextBlock Grid.Row="1" Text="Baidu" 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 hour / 3 hour"></TextBlock>
                                <TextBlock Grid.Row="1" Text="Alibaba" 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 hour / 4 hour"></TextBlock>
                                <TextBlock Grid.Row="1" Text="tencent" 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="Subscribe to " 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="Charge" 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=" second" VerticalAlignment="Center"></TextBlock>
                                        </StackPanel>
                                    </materialDesign:TransitioningContent>
                                    <TextBlock Text="Maximum temperature" 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="Unlock" 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="Boot up" 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=" hour" VerticalAlignment="Center"></TextBlock>
                                        </StackPanel>
                                    </materialDesign:TransitioningContent>
                                    <TextBlock Text="Last charge" 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=" Hours ago" VerticalAlignment="Center"></TextBlock>
                                        </StackPanel>
                                    </materialDesign:TransitioningContent>
                                    <TextBlock Text="notice" 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="storage" 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="Album" 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="video" 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="Most commonly used applications" 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. Background code of main interface

There are not many codes, which are relatively simple. The source code is as follows:

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 display and source code download

The Demo source code shown earlier has been pasted.

Reference video: WPF Dashboard UI - Material Design [Speed Design]

Reference source code: WPF-Dashboard-UI-Material-Design-Concept

Published 51 original articles, won praise 17, visited 20000+
Private letter follow

Tags: SDK Windows Mobile Google

Posted on Sun, 15 Mar 2020 03:35:01 -0400 by cairesdesigns