Slideshow

[James_43]

Hi there, I've created a new C# WPF project. The first MainWindow displays a listbox of images within a folder and displays them inside a larger image object.

I am trying to get Window1 to open a fullscreen version of the selected image, that changes depending on what image is currently selected on MainWindow.

I'm very very new to this, but here is my code so far:

MainWindow.xaml

<Window x:Class="Image_Viewer.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Image_Viewer"
        mc:Ignorable="d"
        Title="MainWindow">

        <Window.Resources>
        <DataTemplate x:Key="MyImageTemplate">
            <StackPanel>
                <Image Source="{Binding Image}" Width="100" Height="100"/>
                <TextBlock Text="{Binding Name}" Width="100"/>
            </StackPanel>
        </DataTemplate>
    </Window.Resources>

    <DockPanel>

        <Menu Height="22" Name="menu1" Width="Auto" Margin="10, 10, 5, 5" Background="Chocolate" DockPanel.Dock="Top">
            <MenuItem Header="_File">
                <MenuItem Header="_Exit" Click="Application_Exit"/>
                <Separator/>
                <MenuItem Header="_Fullscreen" Click="Fullscreen"/>
            </MenuItem>
        </Menu>

        <ListBox
            Name="ImageList"
            DockPanel.Dock="Left"
            ItemsSource="{Binding AllImages}"
            ItemTemplate="{StaticResource MyImageTemplate}"
            x:FieldModifier="public"/>

        <Image Source="{Binding ElementName=ImageList,Path=SelectedItem.Image}"/>

    </DockPanel>
</Window>

MainWindow.xaml.cs

public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            DataContext = this;
        }

        //Menu Bar

        private void Application_Exit(object sender, RoutedEventArgs e)
        {
            Application.Current.Shutdown();
        }

        private void Fullscreen(object sender, RoutedEventArgs e)
        {
            Window1 secondWindow = new Window1();
            secondWindow.Show();
        }

        //Images

         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;
            }
        }

    }

So, I assume what I need to have is in the Window1.xaml is `<Image Name="FullScreen" Source="{Binding ElementName=ImageList,Path=SelectedItem.Image}"/>

But, I don't know how I can pass the selected image to this window, or cause it to update once it changes in MainWindow. Thanks in advance for your advice! :)

[JOSheaIV]

Have you ever looked at using animations? I will admit I have only dabbled in WPFs myself, but have used them to fade images in and out. I did a quick google seach for it and found this

http://stackoverflow.com/questions/12551823/wpf-animate-width-and-height-with-code-behind-zoom-in

But you want to look at something like a DoubleAnimation.

Sorry I can't offer more, I haven't gotten into WPF much myself, been meaning to, just haven't found a need

[James_43]

Yeah I've made some progress on this now. DoubleAnimation is fading in the image, and I'm using a variable defined in app.xaml.cs to pass the image path between the MainForm and the FullscreenForm, with a timer to keep track of the variable changes pushed by MainForm as the ListBox moves down.

This may not be the best way to go about this, but it seems to work quite well at the moment.

[JOSheaIV]

That's good to hear. You'll want to experiment with it more, that's how I learned a little more about what the animations could do (I still need to learn more for a future project)