use own flyout header template

dotob · Oct 15, 2013 · 30dc9df · 30dc9df
1 parent 22017ea
commit 30dc9df
Show file tree

Hide file tree

Showing 3 changed files with 123 additions and 13 deletions.
diff --git a/MONI/MONI.csproj b/MONI/MONI.csproj
@@ -147,6 +147,10 @@
     <Compile Include="Views\ShortcutView.xaml.cs">
       <DependentUpon>ShortcutView.xaml</DependentUpon>
     </Compile>
+    <Page Include="Resources\Controls.Flyout.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
     <Page Include="Views\MainView.xaml">
       <Generator>MSBuild:Compile</Generator>
       <SubType>Designer</SubType>

diff --git a/MONI/Resources/Controls.Flyout.xaml b/MONI/Resources/Controls.Flyout.xaml
@@ -0,0 +1,118 @@
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
+                    xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
+                    xmlns:Actions="clr-namespace:MahApps.Metro.Actions;assembly=MahApps.Metro">
+
+  <Style x:Key="FlyoutFocusVisual">
+    <Setter Property="Control.Template">
+      <Setter.Value>
+        <ControlTemplate>
+          <Rectangle Margin="-1"
+                     StrokeThickness="1"
+                     Stroke="White"
+                     StrokeDashArray="1 2" />
+        </ControlTemplate>
+      </Setter.Value>
+    </Setter>
+  </Style>
+
+  <DataTemplate x:Key="MONIHeaderTemplate"
+                x:Shared="False">
+    <DockPanel x:Name="dpHeader"
+               Margin="10"
+               VerticalAlignment="Top"
+               LastChildFill="True">
+      <Button x:Name="nav"
+              DockPanel.Dock="Left"
+              Foreground="{DynamicResource FlyoutWhiteBrush}"
+              Style="{DynamicResource MetroCircleButtonStyle}"
+              Height="40"
+              Width="40"
+              FontFamily="Segoe UI Symbol"
+              FontSize="16"
+              VerticalAlignment="Bottom">
+        <i:Interaction.Triggers>
+          <i:EventTrigger EventName="Click">
+            <Actions:SetFlyoutOpenAction TargetObject="{Binding RelativeSource={RelativeSource AncestorType={x:Type Controls:Flyout}}}"
+                                         Value="False" />
+          </i:EventTrigger>
+        </i:Interaction.Triggers>
+        <Rectangle Width="20"
+                   Height="15">
+          <Rectangle.Fill>
+            <VisualBrush Stretch="Fill">
+              <VisualBrush.Visual>
+                <Canvas Width="48"
+                        Height="48"
+                        Clip="F1 M 0,0L 48,0L 48,48L 0,48L 0,0"
+                        UseLayoutRounding="False">
+                  <Path Width="25"
+                        Height="18"
+                        Canvas.Left="12"
+                        Canvas.Top="15"
+                        Stretch="Fill"
+                        Fill="{DynamicResource FlyoutWhiteBrush}"
+                        Data="F1 M 12,22L 12,26L 28.25,26L 21,33L 27.5,33L 37,24L 27.5,15L 21,15L 28.25,22L 12,22 Z " />
+                </Canvas>
+              </VisualBrush.Visual>
+            </VisualBrush>
+          </Rectangle.Fill>
+        </Rectangle>
+      </Button>
+      <TextBlock Text="{Binding}"
+                 x:Name="PART_BackButton"
+                 Foreground="{DynamicResource FlyoutWhiteBrush}"
+                 FontSize="20"
+                 Margin="15,0,0,0"
+                 VerticalAlignment="Bottom" />
+    </DockPanel>
+    <DataTemplate.Triggers>
+      <DataTrigger Binding="{Binding Position, RelativeSource={RelativeSource AncestorType={x:Type Controls:Flyout}}}"
+                   Value="Left">
+        <Setter TargetName="nav"
+                Property="DockPanel.Dock"
+                Value="Right" />
+        <Setter TargetName="PART_BackButton"
+                Property="TextAlignment"
+                Value="Right" />
+        <Setter TargetName="PART_BackButton"
+                Property="Margin"
+                Value="0,0,15,0" />
+        <Setter TargetName="nav"
+                Property="LayoutTransform">
+          <Setter.Value>
+            <ScaleTransform ScaleX="-1" />
+          </Setter.Value>
+        </Setter>
+      </DataTrigger>
+      <DataTrigger Binding="{Binding Position, RelativeSource={RelativeSource AncestorType={x:Type Controls:Flyout}}}"
+                   Value="Top">
+        <Setter TargetName="nav"
+                Property="LayoutTransform">
+          <Setter.Value>
+            <RotateTransform Angle="-90" />
+          </Setter.Value>
+        </Setter>
+        <Setter TargetName="dpHeader"
+                Property="VerticalAlignment"
+                Value="Bottom" />
+      </DataTrigger>
+      <DataTrigger Binding="{Binding Position, RelativeSource={RelativeSource AncestorType={x:Type Controls:Flyout}}}"
+                   Value="Bottom">
+        <Setter TargetName="nav"
+                Property="LayoutTransform">
+          <Setter.Value>
+            <RotateTransform Angle="90" />
+          </Setter.Value>
+        </Setter>
+      </DataTrigger>
+    </DataTemplate.Triggers>
+  </DataTemplate>
+
+  <Style TargetType="{x:Type Controls:Flyout}">
+    <Setter Property="HeaderTemplate"
+            Value="{StaticResource MONIHeaderTemplate}" />
+  </Style>
+
+</ResourceDictionary>
diff --git a/MONI/Resources/Controls.xaml b/MONI/Resources/Controls.xaml
@@ -5,22 +5,10 @@
     <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
     <ResourceDictionary Source="pack://application:,,,/MONI;component/Resources/Controls.TextBox.xaml" />
     <ResourceDictionary Source="pack://application:,,,/MONI;component/Resources/Controls.ListBox.xaml" />
+    <ResourceDictionary Source="pack://application:,,,/MONI;component/Resources/Controls.Flyout.xaml" />
     <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.AnimatedSingleRowTabControl.xaml" />
   </ResourceDictionary.MergedDictionaries>
 
-  <Style x:Key="FlyoutFocusVisual">
-    <Setter Property="Control.Template">
-      <Setter.Value>
-        <ControlTemplate>
-          <Rectangle Margin="-1"
-                     StrokeThickness="1"
-                     Stroke="White"
-                     StrokeDashArray="1 2" />
-        </ControlTemplate>
-      </Setter.Value>
-    </Setter>
-  </Style>
-
   <Style TargetType="{x:Type TextBox}"
          BasedOn="{StaticResource MetroTextBox}">
     <Setter Property="VerticalAlignment"