wabbajack/Wabbajack/Views/Installers/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:common="clr-namespace:Wabbajack.Common;assembly=Wabbajack.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:icon="http://metro.mahapps.com/winfx/xaml/iconpacks"
    xmlns:lib="clr-namespace:Wabbajack.Lib;assembly=Wabbajack.Lib"
    xmlns:local="clr-namespace:Wabbajack"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    d:DataContext="{d:DesignInstance local:InstallerVM}"
    d:DesignHeight="500"
    d:DesignWidth="800"
    mc:Ignorable="d">
    <UserControl.Resources>
        <Style
            x:Key="SlideshowButton"
            BasedOn="{StaticResource CircleButtonStyle}"
            TargetType="ButtonBase">
            <Setter Property="Width" Value="40" />
            <Setter Property="Height" Value="40" />
            <Setter Property="Margin" Value="4" />
        </Style>
    </UserControl.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="47" />
            <RowDefinition Height="4*" />
            <RowDefinition Height="*" MinHeight="175" />
        </Grid.RowDefinitions>
        <Rectangle
            x:Name="BorderEdgeFadeDown"
            Grid.Row="1"
            Grid.RowSpan="2">
            <Rectangle.Fill>
                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                    <GradientStop Offset="0" Color="#191919" />
                    <GradientStop Offset="0.4" Color="#00191919" />
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>
        <local:HeatedBackgroundView
            Grid.Row="0"
            Grid.RowSpan="3"
            PercentCompleted="{Binding PercentCompleted}" />
        <Grid
            x:Name="Slideshow"
            Grid.Row="1"
            Margin="5,0,5,5">
            <Border BorderBrush="{StaticResource BorderInterestBrush}" BorderThickness="1,0,1,1">
                <local:DetailImageView
                    Title="{Binding TitleText, Mode=OneWay}"
                    Author="{Binding AuthorText, Mode=OneWay}"
                    Description="{Binding Description, Mode=OneWay}"
                    Image="{Binding Image, Mode=OneWay}" />
            </Border>
            <Grid
                Margin="0,20,25,0"
                HorizontalAlignment="Right"
                VerticalAlignment="Top">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <Grid.Effect>
                    <DropShadowEffect
                        BlurRadius="25"
                        Opacity="1"
                        Color="Black" />
                </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
                                                Storyboard.TargetProperty="Opacity"
                                                To="1"
                                                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.Column="3"
                    Width="60"
                    Height="60"
                    Margin="6"
                    Background="{StaticResource BackgroundBrush}"
                    Command="{Binding Slideshow.SlideShowNextItemCommand}"
                    Style="{StaticResource CircleButtonStyle}"
                    ToolTip="Skip to the next mod">
                    <icon:PackIconFontAwesome
                        Width="28"
                        Height="28"
                        Kind="ChevronRightSolid" />
                </Button>
                <ToggleButton
                    x:Name="PlayPauseButton"
                    Grid.Column="2"
                    Margin="6"
                    Background="{StaticResource BackgroundBrush}"
                    IsChecked="{Binding Slideshow.Enable}">
                    <ToggleButton.Style>
                        <Style BasedOn="{StaticResource SlideshowButton}" TargetType="ToggleButton">
                            <Setter Property="ToolTip" Value="Play slideshow" />
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding Slideshow.Enable}" Value="True">
                                    <Setter Property="ToolTip" Value="Pause slideshow" />
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </ToggleButton.Style>
                    <icon:PackIconMaterial>
                        <icon:PackIconMaterial.Style>
                            <Style TargetType="icon:PackIconMaterial">
                                <Setter Property="Kind" Value="Play" />
                                <Style.Triggers>
                                    <DataTrigger Binding="{Binding Slideshow.Enable}" Value="True">
                                        <Setter Property="Kind" Value="Pause" />
                                    </DataTrigger>
                                </Style.Triggers>
                            </Style>
                        </icon:PackIconMaterial.Style>
                    </icon:PackIconMaterial>
                </ToggleButton>
                <Button
                    Grid.Column="1"
                    Margin="6"
                    Background="{StaticResource BackgroundBrush}"
                    Command="{Binding Slideshow.VisitNexusSiteCommand}"
                    Style="{StaticResource SlideshowButton}"
                    ToolTip="Open Nexus Website">
                    <icon:PackIconMaterial
                        Width="28"
                        Height="28"
                        Kind="Web" />
                </Button>
                <ToggleButton
                    Grid.Column="0"
                    Background="{StaticResource BackgroundBrush}"
                    IsChecked="{Binding Slideshow.ShowNSFW}"
                    ToolTip="Show NSFW mods">
                    <ToggleButton.Style>
                        <Style BasedOn="{StaticResource SlideshowButton}" TargetType="ToggleButton">
                            <Setter Property="ToolTip" Value="Show NSFW mods" />
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding Slideshow.ShowNSFW}" Value="True">
                                    <Setter Property="ToolTip" Value="Hide NSFW mods" />
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </ToggleButton.Style>
                    <Grid>
                        <TextBlock
                            Margin="4"
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            FontFamily="Lucida Sans"
                            FontSize="9"
                            FontWeight="Bold"
                            Text="NSFW" />
                        <icon:PackIconOcticons
                            Width="40"
                            Height="40"
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            Foreground="#88FFFFFF"
                            Kind="CircleSlash"
                            Visibility="{Binding Slideshow.ShowNSFW, Converter={StaticResource bool2VisibilityConverter}, ConverterParameter=False}" />
                    </Grid>
                </ToggleButton>
            </Grid>
        </Grid>
        <!--  Comes after slideshow control, so that any effects/overlap goes on top  -->
        <local:TopProgressView
            Title="{Binding ModListName}"
            Grid.Row="0"
            Grid.RowSpan="2"
            ProgressPercent="{Binding PercentCompleted}"
            StatePrefixTitle="{Binding ProgressTitle}">
            <!--  Readd when Pause/Stop implementations added  -->
            <!--<Button Grid.Column="2"
                    ToolTip="Pause Installation"
                    Margin="0,0,0,5"
                    Width="50"
                    Visibility="{Binding StartedInstallation, Converter={StaticResource bool2VisibilityConverter}}">
                <icon:PackIconMaterial
                    Kind="Pause" />
            </Button>
            <Button Grid.Column="3"
                    ToolTip="Stop Installation"
                    Margin="0,0,0,5"
                    Width="50"
                    Visibility="{Binding StartedInstallation, Converter={StaticResource bool2VisibilityConverter}}" >
                <icon:PackIconFontAwesome
                    Width="25"
                    Height="25"
                    Kind="TimesCircleSolid" />
            </Button>-->
        </local:TopProgressView>
        <Button
            x:Name="BackButton"
            Grid.Row="0"
            Grid.RowSpan="2"
            Width="30"
            Height="30"
            Margin="7,5,0,0"
            HorizontalAlignment="Left"
            VerticalAlignment="Top"
            Command="{Binding BackCommand}"
            Style="{StaticResource IconCircleButtonStyle}"
            ToolTip="Back to main menu">
            <icon:PackIconMaterial Foreground="{Binding Foreground, RelativeSource={RelativeSource AncestorType={x:Type Button}}}" Kind="ArrowLeft" />
        </Button>
        <!--  Bottom Area  -->
        <Grid
            Grid.Row="2"
            Margin="5,0,5,5"
            ClipToBounds="True"
            Visibility="{Binding StartedInstallation, 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="*" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Button
                    Grid.Row="0"
                    Margin="30,5"
                    Command="{Binding OpenReadmeCommand}"
                    FontSize="20"
                    ToolTip="Open the readme for the modlist">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="30" />
                            <ColumnDefinition Width="82" />
                        </Grid.ColumnDefinitions>
                        <icon:PackIconFontAwesome
                            Grid.Column="0"
                            Width="30"
                            Height="30"
                            VerticalAlignment="Center"
                            Kind="ReadmeBrands" />
                        <TextBlock
                            Grid.Column="1"
                            Margin="10,0,0,0"
                            VerticalAlignment="Center"
                            Text="Readme" />
                    </Grid>
                </Button>
                <Button
                    Grid.Row="1"
                    Margin="30,5"
                    Command="{Binding VisitWebsiteCommand}"
                    FontSize="20"
                    ToolTip="Open the webpage for the modlist">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="30" />
                            <ColumnDefinition Width="82" />
                        </Grid.ColumnDefinitions>
                        <icon:PackIconMaterial
                            Grid.Column="0"
                            Width="30"
                            Height="30"
                            VerticalAlignment="Center"
                            Kind="Web" />
                        <TextBlock
                            Grid.Column="1"
                            Margin="10,0,0,0"
                            VerticalAlignment="Center"
                            Text="Website" />
                    </Grid>
                </Button>
                <Button
                    Grid.Row="2"
                    Margin="30,5"
                    Command="{Binding ShowReportCommand}"
                    FontSize="20"
                    ToolTip="Open an explicit listing of all actions this modlist will take">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="30" />
                            <ColumnDefinition Width="82" />
                        </Grid.ColumnDefinitions>
                        <icon:PackIconOcticons
                            Grid.Column="0"
                            Width="30"
                            Height="30"
                            VerticalAlignment="Center"
                            Kind="Checklist" />
                        <TextBlock
                            Grid.Column="1"
                            Margin="10,0,0,0"
                            VerticalAlignment="Center"
                            Text="Manifest" />
                    </Grid>
                </Button>
            </Grid>
            <Grid
                x:Name="InstallationConfigurationView"
                Grid.Column="2"
                Background="{StaticResource WindowBackgroundBrush}">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="20" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <Grid
                    Grid.Column="0"
                    Margin="5"
                    VerticalAlignment="Center"
                    Background="Transparent"
                    Visibility="{Binding StartedInstallation, Converter={StaticResource bool2VisibilityConverter}, ConverterParameter=False}">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="5" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" MinWidth="120" />
                        <ColumnDefinition Width="20" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Rectangle Grid.Row="0" Height="{Binding Installer.ConfigVisualVerticalOffset, Mode=OneWay}" />
                    <TextBlock
                        Grid.Row="1"
                        Grid.Column="0"
                        HorizontalAlignment="Right"
                        VerticalAlignment="Center"
                        FontSize="14"
                        Text="Target Modlist"
                        TextAlignment="Center" />
                    <local:FilePicker
                        Grid.Row="1"
                        Grid.Column="2"
                        Height="30"
                        VerticalAlignment="Center"
                        FontSize="14"
                        PickerVM="{Binding ModListLocation}" />
                    <ContentPresenter
                        Grid.Row="3"
                        Grid.Column="0"
                        Grid.ColumnSpan="3"
                        VerticalAlignment="Top"
                        Content="{Binding Installer}">
                        <ContentPresenter.Resources>
                            <DataTemplate DataType="{x:Type local:MO2InstallerVM}">
                                <local:MO2InstallerConfigView />
                            </DataTemplate>
                            <DataTemplate DataType="{x:Type local:VortexInstallerVM}">
                                <local:VortexInstallerConfigView />
                            </DataTemplate>
                        </ContentPresenter.Resources>
                    </ContentPresenter>
                </Grid>
                <local:BeginButton
                    Grid.Column="2"
                    Margin="0,0,25,0"
                    HorizontalAlignment="Right"
                    VerticalAlignment="Center"
                    Command="{Binding BeginCommand, Mode=OneWay}" />
            </Grid>
        </Grid>
        <Grid
            Grid.Row="2"
            Margin="5,0,5,5"
            Visibility="{Binding StartedInstallation, Converter={StaticResource bool2VisibilityConverter}, FallbackValue=Hidden}">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="4*" />
                <ColumnDefinition Width="5" />
                <ColumnDefinition Width="3*" />
            </Grid.ColumnDefinitions>
            <local:LogView Grid.Column="0" ProgressPercent="{Binding PercentCompleted, Mode=OneWay}" />
            <local:CpuView
                Grid.Column="2"
                ProgressPercent="{Binding PercentCompleted, Mode=OneWay}"
                Visibility="{Binding ActiveGlobalUserIntervention, Converter={StaticResource IsNotNullVisibilityConverter}, ConverterParameter=False}" />
            <Border
                Grid.Column="2"
                Style="{StaticResource AttentionBorderStyle}"
                Visibility="{Binding ActiveGlobalUserIntervention, Converter={StaticResource IsNotNullVisibilityConverter}}">
                <Grid>
                    <local:ConfirmationInterventionView DataContext="{Binding ActiveGlobalUserIntervention}" Visibility="{Binding ActiveGlobalUserIntervention, Converter={StaticResource IsTypeVisibilityConverter}, ConverterParameter={x:Type common:ConfirmationIntervention}}" />
                    <local:ConfirmUpdateOfExistingInstallView Visibility="{Binding ActiveGlobalUserIntervention, Converter={StaticResource IsTypeVisibilityConverter}, ConverterParameter={x:Type lib:ConfirmUpdateOfExistingInstall}}" />
                </Grid>
            </Border>
            <local:InstallationCompleteView Grid.Column="2" Visibility="{Binding Completed, Converter={StaticResource bool2VisibilityConverter}, FallbackValue=Collapsed}" />
        </Grid>
    </Grid>
</UserControl>