12.29 C# WPF計算器界面（Calculator Design With Animations）

時間如流水，只能流去不流回！

點贊再看，養成習慣，這是您給我創作的動力！

本文 Dotnet9 https://dotnet9.com 已收錄，站長樂於分享dotnet相關技術，比如Winform、WPF、ASP.NET Core、Xamarin.Forms等，亦有C++桌面相關的Qt Quick和Qt Widgets等，只分享自己熟悉的、自己會的。

閱讀導航：

• 一、先看效果
• 二、本文背景
• 三、代碼實現
• 四、文章參考
• 五、代碼下載

一、先看效果

二、本文背景

YouTube Design com WPF 大神處習得，簡單的計算器佈局界面 + 簡單動畫，使用的開源 C# WPF控件庫 MaterialDesignInXAML ，本站曾有介紹：開源C# WPF控件庫《MaterialDesignInXAML》。

三、代碼實現

3.1 添加Nuget庫

站長使用.Net Core 3.1創建的WPF工程，創建“Calculator”解決方案後，需要添加兩個Nuget庫：MaterialDesignThemes和MaterialDesignColors，上圖的效果是使用該控件庫實現的，非常強大。

3.2 工程結構

不需要截圖，只修改了兩個文件，App.xaml添加MD控件樣式，MainWindow主窗口實現效果。

3.3 App.xaml引入MD控件樣式

<code><application>             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>
                <resourcedictionary>
            /<resourcedictionary.mergeddictionaries>
            
            <solidcolorbrush>
            <solidcolorbrush>
            <solidcolorbrush>
            <solidcolorbrush>
            <solidcolorbrush>
            <solidcolorbrush>
            
            <solidcolorbrush>
            <solidcolorbrush>
        /<resourcedictionary>
    /<application.resources>
/<application>/<code>

3.4 主窗體

MainWindow.xaml，整體佈局，看上圖加上下面的界面代碼，本文基本就是佈局 + 簡單動畫，全在這個界面，直接看代碼吧，不細說了：

<code><window>        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>
            <objectanimationusingkeyframes>
                <discreteobjectkeyframe>
                <discreteobjectkeyframe>
            /<objectanimationusingkeyframes>
            <doubleanimationusingkeyframes>
                <easingdoublekeyframe>
                <easingdoublekeyframe>
            /<doubleanimationusingkeyframes>
        /<storyboard>
        <storyboard>
            <objectanimationusingkeyframes>
                <discreteobjectkeyframe>
                <discreteobjectkeyframe>
                <discreteobjectkeyframe>
            /<objectanimationusingkeyframes>
            <doubleanimationusingkeyframes>
                <easingdoublekeyframe>
                <easingdoublekeyframe>
                <easingdoublekeyframe>
            /<doubleanimationusingkeyframes>
        /<storyboard>
    /<window.resources>
    <window.triggers>
        <eventtrigger>
            <beginstoryboard>
        /<eventtrigger>
        <eventtrigger>
            <beginstoryboard>
        /<eventtrigger>
    /<window.triggers>
    <border>
        <grid>
            <stackpanel>
                <grid>
                    <stackpanel>
                        <button>
                            <packicon>
                        /<button>
                        <textblock>                                   Foreground="{StaticResource PrimaryHueLightForegroundBrush}" Margin="20 0 20 10"/>
                    /<textblock>/<stackpanel>
                    <stackpanel> 

                        <textblock>                                   Foreground="{StaticResource PrimaryHueLightForegroundBrush}" Margin="20 0"/>
                        <textblock>                                   Foreground="#FF5885A4" Margin="20 0">
                            <textblock.effect>
                                <dropshadoweffect>
                            /<textblock.effect>
                        /<textblock>
                    /<textblock>/<stackpanel>
                /<grid>
                <rectangle>
                <grid>
                    <grid.columndefinitions>
                        <columndefinition>
                        <columndefinition>
                        <columndefinition>
                        <columndefinition>
                    /<grid.columndefinitions>
                    <grid.rowdefinitions>
                        <rowdefinition>
                        <rowdefinition>
                        <rowdefinition>
                        <rowdefinition>
                        <rowdefinition>
                    /<grid.rowdefinitions>

                    <button>                            Style="{StaticResource MaterialDesignFloatingActionButton}"
                            BorderThickness="1" BorderBrush="{StaticResource PrimaryHueMidBrush}">
                        <packicon>
                    /<button>
                    <button>                            Style="{StaticResource MaterialDesignFloatingActionButton}"
                            BorderThickness="1" BorderBrush="{StaticResource PrimaryHueMidBrush}">
                        <packicon>
                    /<button>
                    <button>                            Style="{StaticResource MaterialDesignFloatingActionButton}"
                            BorderThickness="1" BorderBrush="{StaticResource PrimaryHueMidBrush}">
                        <packicon>
                    /<button>
                    <button>                            Style="{StaticResource MaterialDesignFloatingActionButton}"
                            BorderThickness="1" BorderBrush="{StaticResource PrimaryHueMidBrush}">
                        <packicon>
                    /<button>
                    
                    <button>                            Style="{StaticResource MaterialDesignFloatingActionDarkButton}"
                            BorderThickness="1" BorderBrush="{StaticResource PrimaryHueMidBrush}">
                        <packicon>
                    /<button>
                    <button>                            Style="{StaticResource MaterialDesignFloatingActionDarkButton}"
                            BorderThickness="1" BorderBrush="{StaticResource PrimaryHueMidBrush}">
                        <packicon>
                    /<button>
                    <button>                            Style="{StaticResource MaterialDesignFloatingActionDarkButton}" 

                            BorderThickness="1" BorderBrush="{StaticResource PrimaryHueMidBrush}">
                        <packicon>
                    /<button>
                    <button>                            Style="{StaticResource MaterialDesignFloatingActionDarkButton}"
                            BorderThickness="1" BorderBrush="{StaticResource PrimaryHueMidBrush}">
                        <packicon>
                    /<button>

                    <button>                            Style="{StaticResource MaterialDesignFloatingActionDarkButton}"
                            BorderThickness="1" BorderBrush="{StaticResource PrimaryHueMidBrush}">
                        <packicon>
                    /<button>
                    <button>                            Style="{StaticResource MaterialDesignFloatingActionDarkButton}"
                            BorderThickness="1" BorderBrush="{StaticResource PrimaryHueMidBrush}">
                        <packicon>
                    /<button>
                    <button>                            Style="{StaticResource MaterialDesignFloatingActionDarkButton}"
                            BorderThickness="1" BorderBrush="{StaticResource PrimaryHueMidBrush}">
                        <packicon>
                    /<button>
                    <button>                            Style="{StaticResource MaterialDesignFloatingActionDarkButton}"
                            BorderThickness="1" BorderBrush="{StaticResource PrimaryHueMidBrush}">
                        <packicon>
                    /<button>

                    <button>                            Style="{StaticResource MaterialDesignFloatingActionDarkButton}"
                            BorderThickness="1" BorderBrush="{StaticResource PrimaryHueMidBrush}">
                        <packicon>
                    /<button>
                    <button>                            Style="{StaticResource MaterialDesignFloatingActionDarkButton}"
                            BorderThickness="1" BorderBrush="{StaticResource PrimaryHueMidBrush}">
                        <packicon>
                    /<button>
                    <button>                            Style="{StaticResource MaterialDesignFloatingActionDarkButton}"
                            BorderThickness="1" BorderBrush="{StaticResource PrimaryHueMidBrush}">
                        <packicon>
                    /<button>
                    <button>                            Style="{StaticResource MaterialDesignFloatingActionDarkButton}"
                            BorderThickness="1" BorderBrush="{StaticResource PrimaryHueMidBrush}">
                        <packicon>
                    /<button>

                    <button>                            Style="{StaticResource MaterialDesignFloatingActionDarkButton}"
                            BorderThickness="1" BorderBrush="{StaticResource PrimaryHueMidBrush}">
                        <packicon>
                    /<button>
                    <button>                            Style="{StaticResource MaterialDesignFloatingActionDarkButton}"
                            BorderThickness="1" BorderBrush="{StaticResource PrimaryHueMidBrush}">
                        <packicon>
                    /<button> 

                    <button>                            Style="{StaticResource MaterialDesignFloatingActionDarkButton}"
                            BorderThickness="1" BorderBrush="{StaticResource PrimaryHueMidBrush}">
                    /<button>
                    <button>                            Style="{StaticResource MaterialDesignFloatingActionAccentButton}"
                            BorderThickness="1" BorderBrush="{StaticResource PrimaryHueMidBrush}">
                        <packicon>
                    /<button>
                /<grid>
            /<stackpanel>
            <border>
                <button>                        Style="{StaticResource MaterialDesignFloatingActionDarkButton}"
                        BorderThickness="1" BorderBrush="{StaticResource PrimaryHueMidBrush}">
                    <packicon>
                /<button>
            /<border>
        /<grid>
    /<border>
/<window>/<code>

後臺簡單的事件

<code>private void Window_MouseDown(object sender, MouseButtonEventArgs e)
{
    DragMove();
}/<code>

四、文章參考

可直接打開大神視頻學習，他的YouTube上還有很多代碼視頻哦，參考：
參考視頻： Design com WPF： https://www.youtube.com/watch?v=G76O79eLcKM

五、代碼下載

文章中代碼已經全部貼出，添加Nuget包，複製文中代碼就可以運行了。

除非註明，文章均由 Dotnet9 整理發佈，歡迎轉載。

轉載請註明本文地址：https://dotnet9.com/6777.html

閱讀更多 沙漠盡頭的狼 的文章

關鍵字: 不流 XAML Qt