CoverFlow image background for variable sized images

I am creating images for user-defined forms using XAML that I want to display in a CoverFlow.  These images can be almost any size. 

I noticed that after I write the images to files and load the files into the CoverFlow example, the coverflow fills in with black around the bitmap if it is smaller than the ItemHeight and ItemWidth (see attached jpg).  Is there any way to set the CoverFlowItem background to be White?

Also, can you show me how to bind the CoverFlow ItemSource to a list of bitmaps/bitmapsource/renderedbitmaps so that I will not need to write the images as files?

Thanks in advance,

John Fingerlin

Hello John

Take a look at the CoverFlowExplorer sample in the samples solution. This sample displays a CoverFlow with an ItemsSource binding to the name of a directory. A converter then looks through this directory and generates a list of image source strings based on the images found in the directory. You could either use this approach, or you could set the ItemsSource to be a binding to a list of file names. The CoverFlow then uses an ItemTemplate which displays an Image based on the images source strings. This item template is found near the top of the MainWindow.xaml file and is called "ImageFromFile". Let me know if this does not address the binding solution that you want.

To change the background color of the items, use the following style to set the ItemContainerStyle property of the CoverFlow:

<Style x:Key="ItemContainerStyle" TargetType="{x:Type ms:CoverFlowItem}">
    <Setter Property="Background" Value="White" />
</Style>

Let us know how it goes.
 - Jason 

Jason,

Thanks for the information.   Here are the answers.

1. I am trying to Bind to a list of Images in memory rather than images in files--it seems more reliable to me.

Given the pseudo code:

public BindingList<BitmapSource> resultImages;
Canvas target = new Canvas();

for(i=0, i< numberOfForms; i++)
{
 // code omitted to render XAML into target canvas
 // it works
 BitmapSource newForm = CaptureScreen(target, 96d, 96d);
 resultImages.Add(newForm);
}

I want to bind the Coverflow ItemSource to the "resultImages" list using something like:
 ItemsSource="{Binding Path=resultImages}"
and omitting the ItemTemplate.

Unfortunately no images display in the Coverflow.  Is it possible to bind Coverflow.ItemSource to a list of BitmapSource?

2. I added the code:
       <Style x:Key="ItemContainerStyle" TargetType="{x:Type ms:CoverFlowItem}">
            <Setter Property="Background" Value="White" />
        </Style>

 to the window resources in the window with the Coverflow but it did not make any difference. 

There is a workaround.  By increasing the size of the background canvas, I can fill in with white.
Unfortunately that means I must fix the size of the canvas which I wanted to avoid.

Thanks,

John

Hello John

1. Since BitmapSource extends ImageSource You should be able to use the same technique I mentioned. The ItemsSource can be a binding to your list of BitmapSource objects. Then use an item template that displays the BitmapSource as a WPF image. Set the ItemTemplate property to be this:

<DataTemplate x:Key="ItemTemplate">
    <Image Source="{Binding}" />
</DataTemplate>

Is there any particular reason why you need to omit the item template?

2. You also need to use that item container style to set the CoverFlow.ItemContainerStyle property to apply the white background to the items.

Lets us know how it goes
 - Jason 

 Hey Jason,

1. I finally got this to work by binding in the code behind:

Binding binding = new Binding();
binding.Source = resultImages;
CoverFlow1.SetBinding(CoverFlow.ItemsSourceProperty, binding);

On the CoverFlow object XAML, I had tried using:   ItemsSource="{Binding Path=resultImages, Mode=TwoWay}"    but the images never appeared.

2. Your tip worked.

Thank you for your help,

John

Good to hear you got it all working.

 - Jason