WPF material UI 的使用
网站:https://github.com/vasanthmes/WPF-Dashboard-UI-Material-Design-Concept

theme
<Application x:Class="MobileAppUsageDashboard.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:MobileAppUsageDashboard"
StartupUri="MainWindow.xaml">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Dark.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.BlueGrey.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.DeepOrange.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>
界面UI
<Window x:Class="MobileAppUsageDashboard.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:MobileAppUsageDashboard"
mc:Ignorable="d"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
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">WEEK</Button>
<Button Style="{StaticResource MaterialDesignFlatButton}" Click="monthBtnClicked">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="Mobile App Usage Dashboard"></TextBlock>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Time Period" 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="WEEK"></RadioButton>
<RadioButton x:Name="monthRadio" Style="{StaticResource MaterialDesignTabRadioButton}"
Margin="4"
IsChecked="False"
Content="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 hr / 5 hr"></TextBlock>
<TextBlock Grid.Row="1" Text="Google Chrome" 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 hr / 3 hr"></TextBlock>
<TextBlock Grid.Row="1" Text="YouTube" 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 hr / 4 hr"></TextBlock>
<TextBlock Grid.Row="1" Text="YouTube Studio" 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="Youtube" Foreground="#DDFF1212" Width="100" Height="100"></materialDesign:PackIcon>
<TextBlock Style="{StaticResource MaterialDesignDisplay1TextBlock}" Text="Caster WPF" 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="Charged" 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 MaterialDesignTitleTextBlock}" Text="4" HorizontalAlignment="Center"></TextBlock>
<TextBlock Text=" times" VerticalAlignment="Center"></TextBlock>
</StackPanel>
</materialDesign:TransitioningContent>
<TextBlock Text="Max Temp" 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 MaterialDesignTitleTextBlock}" Text="40" HorizontalAlignment="Center"></TextBlock>
<TextBlock Text=" C" VerticalAlignment="Center"></TextBlock>
</StackPanel>
</materialDesign:TransitioningContent>
<TextBlock Text="Unlocks" HorizontalAlignment="Center" Margin="0,25,0,0"></TextBlock>
<materialDesign:TransitioningContent OpeningEffect="{materialDesign:TransitionEffect Kind=FadeIn,Duration=0:0:2}">
<TextBlock Style="{StaticResource MaterialDesignTitleTextBlock}" Text="75" HorizontalAlignment="Center" Margin="0,10,0,0"></TextBlock>
</materialDesign:TransitioningContent>
</StackPanel>
<StackPanel Grid.Column="1">
<TextBlock Text="SOT" 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 MaterialDesignTitleTextBlock}" Text="6" HorizontalAlignment="Center"></TextBlock>
<TextBlock Text=" hrs" VerticalAlignment="Center"></TextBlock>
</StackPanel>
</materialDesign:TransitioningContent>
<TextBlock Text="Last Full 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 MaterialDesignTitleTextBlock}" Text="4" HorizontalAlignment="Center"></TextBlock>
<TextBlock Text=" hrs ago" VerticalAlignment="Center"></TextBlock>
</StackPanel>
</materialDesign:TransitioningContent>
<TextBlock Text="Notifications" HorizontalAlignment="Center" Margin="0,25,0,0"></TextBlock>
<materialDesign:TransitioningContent OpeningEffect="{materialDesign:TransitionEffect Kind=FadeIn,Duration=0:0:2}">
<TextBlock Style="{StaticResource MaterialDesignTitleTextBlock}" 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 MaterialDesignTitleTextBlock}" 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 MaterialDesignTitleTextBlock}"
Text="Photos" 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 MaterialDesignTitleTextBlock}" Text="Videos" 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 MaterialDesignTitleTextBlock}" Text="Most Used Apps" 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>
后端code...
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;
}
}
}
<Window x:Class="MobileAppUsageDashboard.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:MobileAppUsageDashboard" mc:Ignorable="d" xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes" 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">WEEK</Button> <Button Style="{StaticResource MaterialDesignFlatButton}" Click="monthBtnClicked">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="Mobile App Usage Dashboard"></TextBlock> </StackPanel> <StackPanel Orientation="Horizontal"> <TextBlock Text="Time Period" 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="WEEK"></RadioButton> <RadioButton x:Name="monthRadio" Style="{StaticResource MaterialDesignTabRadioButton}" Margin="4" IsChecked="False" Content="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 hr / 5 hr"></TextBlock> <TextBlock Grid.Row="1" Text="Google Chrome" 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 hr / 3 hr"></TextBlock> <TextBlock Grid.Row="1" Text="YouTube" 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 hr / 4 hr"></TextBlock> <TextBlock Grid.Row="1" Text="YouTube Studio" 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="Youtube" Foreground="#DDFF1212" Width="100" Height="100"></materialDesign:PackIcon> <TextBlock Style="{StaticResource MaterialDesignDisplay1TextBlock}" Text="Caster WPF" 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="Charged" 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 MaterialDesignTitleTextBlock}" Text="4" HorizontalAlignment="Center"></TextBlock> <TextBlock Text=" times" VerticalAlignment="Center"></TextBlock> </StackPanel> </materialDesign:TransitioningContent> <TextBlock Text="Max Temp" 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 MaterialDesignTitleTextBlock}" Text="40" HorizontalAlignment="Center"></TextBlock> <TextBlock Text=" C" VerticalAlignment="Center"></TextBlock> </StackPanel> </materialDesign:TransitioningContent> <TextBlock Text="Unlocks" HorizontalAlignment="Center" Margin="0,25,0,0"></TextBlock> <materialDesign:TransitioningContent OpeningEffect="{materialDesign:TransitionEffect Kind=FadeIn,Duration=0:0:2}"> <TextBlock Style="{StaticResource MaterialDesignTitleTextBlock}" Text="75" HorizontalAlignment="Center" Margin="0,10,0,0"></TextBlock> </materialDesign:TransitioningContent> </StackPanel> <StackPanel Grid.Column="1"> <TextBlock Text="SOT" 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 MaterialDesignTitleTextBlock}" Text="6" HorizontalAlignment="Center"></TextBlock> <TextBlock Text=" hrs" VerticalAlignment="Center"></TextBlock> </StackPanel> </materialDesign:TransitioningContent> <TextBlock Text="Last Full 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 MaterialDesignTitleTextBlock}" Text="4" HorizontalAlignment="Center"></TextBlock> <TextBlock Text=" hrs ago" VerticalAlignment="Center"></TextBlock> </StackPanel> </materialDesign:TransitioningContent> <TextBlock Text="Notifications" HorizontalAlignment="Center" Margin="0,25,0,0"></TextBlock> <materialDesign:TransitioningContent OpeningEffect="{materialDesign:TransitionEffect Kind=FadeIn,Duration=0:0:2}"> <TextBlock Style="{StaticResource MaterialDesignTitleTextBlock}" 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 MaterialDesignTitleTextBlock}" 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 MaterialDesignTitleTextBlock}" Text="Photos" 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 MaterialDesignTitleTextBlock}" Text="Videos" 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 MaterialDesignTitleTextBlock}" Text="Most Used Apps" 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>
WPF material UI 的使用的更多相关文章
- WPF相关UI库
免费控件库: 1.Extended WPF Toolkit 官方拓展控件 http://wpftoolkit.codeplex.com/ 2.avalondock 可停靠布局(wpf toolkit包 ...
- Material UI – Material Design CSS 框架
Material Design 是谷歌推出的全新的设计理念,采用大胆的色彩.流畅的动画播放,以及卡片式的简洁设计.Material Design 风格的设计拥有干净的排版和简单的布局,容易理解,内容才 ...
- 仿Material UI框架的动画特效
Material UI是一款功能非常强大,界面却十分清新简洁的CSS框架,Material UI利用了Google的Material Design 全新设计语言,并且让每一个UI组件都变得非常独立,因 ...
- WPF多线程UI更新——两种方法
WPF多线程UI更新——两种方法 前言 在WPF中,在使用多线程在后台进行计算限制的异步操作的时候,如果在后台线程中对UI进行了修改,则会出现一个错误:(调用线程无法访问此对象,因为另一个线程拥有该对 ...
- WPF Modern UI 主题更换原理
WPF Modern UI 主题更换原理 一 . 如何更换主题? 二 . 代码分析 代码路径 : FirstFloor.ModernUI.App / Content / SettingsAppeara ...
- Angular 2 to Angular 4 with Angular Material UI Components
Download Source - 955.2 KB Content Part 1: Angular2 Setup in Visual Studio 2017, Basic CRUD applicat ...
- WPF 模拟UI 键盘录入
原文:WPF 模拟UI 键盘录入 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/yangyisen0713/article/details/1835 ...
- (转)基于 WPF + Modern UI 的 公司OA小助手 开发总结
原文地址:http://www.cnblogs.com/rainlam163/p/3365181.html 前言: 距离上一篇博客,整整一个月的时间了.人不能懒下来,必须有个阶段性的总结,算是对我这个 ...
- WPF MVVM UI分离之《交互与数据分离》 基础才是重中之重~delegate里的Invoke和BeginInvoke 将不确定变为确定系列~目录(“机器最能证明一切”) 爱上MVC3系列~全局异常处理与异常日志 基础才是重中之重~lock和monitor的区别 将不确定变成确定~我想监视我的对象,如果是某个值,就叫另一些方法自动运行 将不确定变成确定~LINQ DBML模型可以对
WPF MVVM UI分离之<交互与数据分离> 在我们使用WPF过程中,不可避免并且超级喜欢使用MVVM框架. 那么,使用MVVM的出发点是视觉与业务逻辑分离,即UI与数据分离 诸如下 ...
随机推荐
- ctf杂项之easy_nbt
下载附件查看 除了几个文件之外,没有思路 搜索nbt可知,可以使用nbtexplorer工具 果断下载,然后打开题目下载的目录 crrl+f搜索flag 猜测kflag{Do_u_kN0w_nbt?} ...
- 「BZOJ3545」「ONTAK2010」Peaks
「BZOJ3545」「ONTAK2010」Peaks 题目传送门 题目大意: 给定一个 \(n\) 个点,\(m\) 条边的带点权边权无向图,有 \(q\) 次询问,每次询问从 \(v\) 点出发,经 ...
- Jmeter使用笔记001
Apache JMeter是一款纯java编写负载功能测试和性能测试开源工具软件. jmeter也可以用来做接口自动化 一.jmeter基础 1.1 jmeter的执行顺序 1,执行配置元件2,前置处 ...
- Automation Framework Design 自动化框架设计思想
从2007年到2017年,十年内自动化测试工具层出不穷,各种工具在运用一段时间之后,各个公司都会有测试架构师对于目前的自动化测试工具进行框架定制设计. 从惠普2007年GDCC推出的的WebDrivi ...
- python 构造函数 析构函数
#构造函数是在对象被创建是自动调用的方法,用来完成初始化操作class Test(object): def __init__(self, name): self.name = name print(' ...
- VUE+ElementUI实现左侧为树形结构、右侧无层级结构的穿梭框
工作中遇到一个需求,需要将一个数据选择做成穿梭框,但是要求穿梭框左侧为树形结构.右侧为无层级结构的数据展示,ElementUI自身无法在穿梭框中添加树形结构,网上搜到了大佬封装的插件但是对于右侧的无树 ...
- 基于SSM小区物业管理系统
随着计算机的不断发展和广泛应用,人们的工作效率得到不断的提高.互联网的发展,更是缩短了人们之间的距离.如何充分利用互联网,这是大家共同关心的问题.本文主要介绍了关于小区管理系统的实现方法,设计规划了小 ...
- Real DOM和 Virtual DOM 的区别?优缺点?
一.是什么 Real DOM,真实DOM, 意思为文档对象模型,是一个结构化文本的抽象,在页面渲染出的每一个结点都是一个真实DOM结构,如下: Virtual Dom,本质上是以 JavaScript ...
- Leetcode 春季打卡活动 第一题:225. 用队列实现栈
Leetcode 春季打卡活动 第一题:225. 用队列实现栈 Leetcode 春季打卡活动 第一题:225. 用队列实现栈 解题思路 这里用了非常简单的思路,就是在push函数上做点操作,让队头总 ...
- 看懂UML类图笔记
在学习设计模式的时候,经常会遇到UML类图,所以就找了一些资料,做一些笔记. 从一个示例开始 下面这个类图,类之间的关系是我们需要关注的: 车的类图结构为<<abstract>> ...