Display ListViewItems as Circles

Question

What's the best way to display items in a listview as circles? I want to embed the name of the item within the circle.

Do I use a ItemContainerStyle?

I assume I use a controltemplate. However, I'm confused as I consider its relationship with the ItemContainerStyle.

What's wrong with the following code?

<ListView ItemsSource="{Binding Contacts}" 
          CanDragItems="True" DragItemsStarting="OnDragItemStarting">
    <ListViewItem  Style="{StaticResource ContactsListItemStyle}"  />
    <ListView.ItemTemplate>
        <DataTemplate>
            <Grid>
                <ContentControl Content="{Binding DisplayName}">
                    <ContentControl.Template>
                        <ControlTemplate>
                            <ContentControl>
                                <Grid>
                                    <Ellipse Fill="LightGray" Height="50" Width="50" />
                                    <Viewbox>
                                        <ContentControl Margin="20" Content="{TemplateBinding Content}" />
                                    </Viewbox>
                                </Grid>
                            </ContentControl>
                        </ControlTemplate>
                    </ContentControl.Template>
                </ContentControl>
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

[This](http://stackoverflow.com/a/22325266/1136211) should be helpful. Replace Rectangles by Ellipses (or Paths with EllipseGeometries). — Clemens, Jul 28 '14 at 14:18
Do you mean you want the LIST to display in a circular layout? Or each individual ITEM within the list to be displayed in a circle of sorts? If the entire list to be in a circle, you need to create a new ItemsPanel on your own. If the latter, this would be a part of your ItemTemplate as mentioned — Tim Heuer, Jul 28 '14 at 15:19
I want each individual item within the list to be displayed as a circle. — Scott Nimrod, Jul 28 '14 at 18:43

score 1 · Accepted Answer · answered Jul 28 '14 at 19:35

The following XAML works:

<Page.Resources>
       <ControlTemplate x:Key="ContentControlTemplate" TargetType="ContentControl">
            <ContentControl>
                <Grid>
                    <Ellipse Fill="LightGray" Height="200" Width="200" />
                    <Viewbox>
                        <ContentControl Margin="20" Content="{TemplateBinding Content}" />
                    </Viewbox>
                </Grid>
            </ContentControl>
        </ControlTemplate>
</Page.Resources>

        <ListView ItemsSource="{Binding Contacts}" 
                  CanDragItems="True" DragItemsStarting="OnDragItemStarting">
            <ListViewItem  Style="{StaticResource ContactsListItemStyle}"  />
            <ListView.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <ContentControl Template="{StaticResource ContentControlTemplate}" 
                                        Content="{Binding DisplayName}" />
                    </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

Display ListViewItems as Circles

1 Answers1