c# - Windows Phone ControlTemplate & Converter : problem loading BitmapImage from Image Resource in assembly -
this follow previous question. i've managed make work templates, however, want make bit generic, don't have go around repeating code on place
the working version (hardcoded) :
<usercontrol.resources> <controltemplate x:key="treblecheckboximagetemplate" targettype="checkbox"> <image x:name="imgtreble" minwidth="100" source="images/treble_checked.png"> <visualstatemanager.visualstategroups> <visualstategroup x:name="checkstates"> <visualstate x:name="checked"> <storyboard> <objectanimationusingkeyframes begintime="00:00:00" storyboard.targetname="imgtreble" storyboard.targetproperty="(image.source)"> <discreteobjectkeyframe keytime="00:00:00"> <discreteobjectkeyframe.value> <bitmapimage urisource="images/treble_checked.png" /> </discreteobjectkeyframe.value> </discreteobjectkeyframe> </objectanimationusingkeyframes> </storyboard> </visualstate> <visualstate x:name="unchecked"> <storyboard> <objectanimationusingkeyframes begintime="00:00:00" storyboard.targetname="imgtreble" storyboard.targetproperty="(image.source)"> <discreteobjectkeyframe keytime="00:00:00"> <discreteobjectkeyframe.value> <bitmapimage urisource="images/treble_unchecked.png" /> </discreteobjectkeyframe.value> </discreteobjectkeyframe> </objectanimationusingkeyframes> </storyboard> </visualstate> <visualstate x:name="indeterminate"/> </visualstategroup> </visualstatemanager.visualstategroups> </image> </controltemplate> </usercontrol.resources> <stackpanel x:name="layoutroot" background="{staticresource phoneforegroundbrush}" orientation="horizontal"> <checkbox height="72" horizontalalignment="left" background="white" verticalalignment="top" template="{staticresource treblecheckboximagetemplate}" margin="0,0,10,0" > <custom:interaction.triggers> <custom:eventtrigger eventname="click"> <galasoft_mvvmlight_command:eventtocommand commandparameter="{binding relativesource={relativesource self}, path=ischecked}" command="{binding treblepressedcommand}"/> </custom:eventtrigger> </custom:interaction.triggers> </checkbox> </stackpanel> of course, image paths hardcoded. so, wanted make generic, instantiate checkbox, tell it's image, , template same all.
i created imagecheckbox control class :
public class imagecheckbox : checkbox { /// <summary> /// <see cref="checkedimagepath" /> dependency property's name. /// </summary> public const string checkedimagepathpropertyname = "checkedimagepath"; /// <summary> /// gets or sets value of <see cref="checkedimagepath" /> /// property. dependency property. /// </summary> public string checkedimagepath { { return (string)getvalue(checkedimagepathproperty); } set { setvalue(checkedimagepathproperty, value); } } /// <summary> /// identifies <see cref="checkedimagepath" /> dependency property. /// </summary> public static readonly dependencyproperty checkedimagepathproperty = dependencyproperty.register( checkedimagepathpropertyname, typeof(string), typeof(imagecheckbox), new propertymetadata(null)); /// <summary> /// <see cref="uncheckedimagepath" /> dependency property's name. /// </summary> public const string uncheckedimagepathpropertyname = "uncheckedimagepath"; /// <summary> /// gets or sets value of <see cref="uncheckedimagepath" /> /// property. dependency property. /// </summary> public string uncheckedimagepath { { return (string)getvalue(uncheckedimagepathproperty); } set { setvalue(uncheckedimagepathproperty, value); } } /// <summary> /// identifies <see cref="uncheckedimagepath" /> dependency property. /// </summary> public static readonly dependencyproperty uncheckedimagepathproperty = dependencyproperty.register( uncheckedimagepathpropertyname, typeof(string), typeof(imagecheckbox), new propertymetadata(null)); } i created converter (because ran problem must convert string uri image source)
public class stringtoimageconverter : ivalueconverter { public object convert(object value, type targettype, object parameter, cultureinfo culture) { if (value == null) { return null; } if (!uriparser.isknownscheme("pack")) { uriparser.register(new genericuriparser (genericuriparseroptions.genericauthority), "pack", -1); } if (value string) { var image = new bitmapimage(); image.urisource = new uri(string.format(@"pack://application:,,/images/{0}", value string)); //image.urisource = new uri(string.format(@"pack://application:,,,/adagio.presentation;component/images/{0}", value string),urikind.absolute); image.imagefailed += new eventhandler<system.windows.exceptionroutedeventargs>(image_imagefailed); image.imageopened += new eventhandler<system.windows.routedeventargs>(image_imageopened); return image; } if (value uri) { var bi = new bitmapimage {urisource = (uri) value}; return bi; } return null; } void image_imageopened(object sender, system.windows.routedeventargs e) { throw new notimplementedexception(); } void image_imagefailed(object sender, system.windows.exceptionroutedeventargs e) { throw new notimplementedexception(); } public object convertback(object value, type targettype, object parameter, cultureinfo culture) { throw new notimplementedexception(); } } you can see converter has been tried thousands of different combinations, none of them work... then, new xaml :
<controltemplate x:key="checkboximagetemplate" targettype="controls:imagecheckbox"> <image x:name="imgfortemplate" minwidth="100" source="{binding relativesource={relativesource templatedparent},path=checkedimagepath, converter={staticresource stringtoimageconverter}}"> <!-- <visualstatemanager.visualstategroups> <visualstategroup x:name="checkstates"> <visualstate x:name="checked"> <storyboard> <objectanimationusingkeyframes begintime="00:00:00" storyboard.targetname="imgfortemplate" storyboard.targetproperty="(image.source)"> <discreteobjectkeyframe keytime="00:00:00"> <discreteobjectkeyframe.value> <bitmapimage urisource="{binding relativesource={relativesource templatedparent},path=checkedimagepath, converter={staticresource stringtoimageconverter}}" /> </discreteobjectkeyframe.value> </discreteobjectkeyframe> </objectanimationusingkeyframes> </storyboard> </visualstate> <visualstate x:name="unchecked"> <storyboard> <objectanimationusingkeyframes begintime="00:00:00" storyboard.targetname="imgfortemplate" storyboard.targetproperty="(image.source)"> <discreteobjectkeyframe keytime="00:00:00"> <discreteobjectkeyframe.value> <bitmapimage urisource="{binding relativesource={relativesource templatedparent},path=uncheckedimagepath, converter={staticresource stringtoimageconverter}}" /> </discreteobjectkeyframe.value> </discreteobjectkeyframe> </objectanimationusingkeyframes> </storyboard> </visualstate> <visualstate x:name="indeterminate"/> </visualstategroup> </visualstatemanager.visualstategroups>--> </image> </controltemplate> <stackpanel x:name="layoutroot" background="{staticresource phoneforegroundbrush}" orientation="horizontal"> <controls:imagecheckbox checkedimagepath="treble_checked.png" uncheckedimagepath="treble_unchecked.png" height="72" horizontalalignment="left" verticalalignment="top" template="{staticresource checkboximagetemplate}" margin="0,0,10,0" > <custom:interaction.triggers> <custom:eventtrigger eventname="click"> <galasoft_mvvmlight_command:eventtocommand commandparameter="{binding relativesource={relativesource self}, path=ischecked}" command="{binding treblepressedcommand}"/> </custom:eventtrigger> </custom:interaction.triggers> </controls:imagecheckbox> </stackpanel> i've tried make work @ first, don't seem first source property of image load. commented part (visualstatemanager states) doesn't work either, think must same problem.. in case i'd need converter return uri instead of bitmapimage, because urisource of type uri, , source of type image. i'm getting errors in converter, can't load images (always falling image_imagefailed event). i've set images resources in assembly... doing wrong?? driving me crazy!!!!
[edit] : i've tried doing suggested, , changed dependency property uri, can't work if say
<controls:imagecheckbox checkedimagepath="images/treble_checked.png" uncheckedimagepath="images/treble_unchecked.png" height="72" horizontalalignment="left" verticalalignment="top" template="{staticresource checkboximagetemplate}" margin="0,0,10,0" > and in template's visualstate :
<bitmapimage urisource="{binding path=uncheckedimagepath, relativesource={relativesource templatedparent}}" /> it tells me xaml isn't valid , error. if use templatebinding :
<bitmapimage urisource="{templatebinding uncheckedimagepath}" /> it doesn't complain, image doesn't load (appear blank). think i'm getting close, still haven't found solution...
[edit 2] : last try...
usage :
<stackpanel x:name="layoutroot" background="{staticresource phoneforegroundbrush}" orientation="horizontal"> <controls:imagecheckbox style="{staticresource theimagecheckboxstyle}" checkedimagepath="images/treble_checked.png" uncheckedimagepath="images/treble_unchecked.png" height="72" horizontalalignment="left" verticalalignment="top" margin="0,0,10,0" > <custom:interaction.triggers> <custom:eventtrigger eventname="click"> <galasoft_mvvmlight_command:eventtocommand commandparameter="{binding relativesource={relativesource self}, path=ischecked}" command="{binding treblepressedcommand}"/> </custom:eventtrigger> </custom:interaction.triggers> </controls:imagecheckbox> </stackpanel> style (trying copy pasted , removing thought unnecessary parts)
<usercontrol.resources> <style x:key="theimagecheckboxstyle" targettype="controls:imagecheckbox"> <setter property="template"> <setter.value> <controltemplate targettype="checkbox"> <grid background="transparent"> <visualstatemanager.visualstategroups> <visualstategroup x:name="checkstates"> <visualstate x:name="checked"> <storyboard> <objectanimationusingkeyframes storyboard.targetname="checkmark" storyboard.targetproperty="visibility"> <discreteobjectkeyframe keytime="0"> <discreteobjectkeyframe.value> <visibility>visible</visibility> </discreteobjectkeyframe.value> </discreteobjectkeyframe> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetname="checkmark" storyboard.targetproperty="source"> <!-- magic! --> <discreteobjectkeyframe keytime="0" value="{binding relativesource={relativesource templatedparent}, path=checkedimagepath}" /> </objectanimationusingkeyframes> </storyboard> </visualstate> <visualstate x:name="unchecked"> <storyboard> <objectanimationusingkeyframes storyboard.targetname="checkmark" storyboard.targetproperty="visibility"> <discreteobjectkeyframe keytime="0"> <discreteobjectkeyframe.value> <visibility>visible</visibility> </discreteobjectkeyframe.value> </discreteobjectkeyframe> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetname="checkmark" storyboard.targetproperty="source"> <!-- magic! --> <discreteobjectkeyframe keytime="0" value="{binding relativesource={relativesource templatedparent}, path=uncheckedimagepath}" /> </objectanimationusingkeyframes> </storyboard> </visualstate> </visualstategroup> </visualstatemanager.visualstategroups> <grid margin="{staticresource phonetouchtargetlargeoverhang}"> <grid.columndefinitions> <columndefinition width="32" /> <columndefinition width="*" /> </grid.columndefinitions> <border x:name="checkbackground" width="32" height="32" horizontalalignment="left" verticalalignment="center" background="{templatebinding background}" borderbrush="{templatebinding background}" borderthickness="{staticresource phoneborderthickness}" ishittestvisible="false" /> <rectangle x:name="indeterminatemark" grid.row="0" width="16" height="16" horizontalalignment="center" verticalalignment="center" fill="{staticresource phoneradiocheckboxcheckbrush}" ishittestvisible="false" visibility="collapsed" /> <!-- magic! default uncheckedimagepath --> <image x:name="checkmark" width="24" height="18" horizontalalignment="center" verticalalignment="center" ishittestvisible="false" source="{binding relativesource={relativesource templatedparent}, path=uncheckedimagepath}" stretch="fill" visibility="collapsed" /> <contentcontrol x:name="contentcontainer" grid.column="1" margin="12,0,0,0" content="{templatebinding content}" contenttemplate="{templatebinding contenttemplate}" foreground="{templatebinding foreground}" horizontalcontentalignment="{templatebinding horizontalcontentalignment}" padding="{templatebinding padding}" verticalcontentalignment="{templatebinding verticalcontentalignment}" /> </grid> </grid> </controltemplate> </setter.value> </setter> </style>
have considered changing type of checkedimagepath uri, , binding directly that, instead of creating bitmapimage ?
as see it, code vastly overcomplicating simple binding.
edit: here's how (working example)
use example
<local:imagecheckbox horizontalalignment="left" verticalalignment="top" checkedimagepath="checkedimage.png" content="checkbox" uncheckedimagepath="uncheckedimage.png" /> c#
public partial class imagecheckbox // namespace: mycontrols { public imagecheckbox() { initializecomponent(); } public const string checkedimagepathpropertyname = "checkedimagepath"; public uri checkedimagepath { { return (uri)getvalue(checkedimagepathproperty); } set { setvalue(checkedimagepathproperty, value); } } public static readonly dependencyproperty checkedimagepathproperty = dependencyproperty.register(checkedimagepathpropertyname, typeof(uri), typeof(imagecheckbox), new propertymetadata(null)); public const string uncheckedimagepathpropertyname = "uncheckedimagepath"; public uri uncheckedimagepath { { return (uri)getvalue(uncheckedimagepathproperty); } set { setvalue(uncheckedimagepathproperty, value); } } public static readonly dependencyproperty uncheckedimagepathproperty = dependencyproperty.register(uncheckedimagepathpropertyname, typeof(uri), typeof(imagecheckbox), new propertymetadata(null)); } xaml (look "magic!" relevant parts)
<checkbox x:class="mycontrols.imagecheckbox" 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:l="clr-namespace:windowsphoneapplication1" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" d:designheight="480" d:designwidth="480" mc:ignorable="d"> <checkbox.resources> <style x:key="phonebuttonbase" targettype="buttonbase"> <setter property="background" value="transparent" /> <setter property="borderbrush" value="{staticresource phoneforegroundbrush}" /> <setter property="foreground" value="{staticresource phoneforegroundbrush}" /> <setter property="borderthickness" value="{staticresource phoneborderthickness}" /> <setter property="fontfamily" value="{staticresource phonefontfamilysemibold}" /> <setter property="fontsize" value="{staticresource phonefontsizemediumlarge}" /> <setter property="padding" value="10,3,10,5" /> <setter property="template"> <setter.value> <controltemplate targettype="buttonbase"> <grid background="transparent"> <visualstatemanager.visualstategroups> <visualstategroup x:name="commonstates"> <visualstate x:name="normal" /> <visualstate x:name="mouseover" /> <visualstate x:name="pressed"> <storyboard> <objectanimationusingkeyframes storyboard.targetname="contentcontainer" storyboard.targetproperty="foreground"> <discreteobjectkeyframe keytime="0" value="{staticresource phonebackgroundbrush}" /> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetname="buttonbackground" storyboard.targetproperty="background"> <discreteobjectkeyframe keytime="0" value="{staticresource phoneforegroundbrush}" /> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetname="buttonbackground" storyboard.targetproperty="borderbrush"> <discreteobjectkeyframe keytime="0" value="{staticresource phoneforegroundbrush}" /> </objectanimationusingkeyframes> </storyboard> </visualstate> <visualstate x:name="disabled"> <storyboard> <objectanimationusingkeyframes storyboard.targetname="contentcontainer" storyboard.targetproperty="foreground"> <discreteobjectkeyframe keytime="0" value="{staticresource phonedisabledbrush}" /> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetname="buttonbackground" storyboard.targetproperty="borderbrush"> <discreteobjectkeyframe keytime="0" value="{staticresource phonedisabledbrush}" /> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetname="buttonbackground" storyboard.targetproperty="background"> <discreteobjectkeyframe keytime="0" value="transparent" /> </objectanimationusingkeyframes> </storyboard> </visualstate> </visualstategroup> </visualstatemanager.visualstategroups> <border x:name="buttonbackground" margin="{staticresource phonetouchtargetoverhang}" background="{templatebinding background}" borderbrush="{templatebinding borderbrush}" borderthickness="{templatebinding borderthickness}" cornerradius="0"> <contentcontrol x:name="contentcontainer" content="{templatebinding content}" contenttemplate="{templatebinding contenttemplate}" foreground="{templatebinding foreground}" horizontalcontentalignment="{templatebinding horizontalcontentalignment}" padding="{templatebinding padding}" verticalcontentalignment="{templatebinding verticalcontentalignment}" /> </border> </grid> </controltemplate> </setter.value> </setter> </style> <style x:key="phoneradiobuttoncheckboxbase" basedon="{staticresource phonebuttonbase}" targettype="togglebutton"> <setter property="background" value="{staticresource phoneradiocheckboxbrush}" /> <setter property="borderbrush" value="{staticresource phoneradiocheckboxbrush}" /> <setter property="fontsize" value="{staticresource phonefontsizemedium}" /> <setter property="fontfamily" value="{staticresource phonefontfamilynormal}" /> <setter property="horizontalcontentalignment" value="left" /> <setter property="verticalcontentalignment" value="center" /> <setter property="padding" value="0" /> </style> </checkbox.resources> <checkbox.style> <style basedon="{staticresource phoneradiobuttoncheckboxbase}" targettype="l:imagecheckbox"> <setter property="template"> <setter.value> <controltemplate targettype="checkbox"> <grid background="transparent"> <visualstatemanager.visualstategroups> <visualstategroup x:name="commonstates"> <visualstate x:name="normal" /> <visualstate x:name="mouseover" /> <visualstate x:name="pressed"> <storyboard> <objectanimationusingkeyframes storyboard.targetname="checkbackground" storyboard.targetproperty="background"> <discreteobjectkeyframe keytime="0" value="{staticresource phoneradiocheckboxpressedbrush}" /> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetname="checkbackground" storyboard.targetproperty="borderbrush"> <discreteobjectkeyframe keytime="0" value="{staticresource phoneradiocheckboxpressedborderbrush}" /> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetname="checkmark" storyboard.targetproperty="fill"> <discreteobjectkeyframe keytime="0" value="{staticresource phoneradiocheckboxcheckbrush}" /> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetname="indeterminatemark" storyboard.targetproperty="fill"> <discreteobjectkeyframe keytime="0" value="{staticresource phoneradiocheckboxcheckbrush}" /> </objectanimationusingkeyframes> </storyboard> </visualstate> <visualstate x:name="disabled"> <storyboard> <objectanimationusingkeyframes storyboard.targetname="checkbackground" storyboard.targetproperty="background"> <discreteobjectkeyframe keytime="0" value="{staticresource phoneradiocheckboxdisabledbrush}" /> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetname="checkbackground" storyboard.targetproperty="borderbrush"> <discreteobjectkeyframe keytime="0" value="{staticresource phonedisabledbrush}" /> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetname="checkmark" storyboard.targetproperty="fill"> <discreteobjectkeyframe keytime="0" value="{staticresource phoneradiocheckboxcheckdisabledbrush}" /> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetname="indeterminatemark" storyboard.targetproperty="fill"> <discreteobjectkeyframe keytime="0" value="{staticresource phoneradiocheckboxcheckdisabledbrush}" /> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetname="contentcontainer" storyboard.targetproperty="foreground"> <discreteobjectkeyframe keytime="0" value="{staticresource phonedisabledbrush}" /> </objectanimationusingkeyframes> </storyboard> </visualstate> </visualstategroup> <visualstategroup x:name="checkstates"> <visualstate x:name="checked"> <storyboard> <objectanimationusingkeyframes storyboard.targetname="checkmark" storyboard.targetproperty="visibility"> <discreteobjectkeyframe keytime="0"> <discreteobjectkeyframe.value> <visibility>visible</visibility> </discreteobjectkeyframe.value> </discreteobjectkeyframe> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetname="checkmark" storyboard.targetproperty="source"> <!-- magic! --> <discreteobjectkeyframe keytime="0" value="{binding relativesource={relativesource templatedparent}, path=checkedimagepath}" /> </objectanimationusingkeyframes> </storyboard> </visualstate> <visualstate x:name="unchecked"> <storyboard> <objectanimationusingkeyframes storyboard.targetname="checkmark" storyboard.targetproperty="visibility"> <discreteobjectkeyframe keytime="0"> <discreteobjectkeyframe.value> <visibility>visible</visibility> </discreteobjectkeyframe.value> </discreteobjectkeyframe> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard.targetname="checkmark" storyboard.targetproperty="source"> <!-- magic! --> <discreteobjectkeyframe keytime="0" value="{binding relativesource={relativesource templatedparent}, path=uncheckedimagepath}" /> </objectanimationusingkeyframes> </storyboard> </visualstate> <visualstate x:name="indeterminate"> <storyboard> <objectanimationusingkeyframes storyboard.targetname="indeterminatemark" storyboard.targetproperty="visibility"> <discreteobjectkeyframe keytime="0"> <discreteobjectkeyframe.value> <visibility>visible</visibility> </discreteobjectkeyframe.value> </discreteobjectkeyframe> </objectanimationusingkeyframes> </storyboard> </visualstate> </visualstategroup> </visualstatemanager.visualstategroups> <grid margin="{staticresource phonetouchtargetlargeoverhang}"> <grid.columndefinitions> <columndefinition width="32" /> <columndefinition width="*" /> </grid.columndefinitions> <border x:name="checkbackground" width="32" height="32" horizontalalignment="left" verticalalignment="center" background="{templatebinding background}" borderbrush="{templatebinding background}" borderthickness="{staticresource phoneborderthickness}" ishittestvisible="false" /> <rectangle x:name="indeterminatemark" grid.row="0" width="16" height="16" horizontalalignment="center" verticalalignment="center" fill="{staticresource phoneradiocheckboxcheckbrush}" ishittestvisible="false" visibility="collapsed" /> <!-- magic! default uncheckedimagepath --> <image x:name="checkmark" width="24" height="18" horizontalalignment="center" verticalalignment="center" ishittestvisible="false" source="{binding relativesource={relativesource templatedparent}, path=uncheckedimagepath}" stretch="fill" visibility="collapsed" /> <contentcontrol x:name="contentcontainer" grid.column="1" margin="12,0,0,0" content="{templatebinding content}" contenttemplate="{templatebinding contenttemplate}" foreground="{templatebinding foreground}" horizontalcontentalignment="{templatebinding horizontalcontentalignment}" padding="{templatebinding padding}" verticalcontentalignment="{templatebinding verticalcontentalignment}" /> </grid> </grid> </controltemplate> </setter.value> </setter> </style> </checkbox.style> </checkbox>
Comments
Post a Comment