在Web开发中，图像的重复显示是一个常见的需求。HTML提供了背景图像的重复显示功能，但在Silverlight中，内置的Image控件并不支持这种功能。为了实现类似的效果，开发了一个名为ExImage的自定义控件，它允许用户在水平、垂直或两者方向上重复显示图像。
ExImage控件的实现原理是利用多个Image控件来模拟图像的平铺效果。通过计算需要多少个Image控件以及它们的位置，可以在Canvas上创建出重复的图像效果。
要使用ExImage控件，首先需要在Silverlight项目中添加对Cokkiy.ExImage程序集的引用。然后在XAML文件中，像使用Image控件一样使用ExImage控件，并设置其Source和Stretch属性。
<cokkiy:ExImage x:Name="myImage" Source="s.jpg" Stretch="RepeatX" Background="#FFDA2525" Width="400" Height="300" />
在这段代码中，设置了ExImage控件的名称、图片源、拉伸模式、背景颜色、宽度和高度。Stretch属性的值RepeatX表示图像将在水平方向上重复。
Silverlight中没有直接的方法或函数来操作图像，因此实现图像平铺的唯一方法是使用多个Image控件。下面是一个实现RepeatX模式的示例代码。
case ExStretch.RepeatX:
{
int count = (int)Math.Ceiling(Container.ActualWidth / imgWidth);
double totalUsedWidth = 0.0;
double height = Math.Min(imgHeight, Container.ActualHeight);
for (int i = 0; i < count; i++)
{
double remain = Container.ActualWidth - totalUsedWidth;
Image img = new Image();
img.Stretch = System.Windows.Media.Stretch.None;
img.Width = remain >= imgWidth ? imgWidth : remain;
img.Height = height;
img.Source = Source;
Canvas.SetLeft(img, imgWidth * i);
Canvas.SetTop(img, 0);
imagesList.Add(img);
totalUsedWidth += imgWidth;
}
break;
}
在这段代码中，首先计算需要多少个Image控件来填充水平方向。然后，创建相应数量的Image控件，并设置它们的宽度和位置。最后，将这些Image控件添加到Canvas容器中。
要获取图像的实际宽度和高度，需要处理Image控件的ImageOpened事件。以下是一个示例代码，展示了如何在图像加载后获取其尺寸。
private void CalcImageSize(ImageSource imageSource)
{
if (imageSource != null)
{
Image img = new Image();
img.ImageOpened += new EventHandler<RoutedEventArgs>(img_ImageOpened);
img.Source = imageSource;
Container.Children.Clear();
Container.Children.Add(img);
}
}
void img_ImageOpened(object sender, RoutedEventArgs e)
{
Image img = sender as Image;
imgHeight = (img.Source as BitmapSource).PixelHeight;
imgWidth = (img.Source as BitmapSource).PixelWidth;
Container.Children.Remove(img);
CreateImage();
}
在这段代码中，首先创建一个新的Image控件，并为其ImageOpened事件添加了一个事件处理器。然后，将图像源设置为Image控件的Source属性，并将其添加到Canvas容器中。当图像加载完成后，可以从BitmapSource对象中获取图像的实际宽度和高度。