Artemis/src/Artemis.UI/Screens/ProfileEditor/DisplayConditions/DisplayConditionsView.xaml

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
    xmlns:s="https://github.com/canton7/Stylet"
    xmlns:converters="clr-namespace:Artemis.UI.Converters"
    xmlns:displayConditions="clr-namespace:Artemis.UI.Screens.ProfileEditor.DisplayConditions"
    x:Class="Artemis.UI.Screens.ProfileEditor.DisplayConditions.DisplayConditionsView"
    mc:Ignorable="d"
    d:DesignHeight="450" d:DesignWidth="800"
    d:DataContext="{d:DesignInstance {x:Type displayConditions:DisplayConditionsViewModel}}">
    <UserControl.Resources>
        <converters:InverseBooleanConverter x:Key="InverseBooleanConverter" />
    </UserControl.Resources>

    <Grid Margin="10">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <TextBlock Style="{StaticResource MaterialDesignSubtitle1TextBlock}" Margin="0 0 0 -4">
            Display conditions
        </TextBlock>
        <Separator Grid.Row="1" Grid.Column="0" Style="{StaticResource MaterialDesignDarkSeparator}" Margin="-2 0" />

        <Grid Grid.Row="2" Grid.Column="0">
            <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" Background="{StaticResource MaterialDesignCardBackground}">
                <ContentControl s:View.Model="{Binding ActiveItem}" />
            </ScrollViewer>

            <materialDesign:Card
                Visibility="{Binding DisplayStartHint, Converter={x:Static s:BoolToVisibilityConverter.Instance}, Mode=OneWay}"
                VerticalAlignment="Top"
                Background="{DynamicResource PrimaryHueDarkBrush}"
                Foreground="{DynamicResource PrimaryHueDarkForegroundBrush}"
                Margin="5 30 5 0"
                Padding="8"
                Width="315"
                HorizontalAlignment="Left">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>
                    <materialDesign:PackIcon Kind="Redo" Margin="0 0 5 0">
                        <materialDesign:PackIcon.RenderTransform>
                            <RotateTransform Angle="225" CenterX="8" CenterY="8" />
                        </materialDesign:PackIcon.RenderTransform>
                    </materialDesign:PackIcon>
                    <TextBlock Grid.Column="1" VerticalAlignment="Center">Click the plus icon to start using display conditions!</TextBlock>
                </Grid>
            </materialDesign:Card>
        </Grid>

        <Grid Grid.Row="3">
            <Grid.RowDefinitions>
                <RowDefinition Height="20" />
                <RowDefinition />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" MinWidth="140" />
                <ColumnDefinition Width="*" MinWidth="170" />
            </Grid.ColumnDefinitions>

            <!-- Play mode -->
            <StackPanel Grid.Column="0" Orientation="Horizontal">
                <materialDesign:PackIcon Kind="PlayOutline" VerticalAlignment="Center" />
                <TextBlock Text="Play mode" VerticalAlignment="Center">
                    <TextBlock.ToolTip>
                        <ToolTip Placement="Center" VerticalOffset="-30">
                            <TextBlock>
                                Configure how the layer should act while the conditions above are met
                            </TextBlock>
                        </ToolTip>
                    </TextBlock.ToolTip>
                </TextBlock>
            </StackPanel>

            <materialDesign:ColorZone Grid.Row="1" Grid.Column="0" Mode="Standard" CornerRadius="3" Margin="0 0 2 0">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>
                    <RadioButton Grid.Column="0"
                                 Style="{StaticResource MaterialDesignTabRadioButton}"
                                 IsChecked="{Binding DisplayContinuously}"
                                 MinWidth="0"
                                 Padding="5 0">
                        <RadioButton.ToolTip>
                            <ToolTip Placement="Center" VerticalOffset="-40">
                                <TextBlock>
                                    Continue repeating the main segment of the timeline while the condition is met
                                </TextBlock>
                            </ToolTip>
                        </RadioButton.ToolTip>
                        <StackPanel Orientation="Horizontal">
                            <materialDesign:PackIcon Kind="Repeat" VerticalAlignment="Center" />
                            <TextBlock FontSize="12" VerticalAlignment="Center">REPEAT</TextBlock>
                        </StackPanel>
                    </RadioButton>
                    <RadioButton Grid.Column="1"
                                 Style="{StaticResource MaterialDesignTabRadioButton}"
                                 IsChecked="{Binding DisplayContinuously, Converter={StaticResource InverseBooleanConverter}}"
                                 MinWidth="0"
                                 Padding="5 0">
                        <RadioButton.ToolTip>
                            <ToolTip Placement="Center" VerticalOffset="-40">
                                <TextBlock>
                                    Only play the timeline once when the condition is met
                                </TextBlock>
                            </ToolTip>
                        </RadioButton.ToolTip>
                        <StackPanel Orientation="Horizontal">
                            <materialDesign:PackIcon Kind="StopwatchOutline" VerticalAlignment="Center" />
                            <TextBlock FontSize="12" VerticalAlignment="Center">ONCE</TextBlock>
                        </StackPanel>
                    </RadioButton>
                </Grid>
            </materialDesign:ColorZone>

            <!-- Stop mode -->
            <StackPanel Grid.Column="1" Orientation="Horizontal">
                <materialDesign:PackIcon Kind="Stop" VerticalAlignment="Center" />
                <TextBlock Text="Stop mode" VerticalAlignment="Center">
                    <TextBlock.ToolTip>
                        <ToolTip Placement="Center" VerticalOffset="-30">
                            <TextBlock>
                                Configure how the layer should act when the conditions above are no longer met
                            </TextBlock>
                        </ToolTip>
                    </TextBlock.ToolTip>
                </TextBlock>
            </StackPanel>
            <materialDesign:ColorZone Grid.Row="1" Grid.Column="1" Mode="Standard" CornerRadius="3" Margin="2 0 0 0" HorizontalAlignment="Stretch">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition />
                        <ColumnDefinition MinWidth="100" />
                    </Grid.ColumnDefinitions>
                    <RadioButton Grid.Column="0"
                                 Style="{StaticResource MaterialDesignTabRadioButton}"
                                 IsChecked="{Binding AlwaysFinishTimeline}"
                                 MinWidth="0"
                                 Padding="5 0">
                        <RadioButton.ToolTip>
                            <ToolTip Placement="Center" VerticalOffset="-40">
                                <TextBlock>
                                    When conditions are no longer met, finish the the current run of the main timeline
                                </TextBlock>
                            </ToolTip>
                        </RadioButton.ToolTip>
                        <StackPanel Orientation="Horizontal">
                            <materialDesign:PackIcon Kind="PlayOutline" VerticalAlignment="Center" />
                            <TextBlock FontSize="12" VerticalAlignment="Center">FINISH</TextBlock>
                        </StackPanel>
                    </RadioButton>
                    <RadioButton Grid.Column="1"
                                 Style="{StaticResource MaterialDesignTabRadioButton}"
                                 IsChecked="{Binding AlwaysFinishTimeline, Converter={StaticResource InverseBooleanConverter}}"
                                 MinWidth="0"
                                 Padding="5 0">
                        <RadioButton.ToolTip>
                            <ToolTip Placement="Center" VerticalOffset="-40">
                                <TextBlock>
                                    When conditions are no longer met, skip to the end segment of the timeline
                                </TextBlock>
                            </ToolTip>
                        </RadioButton.ToolTip>
                        <StackPanel Orientation="Horizontal">
                            <materialDesign:PackIcon Kind="SkipNextOutline" VerticalAlignment="Center" />
                            <TextBlock FontSize="12" VerticalAlignment="Center">SKIP TO END</TextBlock>
                        </StackPanel>
                    </RadioButton>
                </Grid>
            </materialDesign:ColorZone>
        </Grid>
    </Grid>
</UserControl>