wabbajack/Wabbajack/Views/ModListGalleryView.xaml

<UserControl
    x:Class="Wabbajack.ModListGalleryView"
    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:system="clr-namespace:System;assembly=mscorlib"
    d:DesignHeight="450"
    d:DesignWidth="800"
    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>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="47" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Rectangle
            Grid.Row="1"
            Grid.RowSpan="3"
            Margin="6,0">
            <Rectangle.Fill>
                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                    <GradientStop Offset="0" Color="#123700B3" />
                    <GradientStop Offset="1" Color="#00000000" />
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>
        <Border
            Grid.Row="1"
            BorderBrush="Transparent"
            BorderThickness="1,0,1,1">
            <ScrollViewer Background="Transparent" VerticalScrollBarVisibility="Auto">
                <ItemsControl
                    Margin="0,10,0,0"
                    HorizontalAlignment="Center"
                    ItemsSource="{Binding ModLists}">
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <WrapPanel />
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <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">
                                            <Viewbox
                                                Height="340"
                                                HorizontalAlignment="Center"
                                                VerticalAlignment="Center"
                                                Stretch="UniformToFill">
                                                <Image Source="{Binding Metadata.Links.ImageUri}" />
                                            </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, RelativeSource={RelativeSource AncestorType={x:Type Button}}}" 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>
                                    <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}"
                                        Text="{Binding Metadata.Title}"
                                        TextWrapping="Wrap">
                                        <TextBlock.Effect>
                                            <BlurEffect Radius="25" />
                                        </TextBlock.Effect>
                                    </TextBlock>
                                    <TextBlock
                                        Grid.Row="0"
                                        Grid.Column="0"
                                        Grid.ColumnSpan="2"
                                        Margin="5"
                                        HorizontalAlignment="Center"
                                        VerticalAlignment="Bottom"
                                        FontFamily="Lucida Sans"
                                        FontSize="30"
                                        FontWeight="Bold"
                                        Text="{Binding Metadata.Title}"
                                        TextWrapping="Wrap">
                                        <TextBlock.Effect>
                                            <DropShadowEffect />
                                        </TextBlock.Effect>
                                    </TextBlock>
                                    <mahapps:MetroProgressBar
                                        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}"
                                        Value="{Binding ProgressPercent, Mode=OneWay}" />
                                    <TextBlock
                                        Grid.Row="1"
                                        Grid.Column="0"
                                        Margin="8,5"
                                        VerticalAlignment="Center"
                                        FontSize="14"
                                        Text="{Binding Metadata.Description}"
                                        TextWrapping="Wrap" />
                                    <Grid Grid.Row="1" Grid.Column="1">
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="*" />
                                            <RowDefinition Height="*" />
                                        </Grid.RowDefinitions>
                                        <Button
                                            Grid.Row="0"
                                            Width="40"
                                            Height="40"
                                            Margin="5,0"
                                            VerticalAlignment="Bottom"
                                            Command="{Binding OpenWebsiteCommand}"
                                            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"
                                            Command="{Binding ExecuteCommand}">
                                            <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>
                                                    </Style.Triggers>
                                                </Style>
                                            </Button.Style>
                                        </Button>
                                    </Grid>
                                </Grid>
                            </Border>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </ScrollViewer>
        </Border>
        <local:TopProgressView
            Title="Browsing Modlists"
            Grid.Row="0"
            Grid.RowSpan="2"
            ShadowMargin="False" />
        <Button
            x:Name="BackButton"
            Grid.Row="0"
            Width="30"
            Height="30"
            Margin="7,5,0,0"
            HorizontalAlignment="Left"
            VerticalAlignment="Top"
            Command="{Binding BackCommand}"
            Style="{StaticResource IconCircleButtonStyle}"
            ToolTip="Back to main menu">
            <iconPacks:PackIconMaterial Foreground="{Binding Foreground, RelativeSource={RelativeSource AncestorType={x:Type Button}}}" Kind="ArrowLeft" />
        </Button>
    </Grid>
</UserControl>