« New Windows Live Writer Beta available | Main | Think you know your .NET string comparison functions? »

Glass Button Tutorial for Expression Design

Here's a brief tutorial on how to create a simple glassy button using Microsoft Expression Design.

First create a square document of whatever size you need. It's usually easier to start a bit bigger than you need and scale down than the other way. But, when you're using vectors, it doesn't matter as much (except for borders ... those always matter...).

I started with a 400x400 document:

image

 I selected the Ellipse off the toolbar (press L as a shortcut).

image

Start in the upper left corner of the document and holding shift down, press the left mouse button. Then, drag a circle down and to the right corner. You'll see how Design automatically snaps to the borders for you making it very easy to do a circle that fills the space.

image

Next, select the border and make sure it's black (or your favorite border color). Click on the second tab in the appearance palette, then pick a color by selecting it from the quick list at the top, from the color palette below, or typing in the RGB hex value of #000000 directly.

image

Next, set the width of the border to 10px. You'll want a smaller number if you plan on using this as a vector drawing and resizing it smaller -- the border won't shrink even though the graphic does. 

image

Now, select the fill color which is the first tab:

image

You'll then need to select the gradient option which is highlighted above with the orange arrow. It might look different on your screen depending on what gradients you have recently used.

Next, select the radial gradient, which is the

image

Now you'll need to set the actual colors of the gradient. It's not a science -- so just pick three red colors similar to the ones I selected below. I used, from left to right: #EF8C8C, #A40808, & #DB0000.

image

Make sure the ellipse is still selected and select Copy from the edit menu (or CTRL+C). Then select Paste in Front from the Edit menu (CTRL+F):

image

That pastes a duplicate exactly on top of the original. A normal copy just places it on the document offset to the original. 

Grab the selection rectangle and resize the image down to about here:

image

Turn off the border by clicking on the border tab, then selecting the 'empty' color which is the first button on the left on the top (a box with a line through it).

image

Now -- change the gradient fill. Delete one of the reds. Then change both colors to white and set the opacity to 20% on the left most color and 50% on the other.

image

You'll need to rotate the circle:

image

Move mouse to the lower right corner. The mouse cursor will change to the "Rotate cursor". Holding down SHIFT, drag the circle in 45 degree increments until gradient looks like the one above. The SHIFT key forces the drag to happen in 45 degree increments.

Drag the image up and hold down shift to help prevent slight drift in the location side to side.

Hold down ALT and drag one of the sides to look like this:

image

It will stretch the circle into a slight oval.

image

You're done!

And finally -- using other techniques and a tiny tweak, you can change the look easily and quickly.

image

The XAML isn't too bad either ... :)

 

<?xml version="1.0" encoding="utf-8"?>
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <DrawingBrush x:Key="UnnamedObject0">
    <DrawingBrush.Drawing>
      <DrawingGroup>
        <DrawingGroup.Children>
          <GeometryDrawing Geometry="F1 M 200,0C 310.457,0 400,89.5431 400,200C 400,310.457 310.457,400 200,400C 89.5431,400 0,310.457 0,200C 0,89.5431 89.5431,0 200,0 Z ">
            <GeometryDrawing.Pen>
              <Pen Thickness="10" LineJoin="Round" Brush="#FF000000"/>
            </GeometryDrawing.Pen>
            <GeometryDrawing.Brush>
              <RadialGradientBrush RadiusX="0.5" RadiusY="0.5" Center="0.5,0.5" GradientOrigin="0.5,0.5">
                <RadialGradientBrush.GradientStops>
                  <GradientStop Color="#FF8CA0EF" Offset="0"/>
                  <GradientStop Color="#FF083DA4" Offset="0.898305"/>
                  <GradientStop Color="#FF0068DB" Offset="1"/>
                </RadialGradientBrush.GradientStops>
                <RadialGradientBrush.RelativeTransform>
                  <TransformGroup/>
                </RadialGradientBrush.RelativeTransform>
              </RadialGradientBrush>
            </GeometryDrawing.Brush>
          </GeometryDrawing>
        </DrawingGroup.Children>
      </DrawingGroup>
    </DrawingBrush.Drawing>
  </DrawingBrush>
  <DrawingBrush x:Key="UnnamedObject1">
    <DrawingBrush.Drawing>
      <DrawingGroup>
        <DrawingGroup.Children>
          <GeometryDrawing Geometry="F1 M 17.5556,171.981C 17.5556,78.6553 98.7413,3 198.889,3C 299.037,3 380.222,78.6552 380.222,171.981C 380.222,265.306 299.037,340.962 198.889,340.962C 98.7413,340.962 17.5556,265.306 17.5556,171.981 Z ">
            <GeometryDrawing.Brush>
              <LinearGradientBrush StartPoint="0.5,1.0125" EndPoint="0.5,-0.0125">
                <LinearGradientBrush.GradientStops>
                  <GradientStop Color="#00FFFFFF" Offset="0.444915"/>
                  <GradientStop Color="#7FFFFFFF" Offset="0.995763"/>
                </LinearGradientBrush.GradientStops>
              </LinearGradientBrush>
            </GeometryDrawing.Brush>
          </GeometryDrawing>
        </DrawingGroup.Children>
      </DrawingGroup>
    </DrawingBrush.Drawing>
  </DrawingBrush>
  <DrawingBrush x:Key="UnnamedObject2">
    <DrawingBrush.Drawing>
      <DrawingGroup>
        <DrawingGroup.Children>
          <GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 101.827,100.036L 107.564,100.036L 117.907,128.641L 128.234,100.036L 133.987,100.036L 133.987,135.556L 130.627,135.556L 130.627,103.246L 118.964,135.556L 116.872,135.556L 105.187,103.246L 105.187,135.556L 101.827,135.556L 101.827,100.036 Z "/>
          <GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 143.587,100.036L 146.947,100.036L 146.947,103.876L 143.587,103.876L 143.587,100.036 Z M 143.587,110.116L 146.947,110.116L 146.947,135.556L 143.587,135.556L 143.587,110.116 Z "/>
          <GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 175.747,129.511C 174.592,131.526 173.324,133.033 171.944,134.033C 170.109,135.368 168.042,136.036 165.742,136.036C 163.747,136.036 161.874,135.501 160.124,134.431C 158.374,133.361 157.021,131.812 156.063,129.784C 155.106,127.757 154.627,125.428 154.627,122.798C 154.627,118.758 155.716,115.554 157.893,113.187C 160.071,110.819 162.697,109.636 165.772,109.636C 167.847,109.636 169.731,110.181 171.423,111.271C 173.116,112.361 174.557,113.996 175.747,116.176L 172.867,117.796C 171.887,116.021 170.826,114.697 169.683,113.824C 168.541,112.952 167.229,112.516 165.749,112.516C 163.644,112.516 161.824,113.402 160.289,115.174C 158.754,116.947 157.987,119.588 157.987,123.098C 157.987,126.198 158.763,128.649 160.316,130.452C 161.868,132.254 163.649,133.156 165.659,133.156C 168.694,133.156 171.097,131.396 172.867,127.876L 175.747,129.511 Z "/>
          <GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 185.347,115.501C 186.747,113.471 188.212,111.986 189.742,111.046C 191.272,110.106 193.017,109.636 194.977,109.636C 195.192,109.636 195.502,109.636 195.907,109.636L 194.947,112.996L 193.769,112.996C 192.909,112.996 191.946,113.239 190.878,113.727C 189.811,114.214 188.859,114.984 188.024,116.037C 187.189,117.089 186.534,118.398 186.059,119.963C 185.584,121.528 185.347,122.911 185.347,124.111L 185.347,135.556L 181.987,135.556L 181.987,110.116L 185.347,110.116L 185.347,115.501 Z "/>
          <GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 211.357,136.036C 208.082,136.036 205.328,134.848 203.096,132.473C 200.863,130.098 199.747,126.906 199.747,122.896C 199.747,120.221 200.242,117.849 201.232,115.782C 202.222,113.714 203.603,112.173 205.376,111.158C 207.148,110.143 209.032,109.636 211.027,109.636C 212.957,109.636 214.804,110.158 216.569,111.203C 218.334,112.248 219.732,113.829 220.762,115.947C 221.792,118.064 222.307,120.428 222.307,123.038C 222.307,127.018 221.222,130.179 219.052,132.522C 216.882,134.864 214.317,136.036 211.357,136.036 Z M 211.087,133.156C 213.202,133.156 215.041,132.256 216.603,130.456C 218.166,128.656 218.947,126.073 218.947,122.708C 218.947,119.388 218.186,116.859 216.663,115.122C 215.141,113.384 213.307,112.516 211.162,112.516C 208.887,112.516 206.976,113.401 205.428,115.171C 203.881,116.941 203.107,119.468 203.107,122.753C 203.107,126.118 203.884,128.693 205.439,130.478C 206.994,132.263 208.877,133.156 211.087,133.156 Z "/>
          <GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 229.897,120.818C 228.677,119.513 228.067,118.058 228.067,116.453C 228.067,114.598 228.823,112.998 230.336,111.653C 231.848,110.308 233.954,109.636 236.654,109.636C 238.449,109.636 240.146,109.979 241.743,110.667C 243.341,111.354 244.702,112.371 245.827,113.716L 243.187,115.876C 242.217,114.726 241.216,113.878 240.183,113.333C 239.151,112.788 237.969,112.516 236.639,112.516C 234.934,112.516 233.639,112.887 232.754,113.629C 231.869,114.372 231.427,115.236 231.427,116.221C 231.427,117.056 231.767,117.806 232.447,118.471C 233.107,119.136 234.667,119.796 237.127,120.451C 240.912,121.456 243.469,122.661 244.799,124.066C 246.124,125.471 246.787,127.016 246.787,128.701C 246.787,130.716 245.996,132.442 244.413,133.879C 242.831,135.317 240.677,136.036 237.952,136.036C 235.957,136.036 234.118,135.648 232.436,134.873C 230.753,134.098 228.977,132.806 227.107,130.996L 230.227,128.836C 231.612,130.386 232.913,131.493 234.131,132.158C 235.348,132.823 236.637,133.156 237.997,133.156C 239.722,133.156 241.058,132.727 242.006,131.869C 242.953,131.012 243.427,130.003 243.427,128.843C 243.427,127.883 243.072,127.058 242.362,126.368C 241.357,125.388 239.337,124.498 236.302,123.698C 234.432,123.193 232.877,122.633 231.637,122.018C 231.022,121.723 230.442,121.323 229.897,120.818 Z "/>
          <GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 263.197,136.036C 259.922,136.036 257.168,134.848 254.936,132.473C 252.703,130.098 251.587,126.906 251.587,122.896C 251.587,120.221 252.082,117.849 253.072,115.782C 254.062,113.714 255.443,112.173 257.216,111.158C 258.988,110.143 260.872,109.636 262.867,109.636C 264.797,109.636 266.644,110.158 268.409,111.203C 270.174,112.248 271.572,113.829 272.602,115.947C 273.632,118.064 274.147,120.428 274.147,123.038C 274.147,127.018 273.062,130.179 270.892,132.522C 268.722,134.864 266.157,136.036 263.197,136.036 Z M 262.927,133.156C 265.042,133.156 266.881,132.256 268.443,130.456C 270.006,128.656 270.787,126.073 270.787,122.708C 270.787,119.388 270.026,116.859 268.503,115.122C 266.981,113.384 265.147,112.516 263.002,112.516C 260.727,112.516 258.816,113.401 257.268,115.171C 255.721,116.941 254.947,119.468 254.947,122.753C 254.947,126.118 255.724,128.693 257.279,130.478C 258.834,132.263 260.717,133.156 262.927,133.156 Z "/>
          <GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 281.827,110.116L 281.827,106.276C 281.827,104.386 282.432,102.873 283.642,101.738C 284.852,100.603 286.544,100.036 288.719,100.036C 289.204,100.036 289.787,100.036 290.467,100.036L 290.467,102.916C 289.812,102.916 289.274,102.916 288.854,102.916C 287.664,102.916 286.756,103.237 286.128,103.879C 285.501,104.522 285.187,105.386 285.187,106.471L 285.187,110.116L 290.467,110.116L 290.467,112.996L 285.187,112.996L 285.187,135.556L 281.827,135.556L 281.827,112.996L 277.507,112.996L 277.507,110.116L 281.827,110.116 Z "/>
          <GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 297.187,100.996L 300.547,100.996L 300.547,110.116L 306.787,110.116L 306.787,112.996L 300.547,112.996L 300.547,128.948C 300.547,130.273 300.889,131.306 301.574,132.046C 302.259,132.786 303.179,133.156 304.334,133.156C 304.954,133.156 305.772,133.156 306.787,133.156L 306.787,136.036C 305.617,136.036 304.637,136.036 303.847,136.036C 301.447,136.036 299.737,135.528 298.717,134.513C 297.697,133.498 297.187,131.831 297.187,129.511L 297.187,112.996L 292.867,112.996L 292.867,110.116L 297.187,110.116L 297.187,100.996 Z "/>
          <GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 85.1469,157.636L 106.267,157.636L 106.267,160.996L 88.5069,160.996L 88.5069,172.516L 102.427,172.516L 102.427,175.876L 88.5069,175.876L 88.5069,189.796L 107.707,189.796L 107.707,193.156L 85.1469,193.156L 85.1469,157.636 Z "/>
          <GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 111.787,167.716L 115.747,167.716L 122.107,177.143L 128.467,167.716L 132.427,167.716L 124.087,180.076L 132.907,193.156L 128.954,193.156L 122.107,183.008L 115.259,193.156L 111.307,193.156L 120.127,180.076L 111.787,167.716 Z "/>
          <GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 141.787,170.858C 143.172,169.648 144.583,168.742 146.021,168.139C 147.458,167.537 148.924,167.236 150.419,167.236C 152.289,167.236 154.069,167.771 155.759,168.841C 157.449,169.911 158.743,171.492 159.641,173.584C 160.538,175.677 160.987,177.973 160.987,180.473C 160.987,183.098 160.523,185.437 159.596,187.489C 158.668,189.542 157.359,191.079 155.669,192.102C 153.979,193.124 152.229,193.636 150.419,193.636C 148.924,193.636 147.458,193.336 146.021,192.736C 144.583,192.136 143.172,191.243 141.787,190.058L 141.787,202.756L 138.427,202.756L 138.427,167.716L 141.787,167.716L 141.787,170.858 Z M 141.787,187.006C 143.287,188.256 144.739,189.193 146.144,189.818C 147.549,190.443 148.914,190.756 150.239,190.756C 152.244,190.756 153.977,189.882 155.437,188.134C 156.897,186.387 157.627,183.773 157.627,180.293C 157.627,176.958 156.881,174.428 155.388,172.703C 153.896,170.978 152.092,170.116 149.977,170.116C 148.732,170.116 147.427,170.432 146.062,171.064C 144.697,171.697 143.272,172.656 141.787,173.941L 141.787,187.006 Z "/>
          <GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 171.067,173.101C 172.467,171.071 173.932,169.586 175.462,168.646C 176.992,167.706 178.737,167.236 180.697,167.236C 180.912,167.236 181.222,167.236 181.627,167.236L 180.667,170.596L 179.489,170.596C 178.629,170.596 177.666,170.839 176.598,171.327C 175.531,171.814 174.579,172.584 173.744,173.637C 172.909,174.689 172.254,175.998 171.779,177.563C 171.304,179.128 171.067,180.511 171.067,181.711L 171.067,193.156L 167.707,193.156L 167.707,167.716L 171.067,167.716L 171.067,173.101 Z "/>
          <GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 205.387,187.456C 203.847,189.541 202.206,191.092 200.463,192.109C 198.721,193.127 196.917,193.636 195.052,193.636C 192.092,193.636 189.554,192.459 187.439,190.107C 185.324,187.754 184.267,184.481 184.267,180.286C 184.267,176.241 185.313,173.054 187.406,170.727C 189.498,168.399 191.944,167.236 194.744,167.236C 196.614,167.236 198.412,167.787 200.137,168.889C 201.862,169.992 203.157,171.482 204.022,173.359C 204.887,175.237 205.342,177.676 205.387,180.676L 187.627,180.676C 187.707,182.741 188.012,184.433 188.542,185.753C 189.242,187.493 190.184,188.762 191.369,189.559C 192.554,190.357 193.702,190.756 194.812,190.756C 197.587,190.756 200.184,188.998 202.604,185.483L 205.387,187.456 Z M 202.027,177.796C 201.772,175.401 200.946,173.522 199.548,172.159C 198.151,170.797 196.572,170.116 194.812,170.116C 192.672,170.116 190.959,170.923 189.674,172.538C 188.389,174.153 187.707,175.906 187.627,177.796L 202.027,177.796 Z "/>
          <GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 212.977,178.418C 211.757,177.113 211.147,175.658 211.147,174.053C 211.147,172.198 211.903,170.598 213.416,169.253C 214.928,167.908 217.034,167.236 219.734,167.236C 221.529,167.236 223.226,167.579 224.823,168.267C 226.421,168.954 227.782,169.971 228.907,171.316L 226.267,173.476C 225.297,172.326 224.296,171.478 223.263,170.933C 222.231,170.388 221.049,170.116 219.719,170.116C 218.014,170.116 216.719,170.487 215.834,171.229C 214.949,171.972 214.507,172.836 214.507,173.821C 214.507,174.656 214.847,175.406 215.527,176.071C 216.187,176.736 217.747,177.396 220.207,178.051C 223.992,179.056 226.549,180.261 227.879,181.666C 229.204,183.071 229.867,184.616 229.867,186.301C 229.867,188.316 229.076,190.042 227.493,191.479C 225.911,192.917 223.757,193.636 221.032,193.636C 219.037,193.636 217.198,193.248 215.516,192.473C 213.833,191.698 212.057,190.406 210.187,188.596L 213.307,186.436C 214.692,187.986 215.993,189.093 217.211,189.758C 218.428,190.423 219.717,190.756 221.077,190.756C 222.802,190.756 224.138,190.327 225.086,189.469C 226.033,188.612 226.507,187.603 226.507,186.443C 226.507,185.483 226.152,184.658 225.442,183.968C 224.437,182.988 222.417,182.098 219.382,181.298C 217.512,180.793 215.957,180.233 214.717,179.618C 214.102,179.323 213.522,178.923 212.977,178.418 Z "/>
          <GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 237.457,178.418C 236.237,177.113 235.627,175.658 235.627,174.053C 235.627,172.198 236.383,170.598 237.896,169.253C 239.408,167.908 241.514,167.236 244.214,167.236C 246.009,167.236 247.706,167.579 249.303,168.267C 250.901,168.954 252.262,169.971 253.387,171.316L 250.747,173.476C 249.777,172.326 248.776,171.478 247.743,170.933C 246.711,170.388 245.529,170.116 244.199,170.116C 242.494,170.116 241.199,170.487 240.314,171.229C 239.429,171.972 238.987,172.836 238.987,173.821C 238.987,174.656 239.327,175.406 240.007,176.071C 240.667,176.736 242.227,177.396 244.687,178.051C 248.472,179.056 251.029,180.261 252.359,181.666C 253.684,183.071 254.347,184.616 254.347,186.301C 254.347,188.316 253.556,190.042 251.973,191.479C 250.391,192.917 248.237,193.636 245.512,193.636C 243.517,193.636 241.678,193.248 239.996,192.473C 238.313,191.698 236.537,190.406 234.667,188.596L 237.787,186.436C 239.172,187.986 240.473,189.093 241.691,189.758C 242.908,190.423 244.197,190.756 245.557,190.756C 247.282,190.756 248.618,190.327 249.566,189.469C 250.513,188.612 250.987,187.603 250.987,186.443C 250.987,185.483 250.632,184.658 249.922,183.968C 248.917,182.988 246.897,182.098 243.862,181.298C 241.992,180.793 240.437,180.233 239.197,179.618C 238.582,179.323 238.002,178.923 237.457,178.418 Z "/>
          <GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 261.547,157.636L 264.907,157.636L 264.907,161.476L 261.547,161.476L 261.547,157.636 Z M 261.547,167.716L 264.907,167.716L 264.907,193.156L 261.547,193.156L 261.547,167.716 Z "/>
          <GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 284.197,193.636C 280.922,193.636 278.168,192.448 275.936,190.073C 273.703,187.698 272.587,184.506 272.587,180.496C 272.587,177.821 273.082,175.449 274.072,173.382C 275.062,171.314 276.443,169.773 278.216,168.758C 279.988,167.743 281.872,167.236 283.867,167.236C 285.797,167.236 287.645,167.758 289.409,168.803C 291.174,169.848 292.572,171.429 293.602,173.547C 294.632,175.664 295.147,178.028 295.147,180.638C 295.147,184.618 294.062,187.779 291.892,190.122C 289.722,192.464 287.157,193.636 284.197,193.636 Z M 283.927,190.756C 286.042,190.756 287.881,189.856 289.443,188.056C 291.006,186.256 291.787,183.673 291.787,180.308C 291.787,176.988 291.026,174.459 289.503,172.722C 287.981,170.984 286.147,170.116 284.002,170.116C 281.727,170.116 279.816,171.001 278.268,172.771C 276.721,174.541 275.947,177.068 275.947,180.353C 275.947,183.718 276.724,186.293 278.279,188.078C 279.835,189.863 281.717,190.756 283.927,190.756 Z "/>
          <GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 305.227,170.401C 307.082,169.391 308.879,168.611 310.619,168.061C 312.359,167.511 313.772,167.236 314.857,167.236C 316.067,167.236 317.187,167.492 318.217,168.004C 319.247,168.517 320.139,169.399 320.894,170.652C 321.649,171.904 322.027,173.458 322.027,175.313L 322.027,193.156L 318.667,193.156L 318.667,175.358C 318.667,173.588 318.279,172.272 317.504,171.409C 316.729,170.547 315.677,170.116 314.347,170.116C 313.127,170.116 311.757,170.379 310.237,170.907C 308.717,171.434 307.047,172.231 305.227,173.296L 305.227,193.156L 301.867,193.156L 301.867,167.716L 305.227,167.716L 305.227,170.401 Z "/>
          <GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 124.387,211.636L 134.362,211.636C 139.427,211.636 143.431,213.174 146.373,216.252C 149.316,219.329 150.787,223.601 150.787,229.066C 150.787,231.861 150.427,234.431 149.707,236.776C 149.172,238.541 148.416,240.063 147.438,241.343C 146.461,242.623 145.352,243.693 144.112,244.553C 143.212,245.163 142.142,245.688 140.902,246.128C 138.882,246.813 136.304,247.156 133.169,247.156L 124.387,247.156L 124.387,211.636 Z M 127.747,214.516L 127.747,244.276L 135.269,244.276C 138.234,244.276 140.849,243.308 143.114,241.373C 145.989,238.943 147.427,234.966 147.427,229.441C 147.427,223.806 145.952,219.751 143.002,217.276C 140.812,215.436 138.054,214.516 134.729,214.516L 127.747,214.516 Z "/>
          <GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 177.187,241.456C 175.647,243.541 174.006,245.092 172.263,246.109C 170.521,247.127 168.717,247.636 166.852,247.636C 163.892,247.636 161.354,246.459 159.239,244.107C 157.124,241.754 156.067,238.481 156.067,234.286C 156.067,230.241 157.113,227.054 159.206,224.727C 161.298,222.399 163.744,221.236 166.544,221.236C 168.414,221.236 170.212,221.787 171.937,222.889C 173.662,223.992 174.957,225.482 175.822,227.359C 176.687,229.237 177.142,231.676 177.187,234.676L 159.427,234.676C 159.507,236.741 159.812,238.433 160.342,239.753C 161.042,241.493 161.984,242.762 163.169,243.559C 164.354,244.357 165.502,244.756 166.612,244.756C 169.387,244.756 171.984,242.998 174.404,239.483L 177.187,241.456 Z M 173.827,231.796C 173.572,229.401 172.746,227.522 171.348,226.159C 169.951,224.797 168.372,224.116 166.612,224.116C 164.472,224.116 162.759,224.923 161.474,226.538C 160.189,228.153 159.507,229.906 159.427,231.796L 173.827,231.796 Z "/>
          <GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 184.777,232.418C 183.557,231.113 182.947,229.658 182.947,228.053C 182.947,226.198 183.703,224.598 185.216,223.253C 186.728,221.908 188.834,221.236 191.534,221.236C 193.329,221.236 195.026,221.579 196.623,222.267C 198.221,222.954 199.582,223.971 200.707,225.316L 198.067,227.476C 197.097,226.326 196.096,225.478 195.063,224.933C 194.031,224.388 192.849,224.116 191.519,224.116C 189.814,224.116 188.519,224.487 187.634,225.229C 186.749,225.972 186.307,226.836 186.307,227.821C 186.307,228.656 186.647,229.406 187.327,230.071C 187.987,230.736 189.547,231.396 192.007,232.051C 195.792,233.056 198.349,234.261 199.679,235.666C 201.004,237.071 201.667,238.616 201.667,240.301C 201.667,242.316 200.876,244.042 199.293,245.479C 197.711,246.917 195.557,247.636 192.832,247.636C 190.837,247.636 188.998,247.248 187.316,246.473C 185.633,245.698 183.857,244.406 181.987,242.596L 185.107,240.436C 186.492,241.986 187.793,243.093 189.011,243.758C 190.228,244.423 191.517,244.756 192.877,244.756C 194.602,244.756 195.938,244.327 196.886,243.469C 197.833,242.612 198.307,241.603 198.307,240.443C 198.307,239.483 197.952,238.658 197.242,237.968C 196.237,236.988 194.217,236.098 191.182,235.298C 189.312,234.793 187.757,234.233 186.517,233.618C 185.902,233.323 185.322,232.923 184.777,232.418 Z "/>
          <GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 208.867,211.636L 212.227,211.636L 212.227,215.476L 208.867,215.476L 208.867,211.636 Z M 208.867,221.716L 212.227,221.716L 212.227,247.156L 208.867,247.156L 208.867,221.716 Z "/>
          <GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 223.552,237.068C 222.442,236.088 221.637,235.077 221.137,234.034C 220.637,232.992 220.387,231.766 220.387,230.356C 220.387,227.736 221.306,225.561 223.143,223.831C 224.981,222.101 227.474,221.236 230.624,221.236C 231.919,221.236 233.147,221.424 234.307,221.802C 235.467,222.179 236.554,222.756 237.569,223.531C 239.239,222.376 241.352,221.771 243.907,221.716L 243.907,224.626L 242.707,224.596C 241.257,224.596 240.124,224.896 239.309,225.496C 240.134,226.911 240.547,228.476 240.547,230.191C 240.547,232.861 239.629,235.076 237.794,236.836C 235.959,238.596 233.467,239.476 230.317,239.476C 229.347,239.476 228.219,239.366 226.934,239.146C 226.324,239.036 225.877,238.981 225.592,238.981C 224.872,238.981 224.304,239.161 223.889,239.521C 223.474,239.881 223.267,240.301 223.267,240.781C 223.267,241.356 223.617,241.823 224.317,242.183C 224.642,242.338 225.647,242.396 227.332,242.356C 231.417,242.561 234.532,242.999 236.677,243.672C 238.822,244.344 240.323,245.251 241.181,246.391C 242.038,247.531 242.467,248.771 242.467,250.111C 242.467,251.471 242.024,252.713 241.139,253.838C 240.254,254.963 238.939,255.811 237.194,256.381C 235.449,256.951 233.607,257.236 231.667,257.236C 228.962,257.236 226.489,256.871 224.249,256.141C 222.544,255.566 221.234,254.707 220.319,253.564C 219.404,252.422 218.947,251.228 218.947,249.983C 218.947,249.023 219.204,248.104 219.719,247.227C 220.234,246.349 221.004,245.506 222.029,244.696C 221.229,244.161 220.676,243.644 220.368,243.147C 220.061,242.649 219.907,242.083 219.907,241.448C 219.907,240.613 220.194,239.843 220.769,239.138C 221.344,238.433 222.272,237.743 223.552,237.068 Z M 230.422,236.596C 232.467,236.596 234.106,235.958 235.338,234.683C 236.571,233.408 237.187,231.901 237.187,230.161C 237.187,228.501 236.608,227.078 235.451,225.893C 234.293,224.708 232.677,224.116 230.602,224.116C 228.407,224.116 226.716,224.703 225.528,225.878C 224.341,227.053 223.747,228.528 223.747,230.303C 223.747,232.083 224.352,233.577 225.562,234.784C 226.772,235.992 228.392,236.596 230.422,236.596 Z M 224.947,245.716C 223.907,246.346 223.127,247.007 222.607,247.699C 222.087,248.392 221.827,249.111 221.827,249.856C 221.827,250.871 222.379,251.766 223.484,252.541C 225.184,253.751 227.632,254.356 230.827,254.356C 234.017,254.356 236.294,253.866 237.659,252.886C 238.624,252.196 239.107,251.313 239.107,250.238C 239.107,248.953 238.191,247.961 236.358,247.261C 234.526,246.561 230.722,246.046 224.947,245.716 Z "/>
          <GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 252.547,224.401C 254.402,223.391 256.199,222.611 257.939,222.061C 259.679,221.511 261.092,221.236 262.177,221.236C 263.387,221.236 264.507,221.492 265.537,222.004C 266.567,222.517 267.459,223.399 268.214,224.652C 268.969,225.904 269.347,227.458 269.347,229.313L 269.347,247.156L 265.987,247.156L 265.987,229.358C 265.987,227.588 265.599,226.272 264.824,225.409C 264.049,224.547 262.997,224.116 261.667,224.116C 260.447,224.116 259.077,224.379 257.557,224.907C 256.037,225.434 254.367,226.231 252.547,227.296L 252.547,247.156L 249.187,247.156L 249.187,221.716L 252.547,221.716L 252.547,224.401 Z "/>
          <GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 112.147,303.556L 112.147,268.996L 126.614,268.996C 130.249,268.996 132.892,269.306 134.542,269.926C 136.192,270.546 137.512,271.649 138.502,273.237C 139.492,274.824 139.987,276.638 139.987,278.678C 139.987,281.273 139.276,283.414 137.853,285.102C 136.431,286.789 134.304,287.853 131.474,288.293C 132.884,289.173 134.047,290.141 134.962,291.196C 135.877,292.251 137.112,294.121 138.667,296.806L 142.867,303.556L 135.022,303.556L 130.109,295.718C 128.229,293.163 126.942,291.554 126.247,290.892C 125.552,290.229 124.817,289.774 124.042,289.527C 123.267,289.279 122.037,289.156 120.352,289.156L 118.867,289.156L 118.867,303.556L 112.147,303.556 Z M 118.867,283.396L 124.139,283.396C 127.559,283.396 129.694,283.257 130.544,282.979C 131.394,282.702 132.061,282.222 132.543,281.539C 133.026,280.857 133.267,280.006 133.267,278.986C 133.267,277.836 132.949,276.909 132.314,276.207C 131.679,275.504 130.784,275.058 129.629,274.868C 129.054,274.793 127.322,274.756 124.432,274.756L 118.867,274.756L 118.867,283.396 Z "/>
          <GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 145.267,286.486C 145.267,282.986 145.794,280.048 146.849,277.673C 147.639,275.928 148.716,274.361 150.078,272.971C 151.441,271.581 152.932,270.548 154.552,269.873C 156.712,268.968 159.202,268.516 162.022,268.516C 167.122,268.516 171.204,270.086 174.269,273.226C 177.334,276.366 178.867,280.731 178.867,286.321C 178.867,291.866 177.347,296.204 174.307,299.337C 171.267,302.469 167.202,304.036 162.112,304.036C 156.962,304.036 152.867,302.478 149.827,299.363C 146.787,296.248 145.267,291.956 145.267,286.486 Z M 151.987,286.253C 151.987,290.198 152.939,293.188 154.844,295.223C 156.749,297.258 159.169,298.276 162.104,298.276C 165.039,298.276 167.447,297.266 169.327,295.246C 171.207,293.226 172.147,290.196 172.147,286.156C 172.147,282.166 171.232,279.188 169.402,277.223C 167.572,275.258 165.139,274.276 162.104,274.276C 159.069,274.276 156.624,275.269 154.769,277.257C 152.914,279.244 151.987,282.243 151.987,286.253 Z "/>
          <GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 206.227,290.596L 212.947,292.516C 211.907,296.251 210.174,299.024 207.749,300.837C 205.324,302.649 202.249,303.556 198.524,303.556C 193.914,303.556 190.126,302.018 187.158,298.943C 184.191,295.868 182.707,291.666 182.707,286.336C 182.707,280.696 184.179,276.316 187.124,273.196C 190.069,270.076 193.942,268.516 198.742,268.516C 202.937,268.516 206.342,269.761 208.957,272.251C 210.517,273.726 211.687,275.841 212.467,278.596L 205.747,280.036C 205.327,278.256 204.452,276.851 203.122,275.821C 201.792,274.791 200.177,274.276 198.277,274.276C 195.647,274.276 193.514,275.184 191.879,277.002C 190.244,278.819 189.427,281.761 189.427,285.826C 189.427,290.141 190.244,293.214 191.879,295.047C 193.514,296.879 195.639,297.796 198.254,297.796C 200.184,297.796 201.844,297.217 203.234,296.059C 204.624,294.902 205.622,293.081 206.227,290.596 Z "/>
          <GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 218.707,303.556L 218.707,268.996L 225.427,268.996L 225.427,284.498L 239.969,268.996L 249.187,268.996L 236.077,282.361L 249.667,303.556L 240.644,303.556L 230.962,287.573L 225.427,293.221L 225.427,303.556L 218.707,303.556 Z "/>
          <GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 251.827,292.516L 258.547,292.036C 258.957,294.181 259.789,295.757 261.044,296.764C 262.299,297.772 263.994,298.276 266.129,298.276C 268.384,298.276 270.084,297.818 271.229,296.903C 272.374,295.988 272.947,294.918 272.947,293.693C 272.947,292.908 272.709,292.241 272.234,291.691C 271.759,291.141 270.932,290.661 269.752,290.251C 268.942,289.956 267.097,289.433 264.217,288.683C 260.512,287.718 257.912,286.556 256.417,285.196C 254.317,283.286 253.267,280.956 253.267,278.206C 253.267,276.436 253.748,274.781 254.711,273.241C 255.673,271.701 257.061,270.528 258.873,269.723C 260.686,268.918 262.874,268.516 265.439,268.516C 269.624,268.516 272.776,269.432 274.893,271.264C 277.011,273.097 278.122,275.541 278.227,278.596L 271.507,279.076C 271.227,277.371 270.623,276.144 269.696,275.397C 268.768,274.649 267.377,274.276 265.522,274.276C 263.612,274.276 262.114,274.683 261.029,275.498C 260.334,276.023 259.987,276.723 259.987,277.598C 259.987,278.398 260.324,279.083 260.999,279.653C 261.859,280.378 263.944,281.157 267.254,281.989C 270.564,282.822 273.012,283.663 274.597,284.513C 276.182,285.363 277.423,286.523 278.321,287.993C 279.218,289.463 279.667,291.283 279.667,293.453C 279.667,295.413 279.122,297.251 278.032,298.966C 276.942,300.681 275.401,301.954 273.408,302.787C 271.416,303.619 268.932,304.036 265.957,304.036C 261.627,304.036 258.302,303.054 255.982,301.092C 253.662,299.129 252.277,296.271 251.827,292.516 Z "/>
          <GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 287.999,294.436L 286.387,277.036L 286.387,268.996L 293.107,268.996L 293.107,277.036L 291.517,294.436L 287.999,294.436 Z M 286.387,303.556L 286.387,296.836L 293.107,296.836L 293.107,303.556L 286.387,303.556 Z "/>
        </DrawingGroup.Children>
      </DrawingGroup>
    </DrawingBrush.Drawing>
  </DrawingBrush>
  <DrawingBrush x:Key="UnnamedObject34">
    <DrawingBrush.Drawing>
      <DrawingGroup>
        <DrawingGroup.Children>
          <GeometryDrawing Geometry="F1 M 384.222,236.471C 384.222,323.55 302.738,394.141 202.222,394.141C 101.706,394.141 20.2223,323.55 20.2223,236.471C 20.2223,149.393 101.706,78.8015 202.222,78.8015C 302.738,78.8015 384.222,149.393 384.222,236.471 Z ">
            <GeometryDrawing.Brush>
              <LinearGradientBrush StartPoint="0.5,-0.0125" EndPoint="0.5,1.0125">
                <LinearGradientBrush.GradientStops>
                  <GradientStop Color="#00FFFFFF" Offset="0.444915"/>
                  <GradientStop Color="#7F000000" Offset="0.995763"/>
                </LinearGradientBrush.GradientStops>
              </LinearGradientBrush>
            </GeometryDrawing.Brush>
          </GeometryDrawing>
        </DrawingGroup.Children>
      </DrawingGroup>
    </DrawingBrush.Drawing>
  </DrawingBrush>
</ResourceDictionary>

Comments

Thanks for the great tutorial. One thing: I think the stop opacity has to be around 2% or 5%, not 20% to get the effect you have. with 20% I get a fairly ugly white circle. Your xaml also uses primarily lineargradientbrushes instead of radial, so maybe that accounts for the difference.

Nice but it looks more like a gradient button than a glass button. Here I still miss that glassy look.

Help support my web site by searching and buying through Amazon.com (in assocation with Amazon.com).