首页 > 下载 > 下载详文:Silverlight ListBox与Xml绑定

Silverlight ListBox与Xml绑定

发布时间:2011年04月08日 09时37分58秒   属性:程序Web开发 > Microsoft    访问次数:7812
字体: 初始 添加收藏 分享给好友
Silverlight ListBox与Xml绑定

Silverlight Listbox绑定xml数据,在本文中将介绍Listbox通过System.Xml.Linq 与 xml数据绑定图片,显示图片列表,并且通过选取Listbox显示详细图片内容。下图示例程序效果,左边为ListBox绑定Xml图片列表,右侧为显示详细图片内容。

程序 Xaml 前台 介绍

在Listbox的 <ListBox.ItemTemplate><DataTemplate>里面用<StackPanel Orientation="Horizontal">标签,然后在里面嵌入<Grid >,<Grid >拆分两行,然后一行显示图片标题(由<TextBlock> 绑定),一行用以显示缩略图片(由<Image>绑定)。下面是前台代码。

XAML 代码  复制
<Grid x:Name="LayoutRoot" Background="White" Loaded="LayoutRoot_Loaded"> <!--Listbox绑定图片列表--> <ListBox Height="150" HorizontalAlignment="Left" Margin="20,20,0,0"
Name="listBox1" VerticalAlignment="Top" Width="auto" SelectionChanged="listBox1_SelectionChanged"> <ListBox.ItemTemplate> <DataTemplate> <StackPanel Orientation="Horizontal"> <Grid > <Grid.RowDefinitions> <RowDefinition Height="auto" /> <RowDefinition Height="auto" /> </Grid.RowDefinitions> <TextBlock Grid.Row="0" Text="{Binding ImgName}" Foreground="Red" FontStyle="Italic"/> <Image Grid.Row="1" Source="{Binding ImgSource}" Margin="3,3,0,0" Width="80" Height="65"/> </Grid> </StackPanel> </DataTemplate> </ListBox.ItemTemplate> </ListBox> <!--显示图片详细内容--> <Image x:Name="ViewImage" Margin="150,10,184,55" /> <TextBlock Height="23" HorizontalAlignment="Left" FontWeight="Bold" Margin="150,10,184,55" Name="textName" FontSize="16" Width="120" VerticalAlignment="Top" FontFamily="Arial"/> <sdk:Label Height="23" HorizontalAlignment="Center" FontSize="14" Name="textTitle" VerticalAlignment="Center" FontFamily="Arial" Margin="155,450,0,0" Foreground="#FF00F400" Background="Black"
Padding="3,0,3,0"/> </Grid>

显示图片的详细内容,同过Listgbox触发SelectionChanged事件来完成图片的详细内容绑定,分别<TextBlock>绑定图片的标题、<Image>绑定图片和<sdk:Label>绑定图片介绍。

程序C#后台介绍

silverlight对xml操作需要引入System.Xml.Linq,在本示例中将xml和图片放入xap包中,所有图片放放入程序需资源目录。此外还建立一个Images类即图片属性成员和Xml数据列表对应。

XML数据

XML 代码  复制
<?xml version="1.0" encoding="utf-8" ?> <myImage> <item> <ImgName>Bejaoui</ImgName> <ImgTite>盟军闪电风暴和尤里心云控制</ImgTite> <ImgSource>a-1.jpg</ImgSource> </item> <item> <ImgName>Joth</ImgName> <ImgTite>苏俄核弹</ImgTite> <ImgSource>a-2.jpg</ImgSource> </item> <item> <ImgName>Qfes</ImgName> <ImgTite>油井</ImgTite> <ImgSource>a-3.jpg</ImgSource> </item> <item> <ImgName>Asw</ImgName> <ImgTite>北极圈</ImgTite> <ImgSource>a-4.jpg</ImgSource> </item> <item> <ImgName>Gewi</ImgName> <ImgTite>全景,掌控盟军闪电风暴、尤里心云控制和苏俄核弹</ImgTite> <ImgSource>2r.png</ImgSource> </item> </myImage>

主程序的操作方法 绑定图片列表 InitializeImgList(),这里即Xml.Linq方法;通过Listbox的SelectionChanged事件listBox1_SelectionChanged(object sender, SelectionChangedEventArgs e)指定详细图片,传给textName.Text (图片标题)、图片绑定ViewImage.SetBinding(图片路径)和textTitle.Content(图片介绍内容)。

C# 代码  复制
ListBox myList;//预先定义list public void InitializeImgList()//xml数据读取 { XDocument imgDoc = XDocument.Load("XMLFileImage.xml"); var myData = from Imageinfo in imgDoc.Descendants("item") select new Images { ImgName = Convert.ToString(Imageinfo.Element("ImgName").Value), ImgTite = Convert.ToString(Imageinfo.Element("ImgTite").Value), ImgSource = Convert.ToString("Image/" + Imageinfo.Element("ImgSource").Value) }; myList = this.FindName("listBox1") as ListBox; myList.ItemsSource = myData; } //ListBox SelectionChanged选取触发 private void listBox1_SelectionChanged(object sender,
SelectionChangedEventArgs e) { //Create the source string textName.Text = ((Images)listBox1.SelectedItem).ImgName; textTitle.Content = ((Images)listBox1.SelectedItem).ImgTite; //图片路径 string s = ((Images)listBox1.SelectedItem).ImgSource; //建立绑定 //Create the binding description Binding b = new Binding(""); b.Mode = BindingMode.OneTime; b.Source = s; //绑定图片路径 //Attach the binding to the target ViewImage.SetBinding(Image.SourceProperty, b); }
免费
Silverlight ListBox与Xml绑定 (49)
本下载连接不支持第三下载工具打开,请直接点击下载即可
遺昕 | Weisim3.com 下载许可条款 ( 您必须接受同意才可下载 ) .
×
帐号登入 - 遺昕 | Weisim3.com
用 户 名:
用户密码:
注册用户   忘记密码  帮助

登录 Weisim3.com

享受 网络 无纸化 学习

伴随着您成长 伴随着您进步