How to rotate Items in a WFP Listbox style ?

Answer 1

To get the items to rotate, you should look at using Transforms. The one that is most relevant in this case is the Rotate Transform, also to give it that random scattered apperance, we can use an ObjectDataProvider and generate our angles somewhere else.

I don't know VB, but the only C# involved in this is pretty simple, and should be easily transferable.

Lets just use something simple like Colors, which can easily be switched over to image resource paths. Here we've got an ObservableCollection of our Colors, and also a separate class that we will use to generate angles, all it's going to do is return a number between 0 and 360, which we will use to rotate each item.

public partial class Window1 : Window
{
 public Window1()
 {
  InitializeComponent();

  Colors = new ObservableCollection<string>();
  Colors.Add("Red");
  Colors.Add("Blue");
  Colors.Add("Green");
  Colors.Add("Yellow");

  this.DataContext = this;
 }

 public ObservableCollection<string> Colors
 {
  get;
  set;
 }
}

public class AngleService
{
 private static Random rand = new Random();

 public int GetAngle()
 {
  return rand.Next(0, 90);
 }
}

In the XAML, we can now create a resource that can be used to generate the angles.

<Window.Resources>
 <local:AngleService x:Key="Local_AngleService" />
 <ObjectDataProvider x:Key="Local_AngleProvider"
      x:Shared="False"
      ObjectInstance="{StaticResource Local_AngleService}"
      MethodName="GetAngle" />
</Window.Resources>

Now, we just need to create something to display our items. We can put them in a ListBox and add a data template to set the background for each color item, as well as apply the RotateTransform.

<ListBox ItemsSource="{Binding Colors}"
   VerticalContentAlignment="Center"
   HorizontalContentAlignment="Center">
 <ListBox.ItemTemplate>
  <DataTemplate>
   <Border x:Name="uiItemBorder"
     BorderBrush="Black"
     BorderThickness="2"
     CornerRadius="3"
     Background="{Binding}"
     Width="50"
     Height="50">
    <TextBlock Text="{Binding}"
         VerticalAlignment="Center"
         HorizontalAlignment="Center" />
    <Border.RenderTransform>
     <RotateTransform Angle="{Binding Source={StaticResource Local_AngleProvider}}" />
    </Border.RenderTransform>
   </Border>
  </DataTemplate>
 </ListBox.ItemTemplate>
</ListBox>

The UI still needs a bit of work from there, but that should help out with the rotation of the items.