Replacing image in coverflow

7 posts, 1 answers
  1. Mike
    Mike avatar
    5 posts
    Member since:
    Jan 2007

    Posted 12 Mar 2009 Link to this post

    Is it possible to replace an image in a populated coverflow?

    I started with the databinding sample and made some modifications and everything is working. I am using an ObservableCollection to house my list of images. What I am stumped on is how can I replace the selected image in the cover flow with a new image.

    For example, If we stick with the ImageInfo class from the sample, I want to be able to do something like

        ((

    ImageInfo)this.coverFlow.SelectedItem).ImageUrl = newImage.ImageUrl;

    in the SelectionChanged event handler to replace the existing image with a new image.

    Thanks,
    Michael Boyken

     

  2. Miroslav Nedyalkov
    Admin
    Miroslav Nedyalkov avatar
    1718 posts

    Posted 13 Mar 2009 Link to this post

    Hi Mike,

    This should work fine if the ImageInfo class implements the INotifyPropertyChanged interface and rises the PropertyChanged event when the ImageUrl property is set (it is done like shown in the example).

    Regards,
    Miroslav Nedyalkov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. DevCraft banner
  4. Mike
    Mike avatar
    5 posts
    Member since:
    Jan 2007

    Posted 14 Mar 2009 Link to this post

    Miroslav,
        Well, I have made some progress. I get the iamge to work properly on the initial load. But when selecting the designs in the coverflow I can see the property notification firing and I can see my textblocks updating but the coverflow design is not. Maybe I just need another set of eyes. If you can take a look, here is the xaml and cs info.

    Thanks,
    Mike

    Page.xaml

    <

     

    UserControl

     

     

    xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"

     

     

    xmlns:telerikInput="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Input"

     

     

    xmlns:telerikNavigation="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation" x:Class="ProductConfigurator.Page"

     

     

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

     

     

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

     

     

    Width="800" Height="600"

     

     

    Loaded="PageLoaded">

     

     

     

    <Grid x:Name="LayoutRoot" Width="Auto" Height="Auto">

     

     

     

    <Grid.Background>

     

     

     

    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

     

     

     

    <GradientStop Color="#FF40496F" Offset="0"/>

     

     

     

    <GradientStop Color="#FF70C2D7" Offset="1"/>

     

     

     

    </LinearGradientBrush>

     

     

     

    </Grid.Background>

     

     

     

    <Grid.RowDefinitions>

     

     

     

    <RowDefinition Height="0.348*"/>

     

     

     

    <RowDefinition Height="0.302*"/>

     

     

     

    <RowDefinition Height="0.35*"/>

     

     

     

    </Grid.RowDefinitions>

     

     

     

    <Grid.ColumnDefinitions>

     

     

     

    <ColumnDefinition Width="0.752*"/>

     

     

     

    <ColumnDefinition Width="0.248*"/>

     

     

     

    </Grid.ColumnDefinitions>

     

     

     

     

    <Canvas Margin="0,0,8,8" Grid.Column="0" Grid.ColumnSpan="2" x:Name="selectedImageInfo" Grid.RowSpan="2">

     

     

     

    <StackPanel >

     

     

     

    <TextBlock x:Name="StatusText" Opacity="0" TextWrapping="Wrap" Text="Loading images from Scene 7, Please wait..." />

     

     

     

    <TextBlock Text="Selected Product title: " />

     

     

     

    <TextBlock x:Name="SelectedImageTitleTextBlock" TextWrapping="Wrap" Text="{Binding ImageTitle, Mode=OneWay}" />

     

     

     

    <TextBlock Text="Selected Product Url: " />

     

     

     

    <TextBlock x:Name="Selected3DUrlTextBlock" TextWrapping="Wrap" Text="{Binding ImageUrl, Mode=OneWay}" />

     

     

     

    <TextBlock Text="Selected Design title: " />

     

     

     

    <TextBlock x:Name="SelectedDesignTitleTextBlock" TextWrapping="Wrap" Text="{Binding ImageTitle, Mode=OneWay}" />

     

     

     

    <TextBlock Text="Selected Design Url: " />

     

     

     

    <TextBlock x:Name="SelectedDesignUrlTextBlock" TextWrapping="Wrap" Text="{Binding ImageUrl, Mode=OneWay}" />

     

     

     

    </StackPanel>

     

     

     

    </Canvas>

     

     

     

     

    <telerikNavigation:RadCoverFlow x:Name="coverFlow" CameraY="-80" ItemMaxHeight="100"

     

     

    CenterOffsetY="50" NavigationPanelVisibility="Visible"

     

     

    ItemsSource="{Binding Mode=OneWay}" DisplayMemberPath="ImageUrl"

     

     

    Grid.Row="1" Margin="0,0,16,8" Grid.RowSpan="1" Grid.ColumnSpan="2" HorizontalAlignment="Stretch"

     

     

    SelectionChanged="coverFlow_SelectionChanged" />

     

     

     

     

    <telerikNavigation:RadCoverFlow x:Name="coverflowDesigns" CameraY="-80" ItemMaxHeight="100"

     

     

    CenterOffsetY="50" NavigationPanelVisibility="Visible"

     

     

    ItemsSource="{Binding Mode=OneWay}" DisplayMemberPath="ImageUrl"

     

     

    Grid.Row="2" Margin="0,0,16,8" Grid.RowSpan="1" Grid.ColumnSpan="2" HorizontalAlignment="Stretch"

     

     

    SelectionChanged="coverFlowDesigns_SelectionChanged"

     

     

    />

     

     

     

    </Grid>

     

    </

     

    UserControl>

    page.xaml.cs

     

    namespace

     

    ProductConfigurator

     

    {

     

    public partial class Page : UserControl

     

     

     

     

    {

     

    ObservableCollection<ImageInfo> scene7Vignettes;

     

     

    Dictionary<string, ObservableCollection<ImageInfo>> assets;

     

     

    public Page()

     

    {

    InitializeComponent();

     

    this.scene7Vignettes = new ObservableCollection<ImageInfo>();

     

     

    this.assets = new Dictionary<string, ObservableCollection<ImageInfo>>();

     

    }

     

    private void PageLoaded(object o, RoutedEventArgs e)

     

    {

     

    //load the designs and the products

     

     

     

     

     

    this.LoadProductDesigns();

     

     

    this.LoadProductVignettes();

     

     

    //set the data context for the product cover flow. The design coverflow

     

     

     

     

     

    //will have it's context set as a result of the products loading.

     

     

     

     

     

    this.coverFlow.DataContext = this.scene7Vignettes;

     

    }

     

    private void coverFlow_SelectionChanged(object sender, Telerik.Windows.Controls.SelectionChangedEventArgs e)

     

    {

     

    //get the selected item as an ImageInfo object

     

     

     

     

     

    ImageInfo item = this.coverFlow.SelectedItem as ImageInfo;

     

     

    //set the data context for the newly selected product information textblocks

     

     

     

     

     

    this.SelectedImageTitleTextBlock.DataContext = item;

     

     

    this.Selected3DUrlTextBlock.DataContext = item;

     

     

    //get the product as a string from the title

     

     

     

     

     

    string product = item.ImageTitle;

     

     

    //check to see if we have already loaded the data for this product. During testing

     

     

     

     

     

    //this will always be true since we preload the data.

     

     

     

     

     

    if (assets.Keys.Contains(product) == true)

     

    {

     

    //set the data context for the designs coverflow

     

     

     

     

     

    this.coverflowDesigns.DataContext = assets[product];

     

    }

     

    else

     

     

     

     

    {

     

    //TODO: Remove the comments and reenable the web service after resolving updating

     

     

     

     

     

    //issue

     

     

     

     

     

    //Uri address = new Uri(Application.Current.Host.Source, "../AssetService.svc");

     

     

     

     

     

    ////this.SellectedImageTitleTextBlock.DataContext = this.coverFlow.SelectedItem;

     

     

     

     

     

    //AssetServiceServiceReference.AssetServiceClient proxy =

     

     

     

     

     

    // new ProductConfigurator.AssetServiceServiceReference.AssetServiceClient("BasicHttpBinding_AssetService", address.AbsoluteUri);

     

     

     

     

     

    //proxy.GetAssetNamesByProductCompleted += OnGetAssetNamesByProductCompleted;

     

     

     

     

     

    //proxy.GetAssetNamesByProductAsync(item.ImageTitle, item.ImageTitle);

     

     

     

     

    }

    }

     

    private void coverFlowDesigns_SelectionChanged(object sender, Telerik.Windows.Controls.SelectionChangedEventArgs e)

     

    {

     

    //get the selected item as an ImageInfo object

     

     

     

     

     

    ImageInfo itemDesign = this.coverflowDesigns.SelectedItem as ImageInfo;

     

     

    ImageInfo itemVignetted = this.coverFlow.SelectedItem as ImageInfo;

     

     

    //set up the datacontext

     

     

     

     

     

    this.SelectedDesignTitleTextBlock.DataContext = itemDesign;

     

     

    this.SelectedDesignUrlTextBlock.DataContext = itemDesign;

     

     

    //Update the url on the selected product and do some diagnostics here

     

     

     

     

    ((

    ImageInfo)this.coverFlow.SelectedItem).ImageUrl = itemVignetted.ImageUrlReplaceable + string.Format(itemVignetted.ImageParameters, itemDesign.ImageUrl); ;

     

    System.Diagnostics.

    Debug.WriteLine(string.Format(@"Selected Image: {0}", ((ImageInfo)this.coverFlow.SelectedItem).ImageUrl));

     

    }

     

    private void LoadProductVignettes()

     

    {

    scene7Vignettes.Add(

    new ImageInfo {

     

    ImageTitle =

    "CLR",

     

    ImageUrl =

    "http://IS2.PENS.COM/ir/render/POCRender/Casino/CLR-800?wid=500",

     

    ImageParameters =

    "?wid=500&sharpen=1&qlt=90,1&obj=FLOW/Design&decal&src=({0})&obj=FLOW/ColorParts&color=0,0,0",

     

    ImageUrlReplaceable =

    "http://IS2.PENS.COM/ir/render/POCRender/Casino/CLR-800"

     

     

     

     

    });

    scene7Vignettes.Add(

    new ImageInfo {

     

    ImageTitle =

    "CSK",

     

    ImageUrl =

    "http://IS2.PENS.COM/ir/render/POCRender/Casino/CSK-800?wid=500",

     

    ImageParameters =

    "?wid=500&sharpen=1&qlt=90,1&obj=FLOW/DesignBarrel&decal&src=({0})",

     

    ImageUrlReplaceable =

    "http://IS2.PENS.COM/ir/render/POCRender/Casino/CSK-800"

     

    });

    scene7Vignettes.Add(

    new ImageInfo {

     

    ImageTitle =

    "CTR",

     

    ImageUrl =

    "http://IS2.PENS.COM/ir/render/POCRender/Casino/CTR-800?wid=500",

     

    ImageParameters =

    "?wid=500&sharpen=1&qlt=90,1&obj=FLOW/Design&decal&src=({0})&obj=FLOW/ColorParts&color=255,0,0",

     

    ImageUrlReplaceable =

    "http://IS2.PENS.COM/ir/render/POCRender/Casino/CTR-800"

     

     

     

     

    });

    scene7Vignettes.Add(

    new ImageInfo {

     

    ImageTitle =

    "CGR",

     

    ImageUrl =

    "http://IS2.PENS.COM/ir/render/POCRender/Casino/CGR-800?wid=500",

     

    ImageParameters =

    "?wid=500&sharpen=1&qlt=90,1&obj=FLOW/Design&decal&src=({0})",

     

    ImageUrlReplaceable =

    "http://IS2.PENS.COM/ir/render/POCRender/Casino/CGR-800"

     

     

     

     

    });

    }

     

    private void LoadProductDesigns()

     

    {

     

    //we will load up some sample designs for each product. This will only be used during

     

     

     

     

     

    //debugging. We will leverage the web service to handle this once we have everything

     

     

     

     

     

    //working properly.

     

     

     

     

     

    //this is the base address of the image

     

     

     

     

     

    string location = "http://is2.pens.com/is/image/NationalPen/{0}?wid=400";

     

     

    //this will hold our contour information

     

     

     

     

     

    ObservableCollection<ImageInfo> contour = new ObservableCollection<ImageInfo>();

     

    contour.Add(

    new ImageInfo { ImageTitle = "CTR-1CX", ImageUrl = string.Format(location, "CTR-1CX"), ImageParameters = "", ImageUrlReplaceable = "" });

     

    contour.Add(

    new ImageInfo { ImageTitle = "CTR-2CY-1", ImageUrl = string.Format(location, "CTR-2CY-1"), ImageParameters = "", ImageUrlReplaceable = "" });

     

    contour.Add(

    new ImageInfo { ImageTitle = "CTR-2DD", ImageUrl = string.Format(location, "CTR-2DD"), ImageParameters = "", ImageUrlReplaceable = "" });

     

    contour.Add(

    new ImageInfo { ImageTitle = "CTR-2DG", ImageUrl = string.Format(location, "CTR-2DG"), ImageParameters = "", ImageUrlReplaceable = "" });

     

    contour.Add(

    new ImageInfo { ImageTitle = "CTR-2DF", ImageUrl = string.Format(location, "CTR-2DF"), ImageParameters = "", ImageUrlReplaceable = "" });

     

     

    //add contour to our assets

     

     

     

     

    assets.Add(

    "CTR", contour);

     

     

    //this will hold our colorama information

     

     

     

     

     

    ObservableCollection<ImageInfo> colorama = new ObservableCollection<ImageInfo>();

     

    colorama.Add(

    new ImageInfo { ImageTitle = "CLR-1CX", ImageUrl = string.Format(location, "CLR-1CX"), ImageParameters = "", ImageUrlReplaceable = "" });

     

    colorama.Add(

    new ImageInfo { ImageTitle = "CLR-1RW", ImageUrl = string.Format(location, "CLR-1RW"), ImageParameters = "", ImageUrlReplaceable = "" });

     

    colorama.Add(

    new ImageInfo { ImageTitle = "CLR-1RZ", ImageUrl = string.Format(location, "CLR-1RZ"), ImageParameters = "", ImageUrlReplaceable = "" });

     

    colorama.Add(

    new ImageInfo { ImageTitle = "CLR-1SA", ImageUrl = string.Format(location, "CLR-1SA"), ImageParameters = "", ImageUrlReplaceable = "" });

     

    colorama.Add(

    new ImageInfo { ImageTitle = "CLR-1TI", ImageUrl = string.Format(location, "CLR-1TI"), ImageParameters = "", ImageUrlReplaceable = "" });

     

     

    //add colorama to our assets

     

     

     

     

    assets.Add(

    "CLR", colorama);

     

     

    //this will hold our colorama with grip information

     

     

     

     

     

    ObservableCollection<ImageInfo> coloramaGrip = new ObservableCollection<ImageInfo>();

     

    coloramaGrip.Add(

    new ImageInfo { ImageTitle = "CGR-2CR", ImageUrl = string.Format(location, "CGR-2CR"), ImageParameters = "", ImageUrlReplaceable = "" });

     

    coloramaGrip.Add(

    new ImageInfo { ImageTitle = "CGR-2CS", ImageUrl = string.Format(location, "CGR-2CS"), ImageParameters = "", ImageUrlReplaceable = "" });

     

    coloramaGrip.Add(

    new ImageInfo { ImageTitle = "CGR-2CT", ImageUrl = string.Format(location, "CGR-2CT"), ImageParameters = "", ImageUrlReplaceable = "" });

     

    coloramaGrip.Add(

    new ImageInfo { ImageTitle = "CGR-2CU", ImageUrl = string.Format(location, "CGR-2CU"), ImageParameters = "", ImageUrlReplaceable = "" });

     

    coloramaGrip.Add(

    new ImageInfo { ImageTitle = "CGR-2CV", ImageUrl = string.Format(location, "CGR-2CV"), ImageParameters = "", ImageUrlReplaceable = "" });

     

     

    //add colorama to our assets

     

     

     

     

    assets.Add(

    "CGR", coloramaGrip);

     

     

    //this will hold our colorama with grip information

     

     

     

     

     

    ObservableCollection<ImageInfo> colorstick = new ObservableCollection<ImageInfo>();

     

    colorstick.Add(

    new ImageInfo { ImageTitle = "CSK-1LG-1", ImageUrl = string.Format(location, "CSK-1LG-1"), ImageParameters = "", ImageUrlReplaceable = "" });

     

    colorstick.Add(

    new ImageInfo { ImageTitle = "CSK-2FB", ImageUrl = string.Format(location, "CSK-2FB"), ImageParameters = "", ImageUrlReplaceable = "" });

     

    colorstick.Add(

    new ImageInfo { ImageTitle = "CSK-3RG", ImageUrl = string.Format(location, "CSK-3RG"), ImageParameters = "", ImageUrlReplaceable = "" });

     

    colorstick.Add(

    new ImageInfo { ImageTitle = "CSK-3SJ", ImageUrl = string.Format(location, "CSK-3SJ"), ImageParameters = "", ImageUrlReplaceable = "" });

     

    colorstick.Add(

    new ImageInfo { ImageTitle = "CSK-8HJ", ImageUrl = string.Format(location, "CSK-8HJ"), ImageParameters = "", ImageUrlReplaceable = "" });

     

     

    //add colorama to our assets

     

     

     

     

    assets.Add(

    "CSK", colorstick);

     

    }

     

    /// <summary>

     

     

     

     

     

    /// Won't get called during testing phase

     

     

     

     

     

    /// </summary>

     

     

     

     

     

    /// <param name="sender"></param>

     

     

     

     

     

    /// <param name="e"></param>

     

     

     

     

     

    void OnGetAssetNamesByProductCompleted(object sender, GetAssetNamesByProductCompletedEventArgs e)

     

    {

     

    //we need to get the value from the event arguments

     

     

     

     

     

    ObservableCollection<ImageInfo> results = new ObservableCollection<ImageInfo>();

     

     

    //lest build the string information into somethig useful

     

     

     

     

     

    int limit = 0;

     

     

    foreach (string s in e.Result)

     

    {

     

    //build the scene 7 reference call

     

     

     

     

    results.Add(

    new ImageInfo {

     

    ImageTitle = s,

    ImageUrl =

    string.Format("http://is2.pens.com/is/image/NationalPen/{0}?wid=200", s),

     

    ImageUrlReplaceable =

    string.Format("http://is2.pens.com/is/image/NationalPen/{0}?wid=200", s),

     

    ImageParameters =

    "wid=200"

     

     

     

     

    });

     

    //limit the number of images for testing

     

     

     

     

     

    if (limit++ > 20) break;

     

    }

     

    //do some diagnostics here

     

     

     

     

    System.Diagnostics.

    Debug.WriteLine(string.Format(@"Number of Assets: {0}", e.Result.Count.ToString()));

     

     

    //add to the dictionary

     

     

     

     

    assets.Add((

    string)e.UserState, results);

     

     

    //set the datacontext for the current designs

     

     

     

     

     

    this.coverflowDesigns.DataContext = results;

     

     

    //if there were designs then find the halfway point and select it

     

     

     

     

     

    int select = -1;

     

     

    if (results.Count > 0)

     

    select = 0;

     

    this.coverflowDesigns.SelectedIndex = select;

     

    }

    }

     

    public class ImageInfo : INotifyPropertyChanged

     

     

     

     

    {

     

    public event PropertyChangedEventHandler PropertyChanged;

     

     

    private string imageTitle;

     

     

    private string imageUrl;

     

     

    private string imageUrlReplaceable;

     

     

    private string imageParameters;

     

     

    public string ImageTitle

     

    {

     

    get

     

     

     

     

    {

     

    return this.imageTitle;

     

    }

     

    set

     

     

     

     

    {

     

    if (value != this.imageTitle)

     

    {

     

    this.imageTitle = value;

     

     

    this.FirePropertyChanged("ImageTitle");

     

    }

    }

    }

     

    public string ImageUrl

     

    {

     

    get

     

     

     

     

    {

     

    return this.imageUrl;

     

    }

     

    set

     

     

     

     

    {

     

    if (value != this.imageUrl)

     

    {

     

    this.imageUrl = value;

     

     

    this.FirePropertyChanged("ImageUrl");

     

    }

    }

    }

     

    public string ImageUrlReplaceable

     

    {

     

    get

     

     

     

     

    {

     

    return this.imageUrlReplaceable;

     

    }

     

    set

     

     

     

     

    {

     

    if (value != this.imageUrlReplaceable)

     

    {

     

    this.imageUrlReplaceable = value;

     

     

    this.FirePropertyChanged("ImageUrlReplaceable");

     

    }

    }

    }

     

    public string ImageParameters

     

    {

     

    get

     

     

     

     

    {

     

    return this.imageParameters;

     

    }

     

    set

     

     

     

     

    {

     

    if (value != this.imageParameters)

     

    {

     

    this.imageParameters = value;

     

     

    this.FirePropertyChanged("ImageParameters");

     

    }

    }

    }

     

    private void FirePropertyChanged(string propertyName)

     

    {

     

    if (this.PropertyChanged != null)

     

    {

     

    this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));

     

    System.Diagnostics.

    Debug.WriteLine(string.Format(@"Property Changed: {0}", propertyName));

     

    }

    }

    }

    }

  5. Mike
    Mike avatar
    5 posts
    Member since:
    Jan 2007

    Posted 14 Mar 2009 Link to this post

    Sorry about that I didn't realize the editor would add the extra whitespace.
  6. Answer
    Miroslav Nedyalkov
    Admin
    Miroslav Nedyalkov avatar
    1718 posts

    Posted 16 Mar 2009 Link to this post

    Hello Mike,

    It seems it is a bug with the bindings of the CoverFlow item. We added this issue in our TODO list and we will fix it for the service pack.I have updated your points. For now you can use a workaround. What I suggest is to add the following after changing the Url of the image:
    this.scene7Vignettes[this.coverFlow.SelectedIndex] = this.coverFlow.SelectedItem as ImageInfo; 

    I tried this and it is working, but you shouldn't need it after the service pack.

    Regards,
    Miroslav Nedyalkov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  7. Mike
    Mike avatar
    5 posts
    Member since:
    Jan 2007

    Posted 20 Mar 2009 Link to this post

    Miroslav,
        Thanks. That work around allowed me to get the prototype up and running.

    Mike Boyken
  8. Miroslav Nedyalkov
    Admin
    Miroslav Nedyalkov avatar
    1718 posts

    Posted 20 Mar 2009 Link to this post

    Hi Mike,

    I'm glad the work-around helped. We will notify you when we fix the bug.

    Greetings,
    Miroslav Nedyalkov
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Back to Top
DevCraft banner