WPF入門-使用C#創建簡單應用

本文轉載自查看原文 2021-01-05 22:38 727 WPF(.NET Core)

本文，你將熟悉在使用VS2019開發應用程序時可使用的許多工具、對話框和設計器。將創建一個“Hello World”應用程序、UI設計器、添加代碼並調試錯誤。

先決條件：

安裝Visual Studio 2019（16.3或者更高版本）。本文環境是16.8

一、創建項目

　　1、打開VS2019,

　　2、在‘開始’窗口，選擇‘創建新項目’：

　　3、選擇‘WPF App (.NET)’，最后選擇‘下一步’：

　　 4、在接下來的對話框中，輸入項目名稱和指定存儲位置，最后選擇‘創建’：

　　到此，VS將創建項目和解決方案，“解決方案資源管理器”將顯示各種文件，WPF設計器在拆分視圖中顯示MainWindow.xaml的設計視圖和XAML視圖：

　　在創建項目后，可以進行自定義操作。選擇‘視圖’->‘屬性窗口’ 或者按F4，就可以顯示或更改應用程序中的項目項、控件和其他選項：

　　5、更改MainWindow.XAML的名稱

　　　在‘解決方案資源管理器’中，右鍵單擊‘MainWindow.xaml’，然后選擇‘重命名’，將文件重名為“Greetings.xaml”。

二、設計用戶界面UI

　　選擇“Greetings.xaml”，按Shift+F7打開設計器。

　　接下來我們將三種類型的控件添加到此應用程序中：一個TextBlock控件，兩個RadioButton控件和一個Button控件。

　　添加TextBlock控件

　　　　1、選擇‘視圖’-‘工具箱’，以打開工具箱

　　　　2、在‘常用WPF控件’中找到TextBlock控件。然后將其拖拽到設計圖的窗口中。把控件居中到窗口的頂部附近。拖拽的過程中會有紅色參考線作為參考。效果如下：

　　　　XAML標記自動做如下改變：

    <Grid>
        <TextBlock x:Name="textBlock" HorizontalAlignment="Center" Text="TextBlock" TextWrapping="Wrap" VerticalAlignment="Top" Margin="0,91,0,0"/>
    </Grid>

　　　　3、自定義TextBlock中的文本

　　　　在XAML視圖中，找到TextBlock標記，並將TextBox屬性更為“選擇一個消息選項，然后選擇顯示按鈕”：

    <Grid>
        <TextBlock x:Name="textBlock" HorizontalAlignment="Center" Text="選擇一個消息選項，然后選擇顯示按鈕" TextWrapping="Wrap" VerticalAlignment="Top" Margin="0,107,0,0"/>

    </Grid>

　　　　按Ctrl+S，以保存更改。

　　添加單選按鈕RadioButton

　　　　1、在工具箱中找到RadioButton控件，並拖拽兩次到設計圖窗口中。移動兩個按鈕，將其並排顯示在TextBlock控件下：

　　　　2、選中左側的RadioButton控件，在‘屬性’窗口中，將‘名稱’屬性更改為HelloButton：

　　　　3、同樣的方法，將右側的RadioButton控件的名稱屬性改為GoodbyeButton。最后保存更改。

　　　　4、為每個單選按鈕添加顯示文本

　　　　在XAML中將HelloButton和GoodbyeButton的Content屬性更新為“Hello”和“Goodbye”：

    <Grid>
        <TextBlock x:Name="textBlock" HorizontalAlignment="Center" Text="選擇一個消息選項，然后選擇顯示按鈕" TextWrapping="Wrap" VerticalAlignment="Top" Margin="0,107,0,0"/>
        <RadioButton x:Name="HelloButton" Content="Hello" HorizontalAlignment="Left" Margin="298,160,0,0" VerticalAlignment="Top"/>
        <RadioButton x:Name="GoodbyeButton" Content="Goodbye" HorizontalAlignment="Left" Margin="411,160,0,0" VerticalAlignment="Top"/>
    </Grid>

　　　　5、設置默認選中的單選按鈕

　　　　設置默認要選中HelloButton控件。這樣的話兩個單選按鈕始終有一個處於選中狀態。可以通過為控件添加IsChecked屬性，並將其設置為True來實現：

    <Grid>
        <TextBlock x:Name="textBlock" HorizontalAlignment="Center" Text="選擇一個消息選項，然后選擇顯示按鈕" TextWrapping="Wrap" VerticalAlignment="Top" Margin="0,107,0,0"/>
        <RadioButton x:Name="HelloButton" Content="Hello" IsChecked="True" HorizontalAlignment="Left" Margin="298,160,0,0" VerticalAlignment="Top"/>
        <RadioButton x:Name="GoodbyeButton" Content="Goodbye" HorizontalAlignment="Left" Margin="411,160,0,0" VerticalAlignment="Top"/>
    </Grid>

　　添加按鈕控件Button

　　　　1、在‘工具箱’中找到Button控件，拖拽到設計視圖窗口中RadioButton控件的下面。出現一個紅線的時候，表示居中了。

　　　　2、XAML視圖中，將Button的Content屬性更改為“顯示”。最終的XAML標記：

    <Grid>
        <TextBlock x:Name="textBlock" HorizontalAlignment="Center" Text="選擇一個消息選項，然后選擇顯示按鈕" TextWrapping="Wrap" VerticalAlignment="Top" Margin="0,107,0,0"/>
        <RadioButton x:Name="HelloButton" Content="Hello" IsChecked="True" HorizontalAlignment="Left" Margin="298,160,0,0" VerticalAlignment="Top"/>
        <RadioButton x:Name="GoodbyeButton" Content="Goodbye" HorizontalAlignment="Left" Margin="411,160,0,0" VerticalAlignment="Top"/>
        <Button x:Name="button" Content="顯示" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </Grid>

　　　　設計視圖效果：

　　　　3、向顯示按鈕添加代碼

　　　　此應用程序運行時，用戶選擇單選按鈕，再選擇‘顯示’按鈕之后，會顯示一個消息框：如果選擇HelloButton將顯示一個消息框，如果選擇GoodbyeButton則會顯示另外一個消息框。如果實現上述效果，可以將如下代碼添加到Greetings.xaml.cs文件中的Button_Click事件（設計視圖上雙擊“顯示”按鈕，會自動打開Greetings.xaml.cs文件，且光標會定位到Button_Click事件上）：

        private void button_Click(object sender, RoutedEventArgs e)
        {
            if (HelloButton.IsChecked == true)
            {
                MessageBox.Show("Hello~");
            }
            else if (GoodbyeButton.IsChecked == true)
            {
                MessageBox.Show("GoodBye!");
            }
        }