asked on

WPF Photo Album Browser and Slideshow

Hi ,

This is to be done in WPF , XAML etc

I am trying to build a Photo Album slideshow and browser

Some thing like this, http://www.request-response.com/blog/CategoryView,category,NET30WPF.aspx , but not exactly as is,
I am looking for thumbnails on the bottom of the page aligned horizontally , and the current photo I am viewing should be highlighted in the horizontal control(i dont know what to call this control) ,

You can imagine something like windows photo viewer(inside win xp) or yahoo messenger photo sharing view

Also it should have the capability to show slideshow.

Please give me a kick start , i would like to take it from there

Thank You

Bob Learned

What kind of "kick start" are you looking for?

CuteBug

Check this link

http://msdn.microsoft.com/en-us/library/ms771331.aspx

ctrlctrl

ASKER

Hi LearnedOne, I meant .. if any idea on how to start programming and any sample solutions etc

unmeshdave

this is how you can make horizontal scrolling. Moreover you can use image control to show a single image at a time for selected image of the listview.
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"></StackPanel>
</ItemsPanelTemplate>
</ListView.ItemsPanel>

For, slide show you can use timer.

ctrlctrl

ASKER

unmeshdave , Thanks a lot.... Can you provide me some more of the implementation.. I am new to WPF, Well Ill try my best to finish it.

Thank You

unmeshdave

well, I can not provide full implementation as it is against the purpose of this site. Use the hints which I provided. You can start learning WPF faster with following website.
http://www.wpftutorial.net/
Another example is already exist on this MSDN link
http://msdn.microsoft.com/en-us/library/ms771331.aspx
which is provided by CuteBug.

ctrlctrl

ASKER

Hi unmesh dave.. .I am confused on how to implement the items panel template.. Can you gimme a brief overview

ctrlctrl

ASKER

Hi dave,

It worked,,,

I have couple more questions.. Ill post in few mins

ctrlctrl

ASKER

Hi unmeshdave

In my following code...

withing my itemtemplate

I want the image not inherit the opacity property of the listview control , so basically the listview opacity will be 0.8 and the image will be 1

But When I do that , The image still inherits the opacity, Please let me know what to do

<Grid Height="Auto" Width="Auto">
        <Grid.RowDefinitions>
            <RowDefinition Height="0.2*"/>
            <RowDefinition/>
            <RowDefinition Height="0.3*"/>
            <RowDefinition Height="0.2*"/>
        </Grid.RowDefinitions>
        <Image Grid.RowSpan="3" Grid.Row="0" Source="{Binding ElementName=ImageList,Path=SelectedItem.Image}">
 
        </Image>
        <ListView Grid.Row="2" ItemsSource="{Binding AllImages}" Name="ImageList" Background="Gray" Opacity="0.7" ScrollViewer.HorizontalScrollBarVisibility="Hidden" ScrollViewer.VerticalScrollBarVisibility="Hidden" >
            <ListView.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal"></StackPanel>
                </ItemsPanelTemplate>
            </ListView.ItemsPanel>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <StackPanel Opacity="1">
                        <Image Source="{Binding Image}" Width="100" Height="100"/>
                    </StackPanel>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
 
        <StackPanel Grid.Row="3" Background="Black">
 
        </StackPanel>
        <StackPanel Grid.Row="0" Background="Gray" Opacity="0.7" >
            <TextBlock  Text="Awesome" />
        </StackPanel>
 
    </Grid>

Open in new window

ASKER CERTIFIED SOLUTION

unmeshdave

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ctrlctrl

ASKER

Hi Also , Another question...

How can I achieve this

In the ListView..
There should not be more than 5 thumbnails visible at a time on the screen
The selected image among the thumbnails should be in the center of the list and must have a bordered focus.
The focus should not move, When I scroll from left to right only the next image should fill the center image but the focus should not move.

Please let me know how to achieve the above

ctrlctrl

ASKER

Hi unmeshdave,

Yes I tried that, yet it doesnt work...

Thank You

ctrlctrl

ASKER

Hi unmeshdave, If you want to try the solution here is both the xaml and cs code...

Also , load some images in the MyPictures folder

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
 
namespace MyPhotoBrowser
{
    /// <summary>
    /// Interaction logic for Window1.xaml
    /// </summary>
    public partial class Window1 : System.Windows.Window
    {
 
        public Window1()
        {
            InitializeComponent();
            DataContext = this;
        }
 
        public class MyImage
        {
            private ImageSource _image;
            private string _name;
 
            public MyImage(ImageSource image, string name)
            {
                _image = image;
                _name = name;
            }
 
            public override string ToString()
            {
                return _name;
            }
 
            public ImageSource Image { get { return _image; } }
            public string Name { get { return _name; } }
        }
 
        public List<MyImage> AllImages
        {
            get
            {
                List<MyImage> result = new List<MyImage>();
                foreach (string filename in
                    System.IO.Directory.GetFiles(
                    Environment.GetFolderPath(
                    Environment.SpecialFolder.MyPictures)))
                {
                    try
                    {
                        result.Add(
                            new MyImage(
                            new BitmapImage(
                            new Uri(filename)),
                            System.IO.Path.GetFileNameWithoutExtension(filename)));
                    }
                    catch { }
                }
                return result;
            }
        }
 
    }
}
 
 
 
 
XAMLXAMLXAMLXAMLXAMLXAMLXAMLXAMLXAMLXAMLXAMLXAML
 
 
<Window x:Class="MyPhotoBrowser.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
   
    <Grid Height="Auto" Width="Auto">
        <Grid.RowDefinitions>
            <RowDefinition Height="0.2*"/>
            <RowDefinition/>
            <RowDefinition Height="0.3*"/>
            <RowDefinition Height="0.2*"/>
        </Grid.RowDefinitions>
        <Image Grid.RowSpan="3" Grid.Row="0" Source="{Binding ElementName=ImageList,Path=SelectedItem.Image}">
 
        </Image>
        <ListView Grid.Row="2" ItemsSource="{Binding AllImages}" Name="ImageList" Background="Gray" Opacity="0.7" ScrollViewer.HorizontalScrollBarVisibility="Hidden" ScrollViewer.VerticalScrollBarVisibility="Hidden" >
            <ListView.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal"></StackPanel>
                </ItemsPanelTemplate>
            </ListView.ItemsPanel>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <StackPanel Opacity="1">
                        <Image Source="{Binding Image}" Width="100" Height="100" Opacity="1"/>
                    </StackPanel>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
 
        <StackPanel Grid.Row="3" Background="Black">
 
        </StackPanel>
        <StackPanel Grid.Row="0" Background="Gray" Opacity="0.7" >
            <TextBlock  Text="Awesome" />
        </StackPanel>
 
    </Grid>
</Window>

Open in new window

unmeshdave

ok one by one.
first of all for selected item border, you can use selecteditemtemplate of listivew.
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.listview.selecteditemtemplate.aspx
second, if your window is not resizable, you can calculate width of images by stackpanel's width and number of images you want to display. If it is resizable then there are other questions to follow. :-)

ctrlctrl

ASKER

Yes... the Window ht and width are set to Auto...

Basically I play this on a TV monitor... So whatever TV Screen size is , the window should fit accordingly

unmeshdave

thats the resolution. I am talking about resizing manually. like from border u increase or decrease width or height or both.

ctrlctrl

ASKER

No, We do not resize manually

unmeshdave

if you keep the size of your application fix(like always full size window) then, its very easy to implement fix width for image I said above. say you want to display 5 images, then you can divide stackpanel width by 5 so you will get width of image. u can also adjust some margin by calculation.

ctrlctrl

ASKER

Ok Ill try that

ctrlctrl

ASKER

Hi Unmeshdave, Sorry for the late response,

For your comment "then you can divide stackpanel width by 5 so you will get width of image. u can also adjust some margin by calculation." , How can you achieve this in xaml???

Thanks

unmeshdave

calculation can not be done in xaml.