Skip to content

Commit 6e28c1e

Browse files
ButchersBoyButchersBoy
committed
improve floating text field. add flyout demo
1 parent 812998d commit 6e28c1e

File tree

7 files changed

+96
-0
lines changed

7 files changed

+96
-0
lines changed

‎MahMaterialDragablzMashUp/Dialogs.xaml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,5 +12,6 @@
1212
<StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
1313
<Button Command="{Binding ShowInputDialogCommand}">INPUT DIALOG</Button>
1414
<Button Command="{Binding ShowProgressDialogCommand}" Margin="0 48 0 0">PROGRESS DIALOG</Button>
15+
<Button Command="{Binding ShowLeftFlyoutCommand}" Margin="0 48 0 0">FLYOUT</Button>
1516
</StackPanel>
1617
</UserControl>

‎MahMaterialDragablzMashUp/DialogsViewModel.cs

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
11
using System;
22
using System.Collections.Generic;
3+
using System.ComponentModel;
34
using System.Linq;
5+
using System.Runtime.CompilerServices;
46
using System.Text;
57
using System.Threading.Tasks;
68
using System.Windows;
79
using System.Windows.Controls;
810
using System.Windows.Input;
11+
using MahApps.Metro.Controls;
912
using MahApps.Metro.Controls.Dialogs;
1013

1114
namespace MahMaterialDragablzMashUp
@@ -16,12 +19,17 @@ public class DialogsViewModel
1619

1720
public ICommand ShowProgressDialogCommand { get; }
1821

22+
public ICommand ShowLeftFlyoutCommand { get; }
23+
1924
public DialogsViewModel()
2025
{
2126
ShowInputDialogCommand = new AnotherCommandImplementation(_ => InputDialog());
2227
ShowProgressDialogCommand = new AnotherCommandImplementation(_ => ProgressDialog());
28+
ShowLeftFlyoutCommand = new AnotherCommandImplementation(_ => ShowLeftFlyout());
2329
}
2430

31+
public Flyout LeftFlyout { get; set; }
32+
2533
private void InputDialog()
2634
{
2735
var metroDialogSettings = new MetroDialogSettings
@@ -53,5 +61,10 @@ private void ProgressDialog()
5361

5462
DialogCoordinator.Instance.ShowProgressAsync(this, "MahApps Dialog", "Using Material Design Themes (WORK IN PROGRESS)", true, metroDialogSettings);
5563
}
64+
65+
private void ShowLeftFlyout()
66+
{
67+
((MainWindow) Application.Current.MainWindow).LeftFlyout.IsOpen = true;
68+
}
5669
}
5770
}

‎MahMaterialDragablzMashUp/FlyoutContent.xaml

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<UserControl x:Class="MahMaterialDragablzMashUp.FlyoutContent"
2+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4+
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
5+
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
6+
xmlns:local="clr-namespace:MahMaterialDragablzMashUp"
7+
xmlns:wpf="clr-namespace:MaterialDesignThemes.Wpf;assembly=MaterialDesignThemes.Wpf"
8+
mc:Ignorable="d"
9+
d:DesignHeight="300" d:DesignWidth="300">
10+
<UserControl.Resources>
11+
<ResourceDictionary>
12+
<ResourceDictionary.MergedDictionaries>
13+
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.TextBox.xaml" />
14+
</ResourceDictionary.MergedDictionaries>
15+
</ResourceDictionary>
16+
</UserControl.Resources>
17+
<StackPanel Margin="24">
18+
<TextBox Style="{StaticResource MaterialDesignFloatingHintTextBox}" FontSize="18" wpf:TextField.Hint="Your Name" MinWidth="120" />
19+
<TextBox Style="{StaticResource MaterialDesignFloatingHintTextBox}" wpf:TextField.Hint="Location" MinWidth="120" Margin="0 8 0 0" />
20+
</StackPanel>
21+
</UserControl>

‎MahMaterialDragablzMashUp/FlyoutContent.xaml.cs

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
using System;
2+
using System.Collections.Generic;
3+
using System.Linq;
4+
using System.Text;
5+
using System.Threading.Tasks;
6+
using System.Windows;
7+
using System.Windows.Controls;
8+
using System.Windows.Data;
9+
using System.Windows.Documents;
10+
using System.Windows.Input;
11+
using System.Windows.Media;
12+
using System.Windows.Media.Imaging;
13+
using System.Windows.Navigation;
14+
using System.Windows.Shapes;
15+
16+
namespace MahMaterialDragablzMashUp
17+
{
18+
/// <summary>
19+
/// Interaction logic for FlyoutContent.xaml
20+
/// </summary>
21+
public partial class FlyoutContent : UserControl
22+
{
23+
public FlyoutContent()
24+
{
25+
InitializeComponent();
26+
}
27+
}
28+
}

‎MahMaterialDragablzMashUp/MahMaterialDragablzMashUp.csproj

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,10 @@
9191
<SubType>Designer</SubType>
9292
<Generator>MSBuild:Compile</Generator>
9393
</Page>
94+
<Page Include="FlyoutContent.xaml">
95+
<SubType>Designer</SubType>
96+
<Generator>MSBuild:Compile</Generator>
97+
</Page>
9498
<Page Include="TextFields.xaml">
9599
<SubType>Designer</SubType>
96100
<Generator>MSBuild:Compile</Generator>
@@ -118,6 +122,9 @@
118122
<DependentUpon>Dialogs.xaml</DependentUpon>
119123
</Compile>
120124
<Compile Include="DialogsViewModel.cs" />
125+
<Compile Include="FlyoutContent.xaml.cs">
126+
<DependentUpon>FlyoutContent.xaml</DependentUpon>
127+
</Compile>
121128
<Compile Include="PaletteSelectorViewModel.cs" />
122129
<Compile Include="TextFields.xaml.cs">
123130
<DependentUpon>TextFields.xaml</DependentUpon>

‎MahMaterialDragablzMashUp/MainWindow.xaml

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,13 @@
1010
GlowBrush="{DynamicResource AccentColorBrush}"
1111
FontFamily="pack://application:,,,/MaterialDesignThemes.Wpf;component/Resources/Roboto/#Roboto"
1212
Title="Material-MahApps-Dragablz Mash Up" Height="350" Width="525">
13+
<controls:MetroWindow.Flyouts>
14+
<controls:FlyoutsControl>
15+
<controls:Flyout x:Name="LeftFlyout" Position="Left">
16+
<mahMaterialDragablzMashUp:FlyoutContent />
17+
</controls:Flyout>
18+
</controls:FlyoutsControl>
19+
</controls:MetroWindow.Flyouts>
1320
<dragablz:TabablzControl TextElement.Foreground="{DynamicResource MaterialDesignBody}" BorderThickness="0"
1421
Background="{DynamicResource MaterialDesignPaper}" Margin="0,-1,0,1">
1522
<dragablz:TabablzControl.InterTabController>

‎MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.TextBox.xaml

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,12 @@
8686
<SineEase EasingMode="EaseOut" />
8787
</DoubleAnimation.EasingFunction>
8888
</DoubleAnimation>
89+
<DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Hint"
90+
Duration="0:0:0.3" To="1">
91+
<DoubleAnimation.EasingFunction>
92+
<SineEase EasingMode="EaseOut" />
93+
</DoubleAnimation.EasingFunction>
94+
</DoubleAnimation>
8995
<ThicknessAnimation Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="Hint"
9096
Duration="0:0:0.3" To="1,-16,1,0">
9197
<ThicknessAnimation.EasingFunction>
@@ -100,6 +106,12 @@
100106
<SineEase EasingMode="EaseOut" />
101107
</DoubleAnimation.EasingFunction>
102108
</DoubleAnimation>
109+
<DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Hint"
110+
Duration="0:0:0.3">
111+
<DoubleAnimation.EasingFunction>
112+
<SineEase EasingMode="EaseOut" />
113+
</DoubleAnimation.EasingFunction>
114+
</DoubleAnimation>
103115
<ThicknessAnimation Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="Hint"
104116
Duration="0:0:0.3">
105117
<ThicknessAnimation.EasingFunction>
@@ -130,6 +142,13 @@
130142
<BeginStoryboard x:Name="MoveHintBackStoryboard_BeginStoryboard" Storyboard="{StaticResource MoveHintBackStoryboard}"/>
131143
</Trigger.ExitActions>
132144
</Trigger>
145+
<MultiTrigger>
146+
<MultiTrigger.Conditions>
147+
<Condition Property="wpf:TextField.IsNullOrEmpty" Value="False" />
148+
<Condition Property="IsKeyboardFocused" Value="True" />
149+
</MultiTrigger.Conditions>
150+
<Setter TargetName="Hint" Property="Foreground" Value="{DynamicResource PrimaryHueMidBrush}" />
151+
</MultiTrigger>
133152
<Trigger Property="IsEnabled" Value="false">
134153
<Setter Property="Opacity" TargetName="border" Value="0.56"/>
135154
</Trigger>

0 commit comments

Comments
 (0)