<UserControl x:Class="Tango.TransportRouter.UI.Views.MainView"
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:converters="clr-namespace:Tango.SharedUI.Converters;assembly=Tango.SharedUI"
xmlns:mahapps="http://metro.mahapps.com/winfx/xaml/controls"
xmlns:fa="http://schemas.fontawesome.io/icons/"
xmlns:local="clr-namespace:Tango.TransportRouter.UI.Views"
mc:Ignorable="d"
d:DesignHeight="170" d:DesignWidth="545" Background="#202020">
<UserControl.Resources>
<SolidColorBrush Color="#42C300" x:Key="on"></SolidColorBrush>
<converters:BooleanToVisibilityInverseConverter x:Key="BooleanToVisibilityInverseConverter"></converters:BooleanToVisibilityInverseConverter>
<converters:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"></converters:BooleanToVisibilityConverter>
</UserControl.Resources>
<Grid>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="73*"/>
</Grid.RowDefinitions>
<Grid>
<StackPanel Orientation="Horizontal">
<Image Source="/Images/router.png" RenderOptions.BitmapScalingMode="Fant"></Image>
<TextBlock VerticalAlignment="Bottom" Margin="10 0 0 3" FontStyle="Italic" FontSize="20" Foreground="Silver">Tango Transport Router</TextBlock>
</StackPanel>
<Rectangle VerticalAlignment="Bottom" HorizontalAlignment="Stretch" Height="2">
<Rectangle.Fill>
<LinearGradientBrush>
<GradientStop Color="Transparent" Offset="0.1" />
<GradientStop Color="#FFFFE800" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Grid>
<Grid Grid.Row="1">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Grid>
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Top" Margin="10" Foreground="Yellow" FontSize="16" FontWeight="Bold">USB</TextBlock>
<Grid Width="100" Height="40" Background="DimGray">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Ellipse Grid.Column="0" Width="16" Height="16">
<Ellipse.Style>
<Style TargetType="Ellipse">
<Setter Property="Fill" Value="Black"></Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding TcpOn}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation BeginTime="00:00:0.15" Storyboard.TargetProperty="Fill.Color" From="Black" To="Lime" Duration="00:00:0.05" AutoReverse="True"></ColorAnimation>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
<DataTrigger Binding="{Binding UsbOn}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation BeginTime="00:00:0.0" Storyboard.TargetProperty="Fill.Color" From="Black" To="Lime" Duration="00:00:0.05" AutoReverse="True"></ColorAnimation>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Ellipse.Style>
</Ellipse>
<Ellipse Grid.Column="1" Width="16" Height="16">
<Ellipse.Style>
<Style TargetType="Ellipse">
<Setter Property="Fill" Value="Black"></Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding TcpOn}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation BeginTime="00:00:0.10" Storyboard.TargetProperty="Fill.Color" From="Black" To="Lime" Duration="00:00:0.05" AutoReverse="True"></ColorAnimation>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
<DataTrigger Binding="{Binding UsbOn}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation BeginTime="00:00:0.05" Storyboard.TargetProperty="Fill.Color" From="Black" To="Lime" Duration="00:00:0.05" AutoReverse="True"></ColorAnimation>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Ellipse.Style>
</Ellipse>
<Rectangle Grid.Column="1" Width="18" Height="24" HorizontalAlignment="Right" Margin="0 0 -18 0" Fill="DimGray"></Rectangle>
<Rectangle Grid.Column="0" Width="18" Height="24" HorizontalAlignment="Left" Margin="-18 0 0 0" Fill="DimGray"></Rectangle>
</Grid>
<ComboBox Visibility="{Binding IsStarted,Converter={StaticResource BooleanToVisibilityInverseConverter}}" ItemsSource="{Binding UsbPorts}" SelectedItem="{Binding SelectedUsbPort,Mode=TwoWay}" VerticalAlignment="Bottom" VerticalContentAlignment="Center" FontSize="12" Foreground="Yellow" BorderThickness="0" Background="Transparent" HorizontalAlignment="Center" Width="100" Margin="10"></ComboBox>
</Grid>
<Grid Grid.Column="1">
<Button Cursor="Hand" Width="90" Height="90" Style="{DynamicResource MetroCircleButtonStyle}" mahapps:ButtonHelper.PreserveTextCase="True" BorderThickness="0" Command="{Binding ToggleStartStopCommand}">
<StackPanel Orientation="Horizontal">
<fa:ImageAwesome Icon="PowerOff" Width="80" Height="80" Cursor="Hand">
<fa:ImageAwesome.Style>
<Style TargetType="fa:ImageAwesome">
<Setter Property="Foreground" Value="DimGray"></Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding IsStarted}" Value="True">
<Setter Property="Foreground" Value="#49C906"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</fa:ImageAwesome.Style>
</fa:ImageAwesome>
</StackPanel>
</Button>
</Grid>
<Grid Grid.Column="2">
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Top" Margin="10" Foreground="Yellow" FontSize="16" FontWeight="Bold">TCP</TextBlock>
<Grid Width="100" Height="40" Background="DimGray">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Ellipse Grid.Column="0" Width="16" Height="16">
<Ellipse.Style>
<Style TargetType="Ellipse">
<Setter Property="Fill" Value="Black"></Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding TcpOn}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation BeginTime="00:00:0.05" Storyboard.TargetProperty="Fill.Color" From="Black" To="Lime" Duration="00:00:0.05" AutoReverse="True"></ColorAnimation>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
<DataTrigger Binding="{Binding UsbOn}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation BeginTime="00:00:0.10" Storyboard.TargetProperty="Fill.Color" From="Black" To="Lime" Duration="00:00:0.05" AutoReverse="True"></ColorAnimation>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Ellipse.Style>
</Ellipse>
<Ellipse Grid.Column="1" Width="16" Height="16">
<Ellipse.Style>
<Style TargetType="Ellipse">
<Setter Property="Fill" Value="Black"></Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding TcpOn}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetProperty="Fill.Color" From="Black" To="Lime" Duration="00:00:0.05" AutoReverse="True"></ColorAnimation>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
<DataTrigger Binding="{Binding UsbOn}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation BeginTime="00:00:0.15" Storyboard.TargetProperty="Fill.Color" From="Black" To="Lime" Duration="00:00:0.05" AutoReverse="True"></ColorAnimation>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Ellipse.Style>
</Ellipse>
<Rectangle Grid.Column="0" Width="18" Height="24" HorizontalAlignment="Left" Margin="-18 0 0 0" Fill="DimGray"></Rectangle>
<Rectangle Grid.Column="1" Width="18" Height="24" HorizontalAlignment="Right" Margin="0 0 -18 0" Fill="DimGray"></Rectangle>
</Grid>
<TextBlock Visibility="{Binding IsWaitingForTCP,Converter={StaticResource BooleanToVisibilityConverter}}" VerticalAlignment="Bottom" Text="Waiting for connection..." HorizontalAlignment="Center" Margin="20" Foreground="DimGray">
<TextBlock.Style>
<Style TargetType="TextBlock">
<Style.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity" From="0" To="1" AutoReverse="True" Duration="00:00:0.2" RepeatBehavior="Forever"></DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
</UserControl>
