Sean Gerety

Avalon Beta 1 RC is ready

Download it here!  http://www.microsoft.com/downloads/details.aspx?FamilyId=B789BC8D-4F25-4823-B6AA-C5EDF432D0C1&displaylang=en  However, if you're playing with the CTP version you'll need to follow these instructions to uninstall it.  There's also an updated WinFX SDK and it supports Visual Studio 2005 Beta 2. 

Enjoy!

What I want for my Birthday

Dear Mr. Sells and WinFX MSDN team,

I'd like to see XAML added to the language filters for the WinFX.  God help anyone that is trying to look up something on a button that's XAML related!  There's everything but XAML!

Sean

New XAML Wiki

Adam Nathan has created a new XAML wiki  to “Find and Share” (and learn) about XAML.  It's called XAMLshare.  I'll add any examples that I post here to the Wiki.  I've already added my Sparkline example and I'll add more as I post others to my blog. 

Thanks, Adam!

Sean

These M and M's are dark

Ahhh, the Darth side of M & M's.

Xbox 360 and Avalon

Confirmed:

It was hosted at Avalon.  Here's the club's link. http://www.avalonhollywood.com/

Did anyone else catch that the xbox360 show on MTV last night was coming live from Avalon?  Only us XAML and Longhorn geeks would catch that one.

New and Improved Sparkline

Update #2:

I've updated the code snippet below for the latest Avalon build.

Update:

I've changed the graphic to show how the well things look when you zoom.  Just use the Display Zoom slider in AvPad.  I've also changed the XAML example to stack the high and low values next to the stock sparkline and adjusted the Transform scale to provide a better aspect ratio as per Prof. Tufte.  And I've removed the width and height properties from the border element to give it a liquid layout.

Here's a new and improved in-line Sparkline example.  By using the Inline tag and slimming down the XAML it becomes even easier to handle.  And I've used some of the typography variants to achieve a better look and feel for the associated data.  Thanks to Filipe Fortes for the Inline tip.

Here's the XAML.

<Border xmlns="http://schemas.microsoft.com/winfx/avalon/2005" xmlns:x="http://schemas.microsoft.com/winfx/avalon/2005" Background="#ffffff" Padding="9">
    <TextFlow FontFamily="Palatino Linotype" FontSize="12">
        The following is over two hundred days of stock information for Microsoft <Inline Foreground="Blue">MSFT</Inline>
            <Polyline LayoutTransform="scale .1,.5" Points="1,26.23 2,26.19 3,26.14 4,26.1 5,25.76 6,25.89 7,25.73 8,25.62 9,25.83 10,25.54 11,25.86 12,26.1 13,25.94 14,25.94 15,25.93 16,25.78 17,26.12 18,26.3 19,26.33 20,26.35 21,26.13 22,26.48 23,26.56 24,27.22 25,27.24 26,27.54 27,25.95 28,25.45 29,25.33 30,25.53 31,25.16 32,25.22 33,25.51 34,25.45 35,25.61 36,25.48 37,25.59 38,25.8 39,25.95 40,25.85 41,25.08 42,24.93 43,25.2 44,25.31 45,25.03 46,25.19 47,24.41 48,24.15 49,24.5 50,24.63 51,24.89 52,25.13 53,25.18 54,25.16 55,25.38 56,25.09 57,25.37 57,25.72 59,25.83 60,26.35 61,26.37 62,26.37 63,26.39 64,26.7 65,26.53 66,26.5 67,26.7 68,26.88 69,26.61 70,26.57 71,26.46 72,26.77 73,26.99 74,26.59 75,26.95 76,27.15 77,27.02 78,26.9 79,27.08 80,26.96 81,27.01 82,27.29 83,27.4 84,27.65 85,27.91 86,27.71 87,28.25 88,28.8 89,28.48 90,28.01 91,28.3 92,28.1 93,27.81 94,27.54 95,27.7 96,27.43 97,27.57 98,27.66 99,28.16 100,28.21 101,28.24 102,28.14 103,27.45 104,27.37 105,27.52 106,27.46 107,27.21 108,27.04 109,27.15 110,27.18 111,27.36 112,27.4 113,27.04 114,27.06 115,26.74 116,26.65 117,26.61 118,26.59 119,26.38 120,26.24 121,25.98 122,26.2 123,25.67 124,25.66 125,25.84 126,25.71 127,25.45 128,25.4 129,25.73 130,25.11 131,25.1 132,25.35 133,25.15 134,25.15 135,25.5 136,25.69 137,25.98 138,25.8 139,26 140,26.1 141,26.23 142,26.1 143,26.07 144,26.68 145,26.14 146,26.12 147,26.74 148,27.2 149,26.91 150,26.61 151,28.91 152,28.89 153,29.35 154,29.35 155,28.93 156,29.23 157,29.07 157,28.68 159,28.78 160,28.91 161,28.94 162,28.82 163,29.14 164,29.19 165,29.08 166,28.5 167,28.52 168,27.8 169,28.83 170,28.19 171,28.24 172,28.46 173,29.6 174,29.07 175,29.96 176,29.5 177,28.5 178,28.9 179,28.36 180,28.34 181,27.84 182,27.55 183,28.37 184,28.84 185,28.38 186,28.43 187,28.3 188,27.26 189,26.52 190,26.51 191,26.42 192,26.57 193,26.5 194,26.22 195,26.24 196,26.45 197,26.62 198,25.7 199,25.54 200,25.63 201,25.6 202,25.73 203,25.61 204,25.58 205,25.71 206,25.65 207,25.66 208,26.18 209,26.17 210,26.41 211,26.23 212,26.47 213,26.61 214,26.89 215,26 216,26.45 217,26.38 218,26.04 219,26.89 220,26.69 221,27.52 222,27.27 223,27.4 224,27.31 225,26.91 226,27.47 227,27.7 228,27.42 229,26.5 230,26.88 231,26.15 232,25.64 233,25.63 234,25.75 235,25.26 236,25.7 237,25.78 238,26.33 239,26.07 240,26.07 241,25.96 242,25.39 243,24.65 244,24.99 245,24.88 246,24.68 247,23.75 248,23.67 249,24.09 250,24.87 251,24.88 252,24.64 253,24.61 254,24.4 255,24.41 256,24.79 257,24.22 257,24.16 259,24.03 260,24.63 261,24.76 262,25.57 263,25.79 264,25.62 265,25.99 266,26.2 267,26.36 268,25.74 269,25.99 270,26.37 271,25.86 272,26.1 273,25.72 " Stroke="Red" StrokeThickness="1" Opacity="1"></Polyline>
        <StackPanel HorizontalAlignment="Left" VerticalAlignment="Top" Height="12">
            <TextBlock Height="6">
                <Inline Foreground="Green" FontSize="5"> 29.96 </Inline>
            </TextBlock>
            <TextBlock Height="6">
                <Inline Foreground="Red" FontSize="5"> 23.67 </Inline>
            </TextBlock>
        </StackPanel> you see Avalon allows you to scale data down to a sparkline by taking advantage of vector graphics.

    </TextFlow>
</Border>

Updated Sparkline Example

Here's an updated version of the sparkline example using the new 2005 XAML schema.  This one is inside a textflow element with a TransformDecorator applied to the Polyline element.  You'll notice a couple of things that still need to be fixed.  On the stock symbol for MSFT there's no spacing between the word Microsoft and the word MSFT.  The same goes for the high / low values.  I also have to find the correct item to reposition the low value below the high value.  I wish that you could filter the WinFX SDK to only show results for XAML.  Especially for people like me that are just using AvPad.  For some more info on TransformDecorator check out Filipe Fortes blog entry titled “A Tale of Two Transforms”.  

Here's a screen shot of the results.

And the XAML is below.

<Window

xmlns="http://schemas.microsoft.com/winfx/avalon/2005"
xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005"
Background="#ffffff">

<Canvas>
<TextFlow FontFamily="Gill Sans" FontSize="12" >The

following is over two hundred days of stock

information for Microsoft <TextBlock

Foreground="Blue">MSFT</TextBlock>
 <TransformDecorator Transform="scale .2 .5">
  <Polyline Points="1,26.23 2,26.19 3,26.14 4,26.1

5,25.76 6,25.89 7,25.73 8,25.62 9,25.83 10,25.54

11,25.86 12,26.1 13,25.94 14,25.94 15,25.93 16,25.78

17,26.12 18,26.3 19,26.33 20,26.35 21,26.13 22,26.48

23,26.56 24,27.22 25,27.24 26,27.54 27,25.95 28,25.45

29,25.33 30,25.53 31,25.16 32,25.22 33,25.51 34,25.45

35,25.61 36,25.48 37,25.59 38,25.8 39,25.95 40,25.85

41,25.08 42,24.93 43,25.2 44,25.31 45,25.03 46,25.19

47,24.41 48,24.15 49,24.5 50,24.63 51,24.89 52,25.13

53,25.18 54,25.16 55,25.38 56,25.09 57,25.37 57,25.72

59,25.83 60,26.35 61,26.37 62,26.37 63,26.39 64,26.7

65,26.53 66,26.5 67,26.7 68,26.88 69,26.61 70,26.57

71,26.46 72,26.77 73,26.99 74,26.59 75,26.95 76,27.15

77,27.02 78,26.9 79,27.08 80,26.96 81,27.01 82,27.29

83,27.4 84,27.65 85,27.91 86,27.71 87,28.25 88,28.8

89,28.48 90,28.01 91,28.3 92,28.1 93,27.81 94,27.54

95,27.7 96,27.43 97,27.57 98,27.66 99,28.16 100,28.21

101,28.24 102,28.14 103,27.45 104,27.37 105,27.52

106,27.46 107,27.21 108,27.04 109,27.15 110,27.18

111,27.36 112,27.4 113,27.04 114,27.06 115,26.74

116,26.65 117,26.61 118,26.59 119,26.38 120,26.24

121,25.98 122,26.2 123,25.67 124,25.66 125,25.84

126,25.71 127,25.45 128,25.4 129,25.73 130,25.11

131,25.1 132,25.35 133,25.15 134,25.15 135,25.5

136,25.69 137,25.98 138,25.8 139,26 140,26.1 141,26.23

142,26.1 143,26.07 144,26.68 145,26.14 146,26.12

147,26.74 148,27.2 149,26.91 150,26.61 151,28.91

152,28.89 153,29.35 154,29.35 155,28.93 156,29.23

157,29.07 157,28.68 159,28.78 160,28.91 161,28.94

162,28.82 163,29.14 164,29.19 165,29.08 166,28.5

167,28.52 168,27.8 169,28.83 170,28.19 171,28.24

172,28.46 173,29.6 174,29.07 175,29.96 176,29.5

177,28.5 178,28.9 179,28.36 180,28.34 181,27.84

182,27.55 183,28.37 184,28.84 185,28.38 186,28.43

187,28.3 188,27.26 189,26.52 190,26.51 191,26.42

192,26.57 193,26.5 194,26.22 195,26.24 196,26.45

197,26.62 198,25.7 199,25.54 200,25.63 201,25.6

202,25.73 203,25.61 204,25.58 205,25.71 206,25.65

207,25.66 208,26.18 209,26.17 210,26.41 211,26.23

212,26.47 213,26.61 214,26.89 215,26 216,26.45

217,26.38 218,26.04 219,26.89 220,26.69 221,27.52

222,27.27 223,27.4 224,27.31 225,26.91 226,27.47

227,27.7 228,27.42 229,26.5 230,26.88 231,26.15

232,25.64 233,25.63 234,25.75 235,25.26 236,25.7

237,25.78 238,26.33 239,26.07 240,26.07 241,25.96

242,25.39 243,24.65 244,24.99 245,24.88 246,24.68

247,23.75 248,23.67 249,24.09 250,24.87 251,24.88

252,24.64 253,24.61 254,24.4 255,24.41 256,24.79

257,24.22 257,24.16 259,24.03 260,24.63 261,24.76

262,25.57 263,25.79 264,25.62 265,25.99 266,26.2

267,26.36 268,25.74 269,25.99 270,26.37 271,25.86

272,26.1 273,25.72 " Stroke="Red" StrokeThickness="2"

Opacity=".5">
  </Polyline>
 </TransformDecorator><TextBlock Foreground="Green">

29.96 </TextBlock><TextBlock Foreground="Red"> 23.67

</TextBlock>
 you see Avalon allows you to scale data down to a

sparkline by taking advantage of it's vector graphics

rendering.</TextFlow>
</Canvas>
</Window>

I've got a couple of things left to do on this one.  Bind the polyline to XML, and bind the size of the sparkline so that it's tied to the font size.  I'll get to that next week.  Have a great weekend.