locked
Polygon Gradient fill RRS feed

  • Question

  • Hello Everyone,

      I am working on Expression Blend 2 and my target is Silverlight 2.

    I have two questions,

    1. I have a polygon and i wanted to apply gradient color fill. I am able to apply the gradient color fill but i am not able to apply any transformation to that gradient fill. Brush transform tool is not working for polygon shape where us Brush transform is working fine with other shapes. If i go and change StartPoint and EndPoint in XAML code, i am able to change the angle for gradient. Is there any way i can do it using tools in blend?.

    2. How can i achieve curve shape gradient? For exmple, i have 'U' shape Path/Polygon, i want apply the white glare to that shape alone the path.

    Is it possible to do it in expression Blend or Expression Design?

    I really appreciate your help.

    Thanks.

    Friday, April 17, 2009 2:16 PM

All replies

  • The easiest way to get around the brush issue is to make a rectange, tweak the gradient to however you want it, then copy/paste the brush onto your new shape.

    As for the second part, it sounds like you're trying to make a glass highlight effect, which you won't be able to do well with a gradient. Instead, create a shape on top of your border, full it with white, then pull the opacity back until you're happy with it.

    If that doesn't make sense, there's a step-by-step tutorial here: http://advertboy.wordpress.com/2007/11/09/blend-candy-another-blue-glowing-glass-button-in-the-style-of-web-20/

    • Proposed as answer by VLTII Friday, April 17, 2009 3:08 PM
    Friday, April 17, 2009 3:06 PM
  • Thanks for your reply. I appreciate it.

    For the 1st question, as of now i am doing excatly the same as you suggested. I thought there maybe some way to do it using Brush transformation.

    For the 2nd question you said, "create a shape on top of your border". I am sorry i dont understand it.
    Assume i have 'U' as path,


    		<Path Margin="208,37,288,135" RenderTransformOrigin="0.5,0.5" Fill="#FF000000" Stretch="Fill" Data="M7.9560547,6.0024414 L9.0195313,6.0024414 L9.0195313,10.841797 C9.0195313,11.058432 9.0269165,11.252238 9.041687,11.423218 C9.0564575,11.594197 9.0786133,11.74235 9.1081543,11.867676 C9.1672363,12.118327 9.2666016,12.345703 9.40625,12.549805 C9.5638018,12.782552 9.777751,12.958008 10.048096,13.076172 C10.31844,13.194336 10.643392,13.253418 11.022949,13.253418 C11.406088,13.253418 11.731934,13.195231 12.000488,13.078857 C12.269043,12.962483 12.483887,12.786133 12.64502,12.549805 C12.784668,12.345703 12.884033,12.112061 12.943115,11.848877 C13.002197,11.585693 13.031738,11.258952 13.031738,10.868652 L13.031738,6.0024414 L14.095215,6.0024414 L14.095215,10.788086 C14.095215,11.368164 14.031656,11.873942 13.904541,12.30542 C13.777426,12.736897 13.568848,13.095866 13.278809,13.382324 C13.003092,13.65446 12.680826,13.85319 12.312012,13.978516 C11.943197,14.103841 11.51351,14.166504 11.022949,14.166504 C10.521647,14.166504 10.084798,14.100261 9.7124023,13.967773 C9.3400068,13.835286 9.0266924,13.640137 8.7724609,13.382324 C8.4824219,13.088704 8.2738447,12.734212 8.1467285,12.318848 C8.0831699,12.111166 8.0355015,11.879761 8.0037231,11.624634 C7.9719439,11.369507 7.9560547,11.090658 7.9560547,10.788086 z">
    		</Path>
    			
    I wanted 'U' look like below... For example purpose i am showing the rectangle. Please imagine full 'U' should look like this.

    		<Rectangle HorizontalAlignment="Left" Margin="91,64,0,148" Width="26" Stroke="{x:Null}">
    			<Rectangle.Fill>
    				<LinearGradientBrush EndPoint="1.077,0.5" StartPoint="-0.115,0.5">
    					<GradientStop Color="#FF000000"/>
    					<GradientStop Color="#FFFFFFFF" Offset="0.509"/>
    					<GradientStop Color="#FF080808" Offset="0.98199999332427979"/>
    				</LinearGradientBrush>
    			</Rectangle.Fill>
    		</Rectangle>
    Please reply. Thanks.
    Friday, April 17, 2009 5:47 PM
  • Here's the quick and dirty example:


    <Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="WpfApplication1.Window1" x:Name="Window" Title="Window1" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" Background="#FFFFFFFF" Width="800" Height="600"> <Grid Width="785" Height="563"> <TextBlock TextAlignment="Left" FontFamily="Arial Black" FontWeight="Bold" FontSize="362.201" Margin="195.745,134.043,262.789,47.031" d:LayoutOverrides="Height"><TextBlock.RenderTransform> <TransformGroup> <MatrixTransform Matrix="1.33333,0,0,1.33333,45.2619,-104.701"/> </TransformGroup> </TextBlock.RenderTransform><Run Text="U" Foreground="#FF000000"/></TextBlock> <Path Margin="276.481,130,174.304,121.548" Data="M330.63636,95.018045 L330.63636,342.7123 C330.63636,342.7123 323.31853,436.65189 444.53066,434.37916 444.53066,434.37916 559.68274,438.92499 558.16758,341.95511 L558.16758,96.111294" Fill="{x:Null}" Opacity="0.995" Stretch="Uniform" StrokeThickness="2"> <Path.Stroke> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#00000000" Offset="0"/> <GradientStop Color="#FFC1C1C1" Offset="1"/> </LinearGradientBrush> </Path.Stroke> <Path.BitmapEffect> <OuterGlowBitmapEffect GlowColor="#FFFFFFFF" GlowSize="40" Noise="0" Opacity="1"/> </Path.BitmapEffect> </Path> </Grid> </Window>
    It works ok, but it's a far cry from the best solution.

    I also tried to use Expression Design, and was able to get an outstanding result that failed spectacularly when I copied the xaml and pasted it into Blend:

    <Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="Layer_1_7" Width="500" Height="500" Canvas.Left="0" Canvas.Top="0">
    
    	<TextBlock TextAlignment="Left" FontFamily="Arial Black" FontWeight="Bold" FontSize="362.201" VerticalAlignment="Top" HorizontalAlignment="Left">
    
    		<TextBlock.RenderTransform>
    
    			<TransformGroup>
    
    				<MatrixTransform Matrix="1.33333,0,0,1.33333,45.2619,-104.701"/>
    
    			</TransformGroup>
    
    		</TextBlock.RenderTransform>
    
    		<Run Text="U" Foreground="#FF000000"/>
    
    	</TextBlock>
    
    	<Viewbox Width="295.3" Height="346.569" Canvas.Left="95.0167" Canvas.Top="78.1506">
    
    		<Canvas Width="295.3" Height="346.569">
    
    			<Viewbox Width="282.408" Height="343.056" Canvas.Left="6.45647" Canvas.Top="0.5">
    
    				<Canvas Width="282.408" Height="343.056">
    
    					<Viewbox Width="282.408" Height="343.056" Canvas.Left="0" Canvas.Top="0">
    
    						<Canvas Width="282.408" Height="343.056">
    
    							<Path Width="217.118" Height="76.3676" Canvas.Left="34.3715" Canvas.Top="246.91" Stretch="Fill" Fill="#7FFFFFFF" Data="F1 M 39.1198,246.91C 37.3921,250.09 35.8526,253.372 34.3715,256.674C 39.8866,270.669 48.5237,283.675 58.9407,294.526C 75.9664,309.571 98.6138,319.244 121.101,322.493C 126.997,323.08 132.935,323.281 138.86,323.247C 138.818,323.247 138.69,323.247 138.732,323.248C 139.111,323.256 139.489,323.266 139.867,323.27C 140.446,323.275 141.026,323.28 141.605,323.276C 142.371,323.273 143.138,323.265 143.904,323.249C 144.844,323.228 145.784,323.203 146.723,323.166C 153.566,322.899 160.398,322.208 167.176,321.232C 183.87,318.827 200.641,314.073 215.399,305.909C 231.515,295 245.558,278.553 251.49,260.018C 250.944,256.656 250.14,253.328 249.13,250.075C 244.324,258.91 237.507,266.961 229.382,272.889C 217.01,284.881 199.72,292.095 182.782,295.257C 168.48,298.705 153.562,300.138 138.86,299.596C 137.072,299.548 135.283,299.488 133.497,299.388C 127.02,299.476 120.519,299.055 114.105,298.151C 100.095,295.773 86.1606,290.231 74.7505,281.761C 62.562,274.508 52.0255,264.072 43.9277,252.428L 43.4718,252.211L 41.7823,251.371C 40.8577,249.906 39.9647,248.421 39.1198,246.91 Z "/>
    
    							<Path Width="245.772" Height="142.982" Canvas.Left="18.0739" Canvas.Top="185.762" Stretch="Fill" Fill="#56FFFFFF" Data="F1 M 30.0908,185.762L 22.5019,194.055L 20.6046,209.645L 18.7074,214.621L 18.0739,222.016C 20.0548,246.268 30.4288,270.576 45.5326,289.655C 60.2951,306.319 81.2272,318.42 102.753,324.102C 114.511,327.084 126.732,328.417 138.86,328.621C 137.961,328.634 140.657,328.705 141.556,328.72C 142.352,328.733 143.148,328.743 143.945,328.744C 144.917,328.744 145.89,328.74 146.862,328.724C 153.633,328.611 160.401,328.073 167.129,327.305C 174.853,326.017 182.474,324.076 189.961,321.782C 207.48,316.852 224.698,308.37 238.15,296.111C 242.492,291.473 246.41,286.387 249.705,280.955C 255.593,272.445 260.022,262.717 262.504,252.671C 264.2,242.368 264.201,231.722 262.998,221.349L 260.834,205.326L 250.399,191.726L 248.502,211.96L 247.079,212.292L 246.269,221.349L 246.269,221.349C 246.046,223.47 245.815,225.591 245.466,227.694C 244.43,231.518 243.209,235.305 241.677,238.958C 239.221,247.731 235.043,256.282 229.206,263.276C 223.236,270.431 215.392,276.219 206.985,280.237C 186.766,291.617 162.049,295.262 138.86,294.51C 137.136,294.468 135.411,294.415 133.688,294.323C 119.43,294.206 104.751,291.607 91.8039,285.634C 81.5643,280.911 72.2673,273.79 64.5792,265.476C 53.4918,254.357 44.9266,240.305 39.6107,225.529C 39.083,224.456 38.5942,223.364 38.1135,222.269C 37.3779,220.594 37.4295,219.979 37.4908,222.016L 36.2567,215.284L 32.9366,196.045L 30.5651,191.07L 30.0908,185.762 Z "/>
    
    							<Path Width="258.848" Height="192.658" Canvas.Left="11.6207" Canvas.Top="140.311" Stretch="Fill" Fill="#40FFFFFF" Data="F1 M 32.9366,143.304L 19.656,149.938L 15.8616,187.421L 13.9644,194.387L 11.6207,222.016C 12.0703,227.488 12.8623,232.953 14.1273,238.296C 16.8185,248.08 20.3975,257.688 25.0175,266.722C 31.6328,279.732 40.6381,291.773 51.2944,301.746C 69.926,318.476 95.1838,328.842 120.012,332.095C 126.269,332.731 132.571,332.959 138.86,332.936C 137.974,332.926 140.632,332.972 141.518,332.969C 144.496,332.96 147.474,332.872 150.447,332.705C 158.287,332.266 166.116,331.373 173.846,330.001C 196.034,326.064 218.412,317.769 236.248,303.996C 246.958,295.086 255.891,283.495 261.662,270.815C 267.535,257.911 270.216,243.38 270.469,229.205C 270.396,226.582 270.177,223.964 269.948,221.349L 263.68,164.526L 252.296,140.311L 250.399,157.228L 245.656,161.872L 238.723,221.349L 238.529,222.699C 238.091,230.027 236.721,237.38 234.31,244.314C 232.658,248.087 230.523,251.663 228.112,255.003C 222.463,264.372 213.688,272.164 204.03,277.305C 185.853,286.981 164.108,290.456 143.527,289.78C 141.972,289.825 140.415,289.857 138.86,289.828C 122.8,290.171 105.992,287.635 91.5656,280.568C 80.2469,274.826 70.1945,265.892 62.9045,255.503C 59.8826,252.167 57.0525,248.644 54.4804,244.951C 50.6912,238.373 47.6925,231.304 45.3881,224.072C 44.9841,223.06 44.6169,222.034 44.2549,221.006C 43.6337,219.243 43.8189,220.124 43.9375,222.016L 37.6796,162.211L 33.4109,148.943L 32.9366,143.304 Z "/>
    
    							<Path Width="268.95" Height="247.256" Canvas.Left="6.57966" Canvas.Top="90.231" Stretch="Fill" Fill="#34FFFFFF" Data="F1 M 31.0394,90.231L 20.6046,98.5237L 18.7074,114.114L 15.3873,123.07L 13.9644,143.304L 11.5928,156.24L 6.57966,222.016C 7.41991,232.152 9.60921,242.234 12.8237,251.883C 21.2029,273.882 35.3809,294.726 53.769,309.424C 72.2889,324.228 96.0023,333.446 119.501,336.602C 125.927,337.252 132.401,337.483 138.86,337.456C 138.635,337.453 137.959,337.44 138.184,337.447C 138.63,337.459 139.076,337.47 139.522,337.475C 140.174,337.483 140.826,337.489 141.477,337.486C 144.535,337.476 147.593,337.384 150.646,337.211C 157.731,336.81 164.806,336.046 171.81,334.903C 193.492,331.363 215.386,324.07 233.447,311.56C 247.007,301.649 258.68,288.146 265.809,272.938C 273.234,257.097 275.983,238.837 275.47,221.349L 274.085,191.062L 271.268,164.526L 268.897,151.589L 261.782,110.458L 256.091,97.1898L 246.605,109.795L 244.707,124.058L 241.387,135.336L 239.964,153.911L 237.593,166.848L 233.579,221.349L 233.579,221.349C 232.991,227.301 231.892,233.249 230.044,238.977C 227.051,249.639 220.646,259.962 211.983,266.86C 198.025,277.974 179.232,282.939 161.462,284.549C 153.981,285.571 146.409,286.215 138.86,286.044C 125.884,286.116 112.512,284.423 100.468,279.59C 90.8471,275.73 81.7778,269.777 74.6521,262.247C 64.3277,252.638 56.4067,240.137 51.1969,227.03C 50.3778,224.729 49.695,222.378 49.0984,220.01C 48.6736,218.324 48.8606,219.442 49.0515,222.016L 48.7665,212.299L 44.3792,153.918L 41.9484,141.314L 36.731,110.465L 31.5137,95.5383L 31.0394,90.231 Z "/>
    
    							<Path Width="281.8" Height="316.487" Canvas.Left="0" Canvas.Top="26.5435" Stretch="Fill" Fill="#2BFFFFFF" Data="F1 M 31.0394,26.5435L 19.656,35.4996L 17.7588,49.7629L 14.4387,61.0409L 8.74699,101.841L 4.00395,148.611L 2.84782,175.148L 1.15811,191.07L 0,222.016C 2.77457,254.681 20.2431,287.609 44.3989,309.773C 56.2561,320.158 70.3565,328.326 85.1556,333.752C 102.207,340.004 120.701,342.689 138.86,342.927C 138.564,342.924 137.678,342.895 137.973,342.92C 138.444,342.959 138.917,342.957 139.389,342.97C 140.068,342.989 140.748,343.006 141.428,343.015C 144.584,343.056 147.742,343.016 150.896,342.893C 161.141,342.492 171.375,341.281 181.46,339.431C 189.852,337.462 198.088,334.762 206.094,331.569C 232.409,322.043 257.953,302.921 270.784,278.049C 279.061,260.672 282.408,240.584 281.71,221.349L 281.71,221.349L 281.199,212.292L 280.102,185.755L 273.492,100.839L 270.794,89.8923L 265.577,55.3949L 256.091,33.5023L 245.182,48.0974L 235.221,107.473L 229.055,180.448L 227.899,206.984L 227.235,221.349C 226.547,231.279 224.171,241.586 218.879,250.016C 214.208,257.77 206.888,264.144 198.908,268.418C 184.734,276.012 168.088,278.999 152.028,279.792C 147.654,280.188 143.251,280.358 138.86,280.262C 125.114,280.371 110.78,278.356 98.368,272.447C 87.7387,267.386 78.1997,259.235 71.4365,249.599C 66.1486,242.773 61.7771,235.134 58.5608,227.12C 57.5873,224.695 56.7227,222.223 55.9665,219.721C 55.86,219.369 55.759,219.015 55.6568,218.662C 55.5923,218.438 55.5321,218.214 55.4663,217.99C 55.4418,217.907 55.3808,217.656 55.386,217.743C 55.4715,219.169 55.6005,220.592 55.7078,222.016L 52.7685,159.226L 47.1657,100.846L 44.7942,87.9091L 37.6796,46.7776L 31.5137,31.8508L 31.0394,26.5435 Z "/>
    
    						</Canvas>
    
    					</Viewbox>
    
    				</Canvas>
    
    			</Viewbox>
    
    		</Canvas>
    
    	</Viewbox>
    
    </Canvas><br/><br/>
    
    
    Friday, April 17, 2009 9:04 PM