Implemented Twine Catalog Control.

Implemented TouchStaticListBox.
Added Scrollbar visibility, GetMostVisibleElement, Scrolling event - to LightTouchScrollviewer.

2 files changed, 105 insertions, 12 deletions

diff --git a/Software/Visual_Studio/PPC/Tango.PPC.Common/Controls/TwineCatalogControl.xaml b/Software/Visual_Studio/PPC/Tango.PPC.Common/Controls/TwineCatalogControl.xaml
index 142e1a10c..cc28bfddb 100644
--- a/Software/Visual_Studio/PPC/Tango.PPC.Common/Controls/TwineCatalogControl.xaml
+++ b/Software/Visual_Studio/PPC/Tango.PPC.Common/Controls/TwineCatalogControl.xaml
@@ -15,27 +15,64 @@
                 <ColumnDefinition Width="1*"/>
                 <ColumnDefinition Width="100"/>
             </Grid.ColumnDefinitions>
-            
-            <touch:TouchListBox ItemsSource="{Binding Groups}" x:Name="list">
+
+            <touch:TouchListBox ItemsSource="{Binding Groups}" x:Name="list" DisableRipple="True" ScrollBarVisibility="Collapsed" SelectionMode="None">
                 <touch:TouchListBox.ItemTemplate>
                     <DataTemplate>
                         <StackPanel>
                             <TextBlock HorizontalAlignment="Center" Text="{Binding Name}"></TextBlock>
-                            <ItemsControl ItemsSource="{Binding Items}" Margin="0 20 0 40">
-                                <ItemsControl.ItemsPanel>
+                            <touch:TouchStaticListBox ItemsSource="{Binding Items}" SelectedItem="{Binding RelativeSource={RelativeSource AncestorType=UserControl},Path=SelectedItem}" Margin="0 20 0 40">
+                                <touch:TouchStaticListBox.ItemsPanel>
                                     <ItemsPanelTemplate>
                                         <WrapPanel Orientation="Horizontal" />
                                     </ItemsPanelTemplate>
-                                </ItemsControl.ItemsPanel>
-                                <ItemsControl.ItemTemplate>
+                                </touch:TouchStaticListBox.ItemsPanel>
+                                <touch:TouchStaticListBox.ItemContainerStyle>
+                                    <Style TargetType="{x:Type touch:TouchListBoxItem}">
+                                        <Setter Property="RenderTransformOrigin" Value="0.5,0.5"></Setter>
+                                        <Setter Property="RenderTransform">
+                                            <Setter.Value>
+                                                <ScaleTransform ScaleX="1" ScaleY="1" />
+                                            </Setter.Value>
+                                        </Setter>
+                                        <Setter Property="Effect">
+                                            <Setter.Value>
+                                                <DropShadowEffect Color="{StaticResource TangoDarkForegroundColor}" ShadowDepth="0" BlurRadius="20" Opacity="0" />
+                                            </Setter.Value>
+                                        </Setter>
+                                        <Style.Triggers>
+                                            <DataTrigger Binding="{Binding RelativeSource={RelativeSource Self},Path=IsSelected}" Value="True">
+                                                <DataTrigger.EnterActions>
+                                                    <BeginStoryboard>
+                                                        <Storyboard>
+                                                            <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX" To="1.5" Duration="00:00:0.2" />
+                                                            <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY" To="1.5" Duration="00:00:0.2" />
+                                                            <DoubleAnimation Storyboard.TargetProperty="Effect.Opacity" To="1" Duration="00:00:0.2" />
+                                                        </Storyboard>
+                                                    </BeginStoryboard>
+                                                </DataTrigger.EnterActions>
+                                                <DataTrigger.ExitActions>
+                                                    <BeginStoryboard>
+                                                        <Storyboard>
+                                                            <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX" To="1" Duration="00:00:0.2" />
+                                                            <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY" To="1" Duration="00:00:0.2" />
+                                                            <DoubleAnimation Storyboard.TargetProperty="Effect.Opacity" To="0" Duration="00:00:0.2" />
+                                                        </Storyboard>
+                                                    </BeginStoryboard>
+                                                </DataTrigger.ExitActions>
+                                            </DataTrigger>
+                                        </Style.Triggers>
+                                    </Style>
+                                </touch:TouchStaticListBox.ItemContainerStyle>
+                                <touch:TouchStaticListBox.ItemTemplate>
                                     <DataTemplate>
                                         <StackPanel Margin="10">
                                             <Ellipse Width="60" Height="60" Fill="{Binding Brush}" />
                                             <TextBlock Margin="0 5 0 0" HorizontalAlignment="Center" Text="{Binding Name}"></TextBlock>
                                         </StackPanel>
                                     </DataTemplate>
-                                </ItemsControl.ItemTemplate>
-                            </ItemsControl>
+                                </touch:TouchStaticListBox.ItemTemplate>
+                            </touch:TouchStaticListBox>
                         </StackPanel>
                     </DataTemplate>
                 </touch:TouchListBox.ItemTemplate>
@@ -79,10 +116,10 @@
                     </Border>
 
                     <Grid Grid.Column="1">
-                        <touch:TouchSlider ValueChanged="TouchSlider_ValueChanged" IsSnapToTickEnabled="True" Minimum="0" Maximum="{Binding Groups.Count,Converter={StaticResource MathOperatorConverter},ConverterParameter='-1'}" Orientation="Vertical" Width="40" Height="Auto" IsSelectionRangeEnabled="False">
+                        <touch:TouchSlider x:Name="slider" ValueChanged="TouchSlider_ValueChanged" IsSnapToTickEnabled="True" Minimum="0" Maximum="{Binding Groups.Count,Converter={StaticResource MathOperatorConverter},ConverterParameter='-1'}" Orientation="Vertical" Width="40" Height="Auto" IsSelectionRangeEnabled="False">
                             <touch:TouchSlider.ThumbTemplate>
                                 <ControlTemplate>
-                                    <touch:TouchIcon Width="40" Height="40" Icon="Water" Angle="-90" />
+                                    <touch:TouchIcon Foreground="{Binding RelativeSource={RelativeSource AncestorType=touch:TouchSlider},Path=Foreground}" Width="40" Height="40" Icon="Water" Angle="-90" />
                                 </ControlTemplate>
                             </touch:TouchSlider.ThumbTemplate>
                         </touch:TouchSlider>
diff --git a/Software/Visual_Studio/PPC/Tango.PPC.Common/Controls/TwineCatalogControl.xaml.cs b/Software/Visual_Studio/PPC/Tango.PPC.Common/Controls/TwineCatalogControl.xaml.cs
index ad1c8b50c..2b376e855 100644
--- a/Software/Visual_Studio/PPC/Tango.PPC.Common/Controls/TwineCatalogControl.xaml.cs
+++ b/Software/Visual_Studio/PPC/Tango.PPC.Common/Controls/TwineCatalogControl.xaml.cs
@@ -22,24 +22,80 @@ namespace Tango.PPC.Common.Controls
     public partial class TwineCatalogControl : UserControl
     {
         private Catalog _catalog;
+        private bool _loaded;
+        private bool _preventChange;
+
+        public CatalogItem SelectedItem
+        {
+            get { return (CatalogItem)GetValue(SelectedItemProperty); }
+            set { SetValue(SelectedItemProperty, value); }
+        }
+        public static readonly DependencyProperty SelectedItemProperty =
+            DependencyProperty.Register("SelectedItem", typeof(CatalogItem), typeof(TwineCatalogControl), new PropertyMetadata(null,(d,e) => (d as TwineCatalogControl).OnSelectedItemChanged()));
 
         public TwineCatalogControl()
         {
             InitializeComponent();
+
             Loaded += TwineCatalogControl_Loaded;
             DataContextChanged += (x, y) => { _catalog = DataContext as Catalog; };
         }
 
+        private void ScrollViewer_Scrolling(object sender, Touch.Controls.DoubleValueChangedEventArgs e)
+        {
+            if (!_preventChange)
+            {
+                var group = list.ScrollViewer.GetMostVisibleElementDataContext<CatalogGroup>();
+
+                if (group != null)
+                {
+                    _preventChange = true;
+                    slider.Value = slider.Maximum - _catalog.Groups.IndexOf(group);
+                    _preventChange = false;
+                }
+            }
+        }
+
         private void TwineCatalogControl_Loaded(object sender, RoutedEventArgs e)
         {
-            
+            if (!_loaded)
+            {
+                list.ScrollViewer.Scrolling += ScrollViewer_Scrolling;
+
+                _preventChange = true;
+                slider.Value = slider.Maximum;
+                _preventChange = false;
+                _loaded = true;
+            }
         }
 
         private void TouchSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
         {
+            if (!_preventChange)
+            {
+                if (_catalog != null)
+                {
+                    _preventChange = true;
+                    list.ScrollToItem(_catalog.Groups.ElementAt(_catalog.Groups.Count - 1 - (int)e.NewValue));
+                    _preventChange = false;
+                }
+            }
+
             if (_catalog != null)
             {
-                list.ScrollToItem(_catalog.Groups.ElementAt(_catalog.Groups.Count - 1 - (int)e.NewValue));
+                slider.Foreground = new SolidColorBrush(_catalog.Groups.ElementAt(_catalog.Groups.Count - 1 - (int)e.NewValue).Color);
+            }
+        }
+
+        private void OnSelectedItemChanged()
+        {
+            if (!_preventChange)
+            {
+                _preventChange = true;
+                var item = SelectedItem;
+                SelectedItem = null;
+                SelectedItem = item;
+                _preventChange = false;
             }
         }
     }