Added FilePicker error glow

This commit is contained in:
Justin Swanson 2020-07-25 20:59:52 -05:00
parent 54428cc402
commit 9ac524c138
2 changed files with 65 additions and 3 deletions

View File

@ -39,6 +39,7 @@
<Color x:Key="Yellow">#ffc400</Color>
<Color x:Key="Red">#e83a40</Color>
<Color x:Key="Green">#52b545</Color>
<Color x:Key="YellowDark">#967400</Color>
<Color x:Key="Primary">#BB86FC</Color>
<Color x:Key="PrimaryTransparent">#00BB86FC</Color>
@ -101,6 +102,7 @@
<SolidColorBrush x:Key="GreenBrush" Color="{StaticResource Green}" />
<SolidColorBrush x:Key="RedBrush" Color="{StaticResource Red}" />
<SolidColorBrush x:Key="WarningBrush" Color="{StaticResource Yellow}" />
<SolidColorBrush x:Key="WarningDarkBrush" Color="{StaticResource YellowDark}" />
<SolidColorBrush x:Key="ErrorBrush" Color="{StaticResource Red}" />
<SolidColorBrush x:Key="DarkBackgroundBrush" Color="{StaticResource DarkBackgroundColor}" />

View File

@ -1,4 +1,4 @@
<UserControl
<UserControl
x:Class="Wabbajack.FilePicker"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
@ -10,11 +10,40 @@
d:DesignWidth="400"
BorderBrush="{StaticResource DarkBackgroundBrush}"
mc:Ignorable="d">
<Grid ClipToBounds="True">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="36" />
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" Grid.ColumnSpan="2"
x:Name="ErrorGlow"
Fill="{StaticResource WarningBrush}"
Opacity="0.3"
Visibility="{Binding PickerVM.InError, Converter={StaticResource bool2VisibilityConverter}, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}">
<Rectangle.Effect>
<BlurEffect Radius="15" />
</Rectangle.Effect>
<Rectangle.Style>
<Style TargetType="Rectangle">
<Style.Triggers>
<DataTrigger Binding="{Binding PickerVM.InError, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation
AutoReverse="True"
RepeatBehavior="Forever"
Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)"
To="{StaticResource YellowDark}"
Duration="0:0:0.8" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Rectangle.Style>
</Rectangle>
<Border Grid.Column="0" Grid.ColumnSpan="2"
x:Name="BackgroundCornerFillIn"
Margin="0,0,5,0"
@ -26,7 +55,9 @@
Background="{StaticResource DarkBackgroundBrush}"
Text="{Binding PickerVM.TargetPath, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}, Converter={StaticResource AbsolutePathToStringConverter}}"
Visibility="{Binding PickerVM.ShowTextBoxInput, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}" />
<Grid Grid.Column="1" HorizontalAlignment="Right">
<Grid Grid.Column="1"
HorizontalAlignment="Right"
ClipToBounds="True">
<Border
Margin="3,1,0,1"
HorizontalAlignment="Right"
@ -92,5 +123,34 @@
</Border.Effect>
</Border>
</Grid>
<Border Grid.Column="0" Grid.ColumnSpan="2"
x:Name="ErrorBorder"
Background="Transparent"
BorderBrush="{StaticResource WarningBrush}"
BorderThickness="1"
CornerRadius="3"
IsHitTestVisible="False"
Visibility="{Binding PickerVM.InError, Converter={StaticResource bool2VisibilityConverter}, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}">
<Border.Style>
<Style TargetType="Border">
<Style.Triggers>
<DataTrigger Binding="{Binding PickerVM.InError, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation
AutoReverse="True"
RepeatBehavior="Forever"
Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)"
To="{StaticResource YellowDark}"
Duration="0:0:0.8" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
</Border>
</Grid>
</UserControl>