path: root/Software/Visual_Studio/PPC/Modules/Tango.PPC.Jobs/Views/JobView.xaml

<UserControl x:Class="Tango.PPC.Jobs.Views.JobView"
             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:vm="clr-namespace:Tango.PPC.Jobs.ViewModels"
             xmlns:fa="http://schemas.fontawesome.io/icons/"
             xmlns:touch="clr-namespace:Tango.Touch.Controls;assembly=Tango.Touch"
             xmlns:keyboard="clr-namespace:Tango.Touch.Keyboard;assembly=Tango.Touch"
             xmlns:global="clr-namespace:Tango.PPC.Jobs"
             xmlns:controls="clr-namespace:Tango.SharedUI.Controls;assembly=Tango.SharedUI"
             xmlns:converters="clr-namespace:Tango.SharedUI.Converters;assembly=Tango.SharedUI"
             xmlns:entities="clr-namespace:Tango.BL.Entities;assembly=Tango.BL"
             xmlns:dragAndDrop="clr-namespace:Tango.DragAndDrop;assembly=Tango.DragAndDrop"
             xmlns:localControls="clr-namespace:Tango.PPC.Jobs.Controls"
             xmlns:local="clr-namespace:Tango.PPC.Jobs.Views"
             mc:Ignorable="d" 
             d:DesignHeight="2000" d:DesignWidth="800" d:DataContext="{d:DesignInstance Type=vm:JobViewVM, IsDesignTimeCreatable=False}" DataContext="{x:Static global:ViewModelLocator.JobViewVM}">

    <UserControl.Resources>
        <Style TargetType="FrameworkElement" x:Key="Level1Container">
            <Setter Property="Margin" Value="20 15 60 15"></Setter>
        </Style>
        <Style TargetType="FrameworkElement" x:Key="Level2Container">
            <Setter Property="Margin" Value="80 30 60 0"></Setter>
        </Style>
        <Style TargetType="FrameworkElement" x:Key="Level2ContainerExtraMargin">
            <Setter Property="Margin" Value="80 40 60 0"></Setter>
        </Style>

        <DataTemplate x:Key="RGB_Template" DataType="{x:Type entities:BrushStop}">
            <UniformGrid Rows="1" Columns="3">
                <touch:TouchNumericTextBox Margin="2 0" HorizontalContentAlignment="Center" Value="{Binding Red}" keyboard:KeyboardView.Container="{Binding ElementName=Container}" Maximum="255" />
                <touch:TouchNumericTextBox Margin="2 0" HorizontalContentAlignment="Center" Value="{Binding Green}" keyboard:KeyboardView.Container="{Binding ElementName=Container}" Maximum="255" />
                <touch:TouchNumericTextBox Margin="2 0" HorizontalContentAlignment="Center" Value="{Binding Blue}" keyboard:KeyboardView.Container="{Binding ElementName=Container}" Maximum="255" />
            </UniformGrid>
        </DataTemplate>

        <DataTemplate x:Key="CMYK_Template" DataType="{x:Type entities:BrushStop}">
            <UniformGrid Rows="1" Columns="4">
                <touch:TouchNumericTextBox Margin="2 0" HorizontalContentAlignment="Center" Value="{Binding Cyan,Converter={StaticResource OneToPercentConverter}}" keyboard:KeyboardView.Container="{Binding ElementName=Container}" HasDecimalPoint="True" Maximum="100"  StringFormat="0"  />
                <touch:TouchNumericTextBox Margin="2 0" HorizontalContentAlignment="Center" Value="{Binding Magenta,Converter={StaticResource OneToPercentConverter}}" keyboard:KeyboardView.Container="{Binding ElementName=Container}" HasDecimalPoint="True" Maximum="100" StringFormat="0" />
                <touch:TouchNumericTextBox Margin="2 0" HorizontalContentAlignment="Center" Value="{Binding Yellow,Converter={StaticResource OneToPercentConverter}}" keyboard:KeyboardView.Container="{Binding ElementName=Container}" HasDecimalPoint="True" Maximum="100" StringFormat="0" />
                <touch:TouchNumericTextBox Margin="2 0" HorizontalContentAlignment="Center" Value="{Binding Black,Converter={StaticResource OneToPercentConverter}}" keyboard:KeyboardView.Container="{Binding ElementName=Container}" HasDecimalPoint="True" Maximum="100" StringFormat="0" />
            </UniformGrid>
        </DataTemplate>

        <DataTemplate x:Key="LAB_Template" DataType="{x:Type entities:BrushStop}">
            <UniformGrid Rows="1" Columns="3">
                <touch:TouchNumericTextBox Margin="2 0" HorizontalContentAlignment="Center" Value="{Binding L}" keyboard:KeyboardView.Container="{Binding ElementName=Container}" HasDecimalPoint="True" Minimum="0" Maximum="100" StringFormat="0.00" />
                <touch:TouchNumericTextBox Margin="2 0" HorizontalContentAlignment="Center" Value="{Binding A}" keyboard:KeyboardView.Container="{Binding ElementName=Container}" HasDecimalPoint="True" Minimum="-128" Maximum="128" StringFormat="0.00" />
                <touch:TouchNumericTextBox Margin="2 0" HorizontalContentAlignment="Center" Value="{Binding B}" keyboard:KeyboardView.Container="{Binding ElementName=Container}" HasDecimalPoint="True" Minimum="-128" Maximum="128" StringFormat="0.00" />
            </UniformGrid>
        </DataTemplate>
    </UserControl.Resources>

    <Grid Background="{StaticResource TangoMidBackgroundBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="1*"/>
        </Grid.RowDefinitions>

        <Grid Grid.Row="1">
            <Grid.RowDefinitions>
                <RowDefinition Height="1*"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Grid x:Name="Container" keyboard:KeyboardView.ContainerOffset="40" Grid.RowSpan="2">
                <touch:LightTouchScrollViewer>
                    <StackPanel Margin="10 60 10 0">
                        <StackPanel>
                            <touch:TouchExpander Padding="20 15">
                                <touch:TouchExpander.Header>
                                    <StackPanel Orientation="Horizontal" VerticalAlignment="Center" Margin="0 0 20 0">
                                        <Image Source="../Images/JobView/job-details.png" Width="39" />
                                        <TextBlock FontWeight="Medium" Margin="20 0 0 0" VerticalAlignment="Center" FontSize="{StaticResource TangoExpanderHeaderFontSize}">Job Details</TextBlock>

                                        <TextBlock FontWeight="Medium" Margin="50 0 0 0" VerticalAlignment="Center" Text="{Binding Job.Rml.Name}"></TextBlock>
                                    </StackPanel>
                                </touch:TouchExpander.Header>

                                <StackPanel Margin="60 30 60 20" TextElement.FontWeight="Medium">
                                    <controls:TableGrid RowHeight="50">

                                        <TextBlock>Job name:</TextBlock>
                                        <touch:TouchTextBox Text="{Binding Job.Name,UpdateSourceTrigger=PropertyChanged}" KeyboardMode="AlphaNumeric" KeyboardAction="Next" KeyboardContainer="{Binding ElementName=Container}" />

                                        <TextBlock>Customer:</TextBlock>
                                        <touch:TouchAutoComplete Text="{Binding CustomersFilter}" ItemsSource="{Binding Customers}" SelectedItem="{Binding Job.Customer}" DisplayMemberPath="Name" AutoCompleteProvider="{Binding CustomersAutoCompleteProvider}" KeyboardMode="AlphaNumeric" KeyboardAction="Next" KeyboardContainer="{Binding ElementName=Container}" />

                                        <TextBlock>Thread type:</TextBlock>
                                        <touch:TouchComboBox ItemsSource="{Binding Rmls}" SelectedItem="{Binding Job.Rml}" DisplayMemberPath="Name" Title="Select Thread Type" />

                                        <TextBlock>Comment:</TextBlock>
                                        <TextBox Margin="20 0 0 -42" Text="{Binding Job.Description}" FocusVisualStyle="{x:Null}" BorderBrush="{StaticResource TangoDividerBrush}" Foreground="{StaticResource TangoDarkForegroundBrush}" AcceptsReturn="True" TextWrapping="Wrap" Height="60" Padding="5">

                                        </TextBox>
                                    </controls:TableGrid>

                                    <Grid HorizontalAlignment="Center" Margin="0 20 0 0" TextElement.Foreground="{StaticResource TangoGrayTextBrush}">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto" />
                                            <ColumnDefinition Width="Auto" />
                                            <ColumnDefinition Width="Auto" />
                                            <ColumnDefinition Width="Auto" />
                                            <ColumnDefinition Width="Auto" />
                                        </Grid.ColumnDefinitions>

                                        <TextBlock HorizontalAlignment="Left">
                                    <Run Text="Job status:"></Run>
                                    <Run Text="{Binding Job.JobStatus}"></Run>
                                        </TextBlock>

                                        <Rectangle Margin="20 0" Grid.Column="1" HorizontalAlignment="Center" StrokeThickness="1" Stroke="{StaticResource TangoGrayTextBrush}" />

                                        <TextBlock Grid.Column="2" HorizontalAlignment="Center">
                                    <Run Text="Last updated:"></Run>
                                    <Run Text="{Binding Job.LastUpdated,Converter={StaticResource DateTimeUTCToShortDateConverter},TargetNullValue=Never}"></Run>
                                        </TextBlock>

                                        <Rectangle Margin="20 0" Grid.Column="3" HorizontalAlignment="Center" StrokeThickness="1" Stroke="{StaticResource TangoGrayTextBrush}" />

                                        <TextBlock Grid.Column="4" HorizontalAlignment="Right">
                                    <Run Text="Last dye:"></Run>
                                    <Run Text="{Binding Job.LastRun,Converter={StaticResource DateTimeUTCToShortDateConverter},TargetNullValue=Never}"></Run>
                                        </TextBlock>
                                    </Grid>
                                </StackPanel>
                            </touch:TouchExpander>

                            <Border Style="{StaticResource TangoTouchBorder}" Margin="0 12 0 0" Padding="0 0 0 40">
                                <Grid>
                                    <StackPanel>
                                        <StackPanel Orientation="Horizontal" VerticalAlignment="Center"  Style="{StaticResource Level1Container}">
                                            <Image Source="../Images/JobView/color-length.png" Width="39" />
                                            <TextBlock FontWeight="Medium" Margin="20 0 0 0" VerticalAlignment="Center" FontSize="{StaticResource TangoExpanderHeaderFontSize}">Color &amp; Length</TextBlock>
                                        </StackPanel>

                                        <DockPanel Style="{StaticResource Level2Container}">
                                            <TextBlock Text="Color Catalog/Space" VerticalAlignment="Center"></TextBlock>
                                            <touch:TouchComboBox Margin="20 0 0 0" ItemsSource="{Binding ColorSpaces}" SelectedItem="{Binding Job.ColorSpace}" DisplayMemberPath="Name" Title="Select Color Catalog/Space" />
                                        </DockPanel>

                                        <DockPanel LastChildFill="False" Style="{StaticResource Level2ContainerExtraMargin}" Height="40">
                                            <StackPanel DockPanel.Dock="Left" Orientation="Horizontal">
                                                <touch:TouchToggleIconButton x:Name="toggle_small_list" IsChecked="{Binding ElementName=toggle_large_list,Path=IsChecked,Mode=OneWay,Converter={StaticResource BooleanInverseConverter}}" DockPanel.Dock="Right" Icon="List" CheckedIcon="List" Padding="8" CornerRadius="20" />
                                                <Rectangle HorizontalAlignment="Left" Stroke="{StaticResource TangoDividerBrush}" Margin="10 8" />
                                                <touch:TouchToggleIconButton x:Name="toggle_large_list" IsChecked="{Binding ElementName=toggle_small_list,Path=IsChecked,Mode=OneWay,Converter={StaticResource BooleanInverseConverter}}" DockPanel.Dock="Right" Icon="ThList" CheckedIcon="ThList" Padding="8" CornerRadius="20" />
                                            </StackPanel>

                                            <touch:TouchToggleIconButton x:Name="toggleEdit" DockPanel.Dock="Right" Icon="Pencil" CheckedIcon="Pencil" Padding="8" CornerRadius="20" />
                                        </DockPanel>

                                        <ItemsControl Style="{StaticResource Level2Container}" ItemsSource="{Binding SegmentsCollectionView}">
                                            <ItemsControl.ItemTemplate>
                                                <DataTemplate>
                                                    <Border Margin="0 0 0 15" CornerRadius="8" Background="{StaticResource TangoPrimaryBackgroundBrush}" BorderThickness="1" BorderBrush="{StaticResource TangoGrayBrush}">
                                                        <Border.Effect>
                                                            <DropShadowEffect Opacity="0.5" Color="{StaticResource TangoDropShadowColor}" BlurRadius="10" ShadowDepth="15" />
                                                        </Border.Effect>
                                                        <Grid>
                                                            <Grid.RowDefinitions>
                                                                <RowDefinition Height="Auto" />
                                                                <RowDefinition Height="Auto" />
                                                            </Grid.RowDefinitions>
                                                            <Grid Background="Transparent"  dragAndDrop:DragAndDropService.Draggable="True" dragAndDrop:DragAndDropService.Droppable="True" dragAndDrop:DragAndDropService.DraggingSurface="{Binding ElementName=DraggingSurface}">
                                                                <Grid.Style>
                                                                    <Style TargetType="Grid">
                                                                        <Setter Property="Opacity" Value="1"></Setter>
                                                                        <Style.Triggers>
                                                                            <Trigger Property="dragAndDrop:DragAndDropService.IsDraggableOver" Value="True">
                                                                                <Setter Property="Opacity" Value="0.5"></Setter>
                                                                            </Trigger>
                                                                        </Style.Triggers>
                                                                    </Style>
                                                                </Grid.Style>
                                                                <DockPanel>
                                                                    <DockPanel.Style>
                                                                        <Style TargetType="DockPanel">
                                                                            <Setter Property="Height" Value="163"></Setter>
                                                                            <Style.Triggers>
                                                                                <DataTrigger Binding="{Binding ElementName=toggle_small_list,Path=IsChecked}" Value="True">
                                                                                    <Setter Property="Height" Value="74"></Setter>
                                                                                </DataTrigger>
                                                                            </Style.Triggers>
                                                                        </Style>
                                                                    </DockPanel.Style>
                                                                    <Border DockPanel.Dock="Left" Background="{Binding SegmentBrush}">
                                                                        <Border.Style>
                                                                            <Style TargetType="Border">
                                                                                <Setter Property="CornerRadius" Value="8 0 0 8"></Setter>
                                                                                <Setter Property="Width" Value="{Binding RelativeSource={RelativeSource Self},Path=ActualHeight}"></Setter>
                                                                                <Style.Triggers>
                                                                                    <DataTrigger Binding="{Binding ElementName=toggle_small_list,Path=IsChecked}" Value="True">
                                                                                        <Setter Property="Width" Value="{Binding RelativeSource={RelativeSource Self},Path=ActualHeight,Converter={StaticResource MathOperatorConverter},ConverterParameter='*2'}"></Setter>
                                                                                    </DataTrigger>
                                                                                    <MultiDataTrigger>
                                                                                        <MultiDataTrigger.Conditions>
                                                                                            <Condition Binding="{Binding Converter={StaticResource IsSegmentGradientConverter}}" Value="True"></Condition>
                                                                                            <Condition Binding="{Binding ElementName=toggle_large_list,Path=IsChecked}" Value="True"></Condition>
                                                                                        </MultiDataTrigger.Conditions>
                                                                                        <Setter Property="CornerRadius" Value="8 0 0 0"></Setter>
                                                                                    </MultiDataTrigger>
                                                                                </Style.Triggers>
                                                                            </Style>
                                                                        </Border.Style>
                                                                    </Border>

                                                                    <Grid>
                                                                        <DockPanel Margin="30 0" VerticalAlignment="Center">
                                                                            <TextBlock DockPanel.Dock="Top" FontSize="{StaticResource TangoTitleFontSize}">
                                                                    <Run>Segment #</Run>
                                                                    <Run Text="{Binding SegmentIndex,Mode=OneWay}"></Run>
                                                                            </TextBlock>

                                                                            <StackPanel Margin="0 30 0 0" VerticalAlignment="Bottom" HorizontalAlignment="Left" Width="300" Visibility="{Binding ElementName=toggle_large_list,Path=IsChecked,Converter={StaticResource BooleanToVisibilityConverter}}">
                                                                                <DockPanel LastChildFill="False">
                                                                                    <DockPanel.Style>
                                                                                        <Style TargetType="DockPanel">
                                                                                            <Setter Property="Visibility" Value="Visible"></Setter>
                                                                                            <Style.Triggers>
                                                                                                <DataTrigger Binding="{Binding Converter={StaticResource IsSegmentGradientConverter}}" Value="True">
                                                                                                    <Setter Property="Visibility" Value="Collapsed"></Setter>
                                                                                                </DataTrigger>
                                                                                            </Style.Triggers>
                                                                                        </Style>
                                                                                    </DockPanel.Style>
                                                                                    <TextBlock VerticalAlignment="Center" DockPanel.Dock="Left" Text="Color code:"></TextBlock>

                                                                                    <Grid DockPanel.Dock="Right" DataContext="{Binding BrushStops[0]}">
                                                                                        <ContentControl Focusable="False" FocusVisualStyle="{x:Null}" d:DataContext="{d:DesignInstance Type=entities:BrushStop, IsDesignTimeCreatable=False}" Content="{Binding}" Width="180">
                                                                                            <ContentControl.Style>
                                                                                                <Style TargetType="ContentControl">
                                                                                                    <Setter Property="ContentTemplate" Value="{x:Null}"></Setter>
                                                                                                    <Style.Triggers>
                                                                                                        <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=UserControl},Path=DataContext.Job.ColorSpace.Name}" Value="RGB">
                                                                                                            <Setter Property="ContentTemplate" Value="{StaticResource RGB_Template}" />
                                                                                                        </DataTrigger>
                                                                                                        <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=UserControl},Path=DataContext.Job.ColorSpace.Name}" Value="CMYK">
                                                                                                            <Setter Property="ContentTemplate" Value="{StaticResource CMYK_Template}" />
                                                                                                        </DataTrigger>
                                                                                                        <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=UserControl},Path=DataContext.Job.ColorSpace.Name}" Value="LAB">
                                                                                                            <Setter Property="ContentTemplate" Value="{StaticResource LAB_Template}" />
                                                                                                        </DataTrigger>
                                                                                                    </Style.Triggers>
                                                                                                </Style>
                                                                                            </ContentControl.Style>
                                                                                        </ContentControl>
                                                                                    </Grid>
                                                                                </DockPanel>
                                                                                <DockPanel LastChildFill="False" Margin="0 20 0 0">
                                                                                    <TextBlock VerticalAlignment="Center" DockPanel.Dock="Left" Text="Length (m):"></TextBlock>
                                                                                    <touch:TouchNumericTextBox Width="180" DockPanel.Dock="Right" Value="{Binding Length}" StringFormat="0.0" AutoCalculateJogStep="False" HasDecimalPoint="True" Maximum="100000" KeyboardContainer="{Binding ElementName=Container}" />
                                                                                </DockPanel>
                                                                            </StackPanel>
                                                                        </DockPanel>

                                                                        <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0 10 10 0">
                                                                            <TextBlock Visibility="{Binding ElementName=toggle_small_list,Path=IsChecked,Converter={StaticResource BooleanToVisibilityConverter}}" HorizontalAlignment="Right" VerticalAlignment="Center" Text="{Binding Length,StringFormat={}{0:N1} m}">
                                                                                <TextBlock.Style>
                                                                                    <Style TargetType="TextBlock">
                                                                                        <Setter Property="Margin" Value="0 16 20 0"></Setter>
                                                                                        <Style.Triggers>
                                                                                            <DataTrigger Binding="{Binding ElementName=toggleEdit,Path=IsChecked}" Value="True">
                                                                                                <Setter Property="Margin" Value="0 5 20 0"></Setter>
                                                                                            </DataTrigger>
                                                                                        </Style.Triggers>
                                                                                    </Style>
                                                                                </TextBlock.Style>
                                                                            </TextBlock>
                                                                            <StackPanel Visibility="{Binding ElementName=toggleEdit,Path=IsChecked,Converter={StaticResource BooleanToVisibilityConverter}}" Orientation="Horizontal">
                                                                                <touch:TouchIconButton EnableDropShadow="False" Icon="TrashOutline" Padding="12" Foreground="{StaticResource TangoPrimaryAccentBrush}" Width="50" Height="50" RippleBrush="{StaticResource TangoRippleDarkBrush}" CornerRadius="30" />

                                                                                <dragAndDrop:DragThumb Background="Transparent" IsHitTestVisible="True">
                                                                                    <touch:TouchIconButton IsHitTestVisible="False" EnableDropShadow="False" Icon="Bars" Padding="15" Foreground="{StaticResource TangoPrimaryAccentBrush}" Width="50" Height="50" RippleBrush="{StaticResource TangoRippleDarkBrush}" CornerRadius="30" />
                                                                                </dragAndDrop:DragThumb>
                                                                            </StackPanel>
                                                                        </StackPanel>
                                                                    </Grid>
                                                                </DockPanel>
                                                            </Grid>

                                                            <Border Grid.Row="1" BorderBrush="{StaticResource TangoGrayBrush}" BorderThickness="0 1 0 0">
                                                                <Border.Style>
                                                                    <Style TargetType="Border">
                                                                        <Setter Property="Visibility" Value="Collapsed"></Setter>
                                                                        <Style.Triggers>
                                                                            <MultiDataTrigger>
                                                                                <MultiDataTrigger.Conditions>
                                                                                    <Condition Binding="{Binding Converter={StaticResource IsSegmentGradientConverter}}" Value="True"></Condition>
                                                                                    <Condition Binding="{Binding ElementName=toggle_large_list,Path=IsChecked}" Value="True"></Condition>
                                                                                </MultiDataTrigger.Conditions>

                                                                                <Setter Property="Visibility" Value="Visible"></Setter>
                                                                            </MultiDataTrigger>
                                                                        </Style.Triggers>
                                                                    </Style>
                                                                </Border.Style>

                                                                <StackPanel>
                                                                    <ItemsControl ItemsSource="{Binding BrushStops}">
                                                                        <ItemsControl.ItemTemplate>
                                                                            <DataTemplate>
                                                                                <Grid Margin="50 20 140 20">
                                                                                    <StackPanel>
                                                                                        <StackPanel Orientation="Horizontal">
                                                                                            <Border Width="48" Height="48" CornerRadius="5" BorderThickness="1" BorderBrush="{StaticResource TangoGrayBrush}">
                                                                                                <Border.Background>
                                                                                                    <SolidColorBrush Color="{Binding Color}"></SolidColorBrush>
                                                                                                </Border.Background>
                                                                                            </Border>

                                                                                            <TextBlock Margin="30 0 0 0" FontSize="{StaticResource TangoTitleFontSize}">
                                                                                        <Run>#</Run><Run Text="{Binding Segment.SegmentIndex}"></Run><Run>.</Run><Run Text="{Binding StopIndex}"></Run>
                                                                                            </TextBlock>
                                                                                        </StackPanel>

                                                                                        <DockPanel LastChildFill="False" Margin="0 20 0 0">
                                                                                            <TextBlock VerticalAlignment="Bottom" DockPanel.Dock="Left">Color code:</TextBlock>
                                                                                            <ContentControl Focusable="False" Margin="20 0 0 0" DockPanel.Dock="Right" HorizontalAlignment="Right" Width="300" Content="{Binding}">
                                                                                                <ContentControl.Style>
                                                                                                    <Style TargetType="ContentControl">
                                                                                                        <Setter Property="ContentTemplate" Value="{x:Null}"></Setter>
                                                                                                        <Style.Triggers>
                                                                                                            <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=UserControl},Path=DataContext.Job.ColorSpace.Name}" Value="RGB">
                                                                                                                <Setter Property="ContentTemplate" Value="{StaticResource RGB_Template}" />
                                                                                                            </DataTrigger>
                                                                                                            <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=UserControl},Path=DataContext.Job.ColorSpace.Name}" Value="CMYK">
                                                                                                                <Setter Property="ContentTemplate" Value="{StaticResource CMYK_Template}" />
                                                                                                            </DataTrigger>
                                                                                                            <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=UserControl},Path=DataContext.Job.ColorSpace.Name}" Value="LAB">
                                                                                                                <Setter Property="ContentTemplate" Value="{StaticResource LAB_Template}" />
                                                                                                            </DataTrigger>
                                                                                                        </Style.Triggers>
                                                                                                    </Style>
                                                                                                </ContentControl.Style>
                                                                                            </ContentControl>
                                                                                        </DockPanel>

                                                                                        <DockPanel LastChildFill="False" Margin="0 20 0 0" IsEnabled="{Binding IsMiddle}">
                                                                                            <TextBlock VerticalAlignment="Bottom" DockPanel.Dock="Left">Position (m):</TextBlock>
                                                                                            <Grid Margin="20 0 0 0" Width="300" DockPanel.Dock="Right">
                                                                                                <Grid.ColumnDefinitions>
                                                                                                    <ColumnDefinition Width="1*" />
                                                                                                    <ColumnDefinition Width="2*" />
                                                                                                </Grid.ColumnDefinitions>

                                                                                                <touch:TouchNumericTextBox Value="{Binding OffsetMeters}" HasDecimalPoint="True" StringFormat="0.0" Maximum="{Binding Segment.Length}" KeyboardContainer="{Binding ElementName=Container}"></touch:TouchNumericTextBox>
                                                                                                <touch:TouchSlider Grid.Column="1" Height="30" Margin="10 0 0 -23" Maximum="{Binding Segment.Length}" Value="{Binding OffsetMeters}" />
                                                                                            </Grid>
                                                                                        </DockPanel>
                                                                                    </StackPanel>
                                                                                </Grid>
                                                                            </DataTemplate>
                                                                        </ItemsControl.ItemTemplate>
                                                                    </ItemsControl>

                                                                    <touch:TouchButton Command="{Binding RelativeSource={RelativeSource AncestorType=UserControl},Path=DataContext.AddBrushStopCommand}" CommandParameter="{Binding}" Background="Transparent" RippleBrush="{StaticResource TangoRippleDarkBrush}" FontWeight="Normal" Foreground="{StaticResource TangoPrimaryAccentBrush}" HorizontalAlignment="Left" EnableDropShadow="False" Margin="50 30 0 60">
                                                                        <StackPanel Orientation="Horizontal">
                                                                            <Grid Width="49" Height="49">
                                                                                <Rectangle Stroke="{StaticResource TangoPrimaryAccentBrush}" StrokeThickness="1" StrokeDashArray="5 5 5 5" RadiusX="5" RadiusY="5"></Rectangle>
                                                                                <fa:ImageAwesome Icon="Plus" Width="16" Height="16" Foreground="{StaticResource TangoPrimaryAccentBrush}" />
                                                                            </Grid>

                                                                            <TextBlock VerticalAlignment="Center" Margin="20 0 0 0">ADD COLOR</TextBlock>
                                                                        </StackPanel>
                                                                    </touch:TouchButton>
                                                                </StackPanel>
                                                            </Border>
                                                        </Grid>
                                                    </Border>
                                                </DataTemplate>
                                            </ItemsControl.ItemTemplate>
                                        </ItemsControl>

                                        <StackPanel HorizontalAlignment="Right" Style="{StaticResource Level2Container}" Orientation="Horizontal">
                                            <touch:TouchButton Command="{Binding AddSolidSegmentCommand}" FontWeight="Normal" RippleBrush="{StaticResource TangoRippleDarkBrush}" FontSize="{StaticResource TangoDefaultFontSize}" EnableDropShadow="False" Foreground="{StaticResource TangoPrimaryAccentBrush}" Width="170" CornerRadius="20" Padding="0 10" Background="Transparent" BorderThickness="2" BorderBrush="{StaticResource TangoPrimaryAccentBrush}">
                                                <StackPanel Orientation="Horizontal">
                                                    <fa:ImageAwesome Icon="Plus" Foreground="{StaticResource TangoPrimaryAccentBrush}" Width="16" Height="16" />
                                                    <TextBlock Margin="10 0 0 0">SOLID SEGMENT</TextBlock>
                                                </StackPanel>
                                            </touch:TouchButton>
                                            <touch:TouchButton Command="{Binding AddGradientSegmentCommand}" FontWeight="Normal" RippleBrush="{StaticResource TangoRippleDarkBrush}" FontSize="{StaticResource TangoDefaultFontSize}" Margin="30 0 0 0" EnableDropShadow="False" Foreground="{StaticResource TangoPrimaryAccentBrush}" Padding="0 10" Width="200" CornerRadius="20" Background="Transparent" BorderThickness="2">
                                                <touch:TouchButton.BorderBrush>
                                                    <LinearGradientBrush>
                                                        <GradientStop Offset="0" Color="{StaticResource TangoPrimaryAccentColor}" />
                                                        <GradientStop Offset="1" Color="#57F157" />
                                                    </LinearGradientBrush>
                                                </touch:TouchButton.BorderBrush>

                                                <StackPanel Orientation="Horizontal">
                                                    <fa:ImageAwesome Icon="Plus" Foreground="{StaticResource TangoPrimaryAccentBrush}" Width="16" Height="16" />
                                                    <TextBlock Margin="10 0 0 0">GRADIENT SEGMENT</TextBlock>
                                                </StackPanel>
                                            </touch:TouchButton>
                                        </StackPanel>

                                        <StackPanel Style="{StaticResource Level2ContainerExtraMargin}">
                                            <DockPanel LastChildFill="False">
                                                <touch:TouchCheckBox DockPanel.Dock="Left" HorizontalAlignment="Left" IsChecked="{Binding Job.EnableInterSegment}">Include white gap between segments</touch:TouchCheckBox>
                                                <StackPanel DockPanel.Dock="Right" Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0 0 5 0">
                                                    <TextBlock Margin="0 3 0 0" Foreground="{StaticResource TangoGrayTextBrush}">
                                                    <Run Text="Length (m):"></Run>
                                                    </TextBlock>

                                                    <touch:TouchNumericTextBox Foreground="{StaticResource TangoGrayTextBrush}" Margin="5 0 0 0" Width="50" HorizontalContentAlignment="Center" Maximum="1000" Value="{Binding Job.InterSegmentLength}" KeyboardContainer="{Binding ElementName=Container}" StringFormat="0" FocusSelectionMode="SelectAll" />

                                                    <Image Margin="10 0 0 0" Source="../Images/JobView/settings.png" />
                                                </StackPanel>
                                            </DockPanel>
                                        </StackPanel>

                                        <Rectangle Stroke="{StaticResource TangoDividerBrush}" Margin="0 30 0 0" />

                                        <StackPanel Orientation="Horizontal" VerticalAlignment="Center"  Style="{StaticResource Level1Container}">
                                            <Image Source="../Images/JobView/output.png" Width="39" />
                                            <TextBlock FontWeight="Medium" Margin="20 0 0 0" VerticalAlignment="Center" FontSize="{StaticResource TangoExpanderHeaderFontSize}">Output</TextBlock>
                                        </StackPanel>

                                        <DockPanel Style="{StaticResource Level2Container}">
                                            <TextBlock Text="Output spool (m):" VerticalAlignment="Center"></TextBlock>
                                            <touch:TouchComboBox ItemsSource="{Binding SpoolTypes}" SelectedItem="{Binding Job.SpoolType}" Margin="40 0 0 0" DisplayMemberPath="Name" Title="Select Output Spool" />
                                        </DockPanel>

                                        <DockPanel Style="{StaticResource Level2Container}">
                                            <TextBlock Text="Segments per spool:" VerticalAlignment="Center"></TextBlock>
                                            <touch:TouchToggleSlider Margin="30 0 0 0" BorderThickness="2" Height="38" Width="83" HorizontalAlignment="Left" UncheckedContent="One" CheckedContent="All" IsChecked="{Binding Job.IsAllSegmentsPerSpool}" />
                                        </DockPanel>
                                    </StackPanel>
                                </Grid>
                            </Border>

                            <Border Style="{StaticResource TangoTouchBorder}" Margin="0 20 0 0" Padding="0 0 0 50">
                                <StackPanel>
                                    <StackPanel Orientation="Horizontal" VerticalAlignment="Center"  Style="{StaticResource Level1Container}">
                                        <Image Source="../Images/JobView/job-summary.png" Width="39" />
                                        <TextBlock FontWeight="Medium" Margin="20 0 0 0" VerticalAlignment="Center" FontSize="{StaticResource TangoExpanderHeaderFontSize}">Job Summary</TextBlock>
                                    </StackPanel>

                                    <StackPanel Style="{StaticResource Level2ContainerExtraMargin}">
                                        <Grid>
                                            <localControls:JobSummeryViewer DataContext="{Binding Job}" />
                                        </Grid>

                                        <Grid Margin="0 30 0 0">
                                            <TextBlock>
                                                <Run Text="Job length (m):"></Run>
                                                <Run Text="{Binding Job.Length,Mode=OneWay}"></Run>
                                            </TextBlock>
                                        </Grid>
                                    </StackPanel>
                                </StackPanel>
                            </Border>

                            <Border Style="{StaticResource TangoTouchBorder}" Margin="0 12 0 120" Padding="0 0 0 40">
                                <StackPanel>
                                    <StackPanel Orientation="Horizontal" VerticalAlignment="Center"  Style="{StaticResource Level1Container}">
                                        <Image Source="../Images/JobView/additional-tools.png" Width="39" />
                                        <TextBlock FontWeight="Medium" Margin="20 0 0 0" VerticalAlignment="Center" FontSize="{StaticResource TangoExpanderHeaderFontSize}">Additional Tools</TextBlock>
                                    </StackPanel>

                                    <StackPanel Style="{StaticResource Level2Container}" HorizontalAlignment="Left">

                                        <DockPanel LastChildFill="False">
                                            <TextBlock Text="Make a sample dye" VerticalAlignment="Center"></TextBlock>
                                            <touch:TouchToggleSlider DockPanel.Dock="Right" Width="75" Style="{StaticResource TouchToggleButtonCheck}" Margin="30 0 0 0" Height="38" HorizontalAlignment="Left" />
                                        </DockPanel>

                                        <DockPanel Margin="0 25 0 0" LastChildFill="False">
                                            <TextBlock Text="Run color fine tuning" VerticalAlignment="Center"></TextBlock>
                                            <touch:TouchToggleSlider DockPanel.Dock="Right" Width="75" Style="{StaticResource TouchToggleButtonCheck}" Margin="30 0 0 0" Height="38" HorizontalAlignment="Left" />
                                        </DockPanel>
                                    </StackPanel>
                                </StackPanel>
                            </Border>
                        </StackPanel>
                    </StackPanel>
                </touch:LightTouchScrollViewer>
            </Grid>

            <Grid Grid.Row="1">
                <Grid IsHitTestVisible="False">
                <Grid.Background>
                    <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                        <GradientStop Offset="0" Color="#AEFFFFFF" />
                        <GradientStop Offset="1" Color="{StaticResource TangoPrimaryBackgroundColor}" />
                    </LinearGradientBrush>
                </Grid.Background>
                <Rectangle Stroke="{StaticResource TangoDividerBrush}" StrokeThickness="1" VerticalAlignment="Top" />
                </Grid>
                <Border Padding="20 20">
                    <Grid>
                        <DockPanel>
                            <touch:TouchButton DockPanel.Dock="Right" Height="54" Padding="0" Width="184" CornerRadius="30" BlurRadius="20" HorizontalAlignment="Right" Command="{Binding DyeCommand}">
                                DYE
                            </touch:TouchButton>

                            <!--Add this in case you want to display job summery on bottom panel-->
                            <!--<localControls:JobSummeryViewer DataContext="{Binding Job}" Height="35" Margin="0 -20 30 0" />-->
                        </DockPanel>
                    </Grid>
                </Border>
            </Grid>

            <dragAndDrop:DraggingSurface x:Name="DraggingSurface" />
        </Grid>

        <Border Padding="20" Background="{StaticResource TangoPrimaryBackgroundBrush}" BorderThickness="0 0 0 1" BorderBrush="{StaticResource TangoDividerBrush}">
            <Border.Effect>
                <DropShadowEffect Color="Silver" ShadowDepth="0" BlurRadius="20" Opacity="1" />
            </Border.Effect>

            <Grid>
                <TextBlock VerticalAlignment="Center" FontSize="{StaticResource TangoHeaderFontSize}" FontWeight="SemiBold" Text="{Binding Job.Name}"></TextBlock>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Bottom" Height="57" Margin="0 0 30 -45">
                    <touch:TouchButton Margin="0 0 30 0" Padding="15" Style="{StaticResource TangoRoundTouchButton}">
                        <Image Source="../Images/JobView/delete.png" />
                    </touch:TouchButton>
                    <touch:TouchButton Padding="20" Style="{StaticResource TangoRoundTouchButton}">
                        <Image Source="../Images/JobView/remove.png" />
                    </touch:TouchButton>
                </StackPanel>
            </Grid>
        </Border>
    </Grid>
</UserControl>