WPF Button behavior using Triggers -
i have button
custom appearance defined controltemplate
.
it contains canvas
contains path
. add changes in path.opacity
depending on mouse state:
- default - 0.5
- mouse over, not pressed - 1.0
- mouse over, pressed - 0.5
the first cases covered setting local value of path.opacity
0.5
, adding 1 trigger
ismouseover
:
<button x:class="imagingshop.panosphere.controls.pathbutton" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" mc:ignorable="d" d:designheight="100" d:designwidth="100" name="pathbutton"> <button.template> <controltemplate> <canvas background="transparent" width="{templatebinding width}" height="{templatebinding width}"> <canvas.style> <style targettype="canvas"> <setter property="path.opacity" value="0.5"/> <style.triggers> <trigger property="ismouseover" value="true"> <setter property="path.opacity" value="1.0"/> </trigger> </style.triggers> </style> </canvas.style> <path data="{binding elementname=pathbutton, path=pathdata}" stretch="uniform" fill="#ffffffff" width="{templatebinding width}" height="{templatebinding width}"/> </canvas> </controltemplate> </button.template> <grid> </grid> </button>
however, third case not work. have added following trigger:
<multitrigger> <multitrigger.conditions> <condition property="ismouseover" value="true"/> <condition property="button.ispressed" value="true"/> </multitrigger.conditions> <setter property="path.opacity" value="0.75"/> </multitrigger>
so should set path.opacity
0.75
mouse hovers on button and button pressed.
i stuck opacity changed 0.5
instead of 0.75
! trigger seems apply, not work expected...
why not using opacity
of button
, have triggers on button
's style
directly, controltemplate
not have path
anyways.
<style targettype="{x:type local:pathbutton}"> <setter property="opacity" value=".5" /> <setter property="overridesdefaultstyle" value="true" /> <setter property="template"> <setter.value> <controltemplate targettype="{x:type local:pathbutton}"> <canvas width="{templatebinding width}" height="{templatebinding width}" background="transparent"> <path width="{templatebinding width}" height="{templatebinding width}" data="{binding elementname=pathbutton, path=pathdata}" fill="#ffffffff" opacity="{templatebinding opacity}" stretch="uniform" /> </canvas> </controltemplate> </setter.value> </setter> <style.triggers> <trigger property="ismouseover" value="true"> <setter property="opacity" value="1" /> </trigger> <trigger property="ispressed" value="true"> <setter property="opacity" value=".75" /> </trigger> </style.triggers> </style>
will produce output expecting.
update:
you can have style
in resourcedictionary
, have subclass declaration in code-behind file. produce 1 xaml file. not left 2 xaml files in method.
have switched binding pathdata
relativesource
binding.
you can download sample of here. open , check out
i've used add-in nestin lets group files custom groups editing vsproj file , adding dependson
attribute. lets group resourcedictionary
, code-behind class file 1 entity pathbutton.xaml
how usercontrol
, window
in ide code-behind file.
Comments
Post a Comment