c# - WPF How to make a Viewbox aware of its available space from within a StackPanel -

i have custom wpf control based on soroosh davaee’s imagebutton example @ http://www.codeproject.com/tips/773386/wpf-imagebutton. custom control combines image , textblock in horizontal stackpanel within button. (btw, soroosh’s example run, had edit solution properties “sampleview” startup project rather “extendedbutton” being startup project.)

i want text in textblock automatically shrink if necessary avoid clipping @ right edge if text long fit naturally in button. example, if edit soroosh's mainwindow.xaml make button text long fit...

    ...     <eb:imagebutton width="100" height="30" content="texttoolongtofitinthebutton" grid.row="2"     ...     <eb:imagebutton width="100" height="30" content="texttoolongtofitinthebutton" grid.row="2"     ... 

...the result following buttons clipped text:

in researching this, seems simplest way auto-shrink content of textblock wrap within viewbox:

<viewbox stretchdirection="downonly" stretch="fill">     <textblock ... /> </viewbox> 

downonly apparently prevents viewbox enlarging text fill space, , fill (as opposed uniform) seems tell stretch (shrink) only dimension needs shrink (i.e. horizontal dimension in case).

in soroosh's example generic.xaml file, wrapped textblock in such viewbox:

     <button >          <stackpanel orientation="horizontal">              <image margin="2 0"                     source="{templatebinding image}"                     width="{templatebinding imagewidth}"                     height="{templatebinding imageheight}"                     visibility="{templatebinding image,converter={staticresource visibilityconvertor}}"                     verticalalignment="center"/> added-->   <viewbox stretchdirection="downonly" stretch="fill">              <textblock text="{templatebinding content}"                     verticalalignment="center"/> added-->   </viewbox>          </stackpanel>      </button> 

this produced same clipped button text. experimenting, tried forcing viewbox have fixed width...

             <viewbox stretchdirection="downonly" stretch="fill" width="60"> 

...which produced this:

...which shows capability of viewbox, if somehow know available width when it's inside stackpanel.

i did note if wrap viewbox around whole stackpanel, auto-shrinks entire content of stackpanel:

     <button >          <viewbox stretchdirection="downonly" stretch="fill" width="60">              <stackpanel orientation="horizontal">                  <image margin="2 0"                     source="{templatebinding image}"                     width="{templatebinding imagewidth}"                     height="{templatebinding imageheight}"                     visibility="{templatebinding image,converter={staticresource visibilityconvertor}}"                     verticalalignment="center"/>                  <textblock text="{templatebinding content}"                     verticalalignment="center"/>              </stackpanel>          </viewbox>      </button> 

...which produces want:

...but both image , text shrunk, , want only text shrunk.

how can make viewbox, wrapping textbox, know available width (and height, suppose) within cell of stackpanel?

this common problem. solution not use stackpanel kind of layout requires re-sizing of child controls. it's not correct panel job. instead, try using grid panel, will resize child controls. stackpanel control basic of layout duties... try more adventurous , you'll find getting these issues.

one other alternative use textblock.texttrimming property trim text instead... put full text tooltip too.