Time is like water, you can not go back into the flow!
Thumbs up again, a habit, which is that you give me creative power!
This article Dotnet9 https://dotnet9.com already been included, the owners are happy to share dotnet related technologies, such as Winform, WPF, ASP.NET Core, Xamarin.Forms, etc., are also related to the desktop C ++ Qt Quick and Qt Widgets, they just share We are familiar with their own will.
Read Navigation:
- First, look at the effect
- Second, text background
- Third, code implementation
- Fourth, the article reference
- Fifth, the code download
First, look at the effect
Second, text background
YouTube big and Design com WPF God acquisition, layout simple calculator interface + simple animation, open source C # WPF control library MaterialDesignInXAML use, this site had introduced: Open Source C # WPF Control Library "MaterialDesignInXAML" .
Third, code implementation
3.1 Add Nuget library
Master Core 3.1 using .Net WPF project created to create "Calculator" After the solutions need to add two Nuget libraries: MaterialDesignThemes and MaterialDesignColors, the figure is the effect of using the control library to achieve, very powerful.
3.2 of engineering structures
Do not need shots, only modified two files, App.xaml add MD control style, MainWindow main window to achieve results.
3.3 App.xaml introduction MD control style
<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 The main form
MainWindow.xaml, overall layout, plus the following diagram fancy interface code, this is the basic layout + simple animation, all in this interface, direct look at the code, you are not elaborate:
<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>Background simple event
private void Window_MouseDown(object sender, MouseButtonEventArgs e)
{
DragMove();
}Fourth, the article reference
God can directly open large video learning, video Oh there are a lot of code, referring to his YouTube:
Reference Video: Design COM WPF : https://www.youtube.com/watch?v=G76O79eLcKM
Fifth, the code download
All articles in the code has been posted, adding Nuget package, copy the text of the code can be run.
Except where noted, the article by Dotnet9 finishing release, welcome to reprint.
Address reprint this article please specify: https://dotnet9.com/6777.html
Welcome to scan the next Fanger Wei code concern Dotnet9 of public micro-channel number, this site will promptly push the latest technology (micro-channel public number "dotnet9_com"):
If the harvest, please forward vigorously, to Dotnet9 sponsorship and support , thank you for concern and support for dotnet technology.