How to Change Panels Position in WPF ItemComtrols?

Question

My WPF Application code generates panels on function call defined in .cs file. There is ItemControl used in code to generates these Panels . I want to move Panels Up or Down.

Example: There are three Panels PanelA, PanelB, PanelC now now there is button with each panel to move it up. Now i selected PanleB. i click on that button and PanelB will move up now they should be like PanelB, PanelA, PanelC

.XAML File:

<ItemsControl x:Name="lstItems" >
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Vertical">
                <TextBox x:Name="txtText" Width="300" Height="100" Text="{Binding Text;, Mode=TwoWay}" FontSize="{Binding FontSize, Mode=OneWay}" />
                <Slider Minimum="10" Maximum="30" Value="{Binding FontSize, Mode=TwoWay}" />
            </StackPanel>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

.CS File:

  public partial class MainWindow : Window
  {

  protected ObservableCollection<MyPanel> texts = new ObservableCollection<MyPanel>();

public MainWindow()
{
    InitializeComponent();

    texts.Add(new MyPanel() { Text = "Test 1" });
    texts.Add(new MyPanel() { Text = "Test 2" });

    lstItems.ItemsSource = texts;
   }
}

 public class MyPanel : INotifyPropertyChanged
{
  private string _id;
  private string _text;
  private double _fontSize = 10;

  public string Id
  {
      get { return _id; }
     set
    {
        if (value != _id)
        {
            _id = value;
            NotifyPropertyChanged();
         }
     }
 }
public string Text
{
    get { return _text; }
    set
     {
         if (value != _text)
         {
             _text = value;
             NotifyPropertyChanged();
         }
     }
 }
 public double FontSize
{
    get { return _fontSize; }
    set
    {
        if (value != _fontSize)
        {
            _fontSize = value;
            NotifyPropertyChanged();
        }
    }
}

public event PropertyChangedEventHandler PropertyChanged;

protected void NotifyPropertyChanged(String propertyName = "")
{
    if (PropertyChanged != null)
    {
        PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }
}

}

EDIT: XAML FILE:

   <ItemsControl x:Name="lstItemsClassM" >
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Vertical">
                <ComboBox x:Name="cboOccupation" IsEditable="False"  HorizontalAlignment="Left"
        Text="{Binding Path=Alignment, Mode=TwoWay}"
        Margin="4" Width="140">
                        <ComboBoxItem>Right</ComboBoxItem>
                        <ComboBoxItem>Left</ComboBoxItem>

                    </ComboBox>
                    <Button Content="Move Up" Click="Button_Click_1" Tag="{Binding PKId}"/>
                    <Button Content="{Binding Alignment, Mode=TwoWay}" Click="Button_Click" Tag="{Binding PKId}" SourceUpdated="Button_SourceUpdated" />
                    <TextBox x:Name="txtText" Width="300" Height="100" Text="{Binding Text;, Mode=TwoWay}" FontSize="{Binding FontSize, Mode=OneWay}" TextAlignment="{Binding Alignment, Mode=OneWay}"  />
                    <Slider Minimum="10" Maximum="30" Value="{Binding FontSize, Mode=TwoWay}" />
                </StackPanel>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>

.CS FILE:

 public partial class Window2 : Window
{
    protected ObservableCollection<ClassM> texts = new ObservableCollection<ClassM>();
    int dv;
    public Window2()
    {
        InitializeComponent();
        dv=1;
        texts.Add(new ClassM() { PKId=dv, Text = "Test 1" });
        dv=2;
        texts.Add(new ClassM() { PKId=dv, Text = "Test 2" });

        lstItemsClassM.ItemsSource = texts;
    }

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        var myValue = ((Button)sender).Tag;
            foreach (var f in texts.ToList())
            {
                if (f.PKId.ToString() == myValue.ToString())
                {
                    f._alignment = "Right";
                    MessageBox.Show(f._alignment);
                }
            }

    }

    private void Button_SourceUpdated(object sender, DataTransferEventArgs e)
    {
        var myValue = ((Button)sender).Tag;
        foreach (var f in texts.ToList())
        {
            if (f.PKId.ToString() == myValue.ToString())
            {
                f._alignment = "Right";
                MessageBox.Show(f._alignment);
            }
        }
    }

    private void Button_Click_1(object sender, RoutedEventArgs e)
    {
        var myValue = ((Button)sender).Tag;
       foreach (var f in texts.ToList())
        {
            if (f.PKId.ToString() == myValue.ToString())
            {
                int s = f.PKId + 1;
                texts.Move(f.PKId , s);

                MessageBox.Show(f.PKId +"  &&&&& " + s );
            }
        }

    }


}


public class ClassM : INotifyPropertyChanged
{
    private string _id;
    private int _pkid;
    private string _text;
    private double _fontSize = 10;
    public bool _isChecked { get; set; }
    public string _alignment="Left";

    public int PKId
    {
        get { return _pkid; }
        set
        {
            if (value != _pkid)
            {
                _pkid = value;
                NotifyPropertyChanged();
            }
        }
    }
    public string Id
    {
        get { return _id; }
        set
        {
            if (value != _id)
            {
                _id = value;
                NotifyPropertyChanged();
            }
        }
    }

    public bool IsChecked
    {
        get { return _isChecked; }
        set
        {
            if (value != _isChecked)
            {
                _isChecked = value;
                NotifyPropertyChanged();
            }
        }
    }
    public string Text
    {
        get { return _text; }
        set
        {
            if (value != _text)
            {
                _text = value;
                NotifyPropertyChanged();
            }
        }
    }
    public double FontSize
    {
        get { return _fontSize; }
        set
        {
            if (value != _fontSize)
            {
                _fontSize = value;
                NotifyPropertyChanged();
            }
        }
    }
    public string Alignment
    {
        get { return _alignment; }
        set
        {
            if (value != _alignment)
            {
                _alignment = value;
                NotifyPropertyChanged();
            }
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected void NotifyPropertyChanged(String propertyName = "")
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

}

Answer 1

Create the Command in your MainWindow, say MovePanelCommand and bind the Button commmand to this command and send the current item as the command parameter

<StackPanel Orientation="Vertical">
                <TextBox x:Name="txtText" Width="300" Height="100" Text="{Binding Text;, Mode=TwoWay}" FontSize="{Binding FontSize, Mode=OneWay}" />
                <Slider Minimum="10" Maximum="30" Value="{Binding FontSize, Mode=TwoWay}" />
                <Button Command="{Binding DataContext.MovePanelCommand, RelativeSource={RelativeSource AncestorType={x:Type Window}}}" CommandParamter="{Binding}"/>
 </StackPanel>

Now in command handler you will get your Panel you want to move up

private void MovePanelCommandHandler(object param)
{
    MyPanel panel = param as MyPanel;
  // Just move the panel one index up with validation if it is a first panel
}

Answer 2

Use the ObservableCollection's Move method:

private void Swap(MyPanel a, MyPanel b)
{
    var indexA = texts.IndexOf(a);
    var indexB = texts.IndexOf(b);

    texts.Move(a,b);
}