C# WPF moving the position of the Item elements in the ListView

  Kiến thức lập trình

A ListView control has been created in XAML, in which I want to arbitrarily move its Item elements throughout the control (we are talking about the red squares on the screenshot, I want to drag them around the window), the collection of which is assigned in the code.cs
The bottom line is that moving doesn’t work, the squares seem to stick, how do I get them to move?
I want to move not just some canvas, but listview elements, to be able to use the event handler – the selected element (to receive data of what I selected)

XAML:

<ListView x:Name="ItemsControlCollection" Margin="0,162,0,0" SelectionMode="single" SelectionChanged="ItemsControlCollection_SelectionChanged">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<Canvas IsItemsHost="True"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="Canvas.Left" Value="{Binding X}" />
<Setter Property="Canvas.Top" Value="{Binding Y}" />
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Canvas Width="50" Height="50" Background="#FFD82B2B" MouseDown="FF_MouseDown" MouseMove="FF_MouseMove" MouseUp="FF_MouseUp"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ListView>

.cs:

The list of elements for the listview itself is defined in this way:

public class ItemsControlCollections
{
public String Title { get; set; }
public float X { get; set; }
public float Y { get; set; }
public List<ItemsControlCollections> _ItemsControlCollections = new List<ItemsControlCollections>();
}

I’m initializing a new instance of the class:

public partial class MainWindow : Window
{
List<ItemsControlCollections> ObjectItems = new ItemsControlCollections()._ItemsControlCollections;


And when loading the window, you have to clear the collection, otherwise an error

private void Window_Loaded(object sender, RoutedEventArgs e)
{
ItemsControlCollection.Items.Clear();

Next, I click the button to take the data from the database and write it to the ObjectItems.Add list item object. and make this ObjectItems the data source:

using (SqlDataReader rdr = commandItemXY.ExecuteReader())
{
while (rdr.Read())
{
//float XValue, YValue;
//if (Convert.ToInt32(rdr["X"]) != null) { XValue = Convert.ToInt32(rdr["X"]); } else { XValue = 0; }
//if (Convert.ToInt32(rdr["Y"]) != null) { YValue = Convert.ToInt32(rdr["Y"]); } else { YValue = 0; }
ObjectItems.Add(new ItemsControlCollections() { Title = rdr["id_Item"].ToString(), X = Convert.ToInt32(rdr["X"]), Y = Convert.ToInt32(rdr["Y"]) });
}
}

ItemsControlCollection.ItemsSource = ObjectItems;

Then I found on the Internet moving elements that work well for canvas in the ItemControl control, but this element does not allow me to get information about the selected element.
Here is the code for moving:

int countZ = 0;
bool _canMove = false;
Point _offsetPoint = new Point(0, 0);
private void FF_MouseDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
_canMove = true;
// The movable element will always be on top.
countZ++;
// Universal casting for all tested elements.
FrameworkElement ffElement = (FrameworkElement)sender;
Grid.SetZIndex(ffElement, countZ);

Point posCursor = e.MouseDevice.GetPosition(this);
/*_offsetPoint =
new Point(posCursor.X - ffElement.Margin.Left, posCursor.Y - ffElement.Margin.Top);
*/
_offsetPoint = new Point(
posCursor.X - Canvas.GetLeft(ffElement),
posCursor.Y - Canvas.GetTop(ffElement)
);

// To keep the cursor on the shape
// when the mouse moves sharply.
// Capture the device with the mouse.
e.MouseDevice.Capture(ffElement);
}

private void FF_MouseMove(object sender, System.Windows.Input.MouseEventArgs e)
{
if (_canMove == true)
{
FrameworkElement ffElement = (FrameworkElement)sender;

if (e.MouseDevice.Captured == ffElement)
{
Point p = e.MouseDevice.GetPosition(this);

//Thickness margin = new Thickness(p.X - _offsetPoint.X, p.Y - _offsetPoint.Y, 0, 0);
//ffElement.Margin = margin;

Canvas.SetLeft(ffElement, p.X - _offsetPoint.X);
//ObjectItems[ItemsControlCollection.SelectedIndex].X = (float)(p.X - _offsetPoint.X);
Canvas.SetTop(ffElement, p.Y - _offsetPoint.Y);
//ObjectItems[ItemsControlCollection.SelectedIndex].Y = (float)(p.Y - _offsetPoint.Y);
}
}
}

private void FF_MouseUp(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
_canMove = false;
e.MouseDevice.Capture(null);
}

#endregion

private void ItemsControlCollection_SelectionChanged(object sender, SelectionChangedEventArgs e)
{

}

enter image description here

New contributor

POLITER is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

1

LEAVE A COMMENT