wabbajack/Wabbajack.App.Wpf/Views/ModListTileView.xaml

474 lines
25 KiB
XML

<rxui:ReactiveUserControl
x:Class="Wabbajack.ModListTileView"
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:iconPacks="http://metro.mahapps.com/winfx/xaml/iconpacks"
xmlns:local="clr-namespace:Wabbajack"
xmlns:mahapps="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:rxui="http://reactiveui.net"
d:DesignHeight="450"
d:DesignWidth="800"
x:TypeArguments="local:GalleryModListMetadataVM"
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, RelativeSource={RelativeSource AncestorType={x:Type Button}}}" 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>
</Style.Triggers>
</Style>
</UserControl.Resources>
<Border
x:Name="ModListTile"
Margin="10, 0, 10, 16"
Background="Transparent"
BorderThickness="0">
<Border.Effect>
<DropShadowEffect
BlurRadius="25"
Opacity="0.25"
ShadowDepth="3" />
</Border.Effect>
<Border.Style>
<Style TargetType="Border">
<Setter Property="BorderBrush" Value="{StaticResource ButtonBorder}" />
<Style.Triggers>
<DataTrigger Binding="{Binding IsMouseOver, ElementName=ModListTile}" Value="True">
<Setter Property="BorderBrush" Value="{StaticResource BorderInterestBrush}" />
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
<Grid>
<Border x:Name="MaskBorder" BorderThickness="0" BorderBrush="Transparent" Background="{StaticResource DarkSecondaryBrush}" CornerRadius="10" Width="300" Height="169"/>
<Grid
Width="300"
Height="169"
Background="Transparent" ClipToBounds="True">
<Grid.OpacityMask>
<VisualBrush Visual="{Binding ElementName=MaskBorder}"/>
</Grid.OpacityMask>
<Grid ClipToBounds="True">
<mahapps:ProgressRing x:Name="LoadingProgress" />
<TextBlock
Text="{Binding Metadata.Title}"
FontSize="16"
VerticalAlignment="Bottom"
Margin="10, 0, 0, 10"
Panel.ZIndex="1">
<TextBlock.Visibility>
<MultiBinding Converter="{StaticResource MathConverter}" ConverterParameter="Or(!x, y) ? `Visible` : `Collapsed`">
<Binding Path="Metadata.ImageContainsTitle" />
<Binding ElementName="ModListTile" Path="IsMouseOver" />
</MultiBinding>
</TextBlock.Visibility>
</TextBlock>
<StackPanel Orientation="Horizontal" Margin="5, 5, 0, 0" VerticalAlignment="Top" HorizontalAlignment="Left" Panel.ZIndex="1">
<Border x:Name="GameIcon" Width="24" Height="24" CornerRadius="6">
<Border.Background>
<ImageBrush Stretch="Fill" ImageSource="{Binding GameMetaData.IconSource}"/>
</Border.Background>
</Border>
<Grid Margin="5, 0, 0, 0"
Visibility="{Binding ElementName=ModListTile, Path=IsMouseOver, Converter={StaticResource bool2VisibilityConverter}}">
<TextBlock x:Name="GameName"
Text="{Binding GameMetaData.HumanFriendlyGameName}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Opacity="0.85"
Panel.ZIndex="2"/>
<Border Background="{StaticResource WindowBackgroundBrush}" Opacity="0.4" Width="{Binding ElementName=GameName, Path=ActualWidth,Converter={StaticResource MathConverter}, ConverterParameter=x+10}" Height="{Binding ElementName=GameIcon, Path=ActualHeight}" CornerRadius="6">
</Border>
</Grid>
</StackPanel>
<Border
BorderThickness="0"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<Border.Background>
<ImageBrush x:Name="ModlistImage" Stretch="UniformToFill"/>
</Border.Background>
<Border.Style>
<Style TargetType="Border">
<Style.Triggers>
<DataTrigger Binding="{Binding IsBroken}" Value="True">
<Setter Property="Effect">
<Setter.Value>
<BlurEffect Radius="35" />
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
</Border>
<Rectangle
Height="120"
Margin="-80, -75, -80, 0"
VerticalAlignment="Top"
Fill="White"
Opacity="0.15">
<Rectangle.Effect>
<BlurEffect Radius="100" />
</Rectangle.Effect>
<Rectangle.Style>
<Style TargetType="Rectangle">
<Style.Triggers>
<DataTrigger Binding="{Binding IsMouseOver, ElementName=ModListTile}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="Opacity"
To="0.3"
Duration="0:0:0.08" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="Opacity"
To="0.15"
Duration="0:0:0.08" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Rectangle.Style>
</Rectangle>
<Rectangle
Height="120"
Margin="-80, 0, -80, -75"
VerticalAlignment="Bottom"
Fill="Black"
Opacity="0.4">
<Rectangle.Effect>
<BlurEffect Radius="100" />
</Rectangle.Effect>
<Rectangle.Style>
<Style TargetType="Rectangle">
<Style.Triggers>
<DataTrigger Binding="{Binding IsMouseOver, ElementName=ModListTile}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="Opacity"
To="0.7"
Duration="0:0:0.08" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="Opacity"
To="0.4"
Duration="0:0:0.08" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Rectangle.Style>
</Rectangle>
<Label
Margin="10,242,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Content="{Binding VersionText}"
Opacity="0">
<Label.Style>
<Style TargetType="Label">
<Style.Triggers>
<DataTrigger Binding="{Binding IsMouseOver, ElementName=ModListTile}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0:0:0.08" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="Opacity"
To="0"
Duration="0:0:0.08" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Label.Style>
</Label>
<Label
Margin="10,257,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Content="{Binding DownloadSizeText}"
Opacity="0">
<Label.Style>
<Style TargetType="Label">
<Style.Triggers>
<DataTrigger Binding="{Binding IsMouseOver, ElementName=ModListTile}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0:0:0.08" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="Opacity"
To="0"
Duration="0:0:0.08" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Label.Style>
</Label>
<Label
Margin="10,272,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Content="{Binding InstallSizeText}"
Opacity="0">
<Label.Style>
<Style TargetType="Label">
<Style.Triggers>
<DataTrigger Binding="{Binding IsMouseOver, ElementName=ModListTile}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0:0:0.08" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="Opacity"
To="0"
Duration="0:0:0.08" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Label.Style>
</Label>
<Label
Margin="10,287,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Content="{Binding TotalSizeRequirementText}"
Opacity="0">
<Label.Style>
<Style TargetType="Label">
<Style.Triggers>
<DataTrigger Binding="{Binding IsMouseOver, ElementName=ModListTile}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0:0:0.08" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="Opacity"
To="0"
Duration="0:0:0.08" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Label.Style>
</Label>
</Grid>
<local:UnderMaintenanceOverlay Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"
x:Name="Overlay"
Visibility="Collapsed"
ClipToBounds="True" />
<!--
<TextBlock Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"
x:Name="ModListTitleShadow"
Margin="5"
HorizontalAlignment="Center"
VerticalAlignment="Bottom"
FontFamily="{StaticResource PrimaryFont}"
FontSize="30"
FontWeight="Bold"
Style="{StaticResource BackgroundBlurStyle}"
TextWrapping="Wrap">
<TextBlock.Effect>
<BlurEffect Radius="25" />
</TextBlock.Effect>
</TextBlock>
<TextBlock Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"
x:Name="ModListTitle"
Margin="5"
HorizontalAlignment="Center"
VerticalAlignment="Bottom"
FontFamily="{StaticResource PrimaryFont}"
FontSize="30"
FontWeight="Bold"
TextWrapping="Wrap">
<TextBlock.Effect>
<DropShadowEffect />
</TextBlock.Effect>
</TextBlock>
<mahapps:MetroProgressBar Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"
x:Name="DownloadProgressBar"
Height="3"
VerticalAlignment="Bottom"
Background="{StaticResource BackgroundBrush}"
Foreground="{StaticResource SecondaryBrush}"
Maximum="1"
Visibility="{Binding IsEnabled, ElementName=ExecuteButton, Converter={StaticResource bool2VisibilityHiddenConverter}, ConverterParameter=False}" />
<ScrollViewer Grid.Row="1" Grid.Column="0" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
<TextBlock
x:Name="MetadataDescription"
Margin="8,5"
VerticalAlignment="Center"
FontSize="14"
TextWrapping="Wrap" />
</ScrollViewer>
<ItemsControl Grid.Row="2" Name="TagsList">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border Grid.Row="0" Grid.ColumnSpan="2"
Margin="5,5,0,5"
Background="{StaticResource Analogous1Brush}"
BorderThickness="1"
CornerRadius="7,7,7,7"
VerticalAlignment="Center"
Opacity="0.90">
<TextBlock
Margin="5,5,5,5"
FontSize="15"
Text="{Binding Name}" />
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<Grid Grid.Row="1" Grid.Column="1" Grid.RowSpan="2">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Button Grid.Row="0"
x:Name="OpenWebsiteButton"
Width="40"
Height="40"
Margin="5,0"
VerticalAlignment="Center"
Style="{StaticResource IconBareButtonStyle}"
ToolTip="View modlist website in browser">
<iconPacks:Material
Width="20"
Height="20"
Kind="Web" />
</Button>
<Button Grid.Row="1"
x:Name="ModListContentsButton"
Width="40"
Height="40"
Margin="5,0"
VerticalAlignment="Center"
Style="{StaticResource IconBareButtonStyle}"
ToolTip="View modlist archives in browser">
<iconPacks:Material
Width="20"
Height="20"
Kind="TableSearch" />
</Button>
<Button Grid.Row="2"
x:Name="ExecuteButton"
Width="40"
Height="40"
Margin="5,0"
VerticalAlignment="Center"
ToolTip="Download modlist">
<StackPanel x:Name="IconContainer">
<iconPacks:Material
x:Name="ErrorIcon"
Width="20"
Height="20"
Kind="Exclamation" />
</StackPanel>
</Button>
</Grid>
-->
</Grid>
</Grid>
</Border>
</rxui:ReactiveUserControl>