2 min read

XAML Menu Example

Paul Kinlan

Paul Kinlan

Lead of Chrome DevRel

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 example.

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 "". 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.

It was pretty straight forward in the end. I hope someone finds it usefull.

Here Goes:

<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>

Stay in the loop.

I'm trialing a newsletter. Join for monthly insights into web dev, Chrome, and the open web.

alternate_email

Get in touch

Open to chat about Chrome or Web development.

Book a consultation