This content originally appeared on Modern Web Development with Chrome and was authored by Paul Kinlan
<p>I have been messing around with the Map CTP Avalon Framework... I am still early in the learning stages as you can see by the following <a href="http://www.kinlan.co.uk/source_samples/MenuExample.xaml">example</a>.<p />Basically this xaml (load it up in XAMLPad) creates a menu which has a custom style assigned to it. This style draws each of the menu items as "<a href="http://www.designerslove.net/2005/06/gelbutton-custom-control.html/tag" rel="tag">GelButtons</a>". It took me a while to work out what to do. Initially I created a ControlTemplate, infact I needed to create a HeaderTemplate in the style.<p />It was pretty straight forward in the end. I hope someone finds it usefull.<p />Here Goes:<p /><div class="CodeRay"></p>
<div class="code"><pre><Page xmlns='http://schemas.microsoft.com/winfx/avalon/2005' xmlns:x='http://schemas.microsoft.com/winfx/xaml/2005'> <DockPanel> <Border Background='SkyBlue' BorderBrush='Black' BorderThickness='1' DockPanel.Dock='Top'> <Menu Background='SkyBlue'> <MenuItem Header='Language' > <MenuItem Header='English' Name='english' /> <MenuItem Header='German' Name='german' /> <MenuItem Header='Italian' Name='italian'/> </MenuItem> </Menu> </Border> <Border Height='25' Background='SkyBlue' BorderBrush='Black' BorderThickness='1' DockPanel.Dock='Top'> </Border> <Border Height='25' Background='#ffff99' BorderBrush='Black' BorderThickness='1' DockPanel.Dock='Bottom'> <TextBlock Foreground='black'>Dock = 'Bottom' </TextBlock> </Border> <Border Width='200' Background='PaleGreen' BorderBrush='Black' BorderThickness='1' DockPanel.Dock='Left'> <TextBlock Foreground='black'>Dock = 'Left' </TextBlock> </Border> <Border Background='White' BorderBrush='Black' BorderThickness='1'> <TextFlow Background='LightSkyBlue' Foreground='Black' FontFamily='Palatino Linotype' FontSize='14' FontWeight='Normal' TextAlignment='Left' TextWrap='Wrap'> <Paragraph> <LineBreak/> </Paragraph> </TextFlow> </Border> </DockPanel> <Page.Resources> <Style TargetType='{x:Type MenuItem}' x:Key='{x:Type MenuItem}' > <Setter Property='HeaderTemplate'> <Setter.Value> <DataTemplate DataType='{x:Type MenuItem}' > <Grid Width='{TemplateBinding Width}' Height='{TemplateBinding Height}' > <Rectangle x:Name='GelBackground' Opacity='1' RadiusX='9' RadiusY='9' Fill='{TemplateBinding ContentControl.Background}' Stroke='VerticalGradient #cc000000 white ' StrokeThickness='1' /> <Rectangle x:Name='GelShine' Margin='4,3,4,0' VerticalAlignment='top' RadiusX='6' RadiusY='6' Opacity='1' Fill='VerticalGradient #ccffffff transparent' Stroke='transparent' Height='15px' ></Rectangle> <ContentPresenter x:Name='GelButtonContentShadow' VerticalAlignment='center' HorizontalAlignment='center' Content='{TemplateBinding ContentControl.Content}' Margin='15,5,15,5' TextBlock.Foreground='black' RenderTransform='translate 0 1' /> <ContentPresenter x:Name='GelButtonContentWhite' VerticalAlignment='center' HorizontalAlignment='center' Content='{TemplateBinding ContentControl.Content}' Margin='15,5,15,5' TextBlock.Foreground='white' /> </Grid> <DataTemplate.Triggers> <Trigger Property='IsMouseOver' Value='True'> <Setter Property='MenuItem.Background' Value='Red'></Setter> </Trigger> <Trigger Property='IsMouseOver' Value='False'> <Setter Property='MenuItem.Background' Value='SkyBlue'></Setter> </Trigger> </DataTemplate.Triggers> </DataTemplate> </Setter.Value> </Setter> </Style> </Page.Resources></Page></pre></div>
</div>
<p />
This content originally appeared on Modern Web Development with Chrome and was authored by Paul Kinlan
