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
6 Answers, 1 is accepted
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.
Rank 1
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));
}
}
}
}
Rank 1
| this.scene7Vignettes[this.coverFlow.SelectedIndex] = this.coverFlow.SelectedItem as ImageInfo; |
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.
Rank 1
Thanks. That work around allowed me to get the prototype up and running.
Mike Boyken
Greetings,
Miroslav Nedyalkov
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.