Readded shadow to WJ background. Some styling

This commit is contained in:
Justin Swanson
2019-11-01 19:32:45 -05:00
parent f77359ee7d
commit dc5ad70145
2 changed files with 247 additions and 247 deletions

View File

@ -83,9 +83,6 @@ namespace Wabbajack
private readonly ObservableAsPropertyHelper<string> _Description; private readonly ObservableAsPropertyHelper<string> _Description;
public string Description => _Description.Value; public string Description => _Description.Value;
private readonly ObservableAsPropertyHelper<bool> _ShowTextShadow;
public bool ShowTextShadow => _ShowTextShadow.Value;
// Command properties // Command properties
public IReactiveCommand BeginCommand { get; } public IReactiveCommand BeginCommand { get; }
public IReactiveCommand ShowReportCommand { get; } public IReactiveCommand ShowReportCommand { get; }
@ -224,15 +221,6 @@ namespace Wabbajack
resultSelector: (modList, mod, installing) => installing ? mod : modList) resultSelector: (modList, mod, installing) => installing ? mod : modList)
.ToProperty(this, nameof(this.Description)); .ToProperty(this, nameof(this.Description));
this._ShowTextShadow = this.WhenAny(x => x.Image)
.Select(image =>
{
if (image == null) return false;
if (image == this.WabbajackLogo) return false;
return true;
})
.ToProperty(this, nameof(ShowTextShadow));
// Define commands // Define commands
this.ShowReportCommand = ReactiveCommand.Create(ShowReport); this.ShowReportCommand = ReactiveCommand.Create(ShowReport);
this.OpenReadmeCommand = ReactiveCommand.Create( this.OpenReadmeCommand = ReactiveCommand.Create(

View File

@ -16,7 +16,7 @@
<Color x:Key="TextBackgroundHoverFill">#DF000000</Color> <Color x:Key="TextBackgroundHoverFill">#DF000000</Color>
<Style x:Key="BackgroundBlurStyle" TargetType="Border"> <Style x:Key="BackgroundBlurStyle" TargetType="Border">
<Setter Property="Background" Value="{StaticResource TextBackgroundFillBrush}" /> <Setter Property="Background" Value="{StaticResource TextBackgroundFillBrush}" />
<Setter Property="Visibility" Value="Hidden" /> <Setter Property="Visibility" Value="Visible" />
<Style.Triggers> <Style.Triggers>
<DataTrigger Binding="{Binding IsMouseOver, ElementName=Slideshow}" Value="True"> <DataTrigger Binding="{Binding IsMouseOver, ElementName=Slideshow}" Value="True">
<DataTrigger.EnterActions> <DataTrigger.EnterActions>
@ -40,8 +40,8 @@
</BeginStoryboard> </BeginStoryboard>
</DataTrigger.ExitActions> </DataTrigger.ExitActions>
</DataTrigger> </DataTrigger>
<DataTrigger Binding="{Binding ShowTextShadow}" Value="True"> <DataTrigger Binding="{Binding Image}" Value="{x:Null}">
<Setter Property="Visibility" Value="Visible" /> <Setter Property="Visibility" Value="Hidden" />
</DataTrigger> </DataTrigger>
</Style.Triggers> </Style.Triggers>
</Style> </Style>
@ -54,7 +54,7 @@
<Setter Property="Margin" Value="4" /> <Setter Property="Margin" Value="4" />
</Style> </Style>
</UserControl.Resources> </UserControl.Resources>
<Grid Margin="5"> <Grid>
<Grid.RowDefinitions> <Grid.RowDefinitions>
<RowDefinition Height="40" /> <RowDefinition Height="40" />
<RowDefinition Height="5" /> <RowDefinition Height="5" />
@ -62,255 +62,260 @@
<RowDefinition Height="*" MinHeight="150" /> <RowDefinition Height="*" MinHeight="150" />
</Grid.RowDefinitions> </Grid.RowDefinitions>
<!-- Slideshow --> <!-- Slideshow -->
<Grid <Border
x:Name="Slideshow" x:Name="Slideshow"
Grid.Row="2" Grid.Row="2"
Margin="0,0,0,5"> Margin="5,0,5,5"
<Grid.ColumnDefinitions> BorderBrush="#171717"
<ColumnDefinition Width="5*" /> BorderThickness="1,0,1,1">
<ColumnDefinition Width="3*" /> <Grid ClipToBounds="True">
</Grid.ColumnDefinitions> <Grid.ColumnDefinitions>
<Rectangle <ColumnDefinition Width="5*" />
Grid.Column="0" <ColumnDefinition Width="3*" />
Grid.ColumnSpan="2" </Grid.ColumnDefinitions>
Fill="{StaticResource WindowBackgroundBrush}" /> <Rectangle
<Viewbox
Grid.Column="0"
Grid.ColumnSpan="2"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Stretch="UniformToFill">
<Image Source="{Binding Image}" />
</Viewbox>
<Image
Grid.Column="0"
Grid.ColumnSpan="2"
Width="60"
Height="60"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Source="{Binding ModlistImage}" />
<Grid Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Border
Grid.Row="1"
Grid.RowSpan="2"
Grid.Column="0" Grid.Column="0"
Margin="-100,0,0,-100" Grid.ColumnSpan="2"
CornerRadius="100" Fill="{StaticResource WindowBackgroundBrush}" />
Style="{StaticResource BackgroundBlurStyle}"> <Viewbox
<Border.Effect>
<BlurEffect Radius="65" />
</Border.Effect>
</Border>
<TextBlock
Grid.Row="1"
Grid.Column="0" Grid.Column="0"
Margin="20,25,20,0" Grid.ColumnSpan="2"
VerticalAlignment="Bottom" HorizontalAlignment="Center"
FontFamily="Lucida Sans" VerticalAlignment="Center"
FontSize="65" Stretch="UniformToFill">
FontWeight="Bold" <Image Source="{Binding Image}" />
Text="{Binding TitleText}" </Viewbox>
TextWrapping="WrapWithOverflow"> <Image
<TextBlock.Effect>
<DropShadowEffect />
</TextBlock.Effect>
</TextBlock>
<TextBlock
Grid.Row="2"
Grid.Column="0" Grid.Column="0"
Margin="55,0,20,20" Grid.ColumnSpan="2"
FontFamily="Lucida Sans" Width="60"
FontSize="30" Height="60"
FontWeight="Bold" HorizontalAlignment="Left"
Text="{Binding AuthorText}" VerticalAlignment="Top"
TextWrapping="Wrap"> Source="{Binding ModlistImage}" />
<TextBlock.Effect> <Grid Grid.Column="0">
<DropShadowEffect /> <Grid.RowDefinitions>
</TextBlock.Effect> <RowDefinition Height="*" />
</TextBlock> <RowDefinition Height="Auto" />
</Grid> <RowDefinition Height="Auto" />
<Grid Grid.Column="1"> </Grid.RowDefinitions>
<Grid.RowDefinitions> <Border
<RowDefinition Height="Auto" /> Grid.Row="1"
<RowDefinition Height="Auto" /> Grid.RowSpan="2"
<RowDefinition Height="*" /> Grid.Column="0"
<RowDefinition Height="Auto" /> Margin="-100,0,0,-100"
</Grid.RowDefinitions> CornerRadius="100"
<Grid Style="{StaticResource BackgroundBlurStyle}">
Grid.Column="0" <Border.Effect>
Margin="0,20,25,0" <BlurEffect Radius="65" />
HorizontalAlignment="Right"> </Border.Effect>
<Grid.ColumnDefinitions> </Border>
<ColumnDefinition Width="Auto" /> <TextBlock
<ColumnDefinition Width="Auto" /> Grid.Row="1"
<ColumnDefinition Width="Auto" /> Grid.Column="0"
<ColumnDefinition Width="Auto" /> Margin="20,25,20,0"
</Grid.ColumnDefinitions> VerticalAlignment="Bottom"
<Grid.Effect> FontFamily="Lucida Sans"
<DropShadowEffect FontSize="65"
BlurRadius="25" FontWeight="Bold"
Opacity="1" Text="{Binding TitleText}"
Color="Black" /> TextWrapping="WrapWithOverflow">
</Grid.Effect> <TextBlock.Effect>
<Grid.Style> <DropShadowEffect />
<Style TargetType="Grid"> </TextBlock.Effect>
<Setter Property="Opacity" Value="0" /> </TextBlock>
<Style.Triggers> <TextBlock
<MultiDataTrigger> Grid.Row="2"
<MultiDataTrigger.Conditions> Grid.Column="0"
<Condition Binding="{Binding IsMouseOver, ElementName=Slideshow}" Value="True" /> Margin="55,0,20,20"
<Condition Binding="{Binding Installing}" Value="True" /> FontFamily="Lucida Sans"
</MultiDataTrigger.Conditions> FontSize="30"
<MultiDataTrigger.EnterActions> FontWeight="Bold"
<BeginStoryboard> Text="{Binding AuthorText}"
<Storyboard> TextWrapping="Wrap">
<DoubleAnimation <TextBlock.Effect>
Storyboard.TargetProperty="Opacity" <DropShadowEffect />
To="1" </TextBlock.Effect>
Duration="0:0:0.12" /> </TextBlock>
</Storyboard> </Grid>
</BeginStoryboard> <Grid Grid.Column="1">
</MultiDataTrigger.EnterActions> <Grid.RowDefinitions>
<MultiDataTrigger.ExitActions> <RowDefinition Height="Auto" />
<BeginStoryboard> <RowDefinition Height="Auto" />
<Storyboard> <RowDefinition Height="*" />
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity"> <RowDefinition Height="Auto" />
<LinearDoubleKeyFrame KeyTime="0:0:0.3" Value="1" /> </Grid.RowDefinitions>
<LinearDoubleKeyFrame KeyTime="0:0:0.42" Value="0" /> <Grid
</DoubleAnimationUsingKeyFrames> Grid.Column="0"
</Storyboard> Margin="0,20,25,0"
</BeginStoryboard> HorizontalAlignment="Right">
</MultiDataTrigger.ExitActions> <Grid.ColumnDefinitions>
</MultiDataTrigger> <ColumnDefinition Width="Auto" />
</Style.Triggers> <ColumnDefinition Width="Auto" />
</Style> <ColumnDefinition Width="Auto" />
</Grid.Style> <ColumnDefinition Width="Auto" />
<Button </Grid.ColumnDefinitions>
Grid.Column="3" <Grid.Effect>
Width="60" <DropShadowEffect
Height="60" BlurRadius="25"
Margin="6" Opacity="1"
Background="{StaticResource BackgroundBrush}" Color="Black" />
Command="{Binding Slideshow.SlideShowNextItemCommand}" </Grid.Effect>
Style="{StaticResource CircleButtonStyle}" <Grid.Style>
ToolTip="Skip to the next mod"> <Style TargetType="Grid">
<icon:PackIconFontAwesome <Setter Property="Opacity" Value="0" />
Width="28"
Height="28"
Kind="ChevronRightSolid" />
</Button>
<ToggleButton
x:Name="PlayPauseButton"
Grid.Column="2"
Margin="6"
Background="{StaticResource BackgroundBrush}"
IsChecked="{Binding Slideshow.Enable}">
<ToggleButton.Style>
<Style BasedOn="{StaticResource SlideshowButton}" TargetType="ToggleButton">
<Setter Property="ToolTip" Value="Play slideshow" />
<Style.Triggers> <Style.Triggers>
<DataTrigger Binding="{Binding Slideshow.Enable}" Value="True"> <MultiDataTrigger>
<Setter Property="ToolTip" Value="Pause slideshow" /> <MultiDataTrigger.Conditions>
</DataTrigger> <Condition Binding="{Binding IsMouseOver, ElementName=Slideshow}" Value="True" />
<Condition Binding="{Binding Installing}" Value="True" />
</MultiDataTrigger.Conditions>
<MultiDataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0:0:0.12" />
</Storyboard>
</BeginStoryboard>
</MultiDataTrigger.EnterActions>
<MultiDataTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity">
<LinearDoubleKeyFrame KeyTime="0:0:0.3" Value="1" />
<LinearDoubleKeyFrame KeyTime="0:0:0.42" Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</MultiDataTrigger.ExitActions>
</MultiDataTrigger>
</Style.Triggers> </Style.Triggers>
</Style> </Style>
</ToggleButton.Style> </Grid.Style>
<icon:PackIconMaterial> <Button
<icon:PackIconMaterial.Style> Grid.Column="3"
<Style TargetType="icon:PackIconMaterial"> Width="60"
<Setter Property="Kind" Value="Pause" /> Height="60"
Margin="6"
Background="{StaticResource BackgroundBrush}"
Command="{Binding Slideshow.SlideShowNextItemCommand}"
Style="{StaticResource CircleButtonStyle}"
ToolTip="Skip to the next mod">
<icon:PackIconFontAwesome
Width="28"
Height="28"
Kind="ChevronRightSolid" />
</Button>
<ToggleButton
x:Name="PlayPauseButton"
Grid.Column="2"
Margin="6"
Background="{StaticResource BackgroundBrush}"
IsChecked="{Binding Slideshow.Enable}">
<ToggleButton.Style>
<Style BasedOn="{StaticResource SlideshowButton}" TargetType="ToggleButton">
<Setter Property="ToolTip" Value="Play slideshow" />
<Style.Triggers> <Style.Triggers>
<DataTrigger Binding="{Binding Slideshow.Enable}" Value="True"> <DataTrigger Binding="{Binding Slideshow.Enable}" Value="True">
<Setter Property="Kind" Value="Play" /> <Setter Property="ToolTip" Value="Pause slideshow" />
</DataTrigger> </DataTrigger>
</Style.Triggers> </Style.Triggers>
</Style> </Style>
</icon:PackIconMaterial.Style> </ToggleButton.Style>
</icon:PackIconMaterial> <icon:PackIconMaterial>
</ToggleButton> <icon:PackIconMaterial.Style>
<Button <Style TargetType="icon:PackIconMaterial">
Grid.Column="1" <Setter Property="Kind" Value="Pause" />
Margin="6" <Style.Triggers>
Background="{StaticResource BackgroundBrush}" <DataTrigger Binding="{Binding Slideshow.Enable}" Value="True">
Command="{Binding Slideshow.VisitNexusSiteCommand}" <Setter Property="Kind" Value="Play" />
Style="{StaticResource SlideshowButton}" </DataTrigger>
ToolTip="Open Nexus Website"> </Style.Triggers>
<icon:PackIconMaterial </Style>
Width="28" </icon:PackIconMaterial.Style>
Height="28" </icon:PackIconMaterial>
Kind="Web" /> </ToggleButton>
</Button> <Button
<ToggleButton Grid.Column="1"
Grid.Column="0" Margin="6"
Background="{StaticResource BackgroundBrush}" Background="{StaticResource BackgroundBrush}"
IsChecked="{Binding Slideshow.ShowNSFW}" Command="{Binding Slideshow.VisitNexusSiteCommand}"
ToolTip="Show NSFW mods"> Style="{StaticResource SlideshowButton}"
<ToggleButton.Style> ToolTip="Open Nexus Website">
<Style BasedOn="{StaticResource SlideshowButton}" TargetType="ToggleButton"> <icon:PackIconMaterial
<Setter Property="ToolTip" Value="Show NSFW mods" /> Width="28"
<Style.Triggers> Height="28"
<DataTrigger Binding="{Binding Slideshow.ShowNSFW}" Value="True"> Kind="Web" />
<Setter Property="ToolTip" Value="Hide NSFW mods" /> </Button>
</DataTrigger> <ToggleButton
</Style.Triggers> Grid.Column="0"
</Style> Background="{StaticResource BackgroundBrush}"
</ToggleButton.Style> IsChecked="{Binding Slideshow.ShowNSFW}"
<Grid> ToolTip="Show NSFW mods">
<TextBlock <ToggleButton.Style>
Margin="4" <Style BasedOn="{StaticResource SlideshowButton}" TargetType="ToggleButton">
HorizontalAlignment="Center" <Setter Property="ToolTip" Value="Show NSFW mods" />
VerticalAlignment="Center" <Style.Triggers>
FontFamily="Lucida Sans" <DataTrigger Binding="{Binding Slideshow.ShowNSFW}" Value="True">
FontSize="9" <Setter Property="ToolTip" Value="Hide NSFW mods" />
FontWeight="Bold" </DataTrigger>
Text="NSFW" /> </Style.Triggers>
<icon:PackIconOcticons </Style>
Width="40" </ToggleButton.Style>
Height="40" <Grid>
HorizontalAlignment="Center" <TextBlock
VerticalAlignment="Center" Margin="4"
Foreground="#88FFFFFF" HorizontalAlignment="Center"
Kind="CircleSlash" VerticalAlignment="Center"
Visibility="{Binding Slideshow.ShowNSFW, Converter={StaticResource bool2VisibilityConverter}, ConverterParameter=False}" /> FontFamily="Lucida Sans"
</Grid> FontSize="9"
</ToggleButton> FontWeight="Bold"
Text="NSFW" />
<icon:PackIconOcticons
Width="40"
Height="40"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Foreground="#88FFFFFF"
Kind="CircleSlash"
Visibility="{Binding Slideshow.ShowNSFW, Converter={StaticResource bool2VisibilityConverter}, ConverterParameter=False}" />
</Grid>
</ToggleButton>
</Grid>
<Border
Grid.Row="3"
Margin="0,0,-50,-50"
CornerRadius="50"
Style="{StaticResource BackgroundBlurStyle}">
<Border.Effect>
<BlurEffect Radius="65" />
</Border.Effect>
</Border>
<TextBlock
Grid.Row="3"
Margin="20,25,25,25"
HorizontalAlignment="Right"
VerticalAlignment="Bottom"
FontFamily="Lucida Sans"
FontSize="16"
Text="{Binding Description}"
TextAlignment="Right"
TextWrapping="Wrap">
<TextBlock.Effect>
<DropShadowEffect />
</TextBlock.Effect>
</TextBlock>
</Grid> </Grid>
<Border
Grid.Row="3"
Margin="0,0,-50,-50"
CornerRadius="50"
Style="{StaticResource BackgroundBlurStyle}">
<Border.Effect>
<BlurEffect Radius="65" />
</Border.Effect>
</Border>
<TextBlock
Grid.Row="3"
Margin="20,25,25,25"
HorizontalAlignment="Right"
VerticalAlignment="Bottom"
FontFamily="Lucida Sans"
FontSize="16"
Text="{Binding Description}"
TextAlignment="Right"
TextWrapping="Wrap">
<TextBlock.Effect>
<DropShadowEffect />
</TextBlock.Effect>
</TextBlock>
</Grid> </Grid>
</Grid> </Border>
<!-- Top progress bar --> <!-- Top progress bar -->
<!-- Comes after slideshow control, so that any effects/overlap goes on top --> <!-- Comes after slideshow control, so that any effects/overlap goes on top -->
<Rectangle <Rectangle
Grid.Row="2" Grid.Row="2"
Height="25" Height="25"
Margin="6,0"
VerticalAlignment="Top" VerticalAlignment="Top"
IsHitTestVisible="False"> IsHitTestVisible="False">
<Rectangle.Fill> <Rectangle.Fill>
@ -473,7 +478,11 @@
</mahapps:MetroProgressBar.Foreground> </mahapps:MetroProgressBar.Foreground>
</mahapps:MetroProgressBar> </mahapps:MetroProgressBar>
<!-- Bottom Area --> <!-- Bottom Area -->
<Grid Grid.Row="3" Visibility="{Binding InstallingMode, Converter={StaticResource bool2VisibilityConverter}, ConverterParameter=False}"> <Grid
Grid.Row="3"
Margin="5,0,5,5"
ClipToBounds="True"
Visibility="{Binding InstallingMode, Converter={StaticResource bool2VisibilityConverter}, ConverterParameter=False}">
<Grid.ColumnDefinitions> <Grid.ColumnDefinitions>
<ColumnDefinition Width="*" /> <ColumnDefinition Width="*" />
<ColumnDefinition Width="4" /> <ColumnDefinition Width="4" />
@ -649,7 +658,10 @@
VerticalAlignment="Top" VerticalAlignment="Top"
Fill="{StaticResource DarkBackgroundBrush}" /> Fill="{StaticResource DarkBackgroundBrush}" />
</Grid> </Grid>
<Grid Grid.Row="3" Visibility="{Binding InstallingMode, Converter={StaticResource bool2VisibilityConverter}}"> <Grid
Grid.Row="3"
Margin="5,0,5,5"
Visibility="{Binding InstallingMode, Converter={StaticResource bool2VisibilityConverter}}">
<Grid.ColumnDefinitions> <Grid.ColumnDefinitions>
<ColumnDefinition Width="*" /> <ColumnDefinition Width="*" />
<ColumnDefinition Width="4" /> <ColumnDefinition Width="4" />