How can i make a list like Razer Game Booster in wpf C#

Question

Hello every one
I asked this question in stackoverflow, and they just gave me negative points! I don't know why,
but at least
I expected to get answer in here.
I trying to make a software with WPF in C# that the theme is
similar to Razer Game Booster.
I made many effect similar to
Razer Game Booster in my software but I don't Know how can i make a list like that software!
You can download Razer Game Booster in this link: http://www.razerzone.com/cortex/download
Now, What exactly i want?! I'll show you with following pics:
After adding a few items, a scroll bar will appear and if you do nothing, it will be hidden after a few seconds:
Image link: http://imgur.com/XIl3Bk9
After placing the mouse on the items (on hover status):
Image link: http://imgur.com/8NbUrIx
Which one of objects in visual C# and WPF Application can do this?!
if you interested to see what I've done, unfortunately I tried it and
failed! Now I asking you to help me and show me how can i do that?
any advice can help me. I'm waiting for your answer.
thank you guys so much.
I'm sorry
if I bothering you.

Answer 1

There are probably 1000's of tutorial about layout in WPF but I have found that the people on this forum have the best handle on how to use WPF.  I am now near a workstation and have the following code example which should get you started. (the example
is in VB but it is the XAML which is important).
<Window x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525" Loaded="Window_Loaded">
<Window.Resources>
<Style TargetType="ListBox" x:Key="myListbox" >
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Hidden"></Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Visible" ></Setter>
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid Background="#FF040404">
<ListBox Style="{StaticResource myListbox }"
HorizontalAlignment="Left" Height="237" Margin="23,46,0,0"
VerticalAlignment="Top" Width="470"
ItemsSource="{Binding theList}" Background="Transparent" >
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Rows="2"></UniformGrid>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Background="#FF574A4A" Width="150" Height="75" Margin="0,0,10,0" >
<TextBlock Text="{Binding theCaption}" VerticalAlignment="Bottom" Foreground="#FFF5EFEF"></TextBlock>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Window>
Class MainWindow
Public Property theList As New List(Of theItem)
Private Sub Window_Loaded(sender As Object, e As RoutedEventArgs)
For i As Integer = 0 To 5
Dim ti As New theItem With {.theCaption = "Caption " + i.ToString}
theList.Add(ti)
Next
DataContext = Me
End Sub
End Class
Public Class theItem
Public Property theCaption As String
End Class
The above XAML define a listbox with the properties I mentioned in my previous post.  There is a listbox with an ItemTemplate (define how each item should be displayed) and a definition of how the layout
should be done (ItemsPanel).  The is also a style which uses datatriggers to show/hide your scrollbar.  If you have questions about what I presented please ask but I would ask that you try it first so that you can see how it looks .
And I'm sorry for the small font above but this forum editor constantly give me problems.
Lloyd Sheen