Added round button styling for navigation view. First icons added.

Slesa · Jun 13, 2013 · 6d30504 · 6d30504
1 parent d583b8e
commit 6d30504
Show file tree

Hide file tree

Showing 7 changed files with 97 additions and 5 deletions.
diff --git a/src/BackOffice.Core/BackOffice.Core.csproj b/src/BackOffice.Core/BackOffice.Core.csproj
@@ -75,7 +75,6 @@
       <DependentUpon>StatusbarView.xaml</DependentUpon>
     </Compile>
   </ItemGroup>
-  <ItemGroup />
   <ItemGroup>
     <None Include="packages.config" />
   </ItemGroup>
@@ -95,6 +94,9 @@
       <Name>BackOffice.Common</Name>
     </ProjectReference>
   </ItemGroup>
+  <ItemGroup>
+    <Folder Include="Resources\" />
+  </ItemGroup>
   <Import Project="$(MSBuildToolsPath)\Microsoft.CSharp.targets" />
   <!-- To modify your build process, add your task inside one of the targets below and uncomment it. 
        Other similar extension points exist, see Microsoft.Common.targets.

diff --git a/src/BackOffice.Core/Views/NavigationView.xaml b/src/BackOffice.Core/Views/NavigationView.xaml
@@ -6,6 +6,49 @@
              mc:Ignorable="d" 
              d:DesignHeight="100" 
              d:DesignWidth="300">
+    <UserControl.Resources>
+        <ControlTemplate x:Key="Template.RoundButton" TargetType="{x:Type ButtonBase}">
+            <Grid>
+            <Ellipse Fill="{TemplateBinding Background}">
+            <!--<Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">-->
+            <!--</Border>-->
+            </Ellipse>
+                <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
+            </Grid>
+            <ControlTemplate.Triggers>
+                <Trigger Property="IsPressed" Value="True">
+                    <Setter Property="UIElement.Effect">
+                        <Setter.Value>
+                            <DropShadowEffect BlurRadius="10" Color="Black" Direction="0" Opacity="0.6" RenderingBias="Performance" ShadowDepth="0"/>
+                        </Setter.Value>
+                    </Setter>
+                </Trigger>
+                <Trigger Property="IsMouseOver" Value="True">
+                    <Setter Property="UIElement.Effect">
+                        <Setter.Value>
+                            <DropShadowEffect BlurRadius="10" Color="White" Direction="0" Opacity="0.6" RenderingBias="Performance" ShadowDepth="0"/>
+                        </Setter.Value>
+                    </Setter>
+                </Trigger>
+                <!--Trigger Property="Button.IsDefaulted" Value="True">
+                    <Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
+                <Trigger>
+                <Trigger Property="IsMouseOver" Value="True">
+                    <Setter Property="Background" TargetName="border" Value="#FFBEE6FD"/>
+                    <Setter Property="BorderBrush" TargetName="border" Value="#FF3C7FB1"/>
+                </Trigger>
+                <Trigger Property="IsPressed" Value="True">
+                    <Setter Property="Background" TargetName="border" Value="#FFC4E5F6"/>
+                    <Setter Property="BorderBrush" TargetName="border" Value="#FF2C628B"/>
+                </Trigger>
+                <Trigger Property="IsEnabled" Value="False">
+                    <Setter Property="Background" TargetName="border" Value="#FFF4F4F4"/>
+                    <Setter Property="BorderBrush" TargetName="border" Value="#FFADB2B5"/>
+                    <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="#FF838383"/>
+                </Trigger-->
+            </ControlTemplate.Triggers>
+        </ControlTemplate>
+    </UserControl.Resources>
 
     <UserControl.DataContext>NavigationViewModel</UserControl.DataContext>
 
@@ -17,8 +60,8 @@
                 <ColumnDefinition Width="*"></ColumnDefinition>
                 <ColumnDefinition Width="Auto"></ColumnDefinition>
             </Grid.ColumnDefinitions>
-            <Button x:Name="Back" Grid.Column="0" Content="B" Command="{Binding OnBackCommand}" Style="{DynamicResource Style.Navigation.Buttons}"/>
-            <Button x:Name="Forward" Grid.Column="1" Content="F" Command="{Binding OnForwardCommand}"  Style="{DynamicResource Style.Navigation.Buttons}" />
+            <Button x:Name="Back" Grid.Column="0" Command="{Binding OnBackCommand}" Style="{DynamicResource Style.Navigation.Buttons.Back}" Template="{DynamicResource Template.RoundButton}"/>
+            <Button x:Name="Forward" Grid.Column="1" Command="{Binding OnForwardCommand}" Style="{DynamicResource Style.Navigation.Buttons.Forward}" Template="{DynamicResource Template.RoundButton}"/>
             <TextBox x:Name="Breadcrumb" Grid.Column="2" Style="{DynamicResource Style.Navigation.BreadCrumb}" />
             <TextBox x:Name="Search" Grid.Column="3" Text="{Binding SearchText}" Style="{DynamicResource Style.Navigation.TextBox}"/>
         </Grid>

diff --git a/src/BackOffice.Theme/BackOffice.Theme.csproj b/src/BackOffice.Theme/BackOffice.Theme.csproj
@@ -55,6 +55,10 @@
       <Generator>MSBuild:Compile</Generator>
       <SubType>Designer</SubType>
     </Page>
+    <Page Include="Resources\Images.xaml">
+      <Generator>MSBuild:Compile</Generator>
+      <SubType>Designer</SubType>
+    </Page>
     <Page Include="Resources\Style.Navigation.xaml">
       <Generator>MSBuild:Compile</Generator>
       <SubType>Designer</SubType>
@@ -99,6 +103,10 @@
     </None>
     <AppDesigner Include="Properties\" />
   </ItemGroup>
+  <ItemGroup>
+    <Resource Include="Resources\Images\back.png" />
+    <Resource Include="Resources\Images\forward.png" />
+  </ItemGroup>
   <Import Project="$(MSBuildToolsPath)\Microsoft.CSharp.targets" />
   <!-- To modify your build process, add your task inside one of the targets below and uncomment it. 
        Other similar extension points exist, see Microsoft.Common.targets.

diff --git a/src/BackOffice.Theme/Resources/Images.xaml b/src/BackOffice.Theme/Resources/Images.xaml
@@ -0,0 +1,8 @@
+<ResourceDictionary
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+
+    <Image x:Key="Images.Back" Source="Images/back.png" />
+    <Image x:Key="Images.Forward" Source="Images/forward.png" />
+
+</ResourceDictionary>
diff --git a/src/BackOffice.Theme/Resources/Images/back.png b/src/BackOffice.Theme/Resources/Images/back.png
diff --git a/src/BackOffice.Theme/Resources/Images/forward.png b/src/BackOffice.Theme/Resources/Images/forward.png
diff --git a/src/BackOffice.Theme/Resources/Style.Navigation.xaml b/src/BackOffice.Theme/Resources/Style.Navigation.xaml
@@ -4,21 +4,52 @@
 
     <ResourceDictionary.MergedDictionaries>
         <ResourceDictionary Source="Brushes.xaml"/>
+        <ResourceDictionary Source="Images.xaml"/>
     </ResourceDictionary.MergedDictionaries>
 
     <Style x:Key="Style.Navigation" TargetType="{x:Type ContentControl}">
         <Setter Property="Margin" Value="10"/>
     </Style>
 
     <Style x:Key="Style.Navigation.Group" TargetType="{x:Type Grid}">
+        <Setter Property="Height" Value="80"/>
     </Style>
 
     <Style x:Key="Style.Navigation.Buttons" TargetType="{x:Type Button}">
         <Setter Property="Foreground" Value="{StaticResource Brush.Foreground}" />
-        <Setter Property="Background" Value="{StaticResource Brush.Background}" />
         <Setter Property="Margin" Value="10,5,10,5"/>
+        <Setter Property="MinWidth" Value="20" />
+        <Setter Property="MinHeight" Value="20" />
+        <!-- Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate>
+                    <ControlTemplate.Triggers>
+                        <Trigger Property="IsPressed" Value="True">
+                            <Setter Property="UIElement.Effect">
+                                <Setter.Value>
+                                    <DropShadowEffect BlurRadius="10" Color="Black" Direction="0" Opacity="0.6" RenderingBias="Performance" ShadowDepth="0"/>
+                                </Setter.Value>
+                            </Setter>
+                        </Trigger>
+                        <Trigger Property="IsMouseOver" Value="True">
+                            <Setter Property="UIElement.Effect">
+                                <Setter.Value>
+                                    <DropShadowEffect BlurRadius="10" Color="White" Direction="0" Opacity="0.6" RenderingBias="Performance" ShadowDepth="0"/>
+                                </Setter.Value>
+                            </Setter>
+                        </Trigger>
+                    </ControlTemplate.Triggers>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter -->
     </Style>
-
+    <Style x:Key="Style.Navigation.Buttons.Back" BasedOn="{StaticResource Style.Navigation.Buttons}" TargetType="{x:Type Button}">
+        <Setter Property="Content" Value="{StaticResource Images.Back}" />
+    </Style>
+    <Style x:Key="Style.Navigation.Buttons.Forward" BasedOn="{StaticResource Style.Navigation.Buttons}" TargetType="{x:Type Button}">
+        <Setter Property="Content" Value="{StaticResource Images.Forward}" />
+    </Style>
+
     <Style x:Key="Style.Navigation.TextBox" TargetType="{x:Type TextBox}">
         <Setter Property="MinWidth" Value="60"/>
     </Style>