DetailImageView

This commit is contained in:
Justin Swanson
2019-11-08 19:53:32 -06:00
parent da518c7bec
commit c18533e311
5 changed files with 413 additions and 315 deletions

View File

@ -14,6 +14,7 @@ using System.Windows.Media.Imaging;
using Wabbajack.Common; using Wabbajack.Common;
using Wabbajack.Lib; using Wabbajack.Lib;
using ReactiveUI.Fody.Helpers; using ReactiveUI.Fody.Helpers;
using System.Windows.Media;
namespace Wabbajack namespace Wabbajack
{ {
@ -64,8 +65,8 @@ namespace Wabbajack
private readonly ObservableAsPropertyHelper<float> _ProgressPercent; private readonly ObservableAsPropertyHelper<float> _ProgressPercent;
public float ProgressPercent => _ProgressPercent.Value; public float ProgressPercent => _ProgressPercent.Value;
private readonly ObservableAsPropertyHelper<BitmapImage> _Image; private readonly ObservableAsPropertyHelper<ImageSource> _Image;
public BitmapImage Image => _Image.Value; public ImageSource Image => _Image.Value;
private readonly ObservableAsPropertyHelper<string> _TitleText; private readonly ObservableAsPropertyHelper<string> _TitleText;
public string TitleText => _TitleText.Value; public string TitleText => _TitleText.Value;
@ -169,6 +170,7 @@ namespace Wabbajack
.StartWith(default(BitmapImage)), .StartWith(default(BitmapImage)),
this.WhenAny(x => x.Installing), this.WhenAny(x => x.Installing),
resultSelector: (modList, slideshow, installing) => installing ? slideshow : modList) resultSelector: (modList, slideshow, installing) => installing ? slideshow : modList)
.Select<BitmapImage, ImageSource>(x => x)
.ToProperty(this, nameof(this.Image)); .ToProperty(this, nameof(this.Image));
this._TitleText = Observable.CombineLatest( this._TitleText = Observable.CombineLatest(
this.WhenAny(x => x.ModList.Name), this.WhenAny(x => x.ModList.Name),

View File

@ -0,0 +1,196 @@
<UserControl
x:Class="Wabbajack.DetailImageView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:icon="http://metro.mahapps.com/winfx/xaml/iconpacks"
xmlns:local="clr-namespace:Wabbajack"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
d:DesignHeight="450"
d:DesignWidth="800"
ClipToBounds="True"
UseLayoutRounding="True"
mc:Ignorable="d">
<UserControl.Resources>
<Color x:Key="TextBackgroundFill">#92000000</Color>
<SolidColorBrush x:Key="TextBackgroundFillBrush" Color="{StaticResource TextBackgroundFill}" />
<Color x:Key="TextBackgroundHoverFill">#DF000000</Color>
<Style x:Key="BackgroundBlurStyle" TargetType="TextBlock">
<Setter Property="Background" Value="{StaticResource TextBackgroundFillBrush}" />
<Setter Property="Foreground" Value="Transparent" />
<Setter Property="Visibility" Value="Visible" />
<Style.Triggers>
<DataTrigger Binding="{Binding IsMouseOver, ElementName=TextHoverTrigger}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetProperty="(TextBlock.Background).(SolidColorBrush.Color)"
To="{StaticResource TextBackgroundHoverFill}"
Duration="0:0:0.06" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetProperty="(TextBlock.Background).(SolidColorBrush.Color)"
To="{StaticResource TextBackgroundFill}"
Duration="0:0:0.06" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
<DataTrigger Binding="{Binding Image}" Value="{x:Null}">
<Setter Property="Visibility" Value="Hidden" />
</DataTrigger>
</Style.Triggers>
</Style>
</UserControl.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*" />
<ColumnDefinition Width="3*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Rectangle
Grid.Row="0"
Grid.RowSpan="4"
Grid.Column="0"
Grid.ColumnSpan="2"
Fill="{StaticResource WindowBackgroundBrush}" />
<Viewbox
Grid.Row="0"
Grid.RowSpan="4"
Grid.Column="0"
Grid.ColumnSpan="2"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Stretch="UniformToFill">
<Image Source="{Binding Image, Mode=OneWay, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}" />
</Viewbox>
<Image
Grid.Row="0"
Grid.RowSpan="4"
Grid.Column="0"
Grid.ColumnSpan="2"
Width="60"
Height="60"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Source="{Binding Badge, Mode=OneWay, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}" />
<TextBlock
x:Name="TitleTextShadow"
Grid.Row="2"
Grid.Column="0"
Margin="-20,15,40,-10"
Padding="40,10"
HorizontalAlignment="Left"
VerticalAlignment="Bottom"
FontFamily="Lucida Sans"
FontSize="65"
FontWeight="Bold"
Style="{StaticResource BackgroundBlurStyle}"
Text="{Binding Title, Mode=OneWay, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}"
TextWrapping="WrapWithOverflow">
<TextBlock.Effect>
<BlurEffect Radius="85" />
</TextBlock.Effect>
</TextBlock>
<TextBlock
x:Name="ArtistTextShadow"
Grid.Row="3"
Grid.Column="0"
Margin="35,-10,-10,10"
Padding="30,10"
HorizontalAlignment="Left"
FontFamily="Lucida Sans"
FontSize="30"
FontWeight="Bold"
Style="{StaticResource BackgroundBlurStyle}"
TextWrapping="WrapWithOverflow">
<TextBlock.Effect>
<BlurEffect Radius="55" />
</TextBlock.Effect>
<Run FontSize="15" Text="by" />
<Run Text="{Binding Author, Mode=OneWay, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}" />
</TextBlock>
<TextBlock
Grid.Row="2"
Grid.Column="0"
Margin="20,25,20,0"
HorizontalAlignment="Left"
VerticalAlignment="Bottom"
FontFamily="Lucida Sans"
FontSize="65"
FontWeight="Bold"
Text="{Binding Title, Mode=OneWay, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}"
TextWrapping="WrapWithOverflow">
<TextBlock.Effect>
<DropShadowEffect />
</TextBlock.Effect>
</TextBlock>
<TextBlock
Grid.Row="3"
Grid.Column="0"
Margin="55,0,20,20"
FontFamily="Lucida Sans"
FontSize="30"
FontWeight="Bold"
TextWrapping="Wrap">
<TextBlock.Effect>
<DropShadowEffect />
</TextBlock.Effect>
<Run FontSize="15" Text="by" />
<Run Text="{Binding Author, Mode=OneWay, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}" />
</TextBlock>
<TextBlock
x:Name="DescriptionTextShadow"
Grid.Row="2"
Grid.RowSpan="2"
Grid.Column="1"
Margin="-10,15,-5,15"
Padding="30,10"
HorizontalAlignment="Right"
VerticalAlignment="Bottom"
FontFamily="Lucida Sans"
FontSize="16"
Style="{StaticResource BackgroundBlurStyle}"
Text="{Binding Description, Mode=OneWay, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}"
TextAlignment="Right"
TextWrapping="Wrap">
<TextBlock.Effect>
<BlurEffect Radius="55" />
</TextBlock.Effect>
</TextBlock>
<TextBlock
Grid.Row="2"
Grid.RowSpan="2"
Grid.Column="1"
Margin="20,25,25,25"
HorizontalAlignment="Right"
VerticalAlignment="Bottom"
FontFamily="Lucida Sans"
FontSize="16"
Text="{Binding Description, Mode=OneWay, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}"
TextAlignment="Right"
TextWrapping="Wrap">
<TextBlock.Effect>
<DropShadowEffect />
</TextBlock.Effect>
</TextBlock>
<Rectangle
x:Name="TextHoverTrigger"
Grid.Row="2"
Grid.RowSpan="2"
Grid.Column="0"
Grid.ColumnSpan="2"
Fill="Transparent" />
</Grid>
</UserControl>

View File

@ -0,0 +1,68 @@
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace Wabbajack
{
/// <summary>
/// Interaction logic for DetailImageView.xaml
/// </summary>
public partial class DetailImageView : UserControl
{
public ImageSource Image
{
get => (ImageSource)GetValue(ImageProperty);
set => SetValue(ImageProperty, value);
}
public static readonly DependencyProperty ImageProperty = DependencyProperty.Register(nameof(Image), typeof(ImageSource), typeof(DetailImageView),
new FrameworkPropertyMetadata(default(ImageSource)));
public ImageSource Badge
{
get => (ImageSource)GetValue(BadgeProperty);
set => SetValue(BadgeProperty, value);
}
public static readonly DependencyProperty BadgeProperty = DependencyProperty.Register(nameof(Badge), typeof(ImageSource), typeof(DetailImageView),
new FrameworkPropertyMetadata(default(ImageSource)));
public string Title
{
get => (string)GetValue(TitleProperty);
set => SetValue(TitleProperty, value);
}
public static readonly DependencyProperty TitleProperty = DependencyProperty.Register(nameof(Title), typeof(string), typeof(DetailImageView),
new FrameworkPropertyMetadata(default(string), FrameworkPropertyMetadataOptions.BindsTwoWayByDefault));
public string Author
{
get => (string)GetValue(AuthorProperty);
set => SetValue(AuthorProperty, value);
}
public static readonly DependencyProperty AuthorProperty = DependencyProperty.Register(nameof(Author), typeof(string), typeof(DetailImageView),
new FrameworkPropertyMetadata(default(string), FrameworkPropertyMetadataOptions.BindsTwoWayByDefault));
public string Description
{
get => (string)GetValue(DescriptionProperty);
set => SetValue(DescriptionProperty, value);
}
public static readonly DependencyProperty DescriptionProperty = DependencyProperty.Register(nameof(Description), typeof(string), typeof(DetailImageView),
new FrameworkPropertyMetadata(default(string), FrameworkPropertyMetadataOptions.BindsTwoWayByDefault));
public DetailImageView()
{
InitializeComponent();
}
}
}

View File

@ -7,45 +7,11 @@
xmlns:local="clr-namespace:Wabbajack" xmlns:local="clr-namespace:Wabbajack"
xmlns:mahapps="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro" xmlns:mahapps="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
d:DataContext="{d:DesignInstance local:InstallerVM}"
d:DesignHeight="500" d:DesignHeight="500"
d:DesignWidth="800" d:DesignWidth="800"
mc:Ignorable="d"> mc:Ignorable="d">
<UserControl.Resources> <UserControl.Resources>
<Color x:Key="TextBackgroundFill">#92000000</Color>
<SolidColorBrush x:Key="TextBackgroundFillBrush" Color="{StaticResource TextBackgroundFill}" />
<Color x:Key="TextBackgroundHoverFill">#DF000000</Color>
<Style x:Key="BackgroundBlurStyle" TargetType="TextBlock">
<Setter Property="Background" Value="{StaticResource TextBackgroundFillBrush}" />
<Setter Property="Foreground" Value="Transparent" />
<Setter Property="Visibility" Value="Visible" />
<Style.Triggers>
<DataTrigger Binding="{Binding IsMouseOver, ElementName=TextHoverTrigger}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetProperty="(TextBlock.Background).(SolidColorBrush.Color)"
To="{StaticResource TextBackgroundHoverFill}"
Duration="0:0:0.06" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetProperty="(TextBlock.Background).(SolidColorBrush.Color)"
To="{StaticResource TextBackgroundFill}"
Duration="0:0:0.06" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
<DataTrigger Binding="{Binding Image}" Value="{x:Null}">
<Setter Property="Visibility" Value="Hidden" />
</DataTrigger>
</Style.Triggers>
</Style>
<Style <Style
x:Key="SlideshowButton" x:Key="SlideshowButton"
BasedOn="{StaticResource CircleButtonStyle}" BasedOn="{StaticResource CircleButtonStyle}"
@ -72,121 +38,21 @@
</LinearGradientBrush> </LinearGradientBrush>
</Rectangle.Fill> </Rectangle.Fill>
</Rectangle> </Rectangle>
<!-- Slideshow --> <Grid
<Border
x:Name="Slideshow" x:Name="Slideshow"
Grid.Row="1" Grid.Row="1"
Margin="5,0,5,5" Margin="5,0,5,5">
BorderBrush="#171717" <Border BorderBrush="#171717" BorderThickness="1,0,1,1">
BorderThickness="1,0,1,1" <local:DetailImageView
UseLayoutRounding="True"> Title="{Binding TitleText, Mode=OneWay}"
<Grid ClipToBounds="True"> Author="{Binding AuthorText, Mode=OneWay}"
<Grid.ColumnDefinitions> Description="{Binding Description, Mode=OneWay}"
<ColumnDefinition Width="5*" /> Image="{Binding Image, Mode=OneWay}" />
<ColumnDefinition Width="3*" /> </Border>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Rectangle
Grid.Row="0"
Grid.RowSpan="4"
Grid.Column="0"
Grid.ColumnSpan="2"
Fill="{StaticResource WindowBackgroundBrush}" />
<Viewbox
Grid.Row="0"
Grid.RowSpan="4"
Grid.Column="0"
Grid.ColumnSpan="2"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Stretch="UniformToFill">
<Image Source="{Binding Image}" />
</Viewbox>
<Image
Grid.Row="0"
Grid.RowSpan="4"
Grid.Column="0"
Grid.ColumnSpan="2"
Width="60"
Height="60"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Source="{Binding ModlistImage}" />
<TextBlock
x:Name="TitleTextShadow"
Grid.Row="2"
Grid.Column="0"
Margin="-20,15,40,-10"
Padding="40,10"
HorizontalAlignment="Left"
VerticalAlignment="Bottom"
FontFamily="Lucida Sans"
FontSize="65"
FontWeight="Bold"
Style="{StaticResource BackgroundBlurStyle}"
Text="{Binding TitleText}"
TextWrapping="WrapWithOverflow">
<TextBlock.Effect>
<BlurEffect Radius="85" />
</TextBlock.Effect>
</TextBlock>
<TextBlock
x:Name="ArtistTextShadow"
Grid.Row="3"
Grid.Column="0"
Margin="35,-10,-10,10"
Padding="30,10"
HorizontalAlignment="Left"
FontFamily="Lucida Sans"
FontSize="30"
FontWeight="Bold"
Style="{StaticResource BackgroundBlurStyle}"
TextWrapping="WrapWithOverflow">
<TextBlock.Effect>
<BlurEffect Radius="55" />
</TextBlock.Effect>
<Run FontSize="15" Text="by" />
<Run Text="{Binding AuthorText, Mode=OneWay}" />
</TextBlock>
<TextBlock
Grid.Row="2"
Grid.Column="0"
Margin="20,25,20,0"
HorizontalAlignment="Left"
VerticalAlignment="Bottom"
FontFamily="Lucida Sans"
FontSize="65"
FontWeight="Bold"
Text="{Binding TitleText}"
TextWrapping="WrapWithOverflow">
<TextBlock.Effect>
<DropShadowEffect />
</TextBlock.Effect>
</TextBlock>
<TextBlock
Grid.Row="3"
Grid.Column="0"
Margin="55,0,20,20"
FontFamily="Lucida Sans"
FontSize="30"
FontWeight="Bold"
TextWrapping="Wrap">
<TextBlock.Effect>
<DropShadowEffect />
</TextBlock.Effect>
<Run FontSize="15" Text="by" />
<Run Text="{Binding AuthorText, Mode=OneWay}" />
</TextBlock>
<Grid <Grid
Grid.Row="0"
Grid.Column="1"
Margin="0,20,25,0" Margin="0,20,25,0"
HorizontalAlignment="Right"> HorizontalAlignment="Right"
VerticalAlignment="Top">
<Grid.ColumnDefinitions> <Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" /> <ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" /> <ColumnDefinition Width="Auto" />
@ -265,10 +131,10 @@
<icon:PackIconMaterial> <icon:PackIconMaterial>
<icon:PackIconMaterial.Style> <icon:PackIconMaterial.Style>
<Style TargetType="icon:PackIconMaterial"> <Style TargetType="icon:PackIconMaterial">
<Setter Property="Kind" Value="Pause" /> <Setter Property="Kind" Value="Play" />
<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="Kind" Value="Pause" />
</DataTrigger> </DataTrigger>
</Style.Triggers> </Style.Triggers>
</Style> </Style>
@ -322,50 +188,7 @@
</Grid> </Grid>
</ToggleButton> </ToggleButton>
</Grid> </Grid>
<TextBlock
x:Name="DescriptionTextShadow"
Grid.Row="2"
Grid.RowSpan="2"
Grid.Column="1"
Margin="-10,15,-5,15"
Padding="30,10"
HorizontalAlignment="Right"
VerticalAlignment="Bottom"
FontFamily="Lucida Sans"
FontSize="16"
Style="{StaticResource BackgroundBlurStyle}"
Text="{Binding Description}"
TextAlignment="Right"
TextWrapping="Wrap">
<TextBlock.Effect>
<BlurEffect Radius="55" />
</TextBlock.Effect>
</TextBlock>
<TextBlock
Grid.Row="2"
Grid.RowSpan="2"
Grid.Column="1"
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>
<Rectangle
x:Name="TextHoverTrigger"
Grid.Row="2"
Grid.RowSpan="2"
Grid.Column="0"
Grid.ColumnSpan="2"
Fill="Transparent" />
</Grid> </Grid>
</Border>
<!-- Comes after slideshow control, so that any effects/overlap goes on top --> <!-- Comes after slideshow control, so that any effects/overlap goes on top -->
<local:TopProgressView Grid.Row="0" Grid.RowSpan="2" /> <local:TopProgressView Grid.Row="0" Grid.RowSpan="2" />
<!-- Bottom Area --> <!-- Bottom Area -->
@ -564,12 +387,14 @@
</ScrollViewer> </ScrollViewer>
</Grid> </Grid>
<Rectangle <Rectangle
x:Name="ControlTopThinSeparator"
Grid.Column="0" Grid.Column="0"
Grid.ColumnSpan="3" Grid.ColumnSpan="3"
Height="1" Height="1"
Margin="25,0" Margin="25,0"
VerticalAlignment="Top" VerticalAlignment="Top"
Fill="{StaticResource DarkBackgroundBrush}" /> Fill="{StaticResource DarkBackgroundBrush}"
SnapsToDevicePixels="True" />
</Grid> </Grid>
<Grid <Grid
Grid.Row="2" Grid.Row="2"

View File

@ -162,6 +162,9 @@
<SubType>Designer</SubType> <SubType>Designer</SubType>
</ApplicationDefinition> </ApplicationDefinition>
<Compile Include="Converters\BoolToVisibilityConverter.cs" /> <Compile Include="Converters\BoolToVisibilityConverter.cs" />
<Compile Include="Views\DetailImageView.xaml.cs">
<DependentUpon>DetailImageView.xaml</DependentUpon>
</Compile>
<Compile Include="Extensions\EnumerableExt.cs" /> <Compile Include="Extensions\EnumerableExt.cs" />
<Compile Include="Views\TopProgressView.xaml.cs"> <Compile Include="Views\TopProgressView.xaml.cs">
<DependentUpon>TopProgressView.xaml</DependentUpon> <DependentUpon>TopProgressView.xaml</DependentUpon>
@ -201,6 +204,10 @@
<DependentUpon>TextViewer.xaml</DependentUpon> <DependentUpon>TextViewer.xaml</DependentUpon>
</Compile> </Compile>
<Compile Include="Views\UserControlRx.cs" /> <Compile Include="Views\UserControlRx.cs" />
<Page Include="Views\DetailImageView.xaml">
<SubType>Designer</SubType>
<Generator>MSBuild:Compile</Generator>
</Page>
<Page Include="Views\CompilerView.xaml"> <Page Include="Views\CompilerView.xaml">
<SubType>Designer</SubType> <SubType>Designer</SubType>
<Generator>MSBuild:Compile</Generator> <Generator>MSBuild:Compile</Generator>