應用程序使用統計信息 – .NET CORE(C#) WPF界面設計
應用程序使用統計信息 - .NET CORE(C#) WPF界面設計
首發文章地址：https://dotnet9.com/10546.htmlhtml
關鍵功能點git
- 抽屜式菜單
- 圓形進度條
Demo演示：github
1. 新建項目
使用 VS 2019 的 .NET Core 3.1 WPF 項目模板，建立名爲 「MobileAppUsageDashboardCore」 的項目，NuGet 引入 MaterialDesign 的兩個庫 MaterialDesignThemes 和 MaterialDesignColors，整個項目工程文件以下：express
<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文章，套路都是一個豎直菜單隱藏在界面左邊邊界以外，左邊邊界留一個菜單按鈕，點擊該按鈕呼出豎直菜單，即達到抽屜式菜單效果。app
本文介紹的抽屜式菜單也不外如是,VS設計界面見上圖，使用的MD控件的DrawerHost.LeftDrawerContent組件，換一種方式實現，下面是抽屜菜單佈局代碼：ide
<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控件庫實現圓形進度條，效果以下：spa
圓形進度條代碼以下，使用的仍是 ProgressBar 控件，樣式使用了MD控件庫的「MaterialDesignCircularProgressBar」 樣式，組件加載時(Loaded事件)，使用了雙精度動畫：.net
<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源碼已經所有貼上。
相關文章
- 1. 調用Android系統「應用程序信息（Application Info）」界面
- 2. 使用MVVM設計模式構建WPF應用程序
- 3. 微信小程序使用weui設計界面
- 4. WPF登陸界面及程序主界面設計
- 5. 使用線程統計信息(Thread Statistics)
- 6. WPF 應用程序使用程序的模型視圖 ViewModel 設計模式（MVVM）
- 7. WPF 應用程序使用程序的模型視圖 ViewModel 設計模式 WVVM
- 8. qooxdoo入門教程一：應用程序界面簡單設計
- 9. Anki review 界面卡片信息統計
- 10. WPF界面MahApps.Metro之應用
- 更多相關文章...
- • XML 應用程序 - XML 教程
- • 移動設備 統計 - 瀏覽器信息
- • 使用Rxjava計算圓周率
- • Git可視化極簡易教程 — Git GUI使用方法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章