c# - How to bind events and properties of controls in UniformGrid dynamically? -
i newbie in templating wpf controls. use vs2013, wpf 4.5 , caliburn micro 2.0.2. in part of tasks have need populate grid toggle buttons contained different images , subtitle. have solved using uniformgrid. see code below. work still don't have event , property binding since don't know how can bind events , properties of toggle buttons view model, since generated automatically , dynamically , number of toggle buttons uncertain (depends on number of images in image folder).
for example: manually bind click event, ischecked property , other properties of toggle button 1 following:
<togglebutton x:name="togglevehicle01" ischecked={binding selectedvehicle01} background="{binding backcolorselectedvehicle01}" tooltip="{binding vehiclename01}"> but now can't anymore since toggle buttons generated automatically , number uncertain. please help. feel free change code below or give me examples code works. thank in advance.
the view (mainview.xaml):
<usercontrol x:class="cmwpf02.views.mainview" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" d:designheight="300" d:designwidth="300" mc:ignorable="d"> <grid width="1024" height="768" horizontalalignment="left" verticalalignment="top" showgridlines="true"> <itemscontrol name="imagelist" background="#ffffffff" borderbrush="#ffa90606" itemssource="{binding path=vehicleimages}"> <itemscontrol.itemspanel> <itemspaneltemplate> <uniformgrid margin="0,0,0,0" /> </itemspaneltemplate> </itemscontrol.itemspanel> <itemscontrol.itemtemplate> <datatemplate> <togglebutton width="180" margin="10,10,10,10" fontsize="10" style="{staticresource {x:static toolbar.togglebuttonstylekey}}"> <!-- x:name="togglevehicle01" --> <!-- background="{binding backcolorselectedvehicle01}" --> <!-- ischecked="{binding selectedvehicle01}" --> <!-- tooltip="{binding vehicle01name}"> --> <stackpanel margin="0,5,0,5" horizontalalignment="center" verticalalignment="center"> <image width="140" renderoptions.bitmapscalingmode="fant" source="{binding path=image}" /> <textblock horizontalalignment="center" verticalalignment="center" fontweight="bold" text="{binding path=name}" /> </stackpanel> </togglebutton> </datatemplate> </itemscontrol.itemtemplate> </itemscontrol> </grid> </usercontrol> the viewmodel (mainviewmodel.cs):
using caliburn.micro; using system; using system.collections.objectmodel; using system.io; namespace cmwpf02.viewmodels { public class mainviewmodel : screen, ihavedisplayname { private string _path2images = @"d:\tmp\images"; public string displayname { get; set; } public observablecollection<vehicleimage> vehicleimages { get; set; } public mainviewmodel() { displayname = "main window"; var vehicles = new observablecollection<string>(); vehicles = getallfilesfromfolder(_path2images); vehicleimages = new observablecollection<vehicleimage>(); foreach (var in vehicles) vehicleimages.add(new vehicleimage(i)); } public observablecollection<string> getallfilesfromfolder(string fullpathfolder) { string[] filearray = directory.getfiles(fullpathfolder); return new observablecollection<string>(filearray); } } public class vehicleimage { public string image { get; private set; } public string name { get; private set; } public vehicleimage(string image) { image = image; name = path.getfilename(image); } } //public void togglevehicle01() //{ // var selecttext = (selectedvehicle01) ? " selected" : " unselected"; // messagebox.show(vehicle01name + selecttext); // backcolorselectedvehicle01 = (selectedvehicle01) ? _backcolorselectedvehicle : _defaultbackcolorvehicle; //} //public boolean selectedvehicle02 //{ // { return _selectedvehicle02; } // set // { // _selectedvehicle02 = value; // notifyofpropertychange(() => selectedvehicle02); // } //} //public brush backcolorselectedvehicle02 //{ // { return _backcolorselectedvehicle02; } // set // { // _backcolorselectedvehicle02 = value; // notifyofpropertychange(() => backcolorselectedvehicle02); // } //public string vehicle01name { get; private set; } } edit: can bind properties of generated togglebutton view model. make vehicleimage class view model (see modified code below). still have problem bind click-event of generated togglebutton view model.
the modified class view model
public class vehicleimage : propertychangedbase { public string image { get; private set; } public string name { get; private set; } private boolean _selectedvehicle; public boolean selectedvehicle { { return _selectedvehicle; } set { _selectedvehicle = value; backcolorselectedvehicle = _selectedvehicle ? new solidcolorbrush(color.fromargb(255, 242, 103, 33)) : new solidcolorbrush(colors.white); } } private brush _backcolorselectedvehicle; public brush backcolorselectedvehicle { { return _backcolorselectedvehicle; } set { _backcolorselectedvehicle = value; notifyofpropertychange(() => backcolorselectedvehicle); } } // togglebutton's click-event handler, doesn't event trigger view. // therefore set backcolorselectedvehicle fin setter of selectedvehicle property. public void toggleselection() { //backcolorselectedvehicle = selectedvehicle ? new solidcolorbrush(color.fromargb(255, 242, 103, 33)) : new solidcolorbrush(colors.white); } public vehicleimage(string image) { image = image; name = path.getfilename(image); } } the modified view
<togglebutton width="180" margin="10,10,10,10" background="{binding path=backcolorselectedvehicle}" fontsize="10" ischecked="{binding path=selectedvehicle}" style="{staticresource {x:static toolbar.togglebuttonstylekey}}" tooltip="{binding path=name}"> <!-- x:name="toggleselection" --> <stackpanel margin="0,5,0,5" horizontalalignment="center" verticalalignment="center"> <image width="140" renderoptions.bitmapscalingmode="fant" source="{binding path=image}" /> <textblock horizontalalignment="center" verticalalignment="center" text="{binding path=name}" /> </stackpanel> </togglebutton>
Comments
Post a Comment