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.MergedDictionaries>

</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>

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

<Button Style="{StaticResource MaterialDesignFlatButton}" Click="todayBtnClicked">TODAY</Button>

<Button Style="{StaticResource MaterialDesignFlatButton}" Click="monthBtnClicked">MONTH</Button>

</StackPanel>

</materialDesign:DrawerHost.LeftDrawerContent>

<materialDesign:Card HorizontalAlignment="Stretch" VerticalAlignment="Stretch">

<materialDesign:Card.Background>

</LinearGradientBrush>

</materialDesign:Card.Background>

<Grid>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Button Style="{StaticResource MaterialDesignFlatButton}" Command="{x:Static materialDesign:DrawerHost.OpenDrawerCommand}"

HorizontalAlignment="Left"

VerticalAlignment="Top"

<materialDesign:PackIcon Kind="HamburgerMenu"></materialDesign:PackIcon>

</Button>

</StackPanel>

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

<materialDesign:TransitioningContent OpeningEffect="{materialDesign:TransitionEffect Kind=ExpandIn}">

<Grid>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<ProgressBar Height="100"

Width="100"

Value="40" Foreground="#FF68E843"

x:Name="firstProgress"

<ProgressBar.Style>

<Style.Triggers>

<DoubleAnimation Storyboard.TargetProperty="Value" From="0" To="40"

Duration="0:0:0.5"></DoubleAnimation>

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Style.Triggers>

</Style>

</ProgressBar.Style>

</ProgressBar>

</Grid>

</materialDesign:TransitioningContent>

<materialDesign:TransitioningContent OpeningEffect="{materialDesign:TransitionEffect Kind=ExpandIn}">

<Grid>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<ProgressBar Height="100"

Width="100"

Value="70" Foreground="#FFE84343"

x:Name="secondProgress" Margin="14,-1,13,1"

<ProgressBar.Style>

<Style.Triggers>

<DoubleAnimation Storyboard.TargetProperty="Value" From="0" To="70"

Duration="0:0:0.5"></DoubleAnimation>

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Style.Triggers>

</Style>

</ProgressBar.Style>

</ProgressBar>

</Grid>

</materialDesign:TransitioningContent>

<materialDesign:TransitioningContent OpeningEffect="{materialDesign:TransitionEffect Kind=ExpandIn}">

<Grid>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<ProgressBar Height="100"

Width="100"

Value="30" Foreground="#FFE8E843"

x:Name="thirdProgress"

<ProgressBar.Style>

<Style.Triggers>

<DoubleAnimation Storyboard.TargetProperty="Value" From="0" To="30"

Duration="0:0:0.5"></DoubleAnimation>

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Style.Triggers>

</Style>

</ProgressBar.Style>

</ProgressBar>

</Grid>

</materialDesign:TransitioningContent>

</UniformGrid>

<materialDesign:TransitioningContent OpeningEffect="{materialDesign:TransitionEffect Kind=ExpandIn,Duration=0:0:1}">

<materialDesign:PackIcon Kind="Youtube" Foreground="#DDFF1212" Width="100" Height="100"></materialDesign:PackIcon>

</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>

</materialDesign:Card.Background>

<Grid >

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<materialDesign:TransitioningContent OpeningEffect="{materialDesign:TransitionEffect Kind=FadeIn, Duration=0:0:2}">

</StackPanel>

</materialDesign:TransitioningContent>

<materialDesign:TransitioningContent

OpeningEffect="{materialDesign:TransitionEffect Kind=FadeIn, Duration=0:0:2}">

</StackPanel>

</materialDesign:TransitioningContent>

<materialDesign:TransitioningContent OpeningEffect="{materialDesign:TransitionEffect Kind=FadeIn,Duration=0:0:2}">

</materialDesign:TransitioningContent>

</StackPanel>

<materialDesign:TransitioningContent OpeningEffect="{materialDesign:TransitionEffect Kind=FadeIn, Duration=0:0:2}">

</StackPanel>

</materialDesign:TransitioningContent>

<materialDesign:TransitioningContent OpeningEffect="{materialDesign:TransitionEffect Kind=FadeIn, Duration=0:0:2}">

</StackPanel>

</materialDesign:TransitioningContent>

<materialDesign:TransitioningContent OpeningEffect="{materialDesign:TransitionEffect Kind=FadeIn,Duration=0:0:2}">

</materialDesign:TransitioningContent>

</StackPanel>

</Grid>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid>

</Grid>

</StackPanel>

<Grid>

<TextBlock Style="{StaticResource MaterialDesignTitleTextBlock}"

Text="Photos" HorizontalAlignment="Left" VerticalAlignment="Center"></TextBlock>

</Grid>

</StackPanel>

<Grid>

</Grid>

</StackPanel>

</Grid>

</materialDesign:Card>

</materialDesign:TransitioningContent>

<materialDesign:TransitioningContent Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Top" OpeningEffect="{materialDesign:TransitionEffect Kind=SlideInFromTop}">

</materialDesign:TransitioningContent>

<materialDesign:TransitioningContent

Grid.Column="2"

OpeningEffect="{materialDesign:TransitionEffect Kind=FadeIn}" Margin="0,40,0,0">

<ItemsControl.ItemsPanel>

</ItemsPanelTemplate>

</ItemsControl.ItemsPanel>

<materialDesign:TransitioningContent OpeningEffectsOffset="{materialDesign:IndexedItemOffsetMultiplier 0:0:0.05}" OpeningEffect="{materialDesign:TransitionEffect Kind=ExpandIn}">

<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}">

<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}">

<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}">

<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}">

<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}">

<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}">

<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}">

<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>  <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与数据分离诸如下 ...

随机推荐

Java笔记——方法
1.方法 (1)概念:①解决事情的办法②实现功能的代码段. (2)优点:①提到代码的复用性②便于后期维护. (3)特点:①不调用不执行②方法不能嵌套,定义在类中方法外的位置. (4)定义方 ...
「AGC023D」 Go Home
「AGC023D」 Go Home 传送门神题. 首先我们可以倒着考虑. 当车到达最后一栋楼的时候,车上一定只有到这栋楼的员工. 当车到达倒数第二栋楼的时候,车上一定只有到达剩下两栋楼的员工. 设这 ...
常见内部排序算法对比分析及C++ 实现代码
内部排序是指在排序期间数据元素全部存放在内存的排序.外部排序是指在排序期间全部元素的个数过多,不能同时存放在内存,必须根据排序过程的要求,不断在内存和外存之间移动的排序.本次主要介绍常见的内部排序算法 ...
程序向informix数据库插入text类型的中文乱码问题
部署应用的Linux服务器的编码格式为utf-8.但是数据库的编码格式为Gbk.所以导致的乱码.但是其他类型的数据中文并不乱码. 通过图片中修改编码格式,可以解决,导致的后果就是tomcat的日志输出 ...
MP4命令行处理
MP4Box可用于生成符合MPEG-DASH规范的内容,也就是ISO / IEC 23009-1在ISO公共可用标准中可用的内容. dash切片命令: mp4box -dash 5000 -frag ...
videojs文档翻译Guides-components
components Components Video.js播放器的架构围绕组件. Player类和所有表示播放器控件和其他UI元素的类都继承自Component类. 这种架构使得可以轻松地以反映DO ...
php 获取上个月的起止时间戳
$thismonth = date('m'); $thisyear = date('Y'); if ($thismonth == 1) { $lastmonth = 12; $lastyear = $ ...
.net 知新：【3】.net 5 项目结构说明和发布部署
.net 5的项目目录结构和.net framework有些明显的变化,包括显示结构和项目文件,从这两个方面看看有哪些变化. 项目目录结构就以上篇用的demo项目为例([.net 知新:[2] .N ...
必备！一文掌握Wordpress插件
必备!一文掌握Wordpress插件什么是插件? Wordpress是一个非常强大的建站系统,而在我们建站的过程中,插件的使用必不可少. 插件是WordPress功能的扩展,也是WordPress得 ...
Hotel 旅馆，线段树查询，合并
C. Hotel 旅馆内存限制:256 MiB 时间限制:1000 ms 标准输入输出题目类型:传统评测方式:文本比较题目描述 OIER最近的旅游计划,是到长春净月潭,享受那里的湖光山色, ...

WPF material UI 的使用

WPF material UI 的使用的更多相关文章

随机推荐

热门专题