Browse Source

Added Menu XAML styles.

Steven Kirk 10 years ago
parent
commit
af79e21fde

+ 8 - 0
samples/XamlTestApplicationPcl/GridSplitter.paml

@@ -0,0 +1,8 @@
+<Style xmlns="https://github.com/perspex" Selector="GridSplitter">
+  <Setter Property="Width" Value="4"/>
+  <Setter Property="Template">
+    <ControlTemplate>
+      <Border Background="{TemplateBinding Background}"/>
+    </ControlTemplate>
+  </Setter>
+</Style>

+ 15 - 0
samples/XamlTestApplicationPcl/Menu.paml

@@ -0,0 +1,15 @@
+<Style xmlns="https://github.com/perspex" Selector="Menu">
+  <Setter Property="Template">
+    <ControlTemplate>
+      <Border Background="{TemplateBinding Background}"
+              BorderBrush="{TemplateBinding BorderBrush}"
+              BorderThickness="{TemplateBinding BorderThickness}"
+              Padding="{TemplateBinding Padding}">
+        <ItemsPresenter Name="PART_ItemsPresenter" 
+                        Items="{TemplateBinding Items}" 
+                        ItemsPanel="{TemplateBinding ItemsPanel}"
+                        KeyboardNavigation.TabNavigation="Continue"/>
+      </Border>
+    </ControlTemplate>
+  </Setter>
+</Style>

+ 131 - 0
samples/XamlTestApplicationPcl/MenuItem.paml

@@ -0,0 +1,131 @@
+<Styles xmlns="https://github.com/perspex"
+        xmlns:sys="clr-namespace:System;assembly=mscorlib">
+  
+  <Style Selector="MenuItem">
+    <Setter Property="BorderThickness" Value="1"/>
+    <Setter Property="Padding" Value="6,0"/>
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Border Name="root"
+                Background="{TemplateBinding Background}"
+                BorderBrush="{TemplateBinding BorderBrush}"
+                BorderThickness="{TemplateBinding BorderThickness}">
+          <Grid ColumnDefinitions="22,13,*,20">
+            <ContentPresenter Name="icon"
+                              Content="{TemplateBinding Icon}"
+                              Width="16"
+                              Height="16"
+                              Margin="3"
+                              HorizontalAlignment="Center"
+                              VerticalAlignment="Center"/>
+            <Path Name="check"
+                  Fill="{TemplateBinding Foreground}"
+                  Data="F1M10,1.2L4.7,9.1 4.5,9.1 0,5.2 1.3,3.5 4.3,6.1 8.3,0 10,1.2z"
+                  IsVisible="False"
+                  Margin="3"
+                  VerticalAlignment="Center"/>
+            <ContentPresenter Content="{TemplateBinding Header}"
+                              Margin="{TemplateBinding Padding}"
+                              VerticalAlignment="Center"
+                              Grid.Column="2">
+              <ContentPresenter.DataTemplates>
+                <DataTemplate DataType="sys:String">
+                  <AccessText Text="{Binding}"/>
+                </DataTemplate>
+              </ContentPresenter.DataTemplates>
+            </ContentPresenter>
+            <Path Name="rightArrow"
+                  Data="M0,0L4,3.5 0,7z"
+                  Fill="#ff212121"
+                  Margin="10,0,0,0"
+                  VerticalAlignment="Center"
+                  Grid.Column="3"/>
+            <Popup Name="PART_Popup"
+                   PlacementMode="Right"
+                   StaysOpen="True"
+                   IsOpen="{TemplateBinding Path=IsSubMenuOpen, Mode=TwoWay}">
+              <Border Background="#fff0f0f0"
+                      BorderBrush="#ff999999"
+                      BorderThickness="1"
+                      Padding="2">
+                <ScrollViewer>
+                  <Panel>
+                    <Rectangle Name="iconSeparator"
+                               Fill="#ffd7d7d7"
+                               HorizontalAlignment="Left"
+                               IsHitTestVisible="False"
+                               Margin="29,2,0,2"
+                               Width="1"/>
+                    <ItemsPresenter Name="PART_ItemsPresenter"
+                                    Items="{TemplateBinding Items}"
+                                    ItemsPanel="{TemplateBinding ItemsPanel}"
+                                    MemberSelector="{TemplateBinding MemberSelector}"/>
+                  </Panel>
+                </ScrollViewer>
+              </Border>
+            </Popup>
+            </Grid>
+        </Border>
+      </ControlTemplate>
+    </Setter>
+  </Style>
+  
+  <Style Selector="Menu > MenuItem">
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Border Name="root"
+                Background="{TemplateBinding Background}"
+                BorderBrush="{TemplateBinding BorderBrush}"
+                BorderThickness="{TemplateBinding BorderThickness}">
+          <Panel>
+            <ContentPresenter Content="{TemplateBinding Header}"
+                              Margin="{TemplateBinding Padding}">
+              <ContentPresenter.DataTemplates>
+                <DataTemplate DataType="sys:String">
+                  <AccessText Text="{Binding}"/>
+                </DataTemplate>
+              </ContentPresenter.DataTemplates>
+            </ContentPresenter>
+            <Popup Name="PART_Popup"
+                   IsOpen="{TemplateBinding Path=IsSubMenuOpen, Mode=TwoWay}"
+                   StaysOpen="True">
+              <Border Background="#fff0f0f0"
+                      BorderBrush="#ff999999"
+                      BorderThickness="1"
+                      Padding="2">
+                <ScrollViewer>
+                  <Panel>
+                    <Rectangle Name="iconSeparator"
+                               Fill="#ffd7d7d7"
+                               HorizontalAlignment="Left"
+                               IsHitTestVisible="False"
+                               Margin="29,2,0,2"
+                               Width="1"/>
+                    <ItemsPresenter Name="PART_ItemsPresenter"
+                                    Items="{TemplateBinding Items}"
+                                    ItemsPanel="{TemplateBinding ItemsPanel}"
+                                    MemberSelector="{TemplateBinding MemberSelector}"/>
+                  </Panel>
+                </ScrollViewer>
+              </Border>
+            </Popup>
+          </Panel>
+        </Border>
+      </ControlTemplate>
+    </Setter>
+  </Style>
+
+  <Style Selector="MenuItem:selected /template/ Border#root">
+    <Setter Property="Background" Value="#3d26a0da"/>
+    <Setter Property="BorderBrush" Value="#ff26a0da"/>
+  </Style>
+
+  <Style Selector="MenuItem:pointerover /template/ Border#root">
+    <Setter Property="Background" Value="#3d26a0da"/>
+    <Setter Property="BorderBrush" Value="#ff26a0da"/>
+  </Style>
+
+  <Style Selector="MenuItem:empty /template/ Path#rightArrow">
+    <Setter Property="IsVisible" Value="False"/>
+  </Style>
+</Styles>

+ 213 - 205
samples/XamlTestApplicationPcl/Views/MainWindow.paml

@@ -4,221 +4,229 @@
         xmlns:vm="clr-namespace:XamlTestApplication.ViewModels;assembly=XamlTestApplicationPcl"
         Title="Perspex Test Application" Width="800" Height="600">
     <Grid RowDefinitions="Auto,*,Auto" ColumnDefinitions="*,*">
-        <TabControl Grid.Row="1" Grid.ColumnSpan="2" Padding="5">
-            <TabControl.Transition>
-                <PageSlide Duration="0.25" />
-            </TabControl.Transition>
-            <TabItem Header="Buttons">
-                <ScrollViewer CanScrollHorizontally="False">
-                    <StackPanel Margin="10" Gap="4">
-                        <TextBlock Text="Button" FontWeight="Medium" FontSize="20" Foreground="#212121" />
-                        <TextBlock Text="A button control" FontSize="13" Foreground="#727272" Margin="0,0,0,10" />
-                        <Button Content="Button" Width="150" />
-                        <Button Content="Button" Width="150" IsEnabled="False" />
-                        <TextBlock Text="ToggleButton" Margin="0, 40, 0, 0" FontSize="20" Foreground="#212121" />
-                        <TextBlock Text="A toggle button control" FontSize="13" Foreground="#727272" Margin="0,0,0,10" />
-                        <ToggleButton Width="150" IsChecked="True" Content="On" />
-                        <ToggleButton Width="150" IsChecked="False" Content="Off" />
-                    </StackPanel>
-                </ScrollViewer>
-            </TabItem>
-            <TabItem Header="Text">
-                <StackPanel Margin="10" Gap="4">
-                    <TextBlock Text="TextBlock" FontWeight="Medium" FontSize="20" Foreground="#212121" />
-                    <TextBlock Text="A control for displaying text."
-                               FontSize="13"
-                               Foreground="#727272"
-                               Margin="0, 0, 0, 10" />
-                    <TextBlock Text="Lorem ipsum dolor sit amet, consectetuer adipiscing elit." FontSize="11" />
-                    <TextBlock Text="Lorem ipsum dolor sit amet, consectetuer adipiscing elit." FontSize="11"
-                               FontWeight="Medium" />
-                    <TextBlock Text="Lorem ipsum dolor sit amet, consectetuer adipiscing elit." FontSize="11"
-                               FontWeight="Bold" />
-                    <TextBlock Text="Lorem ipsum dolor sit amet, consectetuer adipiscing elit." FontSize="11"
-                               FontStyle="Italic" />
-                    <TextBlock Margin="0,40,0,0" Text="HtmlLabel" FontWeight="Medium" FontSize="20"
-                               Foreground="#212121" />
-                    <TextBlock Text="A label capable of displaying HTML content" FontSize="13" Foreground="#727272"
-                               Margin="0, 0, 0, 10" />
-                </StackPanel>
-            </TabItem>
-            <TabItem Header="Input">
-                <ScrollViewer CanScrollHorizontally="False">
-                    <StackPanel Margin="10" Gap="4">
-                        <TextBlock Text="TextBlock" FontWeight="Medium" FontSize="20" Foreground="#212121" />
-                        <TextBlock Text="A text box control"
-                                   FontSize="13"
-                                   Foreground="#727272"
-                                   Margin="0, 0, 0, 10" />
-                        <TextBox Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit." Width="200" />
-                        <TextBox Width="200" Watermark="Watermark" />
-                        <TextBox Width="200" Watermark="Floating Watermark" UseFloatingWatermark="True" />
-                        <TextBox AcceptsReturn="True" TextWrapping="Wrap" Width="200" Height="150"
-                                 Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est." />
-                        <TextBlock Margin="0, 40, 0, 0" Text="CheckBox" FontWeight="Medium" FontSize="20"
-                                   Foreground="#212121" />
-                        <TextBlock Text="A check box control" FontSize="13" Foreground="#727272" Margin="0, 0, 0, 10" />
+      <Menu Grid.ColumnSpan="2">
+        <MenuItem Header="_File">
+          <MenuItem Header="_Hello">
+            <MenuItem Header="_Goodbye"/>
+          </MenuItem>
+          <MenuItem Header="_World"/>
+        </MenuItem>
+      </Menu>
+      <TabControl Grid.Row="1" Grid.ColumnSpan="2" Padding="5">
+          <TabControl.Transition>
+              <PageSlide Duration="0.25" />
+          </TabControl.Transition>
+          <TabItem Header="Buttons">
+              <ScrollViewer CanScrollHorizontally="False">
+                  <StackPanel Margin="10" Gap="4">
+                      <TextBlock Text="Button" FontWeight="Medium" FontSize="20" Foreground="#212121" />
+                      <TextBlock Text="A button control" FontSize="13" Foreground="#727272" Margin="0,0,0,10" />
+                      <Button Content="Button" Width="150" />
+                      <Button Content="Button" Width="150" IsEnabled="False" />
+                      <TextBlock Text="ToggleButton" Margin="0, 40, 0, 0" FontSize="20" Foreground="#212121" />
+                      <TextBlock Text="A toggle button control" FontSize="13" Foreground="#727272" Margin="0,0,0,10" />
+                      <ToggleButton Width="150" IsChecked="True" Content="On" />
+                      <ToggleButton Width="150" IsChecked="False" Content="Off" />
+                  </StackPanel>
+              </ScrollViewer>
+          </TabItem>
+          <TabItem Header="Text">
+              <StackPanel Margin="10" Gap="4">
+                  <TextBlock Text="TextBlock" FontWeight="Medium" FontSize="20" Foreground="#212121" />
+                  <TextBlock Text="A control for displaying text."
+                              FontSize="13"
+                              Foreground="#727272"
+                              Margin="0, 0, 0, 10" />
+                  <TextBlock Text="Lorem ipsum dolor sit amet, consectetuer adipiscing elit." FontSize="11" />
+                  <TextBlock Text="Lorem ipsum dolor sit amet, consectetuer adipiscing elit." FontSize="11"
+                              FontWeight="Medium" />
+                  <TextBlock Text="Lorem ipsum dolor sit amet, consectetuer adipiscing elit." FontSize="11"
+                              FontWeight="Bold" />
+                  <TextBlock Text="Lorem ipsum dolor sit amet, consectetuer adipiscing elit." FontSize="11"
+                              FontStyle="Italic" />
+                  <TextBlock Margin="0,40,0,0" Text="HtmlLabel" FontWeight="Medium" FontSize="20"
+                              Foreground="#212121" />
+                  <TextBlock Text="A label capable of displaying HTML content" FontSize="13" Foreground="#727272"
+                              Margin="0, 0, 0, 10" />
+              </StackPanel>
+          </TabItem>
+          <TabItem Header="Input">
+              <ScrollViewer CanScrollHorizontally="False">
+                  <StackPanel Margin="10" Gap="4">
+                      <TextBlock Text="TextBlock" FontWeight="Medium" FontSize="20" Foreground="#212121" />
+                      <TextBlock Text="A text box control"
+                                  FontSize="13"
+                                  Foreground="#727272"
+                                  Margin="0, 0, 0, 10" />
+                      <TextBox Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit." Width="200" />
+                      <TextBox Width="200" Watermark="Watermark" />
+                      <TextBox Width="200" Watermark="Floating Watermark" UseFloatingWatermark="True" />
+                      <TextBox AcceptsReturn="True" TextWrapping="Wrap" Width="200" Height="150"
+                                Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est." />
+                      <TextBlock Margin="0, 40, 0, 0" Text="CheckBox" FontWeight="Medium" FontSize="20"
+                                  Foreground="#212121" />
+                      <TextBlock Text="A check box control" FontSize="13" Foreground="#727272" Margin="0, 0, 0, 10" />
 
-                        <CheckBox IsChecked="True" Margin="0, 0, 0, 5" Content="Checked" />
-                        <CheckBox IsChecked="False" Content="Unchecked" />
-                        <TextBlock Margin="0, 40, 0, 0" Text="RadioButton" FontWeight="Medium" FontSize="20"
-                                   Foreground="#212121" />
-                        <TextBlock Text="A radio button control" FontSize="13" Foreground="#727272"
-                                   Margin="0, 0, 0, 10" />
-                        <RadioButton IsChecked="True" Content="Option 1" />
-                        <RadioButton IsChecked="False" Content="Option 2" />
-                        <RadioButton IsChecked="False" Content="Option 3" />
-                    </StackPanel>
-                </ScrollViewer>
-            </TabItem>
-            <TabItem Header="Images">
+                      <CheckBox IsChecked="True" Margin="0, 0, 0, 5" Content="Checked" />
+                      <CheckBox IsChecked="False" Content="Unchecked" />
+                      <TextBlock Margin="0, 40, 0, 0" Text="RadioButton" FontWeight="Medium" FontSize="20"
+                                  Foreground="#212121" />
+                      <TextBlock Text="A radio button control" FontSize="13" Foreground="#727272"
+                                  Margin="0, 0, 0, 10" />
+                      <RadioButton IsChecked="True" Content="Option 1" />
+                      <RadioButton IsChecked="False" Content="Option 2" />
+                      <RadioButton IsChecked="False" Content="Option 3" />
+                  </StackPanel>
+              </ScrollViewer>
+          </TabItem>
+          <TabItem Header="Images">
 
-                <StackPanel Margin="10" Gap="4" HorizontalAlignment="Center">
+              <StackPanel Margin="10" Gap="4" HorizontalAlignment="Center">
 
-                    <TextBlock Text="Carousel" FontWeight="Medium" FontSize="20" Foreground="#212121" />
-                    <TextBlock Text="An items control that displays its items as pages that fill the controls."
-                               FontSize="13"
-                               Foreground="#727272" Margin="0, 0, 0, 10" />
-                    <StackPanel Name="carouselVisual" Orientation="Horizontal">
+                  <TextBlock Text="Carousel" FontWeight="Medium" FontSize="20" Foreground="#212121" />
+                  <TextBlock Text="An items control that displays its items as pages that fill the controls."
+                              FontSize="13"
+                              Foreground="#727272" Margin="0, 0, 0, 10" />
+                  <StackPanel Name="carouselVisual" Orientation="Horizontal">
 
-                        <Button VerticalAlignment="Center" Margin="5">
-                            <Button.Content>
-                                <Path Fill="Black"
-                                      Data="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z" />
-                            </Button.Content>
-                        </Button>
+                      <Button VerticalAlignment="Center" Margin="5">
+                          <Button.Content>
+                              <Path Fill="Black"
+                                    Data="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z" />
+                          </Button.Content>
+                      </Button>
 
-                        <Carousel Width="400" Height="400">
-                            <Carousel.Transition>
-                                <PageSlide Duration="0.25" />
-                            </Carousel.Transition>
-                            <Image Source="github_icon.png" Width="400" Height="400" />
-                            <Image Source="pattern.jpg" Width="400" Height="400" />
-                        </Carousel>
+                      <Carousel Width="400" Height="400">
+                          <Carousel.Transition>
+                              <PageSlide Duration="0.25" />
+                          </Carousel.Transition>
+                          <Image Source="github_icon.png" Width="400" Height="400" />
+                          <Image Source="pattern.jpg" Width="400" Height="400" />
+                      </Carousel>
 
-                        <Button VerticalAlignment="Center" Margin="5">
-                            <Button.Content>
-                                <Path Fill="Black"
-                                      Data="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z" />
-                            </Button.Content>
-                        </Button>
+                      <Button VerticalAlignment="Center" Margin="5">
+                          <Button.Content>
+                              <Path Fill="Black"
+                                    Data="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z" />
+                          </Button.Content>
+                      </Button>
 
-                    </StackPanel>
-                </StackPanel>
+                  </StackPanel>
+              </StackPanel>
 
-            </TabItem>
-            <TabItem Header="Lists">
-                <StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center">
-                    <ListBox Items="{Binding Items}" SelectionMode="Multiple">
-                        <ListBox.DataTemplates>
-                            <DataTemplate DataType="vm:TestItem">
-                                <StackPanel>
-                                    <TextBlock Text="{Binding Header}" FontSize="24" />
-                                    <TextBlock Text="{Binding SubHeader}" />
-                                </StackPanel>
-                            </DataTemplate>
-                        </ListBox.DataTemplates>
-                    </ListBox>
-                    <DropDown VerticalAlignment="Center" SelectedIndex="0">
-                        <StackPanel>
-                            <TextBlock Text="Item 1" FontSize="24" />
-                            <TextBlock Text="Item 1 Value" />
-                        </StackPanel>
-                        <StackPanel>
-                            <TextBlock Text="Item 2" FontSize="24" />
-                            <TextBlock Text="Item 2 Value" />
-                        </StackPanel>
-                    </DropDown>
-                    <TreeView Items="{Binding Nodes}">
-                        <TreeView.DataTemplates>
-                            <TreeDataTemplate DataType="vm:TestNode" ItemsSource="{Binding Children}">
-                                <StackPanel>
-                                    <TextBlock Text="{Binding Header}" FontSize="24" />
-                                    <TextBlock Text="{Binding SubHeader}" />
-                                </StackPanel>
-                            </TreeDataTemplate>
-                        </TreeView.DataTemplates>
-                    </TreeView>
-                </StackPanel>
-            </TabItem>
-            <TabItem Header="Layout">
-                <ScrollViewer CanScrollHorizontally="False">
-                    <StackPanel Margin="10" Gap="4">
-                        <TextBlock Text="Grid" FontWeight="Medium" FontSize="20" Foreground="#212121" />
-                        <TextBlock Text="Lays out child controls according to a grid."
-                                   FontSize="13"
-                                   Foreground="#727272"
-                                   Margin="0, 0, 0, 10" />
-                        <Grid ColumnDefinitions="*,*" RowDefinitions="Auto,Auto" Width="300">
-                            <Rectangle Grid.ColumnSpan="2" Fill="#FF5722" Height="200" Margin="2.5" />
-                            <Rectangle Grid.Row="1" Fill="#FF5722" Height="100" Margin="2.5" />
-                            <Rectangle Grid.Row="1" Grid.Column="1" Fill="#FF5722" Height="100" Margin="2.5" />
-                        </Grid>
+          </TabItem>
+          <TabItem Header="Lists">
+              <StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center">
+                  <ListBox Items="{Binding Items}" SelectionMode="Multiple">
+                      <ListBox.DataTemplates>
+                          <DataTemplate DataType="vm:TestItem">
+                              <StackPanel>
+                                  <TextBlock Text="{Binding Header}" FontSize="24" />
+                                  <TextBlock Text="{Binding SubHeader}" />
+                              </StackPanel>
+                          </DataTemplate>
+                      </ListBox.DataTemplates>
+                  </ListBox>
+                  <DropDown VerticalAlignment="Center" SelectedIndex="0">
+                      <StackPanel>
+                          <TextBlock Text="Item 1" FontSize="24" />
+                          <TextBlock Text="Item 1 Value" />
+                      </StackPanel>
+                      <StackPanel>
+                          <TextBlock Text="Item 2" FontSize="24" />
+                          <TextBlock Text="Item 2 Value" />
+                      </StackPanel>
+                  </DropDown>
+                  <TreeView Items="{Binding Nodes}">
+                      <TreeView.DataTemplates>
+                          <TreeDataTemplate DataType="vm:TestNode" ItemsSource="{Binding Children}">
+                              <StackPanel>
+                                  <TextBlock Text="{Binding Header}" FontSize="24" />
+                                  <TextBlock Text="{Binding SubHeader}" />
+                              </StackPanel>
+                          </TreeDataTemplate>
+                      </TreeView.DataTemplates>
+                  </TreeView>
+              </StackPanel>
+          </TabItem>
+          <TabItem Header="Layout">
+              <ScrollViewer CanScrollHorizontally="False">
+                  <StackPanel Margin="10" Gap="4">
+                      <TextBlock Text="Grid" FontWeight="Medium" FontSize="20" Foreground="#212121" />
+                      <TextBlock Text="Lays out child controls according to a grid."
+                                  FontSize="13"
+                                  Foreground="#727272"
+                                  Margin="0, 0, 0, 10" />
+                      <Grid ColumnDefinitions="*,*" RowDefinitions="Auto,Auto" Width="300">
+                          <Rectangle Grid.ColumnSpan="2" Fill="#FF5722" Height="200" Margin="2.5" />
+                          <Rectangle Grid.Row="1" Fill="#FF5722" Height="100" Margin="2.5" />
+                          <Rectangle Grid.Row="1" Grid.Column="1" Fill="#FF5722" Height="100" Margin="2.5" />
+                      </Grid>
 
-                        <TextBlock Text="StackPanel" FontWeight="Medium" FontSize="20" Foreground="#212121" />
-                        <TextBlock Text="A panel which lays out its children horizontally or vertically."
-                                   FontSize="13"
-                                   Foreground="#727272"
-                                   Margin="0, 0, 0, 10" />
-                        <StackPanel Gap="4" Width="300">
-                            <Rectangle Fill="#FFC107" Height="50" />
-                            <Rectangle Fill="#FFC107" Height="50" />
-                            <Rectangle Fill="#FFC107" Height="50" />
-                        </StackPanel>
+                      <TextBlock Text="StackPanel" FontWeight="Medium" FontSize="20" Foreground="#212121" />
+                      <TextBlock Text="A panel which lays out its children horizontally or vertically."
+                                  FontSize="13"
+                                  Foreground="#727272"
+                                  Margin="0, 0, 0, 10" />
+                      <StackPanel Gap="4" Width="300">
+                          <Rectangle Fill="#FFC107" Height="50" />
+                          <Rectangle Fill="#FFC107" Height="50" />
+                          <Rectangle Fill="#FFC107" Height="50" />
+                      </StackPanel>
 
-                        <TextBlock Text="Canvas" FontWeight="Medium" FontSize="20" Foreground="#212121" />
-                        <TextBlock Text="A panel which lays out its children by explicit coordinates."
-                                   FontSize="13"
-                                   Foreground="#727272"
-                                   Margin="0, 0, 0, 10" />
-                        <Canvas Width="300" Height="200" Background="Yellow">
-                            <Rectangle Fill="Blue" Width="63" Height="41" Canvas.Left="40" Canvas.Top="31" />
-                            <Rectangle Fill="Green" Width="58" Height="58" Canvas.Left="130" Canvas.Top="79" />
-                        </Canvas>
+                      <TextBlock Text="Canvas" FontWeight="Medium" FontSize="20" Foreground="#212121" />
+                      <TextBlock Text="A panel which lays out its children by explicit coordinates."
+                                  FontSize="13"
+                                  Foreground="#727272"
+                                  Margin="0, 0, 0, 10" />
+                      <Canvas Width="300" Height="200" Background="Yellow">
+                          <Rectangle Fill="Blue" Width="63" Height="41" Canvas.Left="40" Canvas.Top="31" />
+                          <Rectangle Fill="Green" Width="58" Height="58" Canvas.Left="130" Canvas.Top="79" />
+                      </Canvas>
 
-                        <TextBlock Text="DockPanel" FontWeight="Medium" FontSize="20" Foreground="#212121" />
-                        <TextBlock
-                            Text="A panel which lays docks its children on the sides and optionally fills the remaining space with the last child"
-                            FontSize="13"
-                            Foreground="#727272"
-                            Margin="0, 0, 0, 10" />
-                        <DockPanel Width="300" Height="300">
-                            <Rectangle Fill="Red" Width="25" DockPanel.Dock="Left" />
-                            <Rectangle Fill="Green" Height="25" DockPanel.Dock="Top" />
-                            <Rectangle Fill="Blue" Width="25" DockPanel.Dock="Right" />
-                            <Rectangle Fill="Yellow" Height="25" DockPanel.Dock="Bottom" />
-                            <Rectangle Fill="Pink" />
-                        </DockPanel>
-                    </StackPanel>
-                </ScrollViewer>
-            </TabItem>            
-            <TabItem Header="Animations">
-                <Grid>
-                    <Grid.ColumnDefinitions>
-                        <ColumnDefinition />
-                        <ColumnDefinition />
-                    </Grid.ColumnDefinitions>
-                    <Grid.RowDefinitions>
-                        <RowDefinition />
-                        <RowDefinition Height="Auto" />
-                    </Grid.RowDefinitions>
-                    <Border Width="100" Height="100">
-                        <Border.Background>
-                            <LinearGradientBrush StartPoint="0%,0%" EndPoint="100%,100%">
-                                <GradientStop Color="Red" Offset="0" />
-                                <GradientStop Color="Green" Offset="1" />
-                            </LinearGradientBrush>
-                        </Border.Background>
-                        <TextBox HorizontalAlignment="Center" VerticalAlignment="Center" Text="hello!"></TextBox>
-                    </Border>
-                    <Border Grid.Row="0" Grid.Column="1" Background="Coral" HorizontalAlignment="Center"
-                            VerticalAlignment="Center">
-                        <Image Width="100" Height="100" Source="github_icon.png">
-                        </Image>
-                    </Border>
-                    <Button Grid.Row="1" Grid.Column="1" Content="Animate" HorizontalAlignment="Center"></Button>
-                </Grid>
-            </TabItem>
-        </TabControl>
+                      <TextBlock Text="DockPanel" FontWeight="Medium" FontSize="20" Foreground="#212121" />
+                      <TextBlock
+                          Text="A panel which lays docks its children on the sides and optionally fills the remaining space with the last child"
+                          FontSize="13"
+                          Foreground="#727272"
+                          Margin="0, 0, 0, 10" />
+                      <DockPanel Width="300" Height="300">
+                          <Rectangle Fill="Red" Width="25" DockPanel.Dock="Left" />
+                          <Rectangle Fill="Green" Height="25" DockPanel.Dock="Top" />
+                          <Rectangle Fill="Blue" Width="25" DockPanel.Dock="Right" />
+                          <Rectangle Fill="Yellow" Height="25" DockPanel.Dock="Bottom" />
+                          <Rectangle Fill="Pink" />
+                      </DockPanel>
+                  </StackPanel>
+              </ScrollViewer>
+          </TabItem>            
+          <TabItem Header="Animations">
+              <Grid>
+                  <Grid.ColumnDefinitions>
+                      <ColumnDefinition />
+                      <ColumnDefinition />
+                  </Grid.ColumnDefinitions>
+                  <Grid.RowDefinitions>
+                      <RowDefinition />
+                      <RowDefinition Height="Auto" />
+                  </Grid.RowDefinitions>
+                  <Border Width="100" Height="100">
+                      <Border.Background>
+                          <LinearGradientBrush StartPoint="0%,0%" EndPoint="100%,100%">
+                              <GradientStop Color="Red" Offset="0" />
+                              <GradientStop Color="Green" Offset="1" />
+                          </LinearGradientBrush>
+                      </Border.Background>
+                      <TextBox HorizontalAlignment="Center" VerticalAlignment="Center" Text="hello!"></TextBox>
+                  </Border>
+                  <Border Grid.Row="0" Grid.Column="1" Background="Coral" HorizontalAlignment="Center"
+                          VerticalAlignment="Center">
+                      <Image Width="100" Height="100" Source="github_icon.png">
+                      </Image>
+                  </Border>
+                  <Button Grid.Row="1" Grid.Column="1" Content="Animate" HorizontalAlignment="Center"></Button>
+              </Grid>
+          </TabItem>
+      </TabControl>
     </Grid>
 </Window>

+ 3 - 0
samples/XamlTestApplicationPcl/XamlTestApp.paml

@@ -7,9 +7,12 @@
     <StyleInclude Source="resource://application/XamlTestApplicationPcl/XamlTestApplication.Carousel.paml"/>
     <StyleInclude Source="resource://application/XamlTestApplicationPcl/XamlTestApplication.CheckBox.paml"/>
     <StyleInclude Source="resource://application/XamlTestApplicationPcl/XamlTestApplication.DropDown.paml"/>
+    <StyleInclude Source="resource://application/XamlTestApplicationPcl/XamlTestApplication.GridSplitter.paml"/>
     <StyleInclude Source="resource://application/XamlTestApplicationPcl/XamlTestApplication.ItemsControl.paml"/>
     <StyleInclude Source="resource://application/XamlTestApplicationPcl/XamlTestApplication.ListBox.paml"/>
     <StyleInclude Source="resource://application/XamlTestApplicationPcl/XamlTestApplication.ListBoxItem.paml"/>
+    <StyleInclude Source="resource://application/XamlTestApplicationPcl/XamlTestApplication.Menu.paml"/>
+    <StyleInclude Source="resource://application/XamlTestApplicationPcl/XamlTestApplication.MenuItem.paml"/>
     <StyleInclude Source="resource://application/XamlTestApplicationPcl/XamlTestApplication.PopupRoot.paml"/>
     <StyleInclude Source="resource://application/XamlTestApplicationPcl/XamlTestApplication.RadioButton.paml"/>
     <StyleInclude Source="resource://application/XamlTestApplicationPcl/XamlTestApplication.ScrollBar.paml"/>

+ 9 - 0
samples/XamlTestApplicationPcl/XamlTestApplicationPcl.csproj

@@ -172,6 +172,15 @@
     <EmbeddedResource Include="DropDown.paml">
       <SubType>Designer</SubType>
     </EmbeddedResource>
+    <EmbeddedResource Include="GridSplitter.paml">
+      <SubType>Designer</SubType>
+    </EmbeddedResource>
+    <EmbeddedResource Include="Menu.paml">
+      <SubType>Designer</SubType>
+    </EmbeddedResource>
+    <EmbeddedResource Include="MenuItem.paml">
+      <SubType>Designer</SubType>
+    </EmbeddedResource>
     <None Include="packages.config" />
     <EmbeddedResource Include="Button.paml">
       <SubType>Designer</SubType>

+ 9 - 2
src/Markup/Perspex.Markup/Data/ExpressionObserver.cs

@@ -76,7 +76,7 @@ namespace Perspex.Markup.Data
 
             try
             {
-                return _node.SetValue(value);
+                return _node?.SetValue(value) ?? false;
             }
             finally
             {
@@ -101,7 +101,14 @@ namespace Perspex.Markup.Data
 
                 try
                 {
-                    return (Leaf as PropertyAccessorNode)?.PropertyType;
+                    if (_node != null)
+                    {
+                        return (Leaf as PropertyAccessorNode)?.PropertyType;
+                    }
+                    else
+                    {
+                        return _root()?.GetType();
+                    }
                 }
                 finally
                 {

+ 1 - 1
src/Perspex.Controls/MenuItem.cs

@@ -380,7 +380,7 @@ namespace Perspex.Controls
         {
             base.OnTemplateApplied();
 
-            _popup = this.GetTemplateChild<Popup>("popup");
+            _popup = this.GetTemplateChild<Popup>("PART_Popup");
             _popup.DependencyResolver = DependencyResolver.Instance;
             _popup.PopupRootCreated += PopupRootCreated;
             _popup.Opened += PopupOpened;

+ 1 - 1
src/Perspex.Themes.Default/MenuItemStyle.cs

@@ -104,7 +104,7 @@ namespace Perspex.Themes.Default
                         },
                         (popup = new Popup
                         {
-                            Name = "popup",
+                            Name = "PART_Popup",
                             StaysOpen = true,
                             [!!Popup.IsOpenProperty] = control[!!MenuItem.IsSubMenuOpenProperty],
                             Child = new Border