Silverlight学习笔记十二动态加载图片和显示提示(ToolTip)

这一节是如何动态加载图片和显示提示(ToolTip)

下面是效果

 

 1.LayoutControlDemo.xaml

<UserControl   xmlns:my1="clr-namespace:DevExpress.Xpf.LayoutControl;assembly=DevExpress.Xpf.LayoutControl.v10.1"    
    xmlns:toolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.DataForm.Toolkit"  xmlns:my="clr-namespace:Silverlight.Common.View"  xmlns:dx="clr-namespace:DevExpress.Xpf.Core;assembly=DevExpress.Xpf.Core.v10.1"  x:Class="Silverlight.Common.View.LayoutControlDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
               xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">

        <StackPanel  x:Name="panel" FlowDirection="LeftToRight" HorizontalAlignment="Left" VerticalAlignment="Top" Orientation="Horizontal">

        </StackPanel>
    </Grid>

</UserControl>

 

2.LayoutControlDemo.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Silverlight.Common.Core;
using System.Windows.Media.Imaging;
using System.Collections.ObjectModel;
using System.Windows.Controls.Primitives;
using DevExpress.Xpf.Core;

namespace Silverlight.Common.View
{
    public partial class LayoutControlDemo : UserControl
    {
        Star star = new Star();
        public LayoutControlDemo()
        {
            InitializeComponent();
            InitPanel();
        }

        /// <summary>
        /// 初始化界面
        /// </summary>
        void InitPanel()
        {
            ObservableCollection<Star> list = null;

            list = star.DataSource();

            if (list != null)
            {
                foreach (var item in list)
                {
                    Image image = new Image();
                    image.Width = (double)100;
                    image.Height = (double)100;
                   
                    //图片地址
                    image.Source = item.Image;

                    //图片标识
                    image.Tag = item.Tag;

                    //将此控件添加到布局控件上
                    panel.Children.Add(image);

                    //ToopTip对象
                    ToolTip tt = new ToolTip();
                    Info info=new Info();

                    //给ToolTip的Content赋值
                    tt.Content = info;

                    //设置image的ToolTip
                    image.SetToolTip(tt);

                    tt.DataContext = star.Get(image.Tag.ToString());
                }
            }
        }
    }
}

 

3.Info.xaml

<UserControl xmlns:dxe="clr-namespace:DevExpress.Xpf.Editors;assembly=DevExpress.Xpf.Core.v10.1"  x:Class="Silverlight.Common.View.Info"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignHeight="100" d:DesignWidth="200"
     >

    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition  Height="23"/>
            <RowDefinition  Height="23"/>
            <RowDefinition  Height="23"/>
            <RowDefinition  Height="15"/>
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="auto"/>
            <ColumnDefinition Width="auto"/>
        </Grid.ColumnDefinitions>
        <TextBlock Text="{Binding MovieName}"></TextBlock>
        <TextBlock Grid.Column="1" Text="{Binding MovieType}"></TextBlock>
        <TextBlock Grid.Row="1" Text="主演："></TextBlock>
        <TextBlock Grid.Row="1" Grid.Column="2" Text="{Binding Starring}"></TextBlock>
        <TextBlock Grid.Row="2"  Text="地区："></TextBlock>
        <TextBlock Grid.Row="2" Grid.Column="2" Text="{Binding Area}"></TextBlock>
        <TextBlock Grid.Row="3"  Text="剧情：" Grid.ColumnSpan="2"></TextBlock>
        <TextBox TextWrapping="Wrap" BorderThickness="0" Grid.Row="4" Grid.ColumnSpan="2"  Width="200" Text="{Binding Plot}"></TextBox>
    
    </Grid>
</UserControl>

 

4.Star.cs

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Media.Imaging;
using System.Collections.ObjectModel;

using System.Linq;

namespace Silverlight.Common.Core
{
    public class Star
    {
        /// <summary>
        /// 标识
        /// </summary>
        public string Tag { get; set; }

        /// <summary>
        /// 主演
        /// </summary>
        public string Starring { get; set; }

        /// <summary>
        /// 电影名
        /// </summary>
        public string MovieName { get; set; }

        /// <summary>
        /// 所属地区
        /// </summary>
        public string Area { get; set; }

        /// <summary>
        /// 图片名字
        /// </summary>
        public string ImageName { get; set; }

        /// <summary>
        /// 图片
        /// </summary>
        public BitmapImage Image { get { return new BitmapImage(ImageFullName); } }

        /// <summary>
        /// 图片路径
        /// </summary>
        public string ImagesPath { get; set; }

        /// <summary>
        /// 图片全名
        /// </summary>
        public Uri ImageFullName {
            get { return new Uri(ImagesPath + ImageName, UriKind.Relative); }}
     
        /// <summary>
        /// 电影类型
        /// </summary>
        public string MovieType { get; set; }

        /// <summary>
        /// 剧情
        /// </summary>
        public string Plot { get; set; }

     // public  ObservableCollection<BitmapImage> images { get { return m_images; } }

        public  ObservableCollection<Star> DataSource()
        {
            ObservableCollection<Star> list = new ObservableCollection<Star>();
            list.Add(new Star()
            {
                Tag="SadStory",
                Starring = "权相宇,金喜善",
                Area="韩国",
                MovieName = "悲伤恋歌",
                MovieType = "爱情/悲剧",
                Plot = "三个人的爱情，三个人的悲剧",
                ImageName="ba.jpg",
                ImagesPath = "../Images/",
            });

            list.Add(new Star()
            {
                Tag = "da",
                Starring = "权相宇,李瑶媛",
                Area = "韩国",
                MovieName = "毒爱",
                MovieType = "爱情/悲剧",
                Plot = "这部电影是权相宇结婚后的首部悲剧电视剧，讲述了俩个都被爱所伤害的人，相遇后的故事！",
                ImageName = "da.jpg",
                ImagesPath = "../Images/",
            });

            list.Add(new Star()
            {
                Tag = "sm",
                Starring = "权相宇,宋承宪",
                Area = "韩国",
                MovieName = "宿命",
                MovieType = "爱情/悲剧",
                Plot = "讲述了三个挚友为了钱而互相残杀的故事！",
                ImageName = "sm.jpg",
                ImagesPath = "../Images/",
            });

            list.Add(new Star()
            {
                Tag = "jt",
                Starring = "权相宇,崔智友",
                Area = "韩国",
                MovieName = "天堂的阶梯",
                MovieType = "爱情/悲剧",
                Plot = "诚俊和静书是青梅竹马的玩伴，从小如同亲兄妹般渡过孩童时期。每当静书伤心难过时，诚俊总会守在她身边付出关心，而静书同样依赖诚俊，使两人对彼此逐渐培养出男女之情。天国的阶梯某一天诚俊之父车祸身亡，不久之后静书之母也因病过世。",
                ImageName = "jt.jpg",
                ImagesPath = "../Images/",
            });

            list.Add(new Star()
            {
                Tag = "wz",
                Starring = "权相宇,允儿",
                Area = "韩国",
                MovieName = "乞丐变王子",
                MovieType = "爱情",
                Plot = "　这次公开的剧照描绘了背着大包在东大门市场工作的吴大山（权相宇 饰）和父亲去世后坐在父亲的店里看着家人照片的徐柳真（允儿 饰）的样子。剧中柳真在父亲的葬礼上跟大山擦肩而过，而两人在柳真父亲的店里又再次相遇。大山帮助陷入困境的柳真，两人的因缘由此展开。",
                ImageName = "wz.jpg",
                ImagesPath = "../Images/",
            });
       
            return list;
        }

        public Star Get(string Tag)
        {
            Star obj = null;
            if (this.DataSource().Where(w => w.Tag == Tag) != null)
            {
                obj = this.DataSource().Where(w => w.Tag == Tag).First();
            }
         
            return obj;
        }       
    }
}

 

注：TextBox的多行属性TextWrapping="Wrap"很重要啊。

  界面做的很不好看，请大家谅解啊

源代码下载：https://files.cnblogs.com/salam/Silverlight.Common.rar