WPF基礎學習第一天 - KeenLeung－IT工程師數位筆記本

文章出處

格式

1.XAML格式：

<Button x:Name="btnClick" Content="按鈕" HorizontalAlignment="Left" Margin="45,94,0,0" VerticalAlignment="Top" Width="75" Click="btnClick_Click" />

與

<Button x:Name="btnClick"  HorizontalAlignment="Left" Margin="45,94,0,0" VerticalAlignment="Top" Width="75" Click="btnClick_Click">
            <Button.Content>按鈕</Button.Content>
        </Button>

是一樣的，第二種，第一種，一般用于寫常規的屬性，第二種，一般用于寫比較復雜的屬性

常用控件或屬性

2.Visibility屬相：表示控件是否可見，但是枚舉類型，Collapsed不可見，Visible可見

3.TextWrapping屬性：指定文本在到達包含框的邊緣時是否換行,Wrap換行，NoWrap不換行

4.MaxLength屬性：可在文本框中手動輸入的最大字符數

5.密碼輸入框控件：PasswordBox ，讀寫密碼的屬性為：Password

6.可空數據類型：引用類型

不可空的數據類型：值類型

注意：在不可null類型后面加"?"就可以為null了，例如：

int? i = null;//編譯器就不會報錯

簡單解析：

int 和 int? 是不同的類型，int是不可為null，int?是可為null，如果把為null的賦值給不可為null的，編譯器會出錯：

但可以通過類型轉換,使可為null的賦值給不可為null的，但前提是，可為null的對象必須要有值

比如：CheckBox控件的屬性IsChecked，返回類型為bool?：

if ((bool)checkBox1.IsChecked)
            {
                MessageBox.Show("選中了");
            }
            
//或者
if (checkBox1.IsChecked == true)//系統自動轉換
            {
                MessageBox.Show("選中了");
            }

7.GroupName屬性：可為單選按鈕等設置不同的組，這樣就會避免了在一個界面中，放入多個單選按鈕后只能選擇其一

8.DatePicker控件：日期選擇器

DateTime? dt = datePicker1.SelectedDate;
 if (dt == null)
   {
        MessageBox.Show("沒有選擇日期，請選擇");
    }
    else
   {
        MessageBox.Show(dt.ToString());
    }

9.Image控件的Source屬性，能夠指定圖片的位置

10.ProgressBar控件：進度條控件，常用屬性有：Minimum最小值,Maximum最大值,Value初始值,IsIndeterminate不確定模式（當設置為true的時候，進度條會不斷地自動循環）

常用布局

11.StackPanel堆棧布局（組件是水平或垂直的）

<Grid>
        <Button Margin="0,0,456,132">
            <Button.Content><!--Button控件的Content屬相的值本來是只能一個的，但如果想設置多個的時候，可以使用布局-->
                <StackPanel Orientation="Horizontal"><!--組件排列方向：水平-->
                    <Image Width="100" Height="100" Source="1.jpg"></Image>
                    <TextBlock VerticalAlignment="Center" Text="戒指"></TextBlock><!--垂直方向中間顯示，文字為戒指-->
                </StackPanel>
            </Button.Content>
        </Button>
</Grid>

12.Grid網格布局

“第一行第一列”，在Grid布局中為“0行0列”，放置的控件，默認放置的位置是“0行0列”

<Grid>
        <Grid>
            <Grid.ColumnDefinitions><!--列定義，設置了4列-->
                <ColumnDefinition Width="150"></ColumnDefinition><!--指定第一列的寬度為150-->
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions><!--行定義，設置了4行-->
                <RowDefinition Height="150"></RowDefinition><!--指定第一行的高度為150-->
                <RowDefinition></RowDefinition>
                <RowDefinition></RowDefinition>
                <RowDefinition></RowDefinition>
            </Grid.RowDefinitions>
            <!--以下是設置布局里面的子控件-->
            <Button Content="測試按鈕" Grid.Row="1" Grid.Column="1"></Button><!--默認位置是第0行第0列;可采用附加屬性的寫法，指定控件的位置-->
            <TextBlock Text="keenleung" Background="Blue" Grid.Column="0" Grid.Row="0"></TextBlock>
            <Image Source="1.jpg" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2"></Image><!--位置為2行0列,占據2列-->
            <Button Content="測試按鈕2" Grid.Row="2" Grid.Column="2" Grid.RowSpan="2"></Button><!--位置為2行2列,占據2行-->
        </Grid>
    </Grid>

一個簡單的登陸界面：

<Grid>
        <Grid>
            <!--一個簡單的登陸界面-->
            <Grid.RowDefinitions><!--行定義,以下設置了3行-->
                <RowDefinition></RowDefinition>
                <RowDefinition></RowDefinition>
                <RowDefinition></RowDefinition>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions><!--列定義，以下設置了2列-->
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <TextBlock Text="用戶名：" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock><!--該控件水平和垂直方向上都是居中顯示-->
            <TextBox Grid.Column="1" Margin="15"></TextBox>
            <TextBlock Text="密碼：" VerticalAlignment="Center"  HorizontalAlignment="Center" Grid.Row="1"></TextBlock>
            <PasswordBox Grid.Row="1" Grid.Column="1" Margin="15"></PasswordBox><!--Margin控制控件邊距的大小-->
            <Button Content="確定" Grid.Row="2" Margin="15"></Button>
            <Button Content="取消" Grid.Column="2" Grid.Row="2" Margin="15"></Button>
        </Grid>
    </Grid>

結果視圖：

13.通過代碼往布局里面添加控件

<Grid>
        <StackPanel Name="stp1" MouseDown="stp1_MouseDown" MouseEnter="stp1_MouseEnter"></StackPanel>
    </Grid>

private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            Button btn = new Button();
            btn.Content = "第1個按鈕";
            stp1.Children.Add(btn);//往布局里通過代碼添加控件
        }

14.通過代碼設置Grid布局的行數和列數，并且添加控件

 /// <summary>
        /// 通過代碼設置Grid布局的行數和列數，并且添加控件
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            //先設置Grid布局為幾行和幾列
            for (int t = 0; t < 10; t++)//10行10列
            {
                RowDefinition rd = new RowDefinition();
                grid1.RowDefinitions.Add(rd);

                ColumnDefinition cd = new ColumnDefinition();
                grid1.ColumnDefinitions.Add(cd);
            }
            //往布局里面放控件,假如放置的都是Button控件
            for (int i = 0; i < 10; i++)
            {
                for (int j = 0; j < 10; j++)
                {
                    Button btn = new Button();
                    btn.Content = i + "," + j;
                    
                    //通過代碼修改Grid.Row和Grid.Column屬性
                    Grid.SetRow(btn, i);
                    Grid.SetColumn(btn, j);

                    grid1.Children.Add(btn);
                }
            }
        }

結果視圖：

15.如果想加入的是圖片，以下代碼做參考：

//前面的代碼不變
  Image img = new Image();
//代碼給Source屬性賦值
img.Source = new BitmapImage(new Uri("1.jpg", UriKind.Relative));
Grid.SetRow(img, i);
Grid.SetColumn(img, j);
grid1.Children.Add(img);

16.如果是隨機選取圖片呢？

 //往布局里面放控件,假如放置的都是隨機選取的圖片(前面的代碼不變)
            Random random = new Random();
            for (int i = 0; i < 10; i++)
            {
                for (int j = 0; j < 10; j++)
                {  
                    int imgNum = random.Next(1, 10);//隨機選取圖片

                    Image img = new Image();
                    //代碼給Source屬性賦值
                    img.Source = new BitmapImage(new Uri("images/" + imgNum + ".jpg", UriKind.Relative));
                    //通過代碼修改Grid.Row和Grid.Column屬性
                    Grid.SetRow(img, i);
                    Grid.SetColumn(img, j);
                    grid1.Children.Add(img);
                }
            }

結果：

16.布局的嵌套

<Window x:Class="布局的嵌套.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition></RowDefinition>
                <RowDefinition></RowDefinition>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Button Content="頂層布局的按鈕" Grid.Row="1" Grid.Column="1"></Button>
            <StackPanel><!--在Grid頂層布局里面嵌套一個StackPanel布局-->
                <Button Content="內層StackPanel布局里的按鈕"></Button>
                <Button Content="內層StackPanel布局里的按鈕"></Button>
                <Button Content="內層StackPanel布局里的按鈕"></Button>
            </StackPanel>
            <Grid Grid.Column="1"><!--在Grid頂層布局里面嵌套一個Grid布局-->
                <Grid.RowDefinitions>
                    <RowDefinition></RowDefinition>
                    <RowDefinition></RowDefinition>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition></ColumnDefinition>
                    <ColumnDefinition></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <Button Content="內層Grid里的按鈕"></Button>
            </Grid>
        </Grid>
    </Grid>
</Window>

視圖：

練習

17.模擬一個簡單計算器的界面(采取8行5列)

code:

 1 <Window x:Class="一個計算器的簡單布局.MainWindow"
 2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4         Title="MainWindow" Height="323" Width="228">
 5     <Grid>
 6         <Grid>
 7             <Grid.RowDefinitions>
 8                 <RowDefinition Height="20"></RowDefinition>
 9                 <RowDefinition Height="60"></RowDefinition>
10                 <RowDefinition></RowDefinition>
11                 <RowDefinition></RowDefinition>
12                 <RowDefinition></RowDefinition>
13                 <RowDefinition></RowDefinition>
14                 <RowDefinition></RowDefinition>
15                 <RowDefinition></RowDefinition>
16             </Grid.RowDefinitions>
17             <Grid.ColumnDefinitions>
18                 <ColumnDefinition></ColumnDefinition>
19                 <ColumnDefinition></ColumnDefinition>
20                 <ColumnDefinition></ColumnDefinition>
21                 <ColumnDefinition></ColumnDefinition>
22                 <ColumnDefinition></ColumnDefinition>
23             </Grid.ColumnDefinitions>
24             <Menu HorizontalAlignment="Left" Height="20" VerticalAlignment="Top" Width="220" Grid.ColumnSpan="5">
25                 <MenuItem Header="查看"></MenuItem>
26                 <MenuItem Header="編輯"></MenuItem>
27                 <MenuItem Header="幫助"></MenuItem>
28             </Menu>
29             <TextBox Grid.Row="1" Grid.ColumnSpan="10" Margin="5,10,5,0" IsReadOnly="True"></TextBox><!--Margin是”左上右下“這樣的一個順序-->
30             <Button Content="MC" Grid.Row="2" Width="34" Height="27"></Button>
31             <Button Content="MR" Grid.Row="2" Grid.Column="1" Width="34" Height="27"></Button>
32             <Button Content="MS" Grid.Row="2" Grid.Column="2" Width="34" Height="27"></Button>
33             <Button Content="M+" Grid.Row="2" Grid.Column="3" Width="34" Height="27"></Button>
34             <Button Content="M-" Grid.Row="2" Grid.Column="4" Width="34" Height="27"></Button>
35             <Button Grid.Row="3" Grid.Column="0" Width="34" Height="27">
36                 <Button.Background>
37                     <ImageBrush ImageSource="images/boult.png"></ImageBrush>
38                 </Button.Background>
39             </Button>
40             <Button Content="CE" Grid.Row="3" Grid.Column="1" Width="34" Height="27"></Button>
41             <Button Content="C" Grid.Row="3" Grid.Column="2" Width="34" Height="27"></Button>
42             <Button Grid.Row="3" Grid.Column="3" Width="34" Height="27">
43                 <Button.Background>
44                     <ImageBrush ImageSource="images/+-.png"></ImageBrush>
45                 </Button.Background>
46             </Button>
47             <Button Grid.Row="3" Grid.Column="4" Width="34" Height="27">
48                 <Button.Background>
49                     <ImageBrush ImageSource="images/3.png"></ImageBrush>
50                 </Button.Background>
51             </Button>
52             <Button Content="7" Grid.Row="4" Grid.Column="0" Width="34" Height="27"></Button>
53             <Button Content="8" Grid.Row="4" Grid.Column="1" Width="34" Height="27"></Button>
54             <Button Content="9" Grid.Row="4" Grid.Column="2" Width="34" Height="27"></Button>
55             <Button Content="/" Grid.Row="4" Grid.Column="3" Width="34" Height="27"></Button>
56             <Button Content="%" Grid.Row="4" Grid.Column="4" Width="34" Height="27"></Button>
57             <Button Content="4" Grid.Row="5" Grid.Column="0" Width="34" Height="27"></Button>
58             <Button Content="5" Grid.Row="5" Grid.Column="1" Width="34" Height="27"></Button>
59             <Button Content="6" Grid.Row="5" Grid.Column="2" Width="34" Height="27"></Button>
60             <Button Content="*" Grid.Row="5" Grid.Column="3" Width="34" Height="27"></Button>
61             <Button Grid.Row="5" Grid.Column="4" Width="34" Height="27">
62                 <Button.Background>
63                     <ImageBrush ImageSource="images/4.png"></ImageBrush>
64                 </Button.Background>
65             </Button>
66             <Button Content="1" Grid.Row="6" Grid.Column="0" Width="34" Height="27"></Button>
67             <Button Content="2" Grid.Row="6" Grid.Column="1" Width="34" Height="27"></Button>
68             <Button Content="3" Grid.Row="6" Grid.Column="2" Width="34" Height="27"></Button>
69             <Button Content="-" Grid.Row="6" Grid.Column="3" Width="34" Height="27"></Button>
70             <Button Content="=" Grid.Row="6" Grid.Column="4" Width="34" Height="59.5" Grid.RowSpan="2"></Button>
71             <Button Content="0" Grid.Row="7" Grid.Column="0" Width="78" Height="27" Grid.ColumnSpan="2"></Button>
72             <Button Content="." Grid.Row="7" Grid.Column="2" Width="34" Height="27"></Button>
73             <Button Content="+" Grid.Row="7" Grid.Column="3" Width="34" Height="27"></Button>
74         </Grid>
75     </Grid>
76 </Window>