WPF布局的应用
程序员文章站
2022-05-05 16:09:54
一 写在开头1.1 本文内容本文主要内容是使用WPF来实现几个简单的界面。 二 登录窗口小例子2.1 实现代码XAML代码： 逻辑代码： 上面的逻辑代码中有个需要注意的地方。在WPF中TextBox和PasswordBox这两个输入框在用户没有输入的时候返回值为空字符串（即""）而不是null！ 2 ......
一 写在开头
1.1 本文内容
本文主要内容是使用WPF来实现几个简单的界面。
二 登录窗口小例子
2.1 实现代码
XAML代码：
1 <Window x:Class="LoginDialog.MainWindow" 2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 4 Title="Login" Height="200" Width="400"> 5 <Grid> 6 <Grid> 7 <Grid.RowDefinitions> 8 <RowDefinition></RowDefinition> 9 <RowDefinition></RowDefinition> 10 <RowDefinition></RowDefinition> 11 </Grid.RowDefinitions> 12 <Grid.ColumnDefinitions> 13 <ColumnDefinition></ColumnDefinition> 14 <ColumnDefinition></ColumnDefinition> 15 </Grid.ColumnDefinitions> 16 <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Margin="5" Grid.Row="0" Grid.Column="0" Text="用户名：" FontSize="18px"></TextBlock> 17 <TextBox Name="tbUserName" Margin="5" Grid.Row="0" Grid.Column="1"></TextBox> 18 <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Margin="5" Grid.Row="1" Grid.Column="0" Text="密码：" FontSize="18px"></TextBlock> 19 <PasswordBox Name="pbPassword" Margin="5" Grid.Row="1" Grid.Column="1"></PasswordBox> 20 <Button Name="btnLogin" Margin="10" Grid.Row="2" Grid.Column="0" Content="登录" FontSize="18px" Click="btnLogin_Click"></Button> 21 <Button Name="btnCancel" Margin="10" Grid.Row="2" Grid.Column="1" Content="取消" FontSize="18px"></Button> 22 </Grid> 23 </Grid> 24 </Window>
逻辑代码：
1 private void btnLogin_Click(object sender, RoutedEventArgs e)
2 {
3 string username = tbUserName.Text;
4 string password = pbPassword.Password;
5
6 if ((username == "") || (password == ""))
7 {
8 MessageBox.Show("用户名或密码不能为空！");
9 }
10 else
11 {
12 if ((username == "admin") && (password == "123"))
13 {
14 MessageBox.Show("登录成功！");
15 }
16 else
17 {
18 MessageBox.Show("用户名或密码错误！");
19 }
20 }
21 }
上面的逻辑代码中有个需要注意的地方。在WPF中TextBox和PasswordBox这两个输入框在用户没有输入的时候返回值为空字符串（即""）而不是null！
2.2 效果图
三 连连看游戏界面的实现
3.1 实现代码
XAML代码：
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="600" Width="600" Loaded="Window_Loaded"> 5 <Grid> 6 <Grid Name="gridGame"></Grid> 7 </Grid> 8 </Window>
为什么XAML里只有一个名为gridGame的Grid布局？因为界面中的元素在下面的逻辑代码中动态地创建了。
逻辑代码：
1 private void Window_Loaded(object sender, RoutedEventArgs e)
2 {
3 // 修改窗口标题
4 this.Title = "连连看";
5
6 // 动态设定gridGame为10行10列
7 for (int i = 0; i < 10; i++)
8 {
9 RowDefinition rd = new RowDefinition();
10 gridGame.RowDefinitions.Add(rd);
11
12 ColumnDefinition cd = new ColumnDefinition();
13 gridGame.ColumnDefinitions.Add(cd);
14 }
15
16 // 随机数产生器
17 Random random = new Random();
18
19 // 随机产生图片名称并填入10行10列的格子中
20 for (int i = 0; i < 10; i++)
21 {
22 for (int j = 0; j < 10; j++)
23 {
24 Image img = new Image();
25 int imgNum = random.Next(1, 10);
26 img.Source = new BitmapImage(new Uri("img/" + imgNum + ".png", UriKind.Relative));
27 Grid.SetRow(img, i);
28 Grid.SetColumn(img, j);
29 gridGame.Children.Add(img);
30 }
31 }
32 }
3.2 效果图
四 Windows计算器界面的实现
4.1 实现代码
XAML代码：
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="计算器" Height="332" Width="228"> 5 <Grid> 6 <DockPanel> 7 <Menu DockPanel.Dock="Top"> 8 <MenuItem Header="查看"></MenuItem> 9 <MenuItem Header="编辑"></MenuItem> 10 <MenuItem Header="帮助"></MenuItem> 11 </Menu> 12 <Grid> 13 <Grid.RowDefinitions> 14 <RowDefinition></RowDefinition> 15 <RowDefinition></RowDefinition> 16 <RowDefinition></RowDefinition> 17 <RowDefinition></RowDefinition> 18 <RowDefinition></RowDefinition> 19 <RowDefinition></RowDefinition> 20 <RowDefinition></RowDefinition> 21 </Grid.RowDefinitions> 22 <Grid.ColumnDefinitions> 23 <ColumnDefinition></ColumnDefinition> 24 <ColumnDefinition></ColumnDefinition> 25 <ColumnDefinition></ColumnDefinition> 26 <ColumnDefinition></ColumnDefinition> 27 <ColumnDefinition></ColumnDefinition> 28 </Grid.ColumnDefinitions> 29 <TextBlock Grid.Row="0" Grid.Column="0" FontSize="18px" TextAlignment="Right" Text="0" Grid.ColumnSpan="5"></TextBlock> 30 <Button Grid.Row="1" Grid.Column="0" Content="MC"></Button> 31 <Button Grid.Row="1" Grid.Column="1" Content="MR"></Button> 32 <Button Grid.Row="1" Grid.Column="2" Content="MS"></Button> 33 <Button Grid.Row="1" Grid.Column="3" Content="M+"></Button> 34 <Button Grid.Row="1" Grid.Column="4" Content="M-"></Button> 35 <Button Grid.Row="2" Grid.Column="0" Content="<--"></Button> 36 <Button Grid.Row="2" Grid.Column="1" Content="CE"></Button> 37 <Button Grid.Row="2" Grid.Column="2" Content="C"></Button> 38 <Button Grid.Row="2" Grid.Column="3" Content="±"></Button> 39 <Button Grid.Row="2" Grid.Column="4" Content="√"></Button> 40 <Button Grid.Row="3" Grid.Column="0" Content="7"></Button> 41 <Button Grid.Row="3" Grid.Column="1" Content="8"></Button> 42 <Button Grid.Row="3" Grid.Column="2" Content="9"></Button> 43 <Button Grid.Row="3" Grid.Column="3" Content="/"></Button> 44 <Button Grid.Row="3" Grid.Column="4" Content="%"></Button> 45 <Button Grid.Row="4" Grid.Column="0" Content="4"></Button> 46 <Button Grid.Row="4" Grid.Column="1" Content="5"></Button> 47 <Button Grid.Row="4" Grid.Column="2" Content="6"></Button> 48 <Button Grid.Row="4" Grid.Column="3" Content="*"></Button> 49 <Button Grid.Row="4" Grid.Column="4" Content="1/x"></Button> 50 <Button Grid.Row="5" Grid.Column="0" Content="1"></Button> 51 <Button Grid.Row="5" Grid.Column="1" Content="2"></Button> 52 <Button Grid.Row="5" Grid.Column="2" Content="3"></Button> 53 <Button Grid.Row="5" Grid.Column="3" Content="-"></Button> 54 <Button Grid.Row="5" Grid.RowSpan="2" Grid.Column="4" Content="="></Button> 55 <Button Grid.Row="6" Grid.Column="0" Grid.ColumnSpan="2" Content="0"></Button> 56 <Button Grid.Row="6" Grid.Column="2" Content="."></Button> 57 <Button Grid.Row="6" Grid.Column="3" Content="+"></Button> 58 </Grid> 59 </DockPanel> 60 </Grid> 61 </Window>
4.2 效果图
上一篇： 你若不举，便是晴天
下一篇： 美女你腿叉那么大，汽车都能过去了!