Windowscommunitytoolkit: Radial Items Control

[nmetulev]

Where items are arranged in a circle with configurable distance and size. It should allow to specify the center element. It should provide options to display orbits or lines from the center element.

This control can be useful for creating a social or device graph.

UserVoice: https://wpdev.uservoice.com/forums/110705-universal-windows-platform/suggestions/19201840-create-a-radial-items-control

Code:

<controls:SpaceView x:Name="people" OrbitsEnabled="True" IsItemClickEnabled="True" MinItemSize="10" MaxItemSize="100">
    <controls:SpaceView.ItemTemplate>
        <DataTemplate x:DataType="controls:SpaceViewItem">
            <Grid Height="60" Width="60">
                <controls:DropShadowPanel Color="Black" BlurRadius="20" VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch">
                    <Ellipse >
                        <Ellipse.Fill>
                            <ImageBrush ImageSource="{x:Bind Image}"></ImageBrush>
                        </Ellipse.Fill>
                    </Ellipse>
                </controls:DropShadowPanel>
            </Grid>
        </DataTemplate>
    </controls:SpaceView.ItemTemplate>
    <controls:SpaceView.ItemsSource>
        <controls:SpaceViewItemCollection>
            <controls:SpaceViewItem Image="ms-appx:///Assets/People/shen.png" Distance="0.1" Label="Shen"></controls:SpaceViewItem>
            <controls:SpaceViewItem Image="ms-appx:///Assets/People/david.png" Distance="0.2" Label="David"></controls:SpaceViewItem>
            <controls:SpaceViewItem Image="ms-appx:///Assets/People/petri.png" Distance="0.4" Label="Petri"></controls:SpaceViewItem>
            <controls:SpaceViewItem Image="ms-appx:///Assets/People/vlad.png" Distance="0.8" Label="Vlad"></controls:SpaceViewItem>
        </controls:SpaceViewItemCollection>
    </controls:SpaceView.ItemsSource>
    <controls:SpaceView.CenterContent>
        <Grid>
            <controls:DropShadowPanel>
                <Ellipse Fill="White" Height="105" Width="105" Stroke="Black" StrokeThickness="2"></Ellipse>
            </controls:DropShadowPanel>
            <Ellipse Height="100" Width="100" VerticalAlignment="Center" HorizontalAlignment="Center">
                <Ellipse.Fill>
                    <ImageBrush ImageSource="ms-appx:///Assets/People/nikola.png"></ImageBrush>
                </Ellipse.Fill>
            </Ellipse>
        </Grid>
    </controls:SpaceView.CenterContent>
</controls:SpaceView>

Screenshots:

[skendrot]

Could this be used like the android FAB with radial options?

[nmetulev]

I can see that happening with few changes to the existing implementation. Maybe adding a property to collapse and open the control, and properties for specifying the start and end angle for where items can be layed out.