Fix #2737

Set the brush of the border for the IsWaiting effect under the normal border to transparent to avoid nasty blurry effect on the borrom side. Also collapse this border if it's not necessary.
MahApps · Nov 18, 2016 · dd18384 · dd18384
1 parent 2b8d472
commit dd18384
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 64 deletions.
diff --git a/docs/release-notes/1.4.0.md b/docs/release-notes/1.4.0.md
@@ -42,3 +42,4 @@
 - [#2713](https://github.com/MahApps/MahApps.Metro/issues/2713) Weird animation on combobox with only one item
 - [#2746](https://github.com/MahApps/MahApps.Metro/issues/2746) WindowCommands - Toggle Button And Button Access Key Not Underlined When Pressing Alt
 - [#2744](https://github.com/MahApps/MahApps.Metro/issues/2744) Flyout IsPinned = False/True
+- [#2737](https://github.com/MahApps/MahApps.Metro/issues/2737) Design for textbox
diff --git a/...Metro.Samples/MahApps.Metro.Demo/MahApps.Metro.Demo.Shared/ExampleViews/TextExamples.xaml b/...Metro.Samples/MahApps.Metro.Demo/MahApps.Metro.Demo.Shared/ExampleViews/TextExamples.xaml
@@ -25,7 +25,7 @@
             </Grid.ColumnDefinitions>
             <Grid.RowDefinitions>
                 <RowDefinition Height="Auto" />
-                <RowDefinition Height="*" />
+                <RowDefinition Height="Auto" />
             </Grid.RowDefinitions>
 
             <StackPanel Grid.Row="0"
@@ -95,6 +95,9 @@
                 <TextBox Margin="{StaticResource ControlMargin}"
                          Controls:TextBoxHelper.Watermark="Number smaller than 10"
                          Text="{Binding IntegerGreater10Property, ValidatesOnDataErrors=True, UpdateSourceTrigger=PropertyChanged, NotifyOnValidationError=True}" />
+                <TextBox Margin="{StaticResource ControlMargin}"
+                         Controls:TextBoxHelper.SelectAllOnFocus="True"
+                         Text="Select all on focus" />
                 <TextBox Margin="{StaticResource ControlMargin}"
                          IsEnabled="False"
                          Text="Disabled" />
@@ -114,9 +117,6 @@
                          Controls:TextBoxHelper.Watermark="Number smaller than 10"
                          IsEnabled="False"
                          Text="{Binding IntegerGreater10Property, ValidatesOnDataErrors=True, UpdateSourceTrigger=PropertyChanged, NotifyOnValidationError=True}" />
-                <TextBox Margin="{StaticResource ControlMargin}"
-                         Controls:TextBoxHelper.SelectAllOnFocus="True"
-                         Text="Select all on focus" />
             </StackPanel>
 
             <StackPanel Grid.Row="0"

diff --git a/src/MahApps.Metro/MahApps.Metro/Styles/Controls.PasswordBox.xaml b/src/MahApps.Metro/MahApps.Metro/Styles/Controls.PasswordBox.xaml
@@ -144,13 +144,15 @@
                         </Storyboard>
                     </ControlTemplate.Resources>
                     <Grid>
-                        <AdornerDecorator>
+                        <AdornerDecorator x:Name="PART_WaitingForDataEffectAdornerDecorator"
+                                          Visibility="Collapsed">
                             <AdornerDecorator.CacheMode>
-                                <BitmapCache EnableClearType="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
+                                <BitmapCache EnableClearType="True"
+                                             SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                             </AdornerDecorator.CacheMode>
                             <Border x:Name="PART_WaitingForDataEffectGrid"
                                     Background="{TemplateBinding Background}"
-                                    BorderBrush="{TemplateBinding BorderBrush}"
+                                    BorderBrush="Transparent"
                                     BorderThickness="{TemplateBinding BorderThickness}"
                                     SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                         </AdornerDecorator>
@@ -303,20 +305,15 @@
                                 <Condition Property="IsVisible" Value="True" />
                                 <Condition Property="Controls:TextBoxHelper.IsWaitingForData" Value="True" />
                             </MultiTrigger.Conditions>
-                            <Setter TargetName="PART_WaitingForDataEffectGrid" Property="Effect">
-                                <Setter.Value>
-                                    <DropShadowEffect Opacity="0"
-                                                      BlurRadius="10"
-                                                      ShadowDepth="0"
-                                                      Color="{DynamicResource BlackColor}" />
-                                </Setter.Value>
-                            </Setter>
+                            <Setter TargetName="PART_WaitingForDataEffectGrid" Property="Effect" Value="{DynamicResource WaitingForDataEffect}" />
+                            <Setter TargetName="PART_WaitingForDataEffectAdornerDecorator" Property="Visibility" Value="Visible" />
                             <MultiTrigger.EnterActions>
-                                <BeginStoryboard Storyboard="{StaticResource WaitingForDataStoryboard}" />
+                                <BeginStoryboard Storyboard="{DynamicResource WaitingForDataStoryboard}" />
                             </MultiTrigger.EnterActions>
                         </MultiTrigger>
                         <Trigger Property="Controls:TextBoxHelper.IsWaitingForData" Value="False">
                             <Setter TargetName="PART_WaitingForDataEffectGrid" Property="Effect" Value="{x:Null}" />
+                            <Setter TargetName="PART_WaitingForDataEffectAdornerDecorator" Property="Visibility" Value="Collapsed" />
                         </Trigger>
                     </ControlTemplate.Triggers>
                 </ControlTemplate>
@@ -360,13 +357,15 @@
                         </Storyboard>
                     </ControlTemplate.Resources>
                     <Grid>
-                        <AdornerDecorator>
+                        <AdornerDecorator x:Name="PART_WaitingForDataEffectAdornerDecorator"
+                                          Visibility="Collapsed">
                             <AdornerDecorator.CacheMode>
-                                <BitmapCache EnableClearType="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
+                                <BitmapCache EnableClearType="True"
+                                             SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                             </AdornerDecorator.CacheMode>
                             <Border x:Name="PART_WaitingForDataEffectGrid"
                                     Background="{TemplateBinding Background}"
-                                    BorderBrush="{TemplateBinding BorderBrush}"
+                                    BorderBrush="Transparent"
                                     BorderThickness="{TemplateBinding BorderThickness}"
                                     SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                         </AdornerDecorator>
@@ -519,20 +518,15 @@
                                 <Condition Property="IsVisible" Value="True" />
                                 <Condition Property="Controls:TextBoxHelper.IsWaitingForData" Value="True" />
                             </MultiTrigger.Conditions>
-                            <Setter TargetName="PART_WaitingForDataEffectGrid" Property="Effect">
-                                <Setter.Value>
-                                    <DropShadowEffect Opacity="0"
-                                                      BlurRadius="10"
-                                                      ShadowDepth="0"
-                                                      Color="{DynamicResource BlackColor}" />
-                                </Setter.Value>
-                            </Setter>
+                            <Setter TargetName="PART_WaitingForDataEffectGrid" Property="Effect" Value="{DynamicResource WaitingForDataEffect}" />
+                            <Setter TargetName="PART_WaitingForDataEffectAdornerDecorator" Property="Visibility" Value="Visible" />
                             <MultiTrigger.EnterActions>
-                                <BeginStoryboard Storyboard="{StaticResource WaitingForDataStoryboard}" />
+                                <BeginStoryboard Storyboard="{DynamicResource WaitingForDataStoryboard}" />
                             </MultiTrigger.EnterActions>
                         </MultiTrigger>
                         <Trigger Property="Controls:TextBoxHelper.IsWaitingForData" Value="False">
                             <Setter TargetName="PART_WaitingForDataEffectGrid" Property="Effect" Value="{x:Null}" />
+                            <Setter TargetName="PART_WaitingForDataEffectAdornerDecorator" Property="Visibility" Value="Collapsed" />
                         </Trigger>
                     </ControlTemplate.Triggers>
                 </ControlTemplate>
@@ -575,13 +569,15 @@
                         </Storyboard>
                     </ControlTemplate.Resources>
                     <Grid>
-                        <AdornerDecorator>
+                        <AdornerDecorator x:Name="PART_WaitingForDataEffectAdornerDecorator"
+                                          Visibility="Collapsed">
                             <AdornerDecorator.CacheMode>
-                                <BitmapCache EnableClearType="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
+                                <BitmapCache EnableClearType="True"
+                                             SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                             </AdornerDecorator.CacheMode>
                             <Border x:Name="PART_WaitingForDataEffectGrid"
                                     Background="{TemplateBinding Background}"
-                                    BorderBrush="{TemplateBinding BorderBrush}"
+                                    BorderBrush="Transparent"
                                     BorderThickness="{TemplateBinding BorderThickness}"
                                     SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                         </AdornerDecorator>
@@ -762,25 +758,21 @@
                                 <BeginStoryboard Storyboard="{StaticResource exitHasText}" />
                             </Trigger.ExitActions>
                         </Trigger>
+
                         <MultiTrigger>
                             <MultiTrigger.Conditions>
                                 <Condition Property="IsVisible" Value="True" />
                                 <Condition Property="Controls:TextBoxHelper.IsWaitingForData" Value="True" />
                             </MultiTrigger.Conditions>
-                            <Setter TargetName="PART_WaitingForDataEffectGrid" Property="Effect">
-                                <Setter.Value>
-                                    <DropShadowEffect Opacity="0"
-                                                      BlurRadius="10"
-                                                      ShadowDepth="0"
-                                                      Color="{DynamicResource BlackColor}" />
-                                </Setter.Value>
-                            </Setter>
+                            <Setter TargetName="PART_WaitingForDataEffectGrid" Property="Effect" Value="{DynamicResource WaitingForDataEffect}" />
+                            <Setter TargetName="PART_WaitingForDataEffectAdornerDecorator" Property="Visibility" Value="Visible" />
                             <MultiTrigger.EnterActions>
-                                <BeginStoryboard Storyboard="{StaticResource WaitingForDataStoryboard}" />
+                                <BeginStoryboard Storyboard="{DynamicResource WaitingForDataStoryboard}" />
                             </MultiTrigger.EnterActions>
                         </MultiTrigger>
                         <Trigger Property="Controls:TextBoxHelper.IsWaitingForData" Value="False">
                             <Setter TargetName="PART_WaitingForDataEffectGrid" Property="Effect" Value="{x:Null}" />
+                            <Setter TargetName="PART_WaitingForDataEffectAdornerDecorator" Property="Visibility" Value="Collapsed" />
                         </Trigger>
                     </ControlTemplate.Triggers>
                 </ControlTemplate>

diff --git a/src/MahApps.Metro/MahApps.Metro/Styles/Controls.TextBox.xaml b/src/MahApps.Metro/MahApps.Metro/Styles/Controls.TextBox.xaml
@@ -61,13 +61,14 @@
                         </Storyboard>
                     </ControlTemplate.Resources>
                     <Grid>
-                        <AdornerDecorator>
+                        <AdornerDecorator x:Name="PART_WaitingForDataEffectAdornerDecorator" Visibility="Collapsed">
                             <AdornerDecorator.CacheMode>
-                                <BitmapCache EnableClearType="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
+                                <BitmapCache EnableClearType="True"
+                                             SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                             </AdornerDecorator.CacheMode>
                             <Border x:Name="PART_WaitingForDataEffectGrid"
                                     Background="{TemplateBinding Background}"
-                                    BorderBrush="{TemplateBinding BorderBrush}"
+                                    BorderBrush="Transparent"
                                     BorderThickness="{TemplateBinding BorderThickness}"
                                     SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                         </AdornerDecorator>
@@ -227,20 +228,15 @@
                                 <Condition Property="IsVisible" Value="True" />
                                 <Condition Property="Controls:TextBoxHelper.IsWaitingForData" Value="True" />
                             </MultiTrigger.Conditions>
-                            <Setter TargetName="PART_WaitingForDataEffectGrid" Property="Effect">
-                                <Setter.Value>
-                                    <DropShadowEffect Opacity="0"
-                                                      BlurRadius="10"
-                                                      ShadowDepth="0"
-                                                      Color="{DynamicResource BlackColor}" />
-                                </Setter.Value>
-                            </Setter>
+                            <Setter TargetName="PART_WaitingForDataEffectGrid" Property="Effect" Value="{DynamicResource WaitingForDataEffect}" />
+                            <Setter TargetName="PART_WaitingForDataEffectAdornerDecorator" Property="Visibility" Value="Visible" />
                             <MultiTrigger.EnterActions>
-                                <BeginStoryboard Storyboard="{StaticResource WaitingForDataStoryboard}" />
+                                <BeginStoryboard Storyboard="{DynamicResource WaitingForDataStoryboard}" />
                             </MultiTrigger.EnterActions>
                         </MultiTrigger>
                         <Trigger Property="Controls:TextBoxHelper.IsWaitingForData" Value="False">
                             <Setter TargetName="PART_WaitingForDataEffectGrid" Property="Effect" Value="{x:Null}" />
+                            <Setter TargetName="PART_WaitingForDataEffectAdornerDecorator" Property="Visibility" Value="Collapsed" />
                         </Trigger>
                     </ControlTemplate.Triggers>
                 </ControlTemplate>
@@ -284,13 +280,15 @@
                         </Storyboard>
                     </ControlTemplate.Resources>
                     <Grid>
-                        <AdornerDecorator>
+                        <AdornerDecorator x:Name="PART_WaitingForDataEffectAdornerDecorator"
+                                          Visibility="Collapsed">
                             <AdornerDecorator.CacheMode>
-                                <BitmapCache EnableClearType="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
+                                <BitmapCache EnableClearType="True"
+                                             SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                             </AdornerDecorator.CacheMode>
                             <Border x:Name="PART_WaitingForDataEffectGrid"
                                     Background="{TemplateBinding Background}"
-                                    BorderBrush="{TemplateBinding BorderBrush}"
+                                    BorderBrush="Transparent"
                                     BorderThickness="{TemplateBinding BorderThickness}"
                                     SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                         </AdornerDecorator>
@@ -429,20 +427,15 @@
                                 <Condition Property="IsVisible" Value="True" />
                                 <Condition Property="Controls:TextBoxHelper.IsWaitingForData" Value="True" />
                             </MultiTrigger.Conditions>
-                            <Setter TargetName="PART_WaitingForDataEffectGrid" Property="Effect">
-                                <Setter.Value>
-                                    <DropShadowEffect Opacity="0"
-                                                      BlurRadius="10"
-                                                      ShadowDepth="0"
-                                                      Color="{DynamicResource BlackColor}" />
-                                </Setter.Value>
-                            </Setter>
+                            <Setter TargetName="PART_WaitingForDataEffectGrid" Property="Effect" Value="{DynamicResource WaitingForDataEffect}" />
+                            <Setter TargetName="PART_WaitingForDataEffectAdornerDecorator" Property="Visibility" Value="Visible" />
                             <MultiTrigger.EnterActions>
-                                <BeginStoryboard Storyboard="{StaticResource WaitingForDataStoryboard}" />
+                                <BeginStoryboard Storyboard="{DynamicResource WaitingForDataStoryboard}" />
                             </MultiTrigger.EnterActions>
                         </MultiTrigger>
                         <Trigger Property="Controls:TextBoxHelper.IsWaitingForData" Value="False">
                             <Setter TargetName="PART_WaitingForDataEffectGrid" Property="Effect" Value="{x:Null}" />
+                            <Setter TargetName="PART_WaitingForDataEffectAdornerDecorator" Property="Visibility" Value="Collapsed" />
                         </Trigger>
                     </ControlTemplate.Triggers>
                 </ControlTemplate>

diff --git a/src/MahApps.Metro/MahApps.Metro/Styles/Shared.xaml b/src/MahApps.Metro/MahApps.Metro/Styles/Shared.xaml
@@ -12,6 +12,12 @@
                      EasingMode="EaseInOut"
                      Exponent="2" />
 
+    <DropShadowEffect x:Key="WaitingForDataEffect"
+                      Opacity="0"
+                      BlurRadius="10"
+                      ShadowDepth="0"
+                      Color="{DynamicResource BlackColor}" />
+
     <Storyboard x:Key="WaitingForDataStoryboard" po:Freeze="True">
         <DoubleAnimation AutoReverse="True"
                          Duration="00:00:02"