changes for #2293

MahApps · Apr 5, 2016 · 30c7476 · 30c7476
1 parent a578478
commit 30c7476
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 39 deletions.
diff --git a/MahApps.Metro/Controls/Tile.cs b/MahApps.Metro/Controls/Tile.cs
@@ -1,4 +1,5 @@
 using System;
+using System.ComponentModel;
 using System.Windows;
 using System.Windows.Controls;
 
@@ -19,6 +20,48 @@ public string Title
             set { SetValue(TitleProperty, value); }
         }
 
+        /// <summary> 
+        /// HorizontalTitleAlignment Dependency Property.
+        /// Default Value: HorizontalAlignment.Left
+        /// </summary>
+        public static readonly DependencyProperty HorizontalTitleAlignmentProperty =
+            DependencyProperty.Register(
+                "HorizontalTitleAlignment",
+                typeof(HorizontalAlignment),
+                typeof(Tile),
+                new FrameworkPropertyMetadata(HorizontalAlignment.Left));
+
+        /// <summary> 
+        /// Gets/Sets the horizontal alignment of the title.
+        /// </summary> 
+        [Bindable(true), Category("Layout")]
+        public HorizontalAlignment HorizontalTitleAlignment
+        {
+            get { return (HorizontalAlignment)GetValue(HorizontalTitleAlignmentProperty); }
+            set { SetValue(HorizontalTitleAlignmentProperty, value); }
+        }
+
+        /// <summary>
+        /// VerticalTitleAlignment Dependency Property. 
+        /// Default Value: VerticalAlignment.Bottom
+        /// </summary> 
+        public static readonly DependencyProperty VerticalTitleAlignmentProperty =
+            DependencyProperty.Register(
+                "VerticalTitleAlignment",
+                typeof(VerticalAlignment),
+                typeof(Tile),
+                new FrameworkPropertyMetadata(VerticalAlignment.Bottom));
+
+        /// <summary>
+        /// Gets/Sets the vertical alignment of the title.
+        /// </summary>
+        [Bindable(true), Category("Layout")]
+        public VerticalAlignment VerticalTitleAlignment
+        {
+            get { return (VerticalAlignment)GetValue(VerticalTitleAlignmentProperty); }
+            set { SetValue(VerticalTitleAlignmentProperty, value); }
+        }
+
         public static readonly DependencyProperty CountProperty = DependencyProperty.Register("Count", typeof(string), typeof(Tile), new PropertyMetadata(default(string)));
 
         public string Count
@@ -59,4 +102,4 @@ public int CountFontSize
             set { SetValue(CountFontSizeProperty, value); }
         }
     }
-}
+}
diff --git a/MahApps.Metro/Themes/Tile.xaml b/MahApps.Metro/Themes/Tile.xaml
@@ -4,49 +4,51 @@
                     xmlns:converters="clr-namespace:MahApps.Metro.Converters">
 
     <Style TargetType="Controls:Tile">
-        <Setter Property="Width" Value="140" />
-        <Setter Property="Height" Value="140" />
-        <Setter Property="Foreground" Value="{DynamicResource IdealForegroundColorBrush}" />
         <Setter Property="Background" Value="{DynamicResource AccentColorBrush}" />
         <Setter Property="Controls:ControlsHelper.MouseOverBorderBrush" Value="{x:Null}" />
         <Setter Property="CountFontSize" Value="28" />
-        <Setter Property="TitleFontSize" Value="16" />
+        <Setter Property="Foreground" Value="{DynamicResource IdealForegroundColorBrush}" />
+        <Setter Property="Height" Value="140" />
+        <Setter Property="Width" Value="140" />
         <Setter Property="HorizontalContentAlignment" Value="Center" />
         <Setter Property="VerticalContentAlignment" Value="Center" />
         <Setter Property="Margin" Value="3" />
         <Setter Property="RenderTransformOrigin" Value="0.5,0.5" />
+        <Setter Property="TitleFontSize" Value="16" />
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="Controls:Tile">
                     <Grid>
                         <Border x:Name="PART_Border"
+                                Background="{TemplateBinding Background}"
                                 BorderBrush="{TemplateBinding BorderBrush}"
-                                BorderThickness="{TemplateBinding BorderThickness}">
-                            <Grid Background="{TemplateBinding Background}">
+                                BorderThickness="{TemplateBinding BorderThickness}"
+                                SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}">
+                            <Grid>
                                 <StackPanel HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                             VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                             Orientation="Horizontal">
                                     <ContentPresenter RecognizesAccessKey="True" />
                                     <TextBlock VerticalAlignment="Center"
-                                               FontSize="{Binding CountFontSize, RelativeSource={RelativeSource TemplatedParent}}"
+                                               FontSize="{TemplateBinding CountFontSize}"
                                                Text="{TemplateBinding Count}" />
                                 </StackPanel>
-
-                                <Label HorizontalAlignment="Left"
-                                       VerticalAlignment="Bottom"
+                                <Label HorizontalAlignment="{TemplateBinding HorizontalTitleAlignment}"
+                                       VerticalAlignment="{TemplateBinding VerticalTitleAlignment}"
                                        Foreground="{TemplateBinding Foreground}">
                                     <AccessText Margin="3"
                                                 Foreground="{TemplateBinding Foreground}"
-                                                FontSize="{Binding TitleFontSize, RelativeSource={RelativeSource TemplatedParent}}"
-                                                Text="{Binding Title, RelativeSource={RelativeSource TemplatedParent}}"
+                                                FontSize="{TemplateBinding TitleFontSize}"
+                                                Text="{TemplateBinding Title}"
                                                 TextWrapping="Wrap" />
                                 </Label>
                             </Grid>
                         </Border>
                         <Border x:Name="PART_HoverBorder"
-                                BorderBrush="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(Controls:ControlsHelper.MouseOverBorderBrush), Mode=OneWay}"
+                                BorderBrush="{TemplateBinding Controls:ControlsHelper.MouseOverBorderBrush}"
                                 BorderThickness="2"
-                                Opacity="0" />
+                                Opacity="0"
+                                SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                     </Grid>
                     <ControlTemplate.Triggers>
                         <MultiDataTrigger>

diff --git a/docs/release-notes/1.3.0.md b/docs/release-notes/1.3.0.md
@@ -10,11 +10,11 @@ MahApps.Metro v1.3.0 bug fix and feature release.
 - `IconPacks` for MahApps: new `PackIconMaterial` and `PackIconModern` control #2328
     + Usage:  
         ```
-        <mahapps:PackIconMaterial Kind="EmoticonCool" Height="24" Width="24" />
+        <Controls:PackIconMaterial Kind="EmoticonCool" Height="24" Width="24" />
         ```  
         or  
         ```
-        <mahapps:PackIconModern Kind="Cupcake" Height="24" Width="24" />
+        <Controls:PackIconModern Kind="Cupcake" Height="24" Width="24" />
         ```
     + Icon names can be found in `PackIconMaterialKind` and `PackIconModernKind`
     + All icons can be found in the main example (Icons)
@@ -72,6 +72,7 @@ MahApps.Metro v1.3.0 bug fix and feature release.
 - New dependency property `CircularNavigation` for the `FlipView` #2389
 - `BindsTwoWayByDefault` removed from `IsActiveProperty` of `ProgressRing` #2438 (@xxMUROxx)
 - Fix Flyout theme usage in `Caliburn.Micro` sample
+- New dependency properties for `Tile` control: `HorizontalTitleAlignment` and `VerticalTitleAlignment` #2293
 
 # Closed Issues
 
@@ -113,3 +114,4 @@ MahApps.Metro v1.3.0 bug fix and feature release.
 - #2414 Focus is lost after a dialog is closed
 - #2332 Calendar ignores IsTodayHighlighted property
 - #2420 ShowmessageAsync Cancellation Exception #2454 (@MatthewKinsman)
+- #2293 Align Tile Title
diff --git a/samples/MetroDemo/ExampleViews/TilesExample.xaml b/samples/MetroDemo/ExampleViews/TilesExample.xaml
@@ -25,11 +25,6 @@
                 <Setter Property="TitleFontSize" Value="10" />
                 <Setter Property="Width" Value="147" />
             </Style>
-            <Style x:Key="BigTileStyle" TargetType="Controls:Tile">
-                <Setter Property="Height" Value="125" />
-                <Setter Property="TitleFontSize" Value="10" />
-                <Setter Property="Width" Value="300" />
-            </Style>
         </ResourceDictionary>
     </UserControl.Resources>
 
@@ -46,10 +41,10 @@
 
             <TextBlock Grid.Column="1"
                        VerticalAlignment="Center"
+                       Foreground="{DynamicResource BlackBrush}"
                        FontFamily="Segoe UI"
                        FontSize="30"
                        FontWeight="Light"
-                       Foreground="{DynamicResource BlackBrush}"
                        Text="Only some Tiles in a WrapPanel" />
 
             <WrapPanel Grid.Row="1"
@@ -60,33 +55,35 @@
                        VerticalAlignment="Top">
                 <Controls:Tile Title="Mail"
                                Margin="3"
+                               Style="{StaticResource LargeTileStyle}"
                                Background="Teal"
-                               Style="{StaticResource LargeTileStyle}">
-                    <Grid Width="40" Background="{Binding Path=Foreground, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Controls:Tile}}}">
-                        <Grid.OpacityMask>
-                            <VisualBrush Stretch="Fill" Visual="{DynamicResource appbar_email}" />
-                        </Grid.OpacityMask>
-                    </Grid>
+                               Controls:ControlsHelper.MouseOverBorderBrush="{DynamicResource BlackBrush}"
+                               HorizontalTitleAlignment="Right">
+                    <Controls:PackIconModern Width="40"
+                                             Height="40"
+                                             Kind="Email" />
                 </Controls:Tile>
                 <Controls:Tile Title="Desktop"
                                Margin="3"
-                               Style="{StaticResource LargeTileStyle}" />
+                               Style="{StaticResource LargeTileStyle}"
+                               Controls:ControlsHelper.MouseOverBorderBrush="{DynamicResource BlackBrush}" />
                 <Controls:Tile Title="Finance"
-                               Background="Green"
-                               Style="{StaticResource LargeTileStyle}" />
+                               Style="{StaticResource LargeTileStyle}"
+                               Background="Green" />
                 <Controls:Tile Title="People"
+                               Style="{StaticResource LargeTileStyle}"
                                Background="#D2691E"
-                               Style="{StaticResource LargeTileStyle}" />
+                               HorizontalTitleAlignment="Right" />
                 <Controls:Tile Title="People (disabled)"
+                               Style="{StaticResource SmallTileStyle}"
                                Background="#D2691E"
-                               IsEnabled="False"
-                               Style="{StaticResource SmallTileStyle}" />
+                               IsEnabled="False" />
                 <Controls:Tile Title="Weather"
-                               Background="#1E90FF"
-                               Style="{StaticResource SmallTileStyle}" />
+                               Style="{StaticResource SmallTileStyle}"
+                               Background="#1E90FF" />
                 <Controls:Tile Title="Store"
-                               Background="Green"
-                               Style="{StaticResource LargeTileStyle}" />
+                               Style="{StaticResource LargeTileStyle}"
+                               Background="Green" />
             </WrapPanel>
         </Grid>
     </ScrollViewer>