• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 12640
  • Last Modified:

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
0
ctrlctrl
Asked:
ctrlctrl
1 Solution
 
Bob LearnedCommented:
What kind of "kick start" are you looking for?
0
 
CuteBugCommented:
0
 
ctrlctrlAuthor Commented:
Hi LearnedOne, I meant .. if any idea on how to start programming and any sample solutions etc
0
Granular recovery for Microsoft Exchange

With Veeam Explorer for Microsoft Exchange you can choose the Exchange Servers and restore points you’re interested in, and Veeam Explorer will present the contents of those mailbox stores for browsing, searching and exporting.

 
unmeshdaveCommented:
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.
0
 
ctrlctrlAuthor Commented:
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
0
 
unmeshdaveCommented:
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.
0
 
ctrlctrlAuthor Commented:
Hi unmesh dave.. .I am confused on how to implement the items panel template.. Can you gimme a brief overview
0
 
ctrlctrlAuthor Commented:
Hi dave,

It worked,,,

I have couple more questions.. Ill post in few mins
0
 
ctrlctrlAuthor Commented:
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

0
 
unmeshdaveCommented:
Have you tried this? I have added Opacity to Image tag.
            <ListView.ItemTemplate>
                <DataTemplate>
                    <StackPanel Opacity="1">
                        <Image Source="{Binding Image}" Width="100" Height="100" Opacity="1"/>
                    </StackPanel>
                </DataTemplate>
            </ListView.ItemTemplate>

Open in new window

0
 
ctrlctrlAuthor Commented:
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
0
 
ctrlctrlAuthor Commented:
Hi unmeshdave,

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

Thank You
0
 
ctrlctrlAuthor Commented:
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

0
 
unmeshdaveCommented:
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. :-)
0
 
ctrlctrlAuthor Commented:
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
0
 
unmeshdaveCommented:
thats the resolution. I am talking about resizing manually. like from border u increase or decrease width or height or both.
0
 
ctrlctrlAuthor Commented:
No, We do not resize manually
0
 
unmeshdaveCommented:
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.
0
 
ctrlctrlAuthor Commented:
Ok Ill try that
0
 
ctrlctrlAuthor Commented:
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
0
 
unmeshdaveCommented:
calculation can not be done in xaml.
0

Featured Post

Free recovery tool for Microsoft Active Directory

Veeam Explorer for Microsoft Active Directory provides fast and reliable object-level recovery for Active Directory from a single-pass, agentless backup or storage snapshot — without the need to restore an entire virtual machine or use third-party tools.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now