WPF基础学习
WPF学习
基础需要比较少
WPF是用来替代WinForm
WPF的核心:XAML技术,平板电脑开发, Windows Phone手机开发
______________________________________________________________________________________________
控件
比较常用的事件button(click) Loaded事件
控件名字取得要有意义
Focus()获取焦点
______________________________________________________________________________________________
集合
List<int> list = new List<int>();
list.Add(123);
list.Add(234);
list.Remove(123);
list.Clear();
______________________________________________________________________________________________
手写XAML是必须的过程,就像手写HTML一样的; 学从难处学,易从易处用
XAML语法
- 属性值必须是双引号
- 闭合结构,有开始,有结束
- 大小写敏感
- 每个节点就是一个控件,每一个XAML标签都可以new出来
- 属性值有两种赋值方法,一直接=; 二是
-
<Button Height="23" HorizontalAlignment ="Left" Margin="309,58,0,0" Name="btnSubmit" VerticalAlignment="Top" Width="75"> <Button.Content> Submit</Button.Content > </Button
______________________________________________________________________________________________
常用控件
常用属性:
- //Visibility的值控制控件的显示: Collapsed隐藏, Visible可见
- ReadOnly只读属性
- TextWrapping="Wrap"可以折行,自动换行
- IsEnable: 控件是否可用: bool类型
- Background背景"色", FontSize字体大小
- MaxLength: 最大长度
- PasswordBox: 密码框的取值使用Password属性值,而不是Text
- Margin="15" 距离周边的距离
______________________________________________________________________________________________
可空数据类型: 引用类型, 自定义,string, 大部分类都是
不可空:值类型. int,boolean,decimal, DataTime
##在不可为null的类型后加?就可以为null了
int? i1 = null; //这是可以的,就因为这个?, 一旦加上?就相当于引用类型(个人理解)
int i2 = 6;
int? i3 = i2; //这也是可以的,把int赋值给int?
int i4 = (int)i3; //这也是可以的,强制转换
______________________________________________________________________________________________
一些控件
- RadioButton, GroupName是组名
- DatePicker 选择时间控件,属性值可空
- Image控件, Source地址
- ProgressBar, 进度条: IsIndeterminate是否不确定模式: Maximun最大值, Minimum最小值
DateTime.Now 包含
______________________________________________________________________________________________
页面布局
- 绝对定位,使用具体数值定位
- StackPanel, 进行布局, Orientation垂直布局,还是水平布局, 可以嵌套
- Margin对顶点,参数,, VerticalAlignment="Center"垂直居中
- Button btn = new Button(); btn.Content="动态控件"; stackPanel1.Children.Add(btn);
例子:
<StackPanel Orientation ="Horizontal"> <Button Margin ="0,0,200,200"> <Button.Content> <StackPanel Orientation ="Horizontal"> <Image Width ="50" Height="50" Source="/img/Chrysanthemum.jpg"></Image> <TextBlock VerticalAlignment ="Center" Text="确定"></ TextBlock> </StackPanel> </Button.Content> </Button> </StackPanel>
例子2:
<Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width ="50"></ColumnDefinition> <ColumnDefinition></ ColumnDefinition> <ColumnDefinition></ ColumnDefinition> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height ="50"></RowDefinition> <RowDefinition></ RowDefinition> <RowDefinition></ RowDefinition> <RowDefinition></ RowDefinition> </Grid.RowDefinitions> <Button Grid.Row ="1" Grid.Column="1" Content="yiyi"></Button > <TextBlock Grid.Row ="0" Grid.Column="2" Text="123" Background ="Red"></TextBlock> <Image Source ="/img/Chrysanthemum.jpg" Grid.Row="3" Grid.ColumnSpan ="2"></Image> </Grid>
例子:登陆
<Grid> <Grid> <Grid.RowDefinitions> <RowDefinition></ RowDefinition> <RowDefinition></ RowDefinition> <RowDefinition></ RowDefinition> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition></ ColumnDefinition> <ColumnDefinition></ ColumnDefinition> </Grid.ColumnDefinitions> <TextBlock Text ="用户名:" HorizontalAlignment="Center" VerticalAlignment ="Center" Grid.Column="0" Grid.Row="0"></TextBlock > <TextBox Margin ="15" Grid.Row="0" Grid.Column="1" ></TextBox > <TextBlock Text ="密码:" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Column="0" Grid.Row="1"></TextBlock > <PasswordBox Margin ="15" Grid.Row="1" Grid.Column="1"></PasswordBox > <Button Margin ="10" Grid.Row="2" Content="登陆"></Button> <Button Margin ="10" Grid.Column="1" Grid.Row="2" Content ="取消"></ Button> </Grid> </Grid>
______________________________________________________________________________________________
连连看棋盘:
private void Window_Loaded(object sender, RoutedEventArgs e) { for (int i = 0; i < 10; i++) { //动态创建十行十列 RowDefinition rdRow = new RowDefinition(); gridGame.RowDefinitions.Add(rdRow); ColumnDefinition cdCol = new ColumnDefinition(); gridGame.ColumnDefinitions.Add(cdCol); } Random random = new Random(); //random.Next(0, 10); //生成<=0, <9的随机整数 for (int i = 0; i < 10; i++) { for (int j = 0; j < 10; j++) { //Button btn = new Button(); //btn.Content = i + "," + j; //Grid.SetRow(btn, i);//设置控件的行属性用Grid的静态方法 //Grid.SetColumn(btn, j); //gridGame.Children.Add(btn); string imgName = "/img/" + random.Next(1,10) + ".jpg"; Image img = new Image(); img.Source = new BitmapImage (new Uri(imgName, UriKind .Relative)); Grid.SetColumn(img, j); Grid.SetRow(img, i); gridGame.Children.Add(img); } } }
嵌套的布局:
<Grid> <Grid> <Grid.RowDefinitions> <RowDefinition></ RowDefinition> <RowDefinition></ RowDefinition> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition></ ColumnDefinition> <ColumnDefinition></ ColumnDefinition> </Grid.ColumnDefinitions> <Button Grid.Row ="1" Grid.Column="1" Content="123" Margin ="20"></Button> <StackPanel> <Button Content ="1"></Button> <Button Content ="2"></Button> <Button Content ="3"></Button> </StackPanel> <Grid Grid.Row ="0" Grid.Column="1"> <Grid.RowDefinitions> <RowDefinition></ RowDefinition> <RowDefinition></ RowDefinition> <RowDefinition></ RowDefinition> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition></ ColumnDefinition> <ColumnDefinition></ ColumnDefinition> <ColumnDefinition></ ColumnDefinition> </Grid.ColumnDefinitions> <Button Content ="Hello" Margin="10"></ Button> vr </Grid> </Grid> </Grid>
______________________________________________________________________________________________
练习一: 计算器布局模拟
<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 ="320" Width="200"> <Grid> <Grid> <Grid.RowDefinitions> <RowDefinition Height ="80"></RowDefinition> <RowDefinition></ RowDefinition> <RowDefinition></ RowDefinition> <RowDefinition></ RowDefinition> <RowDefinition></ RowDefinition> <RowDefinition></ RowDefinition> <RowDefinition></ RowDefinition> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition></ ColumnDefinition> <ColumnDefinition></ ColumnDefinition> <ColumnDefinition></ ColumnDefinition> <ColumnDefinition></ ColumnDefinition> <ColumnDefinition></ ColumnDefinition> </Grid.ColumnDefinitions> <Border Grid.ColumnSpan ="5" BorderThickness="1" BorderBrush="Gray" Margin ="2"> <TextBlock Text ="0" Grid.ColumnSpan="5" HorizontalAlignment="Right" VerticalAlignment="Center" FontSize="24" ></TextBlock > </Border> <Button Content ="MC" Margin="2" Grid.Row="1"></Button > <Button Content ="<-" Margin="2" Grid.Row="2"></Button > <Button Content ="7" Margin="2" Grid.Row="3"></Button > <Button Content ="4" Margin="2" Grid.Row="4"></Button > <Button Content ="1" Margin="2" Grid.Row="5"></Button > <Button Content ="1" Margin="2" Grid.Row="5"></Button > <Button Content ="0" Margin="2" Grid.Row="6" Grid.ColumnSpan ="2"></Button> <Button Content ="MR" Margin="2" Grid.Row="1" Grid.Column ="1"></Button> <Button Content ="CE" Margin="2" Grid.Row="2" Grid.Column ="1"></Button> <Button Content ="8" Margin="2" Grid.Row="3" Grid.Column ="1"></Button> <Button Content ="5" Margin="2" Grid.Row="4" Grid.Column ="1"></Button> <Button Content ="2" Margin="2" Grid.Row="5" Grid.Column ="1"></Button> <Button Content ="MS" Margin="2" Grid.Row="1" Grid.Column ="2"></Button> <Button Content ="C" Margin="2" Grid.Row="2" Grid.Column ="2"></Button> <Button Content ="9" Margin="2" Grid.Row="3" Grid.Column ="2"></Button> <Button Content ="6" Margin="2" Grid.Row="4" Grid.Column ="2"></Button> <Button Content ="3" Margin="2" Grid.Row="5" Grid.Column ="2"></Button> <Button Content ="." Margin="2" Grid.Row="6" Grid.Column ="2"></Button> <Button Content ="M+" Margin="2" Grid.Row="1" Grid.Column ="3"></Button> <Button Content ="±" Margin="2" Grid.Row="2" Grid.Column ="3"></Button> <Button Content ="/" Margin="2" Grid.Row="3" Grid.Column ="3"></Button> <Button Content ="*" Margin="2" Grid.Row="4" Grid.Column ="3"></Button> <Button Content ="-" Margin="2" Grid.Row="5" Grid.Column ="3"></Button> <Button Content ="+" Margin="2" Grid.Row="6" Grid.Column ="3"></Button> <Button Content ="M-" Margin="2" Grid.Row="1" Grid.Column ="4"></Button> <Button Content ="√" Margin="2" Grid.Row="2" Grid.Column ="4"></Button> <Button Content ="%" Margin="2" Grid.Row="3" Grid.Column ="4"></Button> <Button Content ="1/x" Margin="2" Grid.Row="4" Grid.Column ="4"></Button> <Button Content ="=" Margin="2" Grid.Row="5" Grid.RowSpan ="2" Grid.Column="4"></ Button> </Grid> </Grid> </Window>
______________________________________________________________________________________________
练习二: 腾讯微博界面简单模拟
<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> <RowDefinition></ RowDefinition> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition></ ColumnDefinition> <ColumnDefinition></ ColumnDefinition> <ColumnDefinition></ ColumnDefinition> <ColumnDefinition></ ColumnDefinition> </Grid.ColumnDefinitions> <Image Source ="/Images/Back.jpg" HorizontalAlignment="Right" Margin="15"></Image > <TextBlock Text ="个人资料" Grid.Column="1" VerticalAlignment ="Center" FontSize="28" Foreground="White"></ TextBlock> <Image Source ="/Images/Head.jpg" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Left"></ Image> <Grid Grid.Row ="1" Grid.Column="2" > <Grid.RowDefinitions> <RowDefinition></ RowDefinition> <RowDefinition></ RowDefinition> <RowDefinition></ RowDefinition> </Grid.RowDefinitions> <Button Grid.Row ="2"> <Button.Content> <Image Source ="/Images/Listen.jpg"></ Image> </Button.Content> </Button> <StackPanel Grid.Row ="1" Orientation="Horizontal"> <Image Source ="/Images/Listened.jpg"></ Image> <TextBlock Text ="Ta已收听你" FontSize="16" VerticalAlignment ="Center"></TextBlock> </StackPanel> </Grid> <Grid Grid.Row ="2" Grid.Column="1" Grid.ColumnSpan="2" Background ="White" Margin="5"> <Grid.RowDefinitions> <RowDefinition></ RowDefinition> <RowDefinition></ RowDefinition> </Grid.RowDefinitions> <StackPanel Grid.Row ="0"> <TextBlock Text ="张耕明" FontSize="18"></TextBlock > <TextBlock Text ="@zgmzhang" FontSize="18"></ TextBlock> </StackPanel> <StackPanel Grid.Row ="1"> <TextBlock Text ="个人介绍" FontSize="18"></TextBlock > <TextBlock Text ="还没想好写什么..." FontSize="18"></TextBlock > </StackPanel> </Grid> <Grid.Background> <LinearGradientBrush EndPoint ="1,0.5" StartPoint="0,0.5"> <GradientStop Color ="White" Offset="1" /> <GradientStop Color ="#FF5996C3" Offset="0" /> </LinearGradientBrush> </Grid.Background> </Grid> </Grid> </Window>
______________________________________________________________________________________________
菜单
- 普通菜单(主菜单)-Menu, 上下文菜单(右键菜单)-ToolBar两种
- DockPanel 先到先得空间
______________________________________________________________________________________________
窗口
- 标题用Window的Title属性
- 不想能够修改大小: ResizeMode = "NoResize"
- 窗口打开正中央 WindowStartupLocation = "CenterScreen"
- 窗口间传递参数, 在被传类中新建一个属性值, 在传类中直接给属性赋值
- 传递的值主要都是通过属性来实现
- App.xaml中可以修改启动窗口
窗口练习1:
<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> <DockPanel> <Menu Height ="30" HorizontalAlignment="Left" DockPanel.Dock="Top"> <MenuItem Header ="文件"> <MenuItem Header ="打开"> <MenuItem Header ="1.text"></MenuItem> <MenuItem Header ="2.text"></MenuItem> </MenuItem> </MenuItem> <MenuItem Header ="删除"></ MenuItem> <MenuItem Header ="复制"></ MenuItem> <MenuItem Header ="查找"></ MenuItem> <MenuItem Header ="新建"></ MenuItem> </Menu> <ToolBar DockPanel.Dock ="Top"> <Button Content ="打开"></ Button> <Button Content ="走了" Name="btnClose" Click="btnClose_Click"></Button> <TextBox Width ="80" Name="txtUserName"></ TextBox> <Button Content ="查找"></ Button> <CheckBox Content ="置顶"></ CheckBox> </ToolBar> <TextBox DockPanel.Dock ="Bottom" Name="txtMessage"></ TextBox> </DockPanel> </Grid> </Window>
namespace MenuFrm { /// <summary> /// MainWindow.xaml 的交互逻辑 /// </summary> public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); } private void btnClose_Click(object sender, RoutedEventArgs e) { AbortWindow aw = new AbortWindow(); aw.UserName = txtUserName.Text; aw.ShowDialog(); txtMessage.Text = "走成功了吗?--" + aw.Chose; } } }
<Window x :Class="菜单栏.AbortWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml" Title="是否真的要走吗?" Height="121" Width="358" ResizeMode ="NoResize" WindowStartupLocation="CenterScreen" Loaded="Window_Loaded"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width ="102*" /> <ColumnDefinition Width ="234*" /> </Grid.ColumnDefinitions> <TextBlock Height ="23" HorizontalAlignment="Left" Margin="12,12,0,0" Name ="txtUserName" Text="***" VerticalAlignment="Top" Grid.ColumnSpan ="2" Width="301" /> <Button Content ="是" Height="23" HorizontalAlignment="Left" Margin ="55,46,0,0" Name="btnYes" VerticalAlignment="Top" Width="75" Click ="btnYes_Click" Grid.ColumnSpan="2" /> <Button Content ="否" Height="23" HorizontalAlignment="Left" Margin ="79,46,0,0" Name="btnNo" VerticalAlignment="Top" Width="75" Click ="btnNo_Click" Grid.Column="1" /> </Grid> </Window>
namespace MenuFrm { /// <summary> /// AbortWindow.xaml 的交互逻辑 /// </summary> public partial class AbortWindow : Window { public string UserName { get; set; } public string Chose { get; set; } public AbortWindow() { InitializeComponent(); } private void Window_Loaded(object sender, RoutedEventArgs e) { txtUserName.Text = UserName + ",您真地要走吗?" ; } private void btnYes_Click(object sender, RoutedEventArgs e) { Chose = "Yes"; this.Close(); } private void btnNo_Click(object sender, RoutedEventArgs e) { Chose = "No"; this.Close(); } } }
______________________________________________________________________________________________
打开文件, 和保存文件
private void btnOpenFile_Click( object sender, RoutedEventArgs e) { OpenFileDialog ofd = new OpenFileDialog(); ofd.Filter = "文本文件|*.txt|图片|*.png|视频|*.avi|所有文件|*.*" ; if (ofd.ShowDialog() == true ) { MessageBox .Show("选择成功!" + ofd.FileName.ToString()); } else { MessageBox .Show("选择失败!" ); } } private void btnSaveFile_Click( object sender, RoutedEventArgs e) { SaveFileDialog sfd = new SaveFileDialog(); sfd.Filter = "文本|*.txt|word文件|*.doc" ; if (sfd.ShowDialog() == true ) { MessageBox .Show(sfd.FileName.ToString()); } } 图片打开和显示 OpenFileDialog ofd = new OpenFileDialog(); ofd.Filter = "png图??片?|*.png|所??有?D文?件t|*.*" ; if (ofd.ShowDialog() == true ) { string fileName = ofd.FileName; imgShow.Source = new BitmapImage ( new Uri (fileName)); }
________________
______________________________________________________________________________
