课程表WPF制作 学习步骤一
一开始拿到这个学习创意的idea之后根本不知道如何下手,虽说也是一个相当简单的设计,但对于如此小白的我,只能是学一步算一步;
敬请各位大神光临,不喜勿喷就好,就好;
本着“学从难处,用从易处”的原则,题主所学的尽量都是直接用XAML代码栏通过敲XAML代码实现,所以接下来也尽量使用直接敲代码实现,这样有助于缩放,也据说对以后很有益处 0.0
课程表制作的第一步就是画表
这里我用的是Grid来制作表格,代码如下:
1 <Window x:Class="Curriculum.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="750" Width="1200"> 5 <Grid> 6 <Grid> 7 <Grid.RowDefinitions > 8 <RowDefinition Height="90"></RowDefinition> 9 <RowDefinition></RowDefinition> 10 <RowDefinition></RowDefinition> 11 <RowDefinition></RowDefinition> 12 <RowDefinition></RowDefinition> 13 <RowDefinition></RowDefinition> 14 </Grid.RowDefinitions> 15 <Grid.ColumnDefinitions> 16 <ColumnDefinition Width="100"></ColumnDefinition> 17 <ColumnDefinition></ColumnDefinition> 18 <ColumnDefinition></ColumnDefinition> 19 <ColumnDefinition></ColumnDefinition> 20 <ColumnDefinition></ColumnDefinition> 21 <ColumnDefinition></ColumnDefinition> 22 <ColumnDefinition></ColumnDefinition> 23 <ColumnDefinition></ColumnDefinition> 24 </Grid.ColumnDefinitions> 25 </Grid> 26 </Grid> 27 </Window>
这样就大致画出了一个6行8列的表格,其中第0行高度(height)为90, 第0列宽度(width)为100
界面如下:
实际上窗口中并没有表格边线
接下来就是定义表格内容,代码如下:
1 <TextBlock Grid.Row="0" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="30" Foreground="#FFBD1096">星期一</TextBlock> 2 <TextBlock Grid.Row="0" Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="30" Foreground="#FFBD1096">星期二</TextBlock> 3 <TextBlock Grid.Row="0" Grid.Column="3" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="30" Foreground="#FFBD1096">星期三</TextBlock> 4 <TextBlock Grid.Row="0" Grid.Column="4" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="30" Foreground="#FFBD1096">星期四</TextBlock> 5 <TextBlock Grid.Row="0" Grid.Column="5" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="30" Foreground="#FFBD1096">星期五</TextBlock> 6 <TextBlock Grid.Row="0" Grid.Column="6" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="30" Foreground="#FFBD1096">星期六</TextBlock> 7 <TextBlock Grid.Row="0" Grid.Column="7" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="30" Foreground="#FFBD1096">星期日</TextBlock> 8 <TextBlock Grid.Row="0" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="20">时间段</TextBlock> 9 <TextBlock Grid.Row="1" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="25" Text=" 8:00
 -- 
 9:35"></TextBlock> 10 <TextBlock Grid.Row="2" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="25" Text=" 9:55
 -- 
11:30"></TextBlock> 11 <TextBlock Grid.Row="3" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="25" Text="14:00
 -- 
15:35"></TextBlock> 12 <TextBlock Grid.Row="4" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="25" Text="15:55
 -- 
17:30"></TextBlock> 13 <TextBlock Grid.Row="5" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="30" Text="晚上"></TextBlock> 14 <Image Source="image\1.jpeg" Grid.ColumnSpan="8" Grid.RowSpan="6" Opacity="0.5" Stretch="Fill" />
注意: 在 TextBlock 中 Text值中
表示换行;
此时出现了一个问题!!!!!
我的设计中的展示如下:
然而run之后结果却是这样:
背景图片去哪里了呢??????
查了查明白了没有把图片设为 Resources 需要Add Resources
具体操作参考: http://blog.csdn.net/studentsky/article/details/7933532
最终界面如下:
Over 0.0
/**
*
*----------caonima be here!----------/
* ┏┓ ┏┓
* ┏┛┻━━━┛┻┓
* ┃ ┃
* ┃ ━ ┃
* ┃ ┳┛ ┗┳ ┃
* ┃ ┃
* ┃ ┻ ┃
* ┃ ┃
* ┗━┓ ┏━┛
* ┃ ┃神兽保佑
* ┃ ┃代码无BUG!
* ┃ ┗━━━┓
* ┃ ┣┓
* ┃ ┏┛
* ┗┓┓┏━┳┓┏┛
* ┃┫┫ ┃┫┫
* ┗┻┛ ┗┻┛
* ━━━━━━神兽出没━━━━━━
*/