课程表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！
     * 　　　　┃　　　┗━━━┓
     * 　　　　┃　　　　　　　┣┓
     * 　　　　┃　　　　　　　┏┛
     * 　　　　┗┓┓┏━┳┓┏┛
     * 　　　　　┃┫┫　┃┫┫
     * 　　　　　┗┻┛　┗┻┛
     * ━━━━━━神兽出没━━━━━━
     */