the tricky version of rounded corners - am I asking too much?

ok, designer came nice simple design in photoshop looks great need xaml implimentation.

basically, have semi-transparent border overlays user control.  i've simulated user control below gradient.  2 issues.

1.  want border have rounded corners on outside , square corners on inside.  how?!

2.  how clip user control has rounded borders, in way works when webpage resized. 

i tried a manual clipping path solve #2 doesn't work when resize webpage.

any ideas? 

 

<usercontrol  	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"      xmlns:local="clr-namespace:test"  	mc:ignorable="d"  	x:class="test.tesb1">        <grid x:name="layoutroot" height="auto" width="auto" margin="10" >          <grid.background>              <radialgradientbrush>                  <gradientstop color="black"/>                  <gradientstop color="#ffe65151" offset="1"/>                  <gradientstop color="#ff4f1b1b" offset="0.305"/>                  <gradientstop color="#ff742828" offset="0.478"/>                  <gradientstop color="#ffa63939" offset="0.711"/>              </radialgradientbrush>          </grid.background>          <rectangle x:name="myshadeborder" fill="transparent" margin="0,0,0,0" opacitymask="#ff89b540" strokethickness="10" radiusx="10" radiusy="10">              <rectangle.stroke>                  <lineargradientbrush endpoint="0.5,1" startpoint="0.5,0">                      <gradientstop color="#28000000" offset="0"/>                      <gradientstop color="#4c000000" offset="1"/>                      <gradientstop color="#4c000000" offset="0.104"/>                  </lineargradientbrush>              </rectangle.stroke>          </rectangle>      </grid>    </usercontrol>

 

so got little time today , figured use this:

idea dynamic clipping of child object inside containing object, in case grid.

here control going use host other controls , clip inner control labeled myusercontrol.
border layer transparency.

going need adjust radiusx, y of clipping , cornerradius of border customize liking.

 

user control xaml:

<usercontrol  	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  	xmlns:local="clr-namespace:sandbox_4" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:ignorable="d"  	x:class="sandbox_4.usercontrol1">    	<grid x:name="layoutroot">  		<grid.background>  			<lineargradientbrush endpoint="0.5,1" startpoint="0.5,0">  				<gradientstop color="#ffe5ff49" offset="0"/>  				<gradientstop color="#fff35307" offset="1"/>  			</lineargradientbrush>  		</grid.background>			  		  			<grid x:name="gridclipper">  			<grid.clip>  				<rectanglegeometry radiusx="30" radiusy="30" rect="0,0,640,480"></rectanglegeometry>  			</grid.clip>  		<local:usercontrol2 x:name="myusercontrol"></local:usercontrol2>  		</grid>  		  		<border borderthickness="5" cornerradius="25" borderbrush="#33727272"></border>				  		  	</grid>  </usercontrol>

 
usercontrol codebehind:

  

using system;  using system.windows;  using system.windows.controls;  using system.windows.documents;  using system.windows.ink;  using system.windows.input;  using system.windows.media;  using system.windows.media.animation;  using system.windows.shapes;    namespace sandbox_4  {  	public partial class usercontrol1 : usercontrol  	{  		public usercontrol1()  		{  			// required initialize variables  			initializecomponent();                gridclipper.sizechanged += new sizechangedeventhandler(layoutroot_sizechanged);  		}            void layoutroot_sizechanged(object sender, sizechangedeventargs e)          {              clipinsidesender(sender);          }            public void clipinsidesender(object sender)          {              grid grid = sender as grid;                rectanglegeometry rectgm = new rectanglegeometry();              rectgm.rect = new rect(0, 0, grid.actualwidth, grid.actualheight);              rectgm.radiusx = 30;              rectgm.radiusy = 30;                grid.clip = rectgm;          }  	}  }

 

 

 

Silverlight  >  Designing with Silverlight