课程表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&#x0a;  --  &#x0a; 9:35"></TextBlock>
10             <TextBlock Grid.Row="2" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="25" Text=" 9:55&#x0a;  --  &#x0a;11:30"></TextBlock>
11             <TextBlock Grid.Row="3" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="25" Text="14:00&#x0a;  --  &#x0a;15:35"></TextBlock>
12             <TextBlock Grid.Row="4" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="25" Text="15:55&#x0a;  --  &#x0a;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值中&#x0a;表示换行;

此时出现了一个问题!!!!!

我的设计中的展示如下:

 

然而run之后结果却是这样:

 

背景图片去哪里了呢??????

查了查明白了没有把图片设为 Resources 需要Add Resources

具体操作参考:  http://blog.csdn.net/studentsky/article/details/7933532

 

最终界面如下:

 

Over    0.0

 

    /**
     *
     *----------caonima be here!----------/
     *    ┏┓   ┏┓
     *   ┏┛┻━━━┛┻┓
     *   ┃       ┃
     *   ┃   ━   ┃
     *   ┃ ┳┛ ┗┳ ┃
     *   ┃       ┃
     *   ┃   ┻   ┃
     *   ┃       ┃
     *   ┗━┓   ┏━┛
     *     ┃   ┃神兽保佑
     *     ┃   ┃代码无BUG!
     *     ┃   ┗━━━┓
     *     ┃       ┣┓
     *     ┃       ┏┛
     *     ┗┓┓┏━┳┓┏┛
     *      ┃┫┫ ┃┫┫
     *      ┗┻┛ ┗┻┛
     * ━━━━━━神兽出没━━━━━━
     */ 

posted @ 2015-04-26 17:03  入世未深  阅读(1708)  评论(3编辑  收藏  举报