XAML Menu Example

Paul Kinlan First Published on June 2 2005

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=""     xmlns:x="">    <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>

Technorati Tags
[feed], [feed], [feed], [feed], [feed], [feed], [feed], [feed]

Related Wikipedia Documents
, , , , , , , ,

My Related Documents
, , , , ,

Related Amazon Books
Windows API Bible: /, Windows Forms Programming in C#: /, Programming Windows Presentation Foundation: /, Essential .Net Volume 1: /, Mastering Visual Studio.NET: /

Related Images