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

<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:ModListMetadataVM"
    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"
        Background="Transparent"
        BorderThickness="1">
        <Border.Effect>
            <DropShadowEffect
                BlurRadius="25"
                Opacity="0.5"
                ShadowDepth="5" />
        </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
            Width="570"
            Height="480"
            Background="{StaticResource DarkBackgroundBrush}">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
                <RowDefinition Height="40" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <Border Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"
                BorderBrush="{StaticResource ButtonNormalBorder}"
                BorderThickness="0,0,0,1">
                <Grid ClipToBounds="True">
                    <mahapps:ProgressRing x:Name="LoadingProgress" />
                    <Viewbox
                        Height="340"
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        Stretch="UniformToFill">
                        <Image x:Name="ModListImage">
                            <Image.Style>
                                <Style TargetType="Image">
                                    <Style.Triggers>
                                        <DataTrigger Binding="{Binding IsBroken}" Value="True">
                                            <Setter Property="Effect">
                                                <Setter.Value>
                                                    <BlurEffect Radius="35" />
                                                </Setter.Value>
                                            </Setter>
                                        </DataTrigger>
                                    </Style.Triggers>
                                </Style>
                            </Image.Style>
                        </Image>
                    </Viewbox>
                    <Ellipse
                        Height="120"
                        Margin="-40,0,-40,-60"
                        VerticalAlignment="Bottom"
                        Fill="Black"
                        Opacity="0.5">
                        <Ellipse.Effect>
                            <BlurEffect Radius="55" />
                        </Ellipse.Effect>
                        <Ellipse.Style>
                            <Style TargetType="Ellipse">
                                <Style.Triggers>
                                    <DataTrigger Binding="{Binding IsMouseOver, ElementName=ModListTile}" Value="True">
                                        <DataTrigger.EnterActions>
                                            <BeginStoryboard>
                                                <Storyboard>
                                                    <DoubleAnimation
                                                        Storyboard.TargetProperty="Opacity"
                                                        To="0.75"
                                                        Duration="0:0:0.08" />
                                                </Storyboard>
                                            </BeginStoryboard>
                                        </DataTrigger.EnterActions>
                                        <DataTrigger.ExitActions>
                                            <BeginStoryboard>
                                                <Storyboard>
                                                    <DoubleAnimation
                                                        Storyboard.TargetProperty="Opacity"
                                                        To="0.5"
                                                        Duration="0:0:0.08" />
                                                </Storyboard>
                                            </BeginStoryboard>
                                        </DataTrigger.ExitActions>
                                    </DataTrigger>
                                </Style.Triggers>
                            </Style>
                        </Ellipse.Style>
                    </Ellipse>
                    <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>
            </Border>
            <local:UnderMaintenanceOverlay Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"
                x:Name="Overlay"
                Visibility="Collapsed" />
            <TextBlock Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"
                x:Name="ModListTitleShadow"
                Margin="5"
                HorizontalAlignment="Center"
                VerticalAlignment="Bottom"
                FontFamily="Lucida Sans"
                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="Lucida Sans"
                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}">
                    <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}">
                    <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">
                    <StackPanel x:Name="IconContainer">
                        <iconPacks:Material
                            x:Name="ErrorIcon"
                            Width="20"
                            Height="20"
                            Kind="Exclamation" />
                    </StackPanel>
                </Button>

            </Grid>
        </Grid>
    </Border>
</rxui:ReactiveUserControl>