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

Answer 1

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