<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> </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>