最近又用silverlight做了一个小的东西，如图：
主要就是下边的导航，点击了后上边的大图和文字简介都跟着做相应的变化。
界面设计的思路：整个silverlight采用Grid布局，分为四个层，由下至上分别为：背景层、导航层、简介层、rss按钮层。其中简介层也为grid布局分两个部分，一个大图一个右边的文本区域，由于文本区域分四个部分而且文本长度不固定，所以这个区域选用StackPanel做布局。
导航部分用了“Silverlight Contrib”这个控件库中的“CoolMenu”控件。其自带的demo中是直接把各个Item写好在xaml中。这里我是需要从我的配置文件中读取数据后在加载到导航中。动态加载的方法如下：
在xaml中先实例化一个控件：
<
sc:CoolMenu
x:Name
="xCoolMenu"
>
< sc:CoolMenu.Items >
< sc:CoolMenuItemCollection >
</ sc:CoolMenuItemCollection >
</ sc:CoolMenu.Items >
</ sc:CoolMenu >
< sc:CoolMenu.Items >
< sc:CoolMenuItemCollection >
</ sc:CoolMenuItemCollection >
</ sc:CoolMenu.Items >
</ sc:CoolMenu >
在再后台代码中加载：
foreach
(DataModel dm
in
listData)
{
StreamResourceInfo sri = Application.GetResourceStream( new Uri( " Heros;component/assets/ " + dm.spic, UriKind.Relative));
BitmapImage bi = new BitmapImage();
bi.SetSource(sri.Stream);
Image img = new Image();
img.Source = bi;
img.Margin = new Thickness( 15 );
img.Cursor = Cursors.Hand;
img.DataContext = dm;
CoolMenuItem it = new CoolMenuItem();
it.Content = img;
it.Content.Width = 89 ;
it.Content.Height = 76 ;
xCoolMenu.Items.Add(it);
}
{
StreamResourceInfo sri = Application.GetResourceStream( new Uri( " Heros;component/assets/ " + dm.spic, UriKind.Relative));
BitmapImage bi = new BitmapImage();
bi.SetSource(sri.Stream);
Image img = new Image();
img.Source = bi;
img.Margin = new Thickness( 15 );
img.Cursor = Cursors.Hand;
img.DataContext = dm;
CoolMenuItem it = new CoolMenuItem();
it.Content = img;
it.Content.Width = 89 ;
it.Content.Height = 76 ;
xCoolMenu.Items.Add(it);
}
这里我的配置文件和所使用到的所有的图片是直接放到了silverlight项目中 。
所以再在这里顺便提上一个小技巧：从xap文件中读取文件
读取图片文件：
StreamResourceInfo sri
=
Application.GetResourceStream(
new
Uri(
"
Heros;component/assets/
"
+
dm.spic, UriKind.Relative));
BitmapImage bi = new BitmapImage();
bi.SetSource(sri.Stream);
Image img = new Image();
img.Source = bi;
BitmapImage bi = new BitmapImage();
bi.SetSource(sri.Stream);
Image img = new Image();
img.Source = bi;
读取XML文件并用Linq来初始化数据：
public
void
InitDataModel() {
StreamResourceInfo sri = Application.GetResourceStream( new Uri( " Heros;component/Data/DataModel.xml " , UriKind.Relative));
XmlReader reader = XmlReader.Create(sri.Stream);
XDocument document = XDocument.Load(reader);
listData = (from c in document.Descendants( " model " )
select new DataModel
{
t1 = c.Element( " t1 " ).Value,
t2 = c.Element( " t2 " ).Value,
t3 = c.Element( " t3 " ).Value,
url = c.Element( " url " ).Value,
spic = c.Element( " spic " ).Value,
bpic = c.Element( " bpic " ).Value
}).ToList < DataModel > ();
sri.Stream.Close();
sri.Stream.Dispose();
}
StreamResourceInfo sri = Application.GetResourceStream( new Uri( " Heros;component/Data/DataModel.xml " , UriKind.Relative));
XmlReader reader = XmlReader.Create(sri.Stream);
XDocument document = XDocument.Load(reader);
listData = (from c in document.Descendants( " model " )
select new DataModel
{
t1 = c.Element( " t1 " ).Value,
t2 = c.Element( " t2 " ).Value,
t3 = c.Element( " t3 " ).Value,
url = c.Element( " url " ).Value,
spic = c.Element( " spic " ).Value,
bpic = c.Element( " bpic " ).Value
}).ToList < DataModel > ();
sri.Stream.Close();
sri.Stream.Dispose();
}
这里做一个小的说明：
StreamResourceInfo sri
=
Application.GetResourceStream(
new
Uri(
"
{0};component/{1}
"
, UriKind.Relative));
0为xap程序集的名字，
1为要读取的文件在在xap中的路径。
项目很简单 ：） 就写上这么多吧。
作者：nasa
出处：nasa.cnblogs.com
联系:nasa_wz@hotmail.com
QQ:12446006
