Sie nicht einmal wissen, wie man zu lösen beginnen ist das Problem

Question

Hier wird das Mock-up ein Kunde mich gebeten zu erstellen:

Hier ist, was ich in der tatsächlichen Software haben:

Das Problem ist, dass ich in der Lage sein muss, ein Bild aus dem Steuerelement unten zu löschen. Ich weiß nicht, wie ich dieses Problem angehen soll. Irgendwelche Hinweise?

Hier ist der Code an die Steuer benutzerdefinierte ich gemacht:

using System; 
using System.Collections.Generic; 
using System.ComponentModel; 
using System.Drawing; 
using System.Data; 
using System.Linq; 
using System.Text; 
using System.Windows.Forms; 

namespace WebServiceScanner 
{ 
    public partial class selectablePicture : UserControl 
    { 
     public selectablePicture(Image image) 
     { 
      InitializeComponent(); 
      ptbImage.BackgroundImage = image; 
      ptbImage.BackgroundImageLayout = ImageLayout.Zoom; 
     } 

     public Image GetImage() 
     { 
      return ptbImage.BackgroundImage; 
     } 

     public bool IsSelected() 
     { 
      return chkSelected.Checked; 
     } 

     public void DisableCheckbox() 
     { 
      this.chkSelected.Enabled = false; 
     } 

     private void ptbImage_Click(object sender, EventArgs e) 
     { 
      SelectControl(); 
      ptbImage.Focus(); 
      ToggleCheckBox();    
     } 

     private void selectablePicture_Click(object sender, EventArgs e) 
     { 
      SelectControl(); 
      this.Focus(); 
      ToggleCheckBox();    
     } 

     private void ToggleCheckBox() 
     { 
      if (!chkSelected.Enabled == false) 
      { 
       if (chkSelected.Checked) 
       { 
        chkSelected.Checked = false; 
       } 
       else 
       { 
        chkSelected.Checked = true; 
       } 
      }    
     } 

     private void chkSelected_Click(object sender, EventArgs e) 
     { 
      SelectControl(); 
      chkSelected.Focus(); 
     } 

     private void SelectControl() 
     { 
      if (!chkSelected.Enabled == false) 
      { 
       this.BackColor = Color.FromArgb(89, 168, 248); 
      }    
     } 

     private void chkSelected_Leave(object sender, EventArgs e) 
     { 
      DeSelectControl(); 
     } 

     private void ptbImage_Leave(object sender, EventArgs e) 
     { 
      DeSelectControl(); 
     } 

     private void selectablePicture_Leave(object sender, EventArgs e) 
     { 
      DeSelectControl(); 
     } 

     private void DeSelectControl() 
     { 
      //If none of the controls inside the usercontrol have focus, set this control to white. 
      if (!chkSelected.Enabled == false) 
      { 
       if (!this.Focused && !this.ptbImage.Focused && !this.chkSelected.Focused) 
       { 
        this.BackColor = Color.White; 
       } 
      }    
     } 
    } 
} 

Und hier ist, wie ich es verwenden:

using System; 
using System.Collections.Generic; 
using System.ComponentModel; 
using System.Data; 
using System.Drawing; 
using System.Linq; 
using System.Text; 
using System.Windows.Forms; 

namespace WebServiceScanner 
{ 
    public partial class MainForm : Form 
    { 
     int pictureXPosition = 0; 
     List<selectablePicture> Images; 

     public MainForm() 
     { 
      InitializeComponent(); 
      ptbNewestPicture.BackgroundImageLayout = ImageLayout.Zoom; 
      Images = new List<selectablePicture>(); 
     } 

     private void button1_Click(object sender, EventArgs e) 
     { 
      LoadImageFromScanner(); 
     } 

     private void scanToolStripMenuItem_Click(object sender, EventArgs e) 
     { 
      LoadImageFromScanner(); 
     } 

     private void scanBatchToolStripMenuItem_Click(object sender, EventArgs e) 
     { 
      LoadBatchImagesFromScanner(); 
     } 

     private void btnScanBatch_Click(object sender, EventArgs e) 
     { 
      LoadBatchImagesFromScanner(); 
     } 

     private void connectionSettingsToolStripMenuItem_Click(object sender, EventArgs e) 
     { 
      ShowConfigurationForm(); 
     } 


     private void LoadImageFromScanner() 
     {    
      selectablePicture picture = new selectablePicture(Image.FromFile(@"C:\Users\Public\Pictures\Sample Pictures\Penguins.jpg")); 
      ptbNewestPicture.BackgroundImage = picture.GetImage(); 

      picture.Location = new Point(pictureXPosition + panel1.AutoScrollPosition.X, 0); 
      panel1.Controls.Add(picture);    
      pictureXPosition += 130; 
     } 

     private void LoadBatchImagesFromScanner() 
     { 
      throw new NotImplementedException(); 
     } 

     private void ShowConfigurationForm() 
     { 
      ConnectionSettingsForm connectionConfig = new ConnectionSettingsForm(); 
      connectionConfig.ShowDialog(); 
     } 

     private void btnDeleteSelected_Click(object sender, EventArgs e) 
     { 
      DeleteSelectedPictures(); 
     } 

     private void DeleteSelectedPictures() 
     { 
      foreach (Control c in panel1.Controls) 
      { 
       if (((selectablePicture)c).IsSelected()) 
       { 
        DisablePicture(c); 
        Images.Remove((selectablePicture)c); 
       } 
      } 
     } 

     private void DisablePicture(Control c) 
     { 
      c.BackColor = Color.Gray; 
      ((selectablePicture)c).DisableCheckbox(); 
     } 
    } 
} 

Ich dachte über eine Liste meiner Benutzerkontrolle zu erhalten und neu zu zeichnen das gesamte Liste jedes Mal, wenn sich etwas ändert, aber das ist nicht gut, denn was passiert, wenn es viele Bilder gibt?

Irgendeine Anleitung?

Welche Schritte muss ich ausführen, wenn ich Bilder ziehen und neu anordnen möchte? Vielen Dank!

Answer 1

Eine Lösung wäre, sie nicht als Steuerelemente darzustellen, sondern ein Steuerelement zu erstellen, das die Miniaturbilder von links nach rechts rendert (das Rendern des ausgewählten Bilds ändert sich je nachdem, ob es ausgewählt ist oder nicht).

Löschen eines Bildes ist jetzt trivial, es ist nur das, gelöscht. Dann müssen Sie sich nicht mehr darum kümmern, es ist nicht mehr in Ihrer Renderliste. Keine Kontrollentfernung erforderlich.

Der Overhead dieses benutzerdefinierten Steuerelements wird geringer sein (1 Steuerelement vs 'N' Steuerelemente für jedes Bild).

Es gibt viele andere Vorteile, die Sie jetzt leicht tun können, wie das Anwenden von Effekten auf Bilder in der Nähe, etc etc .. Zugegeben, dies könnte mit separaten Kontrollen getan werden, aber auf diese Weise ist es viel weniger Ballschmerzen.

Einige Metrics

N  = Total number of images 
T_WIDTH = Thumbnail width 
MARGIN_W = Margin you want either side of the thumbnail 
CELL_W = T_WIDTH + (MARGIN_W * 2) (Total width of a cell that contains a thumbnail) 

// Pseudo code here!!! 
Scrollbar.Width = CELL_W * N 
Scrollbar.PageWidth = Control.ClientWidth/CELL_W 

Bildindex bei

Scrollbar.Pos/CELL_W 

Rendering starten

Denken Sie daran, die tatsächliche x-Lage zu versetzen, wo Sie auf Rendering auf Basis beginnen, wo diese Scrollbar Position fällt in CELL_W .

Answer 2

Verwenden Sie eine FlowControlPanel statt einer einfachen Panel. Dann können Sie Steuerelemente hinzufügen und entfernen und sie werden sich selbst ausrichten.