wabbajack/Wabbajack/Views/InstallationView.xaml

<UserControl
    x:Class="Wabbajack.InstallationView"
    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:local="clr-namespace:Wabbajack"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:mahapps="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
    xmlns:icon="http://metro.mahapps.com/winfx/xaml/iconpacks"
    d:DesignHeight="500"
    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="Border">
            <Setter Property="Background" Value="{StaticResource TextBackgroundFillBrush}" />
            <Style.Triggers>
                <DataTrigger Binding="{Binding IsMouseOver, ElementName=Slideshow}" Value="True" >
                    <DataTrigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <ColorAnimation To="{StaticResource TextBackgroundHoverFill}"
                                                Duration="0:0:0.06"
                                                Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" />
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.EnterActions>
                    <DataTrigger.ExitActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <ColorAnimation To="{StaticResource TextBackgroundFill}"
                                                Duration="0:0:0.06"
                                                Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" />
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.ExitActions>
                </DataTrigger>
                <DataTrigger Binding="{Binding Image}" Value="{x:Null}" >
                    <Setter Property="Visibility" Value="Hidden" />
                </DataTrigger>
            </Style.Triggers>
        </Style>
        <Style x:Key="SlideshowButton" BasedOn="{StaticResource CircleButtonStyle}" TargetType="ToggleButton" >
            <Setter Property="Width" Value="40" />
            <Setter Property="Height" Value="40" />
            <Setter Property="Margin" Value="4" />
        </Style>
    </UserControl.Resources>
    <Grid Margin="5">
        <Grid.RowDefinitions>
            <RowDefinition Height="40" />
            <RowDefinition Height="5" />
            <RowDefinition Height="4*" />
            <RowDefinition Height="*" MinHeight="150" />
        </Grid.RowDefinitions>
        <!-- Slideshow -->
        <Grid Grid.Row="2" DataContext="{Binding Slideshow}" Margin="0,0,0,5" x:Name="Slideshow" >
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="5*" />
                <ColumnDefinition Width="3*" />
            </Grid.ColumnDefinitions>
            <Rectangle 
                Grid.Column="0"
                Grid.ColumnSpan="2"
                Fill="{StaticResource WindowBackgroundBrush}" />
            <Viewbox
                Grid.Column="0"
                Grid.ColumnSpan="2" Stretch="UniformToFill" HorizontalAlignment="Center" VerticalAlignment="Center" >
                <Image Source="{Binding Installer.Image}" />
            </Viewbox>
            <Image
                Grid.Column="0"
                Grid.ColumnSpan="2"
                Width="60"
                Height="60"
                HorizontalAlignment="Left"
                VerticalAlignment="Top"
                Source="{Binding Installer.ModlistImage}" />
            <Grid Grid.Column="0" >
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Border Grid.Row="1" Grid.RowSpan="2" Grid.Column="0" Margin="-100,0,0,-100" CornerRadius="100" Style="{StaticResource BackgroundBlurStyle}" >
                    <Border.Effect>
                        <BlurEffect Radius="65" />
                    </Border.Effect>
                </Border>
                <TextBlock
                    Grid.Row="1"
                    Grid.Column="0"
                    VerticalAlignment="Bottom"
                    Text="{Binding ModName}"
                    FontSize="65"
                    Margin="20,25,20,0"
                    FontFamily="Lucida Sans"
                    FontWeight="Bold"
                    TextWrapping="WrapWithOverflow" >
                    <TextBlock.Effect>
                        <DropShadowEffect />
                    </TextBlock.Effect>
                </TextBlock>
                <TextBlock
                    Grid.Row="2"
                    Grid.Column="0"
                    FontSize="30"
                    Margin="55,0,20,20"
                    FontFamily="Lucida Sans"
                    FontWeight="Bold"
                    Text="{Binding AuthorName}"
                    TextWrapping="Wrap" >
                    <TextBlock.Effect>
                        <DropShadowEffect />
                    </TextBlock.Effect>
                </TextBlock>
            </Grid>
            <Grid Grid.Column="1" >
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="*" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Grid Grid.Row="0"
                      HorizontalAlignment="Right"
                      Margin="0,20,25,0" >
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <Grid.Effect>
                        <DropShadowEffect Color="Black" Opacity="1" BlurRadius="25" />
                    </Grid.Effect>
                    <Grid.Style>
                        <Style TargetType="Grid">
                            <Setter Property="Opacity" Value="0" />
                            <Style.Triggers>
                                <MultiDataTrigger>
                                    <MultiDataTrigger.Conditions>
                                        <Condition Binding="{Binding IsMouseOver, ElementName=Slideshow}" Value="True" />
                                        <Condition Binding="{Binding Installing}" Value="True" />
                                    </MultiDataTrigger.Conditions>
                                    <MultiDataTrigger.EnterActions>
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <DoubleAnimation
                                                    To="1" 
                                                    Storyboard.TargetProperty="Opacity" 
                                                    Duration="0:0:0.12" />
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </MultiDataTrigger.EnterActions>
                                    <MultiDataTrigger.ExitActions>
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" >
                                                    <LinearDoubleKeyFrame KeyTime="0:0:0.3" Value="1"  />
                                                    <LinearDoubleKeyFrame KeyTime="0:0:0.42" Value="0" />
                                                </DoubleAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </MultiDataTrigger.ExitActions>
                                </MultiDataTrigger>
                            </Style.Triggers>
                        </Style>
                    </Grid.Style>
                    <Button Grid.Row="0" 
                            Style="{StaticResource CircleButtonStyle}"
                            Background="{StaticResource BackgroundBrush}"
                            Height="60"
                            Width="60"
                            Command="{Binding SlideShowNextItemCommand}"
                            ToolTip="Skip to the next mod"
                            Margin="6,6,6,12">
                        <icon:PackIconFontAwesome Kind="ChevronRightSolid" Height="28" Width="28" />
                    </Button>
                    <ToggleButton Grid.Row="1" 
                                  IsChecked="{Binding Enable}"
                                  Style="{StaticResource SlideshowButton}"
                                  Background="{StaticResource BackgroundBrush}"
                                  x:Name="PlayPauseButton"
                                  ToolTip="Pause/Play slideshow"
                                  Margin="6,6,6,3">
                        <icon:PackIconMaterial >
                            <icon:PackIconMaterial.Style>
                                <Style TargetType="icon:PackIconMaterial">
                                    <Setter Property="Kind" Value="Pause" />
                                    <Style.Triggers>
                                        <DataTrigger Binding="{Binding Enable}" Value="True" >
                                            <Setter Property="Kind" Value="Play" />
                                        </DataTrigger>
                                    </Style.Triggers>
                                </Style>
                            </icon:PackIconMaterial.Style>
                        </icon:PackIconMaterial>
                    </ToggleButton>
                    <ToggleButton Grid.Row="2"
                                  IsChecked="{Binding ShowNSFW}"
                                  Style="{StaticResource SlideshowButton}"
                                  ToolTip="Show NSFW mods"
                                  Background="{StaticResource BackgroundBrush}">
                        <Grid>
                            <TextBlock Text="NSFW" Margin="4"
                                   HorizontalAlignment="Center"
                                   FontWeight="Bold"
                                   FontSize="9"
                                   FontFamily="Lucida Sans"
                                   VerticalAlignment="Center" />
                            <icon:PackIconOcticons
                                    HorizontalAlignment="Center"
                                    VerticalAlignment="Center"
                                    Foreground="#88FFFFFF"
                                    Height="40"
                                    Width="40"
                                    Kind="CircleSlash"
                                    Visibility="{Binding ShowNSFW, Converter={StaticResource  bool2VisibilityConverter}, ConverterParameter=False}" />
                        </Grid>
                    </ToggleButton>
                </Grid>
                <Border Grid.Row="3" Margin="0,0,-50,-50" CornerRadius="50" Style="{StaticResource BackgroundBlurStyle}">
                    <Border.Effect>
                        <BlurEffect Radius="65" />
                    </Border.Effect>
                </Border>
                <TextBlock
                    Grid.Row="3"
                    VerticalAlignment="Bottom"
                    FontSize="16"
                    HorizontalAlignment="Right"
                    TextAlignment="Right"
                    Margin="20,25,25,25"
                    FontFamily="Lucida Sans"
                    Text="{Binding Summary}"
                    TextWrapping="Wrap" >
                    <TextBlock.Effect>
                        <DropShadowEffect />
                    </TextBlock.Effect>
                </TextBlock>
            </Grid>
        </Grid>
        <!-- Top progress bar -->
        <!-- Comes after slideshow control, so that any effects/overlap goes on top -->
        <Rectangle VerticalAlignment="Top" Height="25" Grid.Row="2" IsHitTestVisible="False" >
            <Rectangle.Fill>
                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                    <GradientStop Color="#AA000000" Offset="0"/>
                    <GradientStop Color="#00000000" Offset="1"/>
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>
        <Rectangle Grid.Row="1" Fill="{StaticResource BackgroundBrush}" />
        <mahapps:MetroProgressBar x:Name="BottomProgressBarDarkGlow"
                                  Grid.Row="1" 
                                  Grid.RowSpan="2"
                                  VerticalAlignment="Top" 
                                  Maximum="100"
                                  Value="46" 
                                  Foreground="{StaticResource PrimaryVariantBrush}" 
                                  Background="Transparent" 
                                  BorderBrush="Transparent"
                                  Height="16" Margin="-4" >
            <mahapps:MetroProgressBar.Effect>
                <BlurEffect Radius="25" />
            </mahapps:MetroProgressBar.Effect>
        </mahapps:MetroProgressBar>
        <mahapps:MetroProgressBar x:Name="BottomProgressBarBrightGlow"
                                  Grid.Row="1" 
                                  Grid.RowSpan="2"
                                  VerticalAlignment="Top" 
                                  Maximum="100"
                                  Value="46" 
                                  Foreground="{StaticResource PrimaryBrush}" 
                                  Background="Transparent" 
                                  BorderBrush="Transparent"
                                  Height="6" Margin="-4" >
            <mahapps:MetroProgressBar.Effect>
                <BlurEffect Radius="20" />
            </mahapps:MetroProgressBar.Effect>
        </mahapps:MetroProgressBar>
        <Grid Grid.Row="0" x:Name="TopBarGrid">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <mahapps:MetroProgressBar Grid.Column="0" 
                                      Grid.ColumnSpan="4" 
                                      Background="{StaticResource WindowBackgroundBrush}"
                                      BorderThickness="0"
                                      Foreground="Transparent"
                                      Maximum="100"
                                      Value="46"  />
            <mahapps:MetroProgressBar Grid.Column="0" Grid.ColumnSpan="4"
                                      Background="Transparent" 
                                      BorderThickness="0"
                                      Foreground="{StaticResource PrimaryVariantBrush}" Opacity="0.46"
                                      Maximum="100"
                                      Value="46"  />
            <TextBlock Grid.Column="0" 
                       VerticalAlignment="Bottom"
                       Margin="10,0,0,8"
                       Width="90"
                       FontWeight="Black"
                       TextAlignment="Right"
                       FontFamily="Lucida Sans" >
                <TextBlock.Style>
                    <Style TargetType="TextBlock">
                        <Setter Property="Text" Value="Configuring" />
                        <Setter Property="FontSize" Value="15" />
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding Installing}" >
                                <Setter Property="Text" Value="Installing" />
                                <Setter Property="FontSize" Value="14" />
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </TextBlock.Style>
            </TextBlock>
            <TextBlock Grid.Column="1" Text="{Binding ModListName}" 
                       VerticalAlignment="Center"
                       Margin="15,0,0,0"
                       FontSize="25"
                       FontWeight="Black"
                       FontFamily="Lucida Sans" />
            <Button Grid.Column="2"
                    ToolTip="Pause Installation" 
                    Margin="0,0,0,5"
                    Width="50"
                    Visibility="{Binding Installing, Converter={StaticResource bool2VisibilityConverter}}">
                <icon:PackIconMaterial
                    Kind="Pause" />
            </Button>
            <Button Grid.Column="3"
                    ToolTip="Stop Installation" 
                    Margin="0,0,0,5" 
                    Width="50" 
                    Visibility="{Binding Installing, Converter={StaticResource bool2VisibilityConverter}}" >
                <icon:PackIconFontAwesome
                    Width="25"
                    Height="25"
                    Kind="TimesCircleSolid" />
            </Button>
        </Grid>
        <mahapps:MetroProgressBar x:Name="BottomProgressBar"
                                  Grid.Row="1" 
                                  Grid.RowSpan="2"
                                  VerticalAlignment="Top" 
                                  Maximum="100"
                                  Value="46" 
                                  Foreground="{StaticResource PrimaryBrush}"
                                  Background="Transparent" 
                                  BorderBrush="Transparent"
                                  Height="5" />
        <mahapps:MetroProgressBar x:Name="BottomProgressBarHighlight"
                                  Grid.Row="1" 
                                  Grid.RowSpan="2"
                                  VerticalAlignment="Top" 
                                  Maximum="100"
                                  Value="46" 
                                  Background="Transparent" 
                                  BorderBrush="Transparent"
                                  Height="5" >
            <mahapps:MetroProgressBar.Foreground>
                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                    <GradientStop Color="#CCFFFFFF" Offset="0"/>
                    <GradientStop Color="#00FFFFFF" Offset="0.3"/>
                    <GradientStop Color="#00FFFFFF" Offset="0.7"/>
                    <GradientStop Color="#CCFFFFFF" Offset="1"/>
                </LinearGradientBrush>
            </mahapps:MetroProgressBar.Foreground>
        </mahapps:MetroProgressBar>
        <!-- Bottom Area -->
        <Grid Grid.Row="3"
              Visibility="{Binding Installing, Converter={StaticResource bool2VisibilityConverter}, ConverterParameter=False}" >
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="4" />
                <ColumnDefinition Width="2*" />
            </Grid.ColumnDefinitions>
            <Grid Grid.Column="0"
                  Margin="10">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Button Grid.Row="0"
                        Margin="30, 10"
                        Content="Readme"
                        ToolTip="Open the readme webpage for the modlist"
                        FontSize="20"
                        Command="{Binding OpenReadmeCommand}" />
                <Button Grid.Row="1"
                        Margin="30, 10"
                        Content="Manifest"
                        ToolTip="Open an explicit listing of all actions this modlist will take"
                        FontSize="20"
                        Command="{Binding ShowReportCommand}" />
            </Grid>
            <Grid Grid.Column="2"
                  x:Name="InstallationConfigurationView"
                  Background="{StaticResource WindowBackgroundBrush}" >
                <ScrollViewer VerticalScrollBarVisibility="Auto" Background="Transparent"
                              Margin="5"
                              Visibility="{Binding Installing, Converter={StaticResource bool2VisibilityConverter}, ConverterParameter=False}">
                    <Grid Margin="8">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="20" />
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="20" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*" />
                            <RowDefinition Height="40" />
                            <RowDefinition Height="40" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>
                        <TextBlock Grid.Column="0" Grid.Row="1"
                                   VerticalAlignment="Center"
                                   FontSize="14"
                                   HorizontalAlignment="Right"
                                   TextAlignment="Center"
                                   Text="Installation Location" />
                        <local:FilePicker Grid.Column="2" Grid.Row="1"
                                          Height="30"
                                          FontSize="14"
                                          VerticalAlignment="Center"
                                          PathType="Folder"
                                          DoExistsCheck="False"
                                          PromptTitle="Select Installation directory"
                                          TargetPath="{Binding Location}" />
                        <TextBlock Grid.Column="0" Grid.Row="2"
                                   VerticalAlignment="Center"
                                   FontSize="14"
                                   HorizontalAlignment="Right"
                                   TextAlignment="Center"
                                   Text="Download Location" />
                        <local:FilePicker Grid.Column="2" Grid.Row="2"
                                          Height="30"
                                          FontSize="14"
                                          PathType="Folder"
                                          VerticalAlignment="Center"
                                          DoExistsCheck="False"
                                          PromptTitle="Select a location for MO2 downloads"
                                          TargetPath="{Binding DownloadLocation}" />
                        <Button Grid.Row="1" Grid.RowSpan="2"
                                Grid.Column="4"
                                Width="55"
                                Height="55"
                                Margin="0,0,25,0"
                                BorderBrush="{StaticResource SecondaryBrush}"
                                Background="#222222"
                                HorizontalAlignment="Right"
                                Command="{Binding BeginCommand}"
                                Style="{StaticResource CircleButtonStyle}">
                            <icon:PackIconMaterial
                                Foreground="{StaticResource SecondaryBrush}"
                                Margin="5,0,0,0"
                                Height="25"
                                Width="25"
                                Kind="Play" />
                        </Button>
                    </Grid>
                </ScrollViewer>
            </Grid>
            <Rectangle Grid.Column="0" Grid.ColumnSpan="3" 
                       Height="1" 
                       Margin="25,0"
                       VerticalAlignment="Top"
                       Fill="{StaticResource DarkBackgroundBrush}"/>
        </Grid>
        <Grid Grid.Row="3"
              Visibility="{Binding Installing, Converter={StaticResource bool2VisibilityConverter}}" >
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="4" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <ListBox
                Grid.Column="0"
                local:AutoScrollBehavior.ScrollOnNewItem="True"
                ItemsSource="{Binding MWVM.Log}" />
            <ListBox x:Name="CpuListBox"
                     Grid.Column="2"
                     ItemsSource="{Binding MWVM.StatusList}">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <Grid HorizontalAlignment="Stretch">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>
                            <ProgressBar
                                Grid.Column="0"
                                Width="100"
                                Maximum="100"
                                Minimum="0"
                                Value="{Binding Progress, Mode=OneTime}">
                                <ProgressBar.Style>
                                    <Style TargetType="ProgressBar">
                                        <Setter Property="Visibility" Value="Visible" />
                                        <Style.Triggers>
                                            <DataTrigger Binding="{Binding Progress}" Value="0">
                                                <Setter Property="Visibility" Value="Collapsed" />
                                            </DataTrigger>
                                        </Style.Triggers>
                                    </Style>
                                </ProgressBar.Style>
                            </ProgressBar>
                            <TextBlock Grid.Column="1" Text=" CPU " />
                            <TextBlock Grid.Column="2" Text="{Binding ID}" />
                            <TextBlock Grid.Column="3" Text=" - " />
                            <TextBlock Grid.Column="4" Text="{Binding Msg}" />
                        </Grid>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </Grid>
    </Grid>
</UserControl>