Updated OrbitView design

CommunityToolkit · Apr 19, 2018 · b5e6d8f · b5e6d8f
1 parent db7ebf2
commit b5e6d8f
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 52 deletions.
diff --git a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/OrbitView/OrbitViewPage.xaml b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/OrbitView/OrbitViewPage.xaml
@@ -10,11 +10,6 @@
     <!-- Shallow Copy -->
     <Grid Visibility="Collapsed">
         <controls:OrbitView>
-            <controls:OrbitView.ItemTemplate>
-                <DataTemplate>
-                    <controls:DropShadowPanel/>
-                </DataTemplate>
-            </controls:OrbitView.ItemTemplate>
             <controls:OrbitView.ItemsSource>
                 <controls:OrbitViewDataItemCollection>
                     <controls:OrbitViewDataItem />

diff --git a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/OrbitView/OrbitViewXaml.bind b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/OrbitView/OrbitViewXaml.bind
@@ -15,17 +15,18 @@
                               AnchorColor="@[AnchorColor:Brush:Gray]"
                               AnchorsEnabled="@[AnchorsEnabled:Bool:false]"
                               IsItemClickEnabled="@[IsItemClickEnabled:Bool:true]"
-                              MinItemSize="@[MinItemSize:Slider:20:10-50]"
-                              MaxItemSize="@[MaxItemSize:Slider:60:50-100]"
+                              MinItemSize="@[MinItemSize:Slider:28:10-50]"
+                              MaxItemSize="@[MaxItemSize:Slider:40:40-100]"
+                              Height="400"
                               OrbitColor="@[OrbitColor:Brush:Gray]"
                               OrbitsEnabled="@[OrbitsEnabled:Bool:true]">
             <controls:OrbitView.ItemTemplate>
               <DataTemplate>
                 <controls:DropShadowPanel HorizontalContentAlignment="Stretch"
                                           VerticalContentAlignment="Stretch"
-                                          BlurRadius="20"
-                                          Color="Black">
-                  <Ellipse >
+                                          BlurRadius="6"
+                                          Color="{StaticResource SystemChromeBlackHighColor}">
+                  <Ellipse>
                     <Ellipse.Fill>
                       <ImageBrush ImageSource="{Binding Image}" />
                     </Ellipse.Fill>
@@ -35,41 +36,37 @@
             </controls:OrbitView.ItemTemplate>
             <controls:OrbitView.ItemsSource>
               <controls:OrbitViewDataItemCollection>
-                <controls:OrbitViewDataItem Diameter="0.2"
-                                            Distance="0.1"
+                <controls:OrbitViewDataItem Diameter="1"
+                                            Distance="0"
                                             Image="ms-appx:///Assets/People/shen.png"
                                             Label="Shen" />
-                <controls:OrbitViewDataItem Diameter="0.5"
-                                            Distance="0.2"
+                <controls:OrbitViewDataItem Diameter="0.66"
+                                            Distance="0.33"
                                             Image="ms-appx:///Assets/People/david.png"
                                             Label="David" />
-                <controls:OrbitViewDataItem Diameter="0.6"
-                                            Distance="0.4"
+                <controls:OrbitViewDataItem Diameter="0.33"
+                                            Distance="0.66"
                                             Image="ms-appx:///Assets/People/petri.png"
                                             Label="Petri" />
-                <controls:OrbitViewDataItem Diameter="0.8"
-                                            Distance="0.8"
+                <controls:OrbitViewDataItem Diameter="0"
+                                            Distance="1"
                                             Image="ms-appx:///Assets/People/vlad.png"
                                             Label="Vlad" />
               </controls:OrbitViewDataItemCollection>
             </controls:OrbitView.ItemsSource>
             <controls:OrbitView.CenterContent>
               <Grid>
-                <controls:DropShadowPanel>
-                  <Ellipse Width="105"
-                           Height="105"
-                           Fill="White"
-                           Stroke="Black"
-                           StrokeThickness="2" />
+                <controls:DropShadowPanel BlurRadius="24" 
+                                          Color="{StaticResource SystemChromeBlackHighColor}">
+                  <Ellipse Width="60"
+                           Height="60"
+                           HorizontalAlignment="Center"
+                           VerticalAlignment="Center">
+                    <Ellipse.Fill>
+                      <ImageBrush ImageSource="ms-appx:///Assets/People/nikola.png"/>
+                    </Ellipse.Fill>
+                  </Ellipse>
                 </controls:DropShadowPanel>
-                <Ellipse Width="100"
-                         Height="100"
-                         HorizontalAlignment="Center"
-                         VerticalAlignment="Center">
-                  <Ellipse.Fill>
-                    <ImageBrush ImageSource="ms-appx:///Assets/People/nikola.png"/>
-                  </Ellipse.Fill>
-                </Ellipse>
               </Grid>
             </controls:OrbitView.CenterContent>
           </controls:OrbitView>
@@ -104,21 +101,17 @@
               </controls:OrbitView.ItemTemplate>
               <controls:OrbitView.CenterContent>
                 <Grid>
-                  <controls:DropShadowPanel>
-                    <Ellipse Width="105"
-                             Height="105"
-                             Fill="White"
-                             Stroke="Black"
-                             StrokeThickness="2" />
+                  <controls:DropShadowPanel BlurRadius="24"
+                                            Color="{StaticResource SystemChromeBlackHighColor}">
+                    <Ellipse Width="60"
+                             Height="60"
+                             HorizontalAlignment="Center"
+                             VerticalAlignment="Center">
+                      <Ellipse.Fill>
+                        <ImageBrush ImageSource="ms-appx:///Assets/People/nikola.png"/>
+                      </Ellipse.Fill>
+                    </Ellipse>
                   </controls:DropShadowPanel>
-                  <Ellipse Width="100"
-                           Height="100"
-                           HorizontalAlignment="Center"
-                           VerticalAlignment="Center">
-                    <Ellipse.Fill>
-                      <ImageBrush ImageSource="ms-appx:///Assets/People/nikola.png" />
-                    </Ellipse.Fill>
-                  </Ellipse>
                 </Grid>
               </controls:OrbitView.CenterContent>
             </controls:OrbitView>

diff --git a/Microsoft.Toolkit.Uwp.UI.Controls/OrbitView/OrbitView.cs b/Microsoft.Toolkit.Uwp.UI.Controls/OrbitView/OrbitView.cs
@@ -618,7 +618,7 @@ private Line CreateAnchor(UIElement element, double x, double y)
             {
                 X1 = 0,
                 Y1 = 0,
-                X2 = 100,
+                X2 = 80,
                 Y2 = 0
             };
 
@@ -661,7 +661,7 @@ private Line CreateAnchor(UIElement element, double x, double y)
             var offsetExpression = ExpressionFunctions.Vector3(centerNode.Offset.X + (centerNode.Size.X / 2), centerNode.Offset.Y + (centerNode.Size.Y / 2), 0);
             anchorVisual.StartAnimation(nameof(anchorVisual.Offset), offsetExpression);
 
-            var scaleExpression = ExpressionFunctions.Vector3(ExpressionFunctions.Pow(ExpressionFunctions.Pow(elementX - centerX, 2) + ExpressionFunctions.Pow(elementY - centerY, 2), 0.5f) / 100, 1, 1);
+            var scaleExpression = ExpressionFunctions.Vector3(ExpressionFunctions.Pow(ExpressionFunctions.Pow(elementX - centerX, 2) + ExpressionFunctions.Pow(elementY - centerY, 2), 0.5f) / 80, 1, 1);
             anchorVisual.StartAnimation(nameof(anchorVisual.Scale), scaleExpression);
 
             return anchor;

diff --git a/Microsoft.Toolkit.Uwp.UI.Controls/OrbitView/OrbitView.xaml b/Microsoft.Toolkit.Uwp.UI.Controls/OrbitView/OrbitView.xaml
@@ -5,9 +5,9 @@
     <Style TargetType="local:OrbitView">
         <Setter Property="IsFocusEngagementEnabled" Value="True" />
         <Setter Property="UseSystemFocusVisuals" Value="True" />
-        <Setter Property="AnchorColor" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
-        <Setter Property="OrbitColor" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
-        <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
+        <Setter Property="AnchorColor" Value="{ThemeResource SystemControlForegroundBaseMediumLowBrush}" />
+        <Setter Property="OrbitColor" Value="{ThemeResource SystemControlForegroundBaseMediumHighBrush}" />
+        <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundChromeBlackHighBrush}" />
         <Setter Property="Background" Value="{ThemeResource SystemControlBackgroundAltHighBrush}" />
         <Setter Property="ItemsPanel">
             <Setter.Value>

diff --git a/Microsoft.Toolkit.Uwp.UI.Controls/OrbitView/OrbitViewPanel.cs b/Microsoft.Toolkit.Uwp.UI.Controls/OrbitView/OrbitViewPanel.cs
@@ -99,7 +99,7 @@ protected override Size ArrangeOverride(Size finalSize)
         {
             var angle = 2 * Math.PI / Children.Count;
 
-            var minDistance = 100;
+            var minDistance = 80;
             var maxDistance = Math.Max(minDistance, (Math.Min(finalSize.Width, finalSize.Height) - OrbitView.MaxItemSize) / 2);
 
             var elementsProperties = new List<OrbitViewElementProperties>();