First of all, read data from a xml file. It can be something like this;
<game>
<champion id = 1 name = "Ahri" Health = 460>
<Skins id = 1 name = "A Ahri"/>
<Skins id = 2 name = "B Ahri"/>
<Skins id = 3 name = "C Ahri"/>
<Skins id = 4 name = "D Ahri"/>
</champion >
<champion id = 2 name = "Akali" Health = 550>
<Skins id = 1 name = "A Akali"/>
<Skins id = 2 name = "B Akali"/>
<Skins id = 3 name = "C Akali"/>
<Skins id = 4 name = "D Akali"/>
</champion >
</game>
Put all those character images into a specific folder, like "Char Images". I know character names are unique, you can name images by char name.
+ Now read this xml, you have an enumerable XDocument variable.
+ Put a flowlayoutpanel docked into your "Select champion" tab.
+ Foreach XElement in this XDocument
+ I don't know what kind of operations you are doing with picturebox of champs but you'd rather make a usercontrol instead of it. Populate this usercontrol with XElement, register its click event, and add to flowlayoutpanel.
private void LoadXml(string xmlPath)
{
var doc = XDocument.Load(xmlPath);
var champGroups = from grp in doc.Descendants("champion")
select grp;
foreach (XElement champion in champGroups)
{
Champion champUC = new Champion(champion);
champUC.Click += champUC_Click;
}
}
void champUC_Click(object sender, EventArgs e)
{
(sender as Champion).BorderStyle = BorderStyle.Fixed3D;
flowLayoutPanel1.Controls.OfType<Champion>().ToList().ForEach(p=> p.BorderStyle = BorderStyle.None);
}
If you stuck, I can go further.
Happy coding.
Submit an article or tip