WPF add images dynamically/programmatically to control

Question

Hey all I am new at WPF so I need a little bit of help here.

What I am wanting to do is dynamically add images to an already placed control on my MainWindow.

My code for the control is this:

<Controls:TransitionPresenter x:Name="_transContainer2"
                                  RestDuration="0:0:3"
                                  IsLooped="True"
                                  Width="200" Height="200"
                                  Transition="{StaticResource SlideTransition}" Margin="16,6,544,787" 
                                  >
        <Image x:Name="_image12"
               Source="Images/img1.png"
               Stretch="Fill" Width="200" Height="200" HorizontalAlignment="Left" />
        <Image x:Name="_image22"
               Source="Images/img2.png"
               Stretch="Fill" Width="200" Height="200" />
        <Image x:Name="_image32"
               Source="Images/img3.png"
               Stretch="Fill" Width="200" Height="200" HorizontalAlignment="Right" />
</Controls:TransitionPresenter>
<Button Content="btnAddImage" HorizontalAlignment="Left" Height="169" Margin="73,525,0,0" VerticalAlignment="Top" Width="180" Click="Button_Click"/>

and the Button_Click:

private void Button_Click(object sender, RoutedEventArgs e)
{
    //hum..
}

And this is the code behind for that mainWindow:

namespace flipwindow
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        private string _backItem = "_image1";
        private string _frontItem = "_image2";

        public MainWindow()
        {
            InitializeComponent();
            //Loaded += TransitionTester_Loaded;
            SwapFrontAndBack();
            //PlayCube();
        }

        private void TransitionTester_Loaded(object sender, RoutedEventArgs e)
        {
            _transContainer.TransitionCompleted += _transContainer_TransitionCompleted;
        }

        private void _transContainer_TransitionCompleted(object sender, EventArgs e)
        {
            SwapFrontAndBack();
        }

        private void SwapFrontAndBack()
        {
            string temp = _frontItem;
            _frontItem = _backItem;
            _backItem = temp;
        }

        private void PlayCube()
        {
            CubeTransition transition = Resources["CubeTransition"] as CubeTransition;
            //transition.Rotation = Direction.LeftToRight;
            //transition.Rotation = Direction.RightToLeft;
            //transition.Rotation = Direction.TopToBottom;
            transition.Rotation = Direction.BottomToTop;

            _transContainer.Transition = transition;
            _transContainer.ApplyTransition(_frontItem, _backItem);
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            _transContainer2.image
        }
    }
}

So that's pretty much all I've gotten too so far. Not really sure how to call that control from the code behind and add to the < Image tag...

I've did some searching but most of all I can find is just adding an image to a button or adding image to a database, etc...

Ideally I would like to just call the images from the code behind and not in the XAML code.

This is the trasContainer code:

using FluidKit.Controls;
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;

namespace flipwindow
{
    /// <summary>
    /// Interaction logic for TransitionTester.xaml
    /// </summary>
    public partial class TransitionTester : UserControl
    {
        public TransitionTester()
        {
            InitializeComponent();
            Loaded += TransitionTester_Loaded;
        }

        private string _backItem = "_image1";
        private string _frontItem = "_image2";

        private void TransitionTester_Loaded(object sender, RoutedEventArgs e)
        {
            _transContainer.TransitionCompleted += _transContainer_TransitionCompleted;
        }

        private void _transContainer_TransitionCompleted(object sender, EventArgs e)
        {
            SwapFrontAndBack();
        }

        private void SwitchImage(object sender, MouseButtonEventArgs args)
        {
            if (Keyboard.Modifiers == ModifierKeys.Control)
            {
                _transContainer.ApplyTransition("_image2", "_image1");
            }
        }

        private void PlayCube()
        {
            CubeTransition transition = Resources["CubeTransition"] as CubeTransition;
            transition.Rotation = Direction.LeftToRight;
            //transition.Rotation = Direction.RightToLeft;
            //transition.Rotation = Direction.TopToBottom;
            //transition.Rotation = Direction.BottomToTop;

            _transContainer.Transition = transition;
            _transContainer.ApplyTransition(_frontItem, _backItem);
        }

        private void PlayTransition(object sender, RoutedEventArgs args)
        {
            Button b = sender as Button;
            switch (b.Name)
            {
                case "_playCube":
                    PlayCube();
                    break;
                case "_playSlide":
                    PlaySlide();
                    break;
                case "_playFlip":
                    PlayFlip();
                    break;
            }
        }

        private void PlayFlip()
        {
            FlipTransition transition = Resources["FlipTransition"] as FlipTransition;
            transition.Rotation = Direction.LeftToRight;
            //transition.Rotation = Direction.RightToLeft;
            _transContainer.Transition = transition;
            _transContainer.ApplyTransition(_frontItem, _backItem);
        }

        private void PlaySlide()
        {
            SlideTransition transition = Resources["SlideTransition"] as SlideTransition;
            transition.Direction = Direction.LeftToRight;
            //transition.Direction = Direction.RightToLeft;

            _transContainer.Transition = transition;
            _transContainer.ApplyTransition(_frontItem, _backItem);
        }

        private void SwapFrontAndBack()
        {
            string temp = _frontItem;
            _frontItem = _backItem;
            _backItem = temp;
        }
    }
}

@Clemens sadly it does not have it.

StealthRT
– StealthRT

2017-12-12 16:18:10 +00:00
Commented Dec 12, 2017 at 16:18 — StealthRT
– StealthRT, Commented Dec 12, 2017 at 16:18
@Clemens Updated my OP with the transContainer code.

StealthRT
– StealthRT

2017-12-12 16:20:31 +00:00
Commented Dec 12, 2017 at 16:20 — StealthRT
– StealthRT, Commented Dec 12, 2017 at 16:20

Christian H. · Accepted Answer · 2017-12-12 20:06:43Z

2

It seems the FluidKit TransitionPresenter is an ItemsControl. Therefore you can add new items to it by adding controls to its items collection. As you want to add an Image control we create a new Image control and add it:

private void Button_Click(object sender, RoutedEventArgs e)
{
    _transContainer2.Items.Add(new Image
    {
        Source = new BitmapImage(new Uri("pathToYourImage")),
        Stretch = Stretch.Fill,
        Width = 200,
        Height = 200
    });
}

answered Dec 12, 2017 at 20:06

Christian H.

1013 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

StealthRT Over a year ago

Awesome! That did it! Thanks Christian!

Collectives™ on Stack Overflow

WPF add images dynamically/programmatically to control

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related