Question

我有一个Silverlight 3图像旋转器，显示约7张图像。您可以来回旋转它，它会使左图像或右图像成为所选图像。旋转器使用驻留在图像文件夹中的jpg图像。我想动态加载数据库中的图像字符串，因为我有数百个图像可用。我的问题是：如何基于查询加载列表或集合，将图像字符串转换为图片并动态加载到旋转器中。这就是我现在拥有的。

XAML

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:vc="clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts"           
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d" 
    xmlns:CollectionFlow="clr-namespace:CollectionFlow;assembly=CollectionFlow" 
    x:Class="CollectionFlowSample.MainPage"
    d:DesignWidth="640" d:DesignHeight="480" Loaded="UserControl_Loaded" Width="900" Height="800">
    <UserControl.Resources>
        <DataTemplate x:Key="DataTemplate1">
            <Grid RenderTransformOrigin="0.5,0.5">
                <Grid.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform/>
                        <SkewTransform/>
                        <RotateTransform/>
                        <TranslateTransform Y="100"/>
                    </TransformGroup>
                </Grid.RenderTransform>
                <Grid.RowDefinitions>
                    <RowDefinition/>
                    <RowDefinition Height="5"/>
                    <RowDefinition/>
                </Grid.RowDefinitions>     
                <Border Height="180" 
                    HorizontalAlignment="Left" VerticalAlignment="Top" 
                    Width="140" BorderThickness="10" Margin="16,14,0,0"
                        CornerRadius="2">
                    <Border.BorderBrush>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Color="Black" Offset="0"/>
                            <GradientStop Color="#FF282323" Offset="1"/>
                            <GradientStop Color="#FF413636" Offset="0.556"/>
                            <GradientStop Color="#FFCEBABA" Offset="0.83"/>
                        </LinearGradientBrush>
                    </Border.BorderBrush>
                    <Image Source="{Binding Mode=OneWay}" Stretch="Fill" >
                    <Image.Effect>
                        <DropShadowEffect ShadowDepth="0" BlurRadius="3" Opacity="0.5"/>
                    </Image.Effect>
                </Image>    
                    </Border>
                <Image Source="{Binding Mode=OneWay}" Grid.Row="2" RenderTransformOrigin="0.5,0.5">
                    <Image.Effect>
                        <BlurEffect/>
                    </Image.Effect>
                    <Image.OpacityMask>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Offset="0.5"/>
                            <GradientStop Offset="1" Color="#7F000000"/>
                        </LinearGradientBrush>
                    </Image.OpacityMask>
                    <Image.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform ScaleY="-1"/>
                            <SkewTransform AngleX="0" AngleY="0"/>
                            <RotateTransform Angle="0"/>
                            <TranslateTransform/>
                        </TransformGroup>
                    </Image.RenderTransform>
                </Image>


            </Grid>
        </DataTemplate>
        <ItemsPanelTemplate x:Key="ItemsPanelTemplate1">
            <CollectionFlow:CollectionFlowPanel ItemHeight="400" ItemWidth="160" FocusedItemOffset="60" UnfocusedItemOffset="40" ItemVisibility="5" RenderTransformOrigin="0.5,0.5"/>
        </ItemsPanelTemplate>
    </UserControl.Resources>
  <Grid x:Name="LayoutRoot">
        <Grid.Background>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FFA0A0A0" Offset="0"/>
                <GradientStop Color="Black" Offset="1"/>
            </LinearGradientBrush>
        </Grid.Background>

            <CollectionFlow:CollectionFlow x:Name="ImageList" ItemTemplate="{StaticResource DataTemplate1}" ItemsPanel="{StaticResource ItemsPanelTemplate1}">
            <CollectionFlow:CollectionFlow.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FFEAE2E2"/>
                    <GradientStop Color="#FF0E0101" Offset="1"/>
                    <GradientStop Color="#FF676464" Offset="0.665"/>
                </LinearGradientBrush>
            </CollectionFlow:CollectionFlow.Background>

        </CollectionFlow:CollectionFlow>

C＃代码

ImageList.ItemsSource = new string[] {"SampleImages/10019436.jpg","SampleImages/10042172.jpg" etc...

这是喜欢做什么..... 查询数据库返回记录然后...

使用转换功能流程...

string sPic = (string)emps.Photo.ToString();

EmpPic1.Source = ConvertBase64ToImage(sPic);

public BitmapImage ConvertBase64ToImage(string base64String)
{
        //Convert Base64 String to byte[]
        byte[] imageBytes = Convert.FromBase64String(base64String);
        BitmapImage bi = new BitmapImage();
        bi.SetSource(new MemoryStream(imageBytes));
        return bi;
}

这是我喜欢将查询的图像添加到集合中的地方，并使用上述技术在图像旋转器中显示它们。

任何帮助都将不胜感激。

Answer 1

您需要使用Web服务器请求数据（通过Web服务调用是实现此目的的一种好方法）这会将数据返回到您的silverlight应用程序，您将无法使用silverlight直接连接到数据库， service将访问数据库，然后它可以将数据返回给您的应用程序，以供您在上面讨论过的代码使用。

创建一个返回图像数据的Web服务添加指向您的服务的silverlight应用程序的Web引用使用生成的代理来调用服务并将数据返回给您的应用程序 - 您可以使用异步回调代理的serviceclient或忘记代理，只需使用webclient调用服务

我认为理解基于客户端的silverlight非常重要，它在最典型的用例中位于远程计算机上的沙箱中，因此访问数据不会使用与windows表单应用程序相同的方法＆gt;

从数据库动态加载图像并在Silverlight 3图像旋转器中显示

1 个答案: