wabbajack/Wabbajack/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="440"
            Background="{StaticResource DarkBackgroundBrush}">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
            </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" Source="{Binding Metadata.Links.ImageUri}">
                            <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>
                </Grid>
            </Border>
            <local:UnderMaintenanceOverlay
                x:Name="Overlay"
                Grid.Row="0"
                Grid.Column="0"
                Grid.ColumnSpan="2"
                Visibility="Collapsed" />
            <TextBlock
                x:Name="DescriptionTextShadow"
                Grid.Row="0"
                Grid.Column="0"
                Grid.ColumnSpan="2"
                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
                x:Name="ModListTitleShadow"
                Grid.Row="0"
                Grid.Column="0"
                Grid.ColumnSpan="2"
                Margin="5"
                HorizontalAlignment="Center"
                VerticalAlignment="Bottom"
                FontFamily="Lucida Sans"
                FontSize="30"
                FontWeight="Bold"
                TextWrapping="Wrap">
                <TextBlock.Effect>
                    <DropShadowEffect />
                </TextBlock.Effect>
            </TextBlock>
            <mahapps:MetroProgressBar
                x:Name="DownloadProgressBar"
                Grid.Row="0"
                Grid.Column="0"
                Grid.ColumnSpan="2"
                Height="3"
                VerticalAlignment="Bottom"
                Background="{StaticResource BackgroundBrush}"
                Foreground="{StaticResource SecondaryBrush}"
                Maximum="1"
                Visibility="{Binding IsEnabled, ElementName=ExecuteButton, Converter={StaticResource bool2VisibilityHiddenConverter}, ConverterParameter=False}" />
            <TextBlock
                x:Name="MetadataDescription"
                Grid.Row="1"
                Grid.Column="0"
                Margin="8,5"
                VerticalAlignment="Center"
                FontSize="14"
                TextWrapping="Wrap" />
            <Grid Grid.Row="1" Grid.Column="1">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Button
                    x:Name="OpenWebsiteButton"
                    Grid.Row="0"
                    Width="40"
                    Height="40"
                    Margin="5,0"
                    VerticalAlignment="Bottom"
                    Style="{StaticResource IconBareButtonStyle}">
                    <iconPacks:Material
                        Width="20"
                        Height="20"
                        Kind="Web" />
                </Button>
                <Button
                    x:Name="ExecuteButton"
                    Grid.Row="1"
                    Width="40"
                    Height="40"
                    Margin="5,0"
                    VerticalAlignment="Top">
                    <Button.Style>
                        <Style BasedOn="{StaticResource IconBareButtonStyle}" TargetType="Button">
                            <Setter Property="Content">
                                <Setter.Value>
                                    <iconPacks:Material
                                        Width="20"
                                        Height="20"
                                        Kind="Download" />
                                </Setter.Value>
                            </Setter>
                            <Setter Property="ToolTip" Value="Download modlist" />
                            <Style.Triggers>
                                <MultiDataTrigger>
                                    <MultiDataTrigger.Conditions>
                                        <Condition Binding="{Binding Exists}" Value="True" />
                                        <Condition Binding="{Binding IsEnabled, RelativeSource={RelativeSource Self}}" Value="True" />
                                    </MultiDataTrigger.Conditions>
                                    <MultiDataTrigger.Setters>
                                        <Setter Property="Content">
                                            <Setter.Value>
                                                <iconPacks:Material
                                                    Width="20"
                                                    Height="20"
                                                    Kind="Play" />
                                            </Setter.Value>
                                        </Setter>
                                        <Setter Property="ToolTip" Value="Install modlist" />
                                        <Setter Property="Padding" Value="3,0,0,0" />
                                    </MultiDataTrigger.Setters>
                                </MultiDataTrigger>
                                <DataTrigger Binding="{Binding Error.Succeeded}" Value="False">
                                    <Setter Property="Content">
                                        <Setter.Value>
                                            <iconPacks:Material
                                                Width="20"
                                                Height="20"
                                                Kind="AlertCircle" />
                                        </Setter.Value>
                                    </Setter>
                                    <Setter Property="ToolTip" Value="Error downloading modlist.  Check logs and/or restart Wabbajack to try again." />
                                    <Setter Property="Foreground" Value="{StaticResource ErrorBrush}" />
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </Button.Style>
                </Button>
            </Grid>
        </Grid>
    </Border>
</rxui:ReactiveUserControl>