1. 程式人生 > >UWP 軌道視圖Orbit View

UWP 軌道視圖Orbit View

技術 大量 cor title red ooo vco AI unity

先看一下效果

技術分享圖片

這是我的Music Tags App裏面的效果圖,當然你也可以做的比我的更炫。

其實這個效果的實現來自於控件UWP Community Toolkit的OrbitView,所以大家要多看看這個啊,裏面大量好用的控件,只是UWP這情況,所以大家都沒什麽興趣了。

不過不管需不需要,了解一下還是有好處的。

下面先看一下我的Xaml代碼

<controls:OrbitView x:Name="orbitView"
                              AnchorColor="Gray"
                              AnchorsEnabled
="False" Background="Transparent" IsItemClickEnabled="True" MinItemSize="50" MaxItemSize="100" OrbitColor="LightGray" OrbitsEnabled
="True" ItemClick="orbitView_ItemClick"> <controls:OrbitView.ItemTemplate> <DataTemplate> <Grid> <Grid.RowDefinitions> <
RowDefinition Height="*"/> <!-- Have this space to keep image centered on line --> <!--<RowDefinition Height="2*"/> <RowDefinition Height="*"/>--> </Grid.RowDefinitions> <controls:DropShadowPanel x:Name="DropShadowPanel" HorizontalContentAlignment="Stretch" HorizontalAlignment="Center" VerticalContentAlignment="Stretch" BlurRadius="20" Color="Black" Grid.Row="1"> <Ellipse Stretch="Uniform" VerticalAlignment="Stretch" HorizontalAlignment="Center" Width="{Binding ActualHeight, ElementName=DropShadowPanel}"> <Ellipse.Fill> <ImageBrush ImageSource="{Binding Image}" /> </Ellipse.Fill> </Ellipse> </controls:DropShadowPanel> </Grid> </DataTemplate> </controls:OrbitView.ItemTemplate> <controls:OrbitView.CenterContent> <Grid> <controls:DropShadowPanel BlurRadius="20"> <Ellipse Width="105" Height="105" Fill="{ThemeResource SystemControlForegroundAccentBrush}" Stroke="Black" StrokeThickness="0" /> </controls:DropShadowPanel> <Ellipse Width="100" Height="100" HorizontalAlignment="Center" VerticalAlignment="Center"> <Ellipse.Fill> <ImageBrush ImageSource="ms-appx:///Assets/Square44x44Logo.scale-400.png"/> </Ellipse.Fill> </Ellipse> </Grid> </controls:OrbitView.CenterContent> </controls:OrbitView>

同其他控件一樣,軌道視圖的模板也是可以自定義的,在 OrbitView.ItemTemplate 裏面

而在 OrbitView.CenterContent ,可以定義中心的圖標,就是:

技術分享圖片

後臺cs代碼:

try
            {
                double[] arr1 = { 0.1, 0.4, 0.3, 0.15, 0.45, 0.2, 0.5 };
                double[] arr2 = { 0.1, 0.4, 0.3, 0.45, 0.8, 0.15, 0.7, 0.2, 0.9, 0.5, 0.6, 0.1, 0.6, 0.4, 0.5, 0.8, 0.3, 0.9, 0.1, 0.5 };
                for (int i = 0; i <= (Application.Current as App).MusicItems.Count - 1; i++)
                {
                    ID3Tag item = (Application.Current as App).MusicItems[i];
                    BitmapImage bi = new BitmapImage();
                    bi = (BitmapImage)item.Cover;
                    OrbitViewDataItem ooo = new OrbitViewDataItem
                    {
                        Diameter = arr1[i % 7],
                        Distance = arr2[i % 20],
                        Image = item.Cover,
                        Label = item.Title,
                    };

                    ovcOrbit.Add(ooo);
                }
                orbitView.ItemsSource = ovcOrbit;
            }
            catch { }

很簡單,指定每一個 OrbitViewDataItem 的半徑,距離中心的距離,圖片,標簽即可。

我的情況是,涉及到的個數多,所以在一個軌道上可能有多個Item,用了預先設定好的數組。

自己用的時候要根據實際情況定。

UWP 軌道視圖Orbit View