時間は水のようなものです、あなたは流れに戻って行くことができません!
再び親指アップ、あなたは私の創造力を与えるということです習慣、!
すでに含まれてhttps://dotnet9.com、所有者がなどWinフォーム、WPF、ASP.NETコア、Xamarin.Forms、など共有DOTNET関連技術に満足しているDotnet9この記事は、また、デスクトップC ++のQtクイックとQtウィジェット、彼らは単に共有に関連しています私たちは、自分の意志に精通しています。
読むナビ:
- まず、効果を見て
- 二、本文背景
- 第三に、コードの実装
- 第四に、記事の参照
- 第五に、コードのダウンロード
まず、効果を見て
二、本文背景
YouTubeの大きなデザインCOM WPF神取得、レイアウトシンプルな電卓インターフェイス+単純なアニメーション、オープンソースのC#WPFコントロールライブラリMaterialDesignInXAMLの使用は、このサイトでは紹介した:オープンソースのC#WPFコントロールライブラリ「MaterialDesignInXAMLを」。
第三に、コードの実装
3.1追加Nugetライブラリー
MaterialDesignThemesとMaterialDesignColorsは、数字は非常に強力な、達成するための制御ライブラリを使用しての効果です:マスターコア3.1ソリューションは2つのNugetライブラリを追加する必要があります後、「電卓」を作成するために作成されたネットWPFのプロジェクトを使用して。
エンジニアリング構造物の3.2
唯一の2つのファイルを変更し、App.xamlは結果を達成するためにMDコントロールのスタイル、メインウィンドウのメインウィンドウを追加し、ショットを必要としないでください。
3.3 App.xaml導入MDコントロールのスタイル
<Application x:Class="Calculator.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Calculator"
StartupUri="MainWindow.xaml">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
</ResourceDictionary.MergedDictionaries>
<!--PRIMARY-->
<SolidColorBrush x:Key="PrimaryHueLightBrush" Color="#349fda"/>
<SolidColorBrush x:Key="PrimaryHueLightForegroundBrush" Color="#FF777777"/>
<SolidColorBrush x:Key="PrimaryHueMidBrush" Color="#FF222222"/>
<SolidColorBrush x:Key="PrimaryHueMidForegroundBrush" Color="#DDDDDD"/>
<SolidColorBrush x:Key="PrimaryHueDarkBrush" Color="#FF000000"/>
<SolidColorBrush x:Key="PrimaryHueDarkForegroundBrush" Color="#FFFFFF"/>
<!--ACCENT-->
<SolidColorBrush x:Key="SecondaryAccentBrush" Color="#FFD14C25"/>
<SolidColorBrush x:Key="SecondaryAccentForegroundBrush" Color="#FFFFFF"/>
</ResourceDictionary>
</Application.Resources>
</Application>
3.4メインフォーム
MainWindow.xaml、全体的なレイアウトに加え、以下の図の派手なインタフェースコードは、これはこのインタフェースの基本的なレイアウト+単純なアニメーション、すべてで、コードを直接見て、あなたは手の込んだされていません。
<Window x:Class="Calculator.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:Calculator"
mc:Ignorable="d"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
Height="550" Width="300" AllowsTransparency="True"
WindowStyle="None" ResizeMode="NoResize" MouseDown="Window_MouseDown"
WindowStartupLocation="CenterScreen">
<Window.Resources>
<Storyboard x:Key="PowerOff">
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="grid">
<DiscreteObjectKeyFrame KeyTime="0:0:0.2" Value="{x:Static Visibility.Visible}"/>
<DiscreteObjectKeyFrame KeyTime="0:0:1.5" Value="{x:Static Visibility.Visible}"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="grid">
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="PowerOn">
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="grid">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
<DiscreteObjectKeyFrame KeyTime="0:0:1.3" Value="{x:Static Visibility.Visible}"/>
<DiscreteObjectKeyFrame KeyTime="0:0:1.5" Value="{x:Static Visibility.Collapsed}"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="grid">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.3" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Window.Triggers>
<EventTrigger RoutedEvent="ButtonBase.Click" SourceName="ButtonPowerOff">
<BeginStoryboard Storyboard="{StaticResource PowerOff}"/>
</EventTrigger>
<EventTrigger RoutedEvent="ButtonBase.Click" SourceName="ButtonPowerOn">
<BeginStoryboard Storyboard="{StaticResource PowerOn}"/>
</EventTrigger>
</Window.Triggers>
<Border Background="#E5000000" CornerRadius="10">
<Grid>
<StackPanel>
<Grid Height="210">
<StackPanel>
<Button HorizontalAlignment="Left" Margin="10" Style="{StaticResource MaterialDesignFlatButton}" Foreground="{StaticResource PrimaryHueMidForegroundBrush}">
<materialDesign:PackIcon Kind="Menu" Foreground="{StaticResource PrimaryHueLightForegroundBrush}"/>
</Button>
<TextBlock FontSize="15" FontFamily="Oswald" Text="30 + 20 = 50" TextAlignment="Right"
Foreground="{StaticResource PrimaryHueLightForegroundBrush}" Margin="20 0 20 10"/>
</StackPanel>
<StackPanel VerticalAlignment="Bottom">
<TextBlock FontSize="20" FontFamily="Oswald" Text="30 + 47 + 32 -" TextAlignment="Right"
Foreground="{StaticResource PrimaryHueLightForegroundBrush}" Margin="20 0"/>
<TextBlock FontSize="50" FontFamily="Oswald" Text="13" TextAlignment="Right"
Foreground="#FF5885A4" Margin="20 0">
<TextBlock.Effect>
<DropShadowEffect BlurRadius="10" ShadowDepth="1" Color="#FF5885A4"/>
</TextBlock.Effect>
</TextBlock>
</StackPanel>
</Grid>
<Rectangle Height="1" Fill="Gray" Margin="10 0"/>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<Button Grid.Column="0" Grid.Row="0" Margin="5"
Style="{StaticResource MaterialDesignFloatingActionButton}"
BorderThickness="1" BorderBrush="{StaticResource PrimaryHueMidBrush}">
<materialDesign:PackIcon Kind="LetterC" Width="30" Height="30"/>
</Button>
<Button Grid.Column="1" Grid.Row="0" Margin="5"
Style="{StaticResource MaterialDesignFloatingActionButton}"
BorderThickness="1" BorderBrush="{StaticResource PrimaryHueMidBrush}">
<materialDesign:PackIcon Kind="PlusMinus" Width="30" Height="30"/>
</Button>
<Button Grid.Column="2" Grid.Row="0" Margin="5"
Style="{StaticResource MaterialDesignFloatingActionButton}"
BorderThickness="1" BorderBrush="{StaticResource PrimaryHueMidBrush}">
<materialDesign:PackIcon Kind="Percent" Width="30" Height="30"/>
</Button>
<Button Grid.Column="3" Grid.Row="0" Margin="5"
Style="{StaticResource MaterialDesignFloatingActionButton}"
BorderThickness="1" BorderBrush="{StaticResource PrimaryHueMidBrush}">
<materialDesign:PackIcon Kind="Division" Width="30" Height="30"/>
</Button>
<Button Grid.Column="0" Grid.Row="1" Margin="5"
Style="{StaticResource MaterialDesignFloatingActionDarkButton}"
BorderThickness="1" BorderBrush="{StaticResource PrimaryHueMidBrush}">
<materialDesign:PackIcon Kind="Number7" Width="30" Height="30"/>
</Button>
<Button Grid.Column="1" Grid.Row="1" Margin="5"
Style="{StaticResource MaterialDesignFloatingActionDarkButton}"
BorderThickness="1" BorderBrush="{StaticResource PrimaryHueMidBrush}">
<materialDesign:PackIcon Kind="Number8" Width="30" Height="30"/>
</Button>
<Button Grid.Column="2" Grid.Row="1" Margin="5"
Style="{StaticResource MaterialDesignFloatingActionDarkButton}"
BorderThickness="1" BorderBrush="{StaticResource PrimaryHueMidBrush}">
<materialDesign:PackIcon Kind="Number9" Width="30" Height="30"/>
</Button>
<Button Grid.Column="3" Grid.Row="1" Margin="5"
Style="{StaticResource MaterialDesignFloatingActionDarkButton}"
BorderThickness="1" BorderBrush="{StaticResource PrimaryHueMidBrush}">
<materialDesign:PackIcon Kind="Multiplication" Width="30" Height="30"/>
</Button>
<Button Grid.Column="0" Grid.Row="2" Margin="5"
Style="{StaticResource MaterialDesignFloatingActionDarkButton}"
BorderThickness="1" BorderBrush="{StaticResource PrimaryHueMidBrush}">
<materialDesign:PackIcon Kind="Number4" Width="30" Height="30"/>
</Button>
<Button Grid.Column="1" Grid.Row="2" Margin="5"
Style="{StaticResource MaterialDesignFloatingActionDarkButton}"
BorderThickness="1" BorderBrush="{StaticResource PrimaryHueMidBrush}">
<materialDesign:PackIcon Kind="Number5" Width="30" Height="30"/>
</Button>
<Button Grid.Column="2" Grid.Row="2" Margin="5"
Style="{StaticResource MaterialDesignFloatingActionDarkButton}"
BorderThickness="1" BorderBrush="{StaticResource PrimaryHueMidBrush}">
<materialDesign:PackIcon Kind="Number6" Width="30" Height="30"/>
</Button>
<Button Grid.Column="3" Grid.Row="2" Margin="5"
Style="{StaticResource MaterialDesignFloatingActionDarkButton}"
BorderThickness="1" BorderBrush="{StaticResource PrimaryHueMidBrush}">
<materialDesign:PackIcon Kind="Minus" Width="30" Height="30"/>
</Button>
<Button Grid.Column="0" Grid.Row="3" Margin="5"
Style="{StaticResource MaterialDesignFloatingActionDarkButton}"
BorderThickness="1" BorderBrush="{StaticResource PrimaryHueMidBrush}">
<materialDesign:PackIcon Kind="Number1" Width="30" Height="30"/>
</Button>
<Button Grid.Column="1" Grid.Row="3" Margin="5"
Style="{StaticResource MaterialDesignFloatingActionDarkButton}"
BorderThickness="1" BorderBrush="{StaticResource PrimaryHueMidBrush}">
<materialDesign:PackIcon Kind="Number2" Width="30" Height="30"/>
</Button>
<Button Grid.Column="2" Grid.Row="3" Margin="5"
Style="{StaticResource MaterialDesignFloatingActionDarkButton}"
BorderThickness="1" BorderBrush="{StaticResource PrimaryHueMidBrush}">
<materialDesign:PackIcon Kind="Number3" Width="30" Height="30"/>
</Button>
<Button Grid.Column="3" Grid.Row="3" Margin="5"
Style="{StaticResource MaterialDesignFloatingActionDarkButton}"
BorderThickness="1" BorderBrush="{StaticResource PrimaryHueMidBrush}">
<materialDesign:PackIcon Kind="Plus" Width="30" Height="30"/>
</Button>
<Button x:Name="ButtonPowerOff" Grid.Column="0" Grid.Row="4" Margin="5"
Style="{StaticResource MaterialDesignFloatingActionDarkButton}"
BorderThickness="1" BorderBrush="{StaticResource PrimaryHueMidBrush}">
<materialDesign:PackIcon Kind="Power" Width="30" Height="30"/>
</Button>
<Button Grid.Column="1" Grid.Row="4" Margin="5"
Style="{StaticResource MaterialDesignFloatingActionDarkButton}"
BorderThickness="1" BorderBrush="{StaticResource PrimaryHueMidBrush}">
<materialDesign:PackIcon Kind="Number0" Width="30" Height="30"/>
</Button>
<Button Grid.Column="2" Grid.Row="4" Margin="5" Content="."
Style="{StaticResource MaterialDesignFloatingActionDarkButton}"
BorderThickness="1" BorderBrush="{StaticResource PrimaryHueMidBrush}">
</Button>
<Button Grid.Column="3" Grid.Row="4" Margin="5"
Style="{StaticResource MaterialDesignFloatingActionAccentButton}"
BorderThickness="1" BorderBrush="{StaticResource PrimaryHueMidBrush}">
<materialDesign:PackIcon Kind="Equal" Width="30" Height="30"/>
</Button>
</Grid>
</StackPanel>
<Border x:Name="grid" CornerRadius="10" Background="Black" Visibility="Collapsed" Opacity="0">
<Button x:Name="ButtonPowerOn" Grid.Column="0" Grid.Row="1" Margin="5" Width="150" Height="150"
Style="{StaticResource MaterialDesignFloatingActionDarkButton}"
BorderThickness="1" BorderBrush="{StaticResource PrimaryHueMidBrush}">
<materialDesign:PackIcon Kind="Power" Width="80" Height="80"/>
</Button>
</Border>
</Grid>
</Border>
</Window>
背景単純なイベント
private void Window_MouseDown(object sender, MouseButtonEventArgs e)
{
DragMove();
}
第四に、記事の参照
神は直接大きなビデオ学習を開くことができ、ビデオは、コードの多くは彼のYouTubeに言及があるああ:
リファレンス・ビデオ: デザインCOM WPF: https://www.youtube.com/watch?v=G76O79eLcKM
第五に、コードのダウンロード
コード内のすべての記事は、コードのテキストを実行することができ、コピー、Nugetパッケージを追加し、掲載されています。
注記がある場合を除き、による記事 Dotnet9 仕上げリリース、転載を歓迎します。
アドレスを指定してくださいこの記事を転載:https://dotnet9.com/6777.html
次のFanger魏コード懸念スキャンするようこそ Dotnet9 公共マイクロチャネル番号のを、速やかに最新の技術をプッシュします。このサイト(マイクロチャネル公共番号「dotnet9_com」):
収穫した場合、前方激しくくださいDotnet9の後援と支援に、DOTNET技術への関心と支援していただきありがとうございます。