PathListBox in SL4 – firstlook

PathListBox is new in SL4 and  is in Microsoft.Expression.Controls.dll. It makes Path based layout easy. We could make nice menu buttons with little bit more styling to remove border of the listbox, the highlight color etc

The top part of the above image is just a plain listbox with items laid out horizontally

   <ListBox x:Name=”list1″ Margin=”30″ Grid.Row=”0″>
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation=”Horizontal”/>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
        </ListBox>

The second listbox starts with the same, but uses PathListBox in the ItemTemplate.

<ListBox x:Name=”list2″ Margin=”30″ Grid.Row=”1″ FontSize=”8″>
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation=”Horizontal”/>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid  Margin=”15,0,15,0″>
                        <ec:PathListBox Margin=”0,0,0,0″ ItemsSource=”{Binding}” FontSize=”9.333″ ItemTemplate=”{StaticResource DataTemplate1}” FontWeight=”Bold” >
                            <ec:PathListBox.LayoutPaths>
                                <ec:LayoutPath   SourceElement=”{Binding ElementName=path}” Distribution=”Even” Start=”.8″   Orientation=”OrientToPath” Padding=”0″ Span=”0.5″ />
                            </ec:PathListBox.LayoutPaths>
                        </ec:PathListBox>
                        <Ellipse Width=”40″ Height=”40″ x:Name=”path” HorizontalAlignment=”Right” Margin=”0,25,0,0″>
                         <Ellipse.Fill>
                          <LinearGradientBrush EndPoint=”0.5,1″ StartPoint=”0.5,0″>
                           <GradientStop Color=”Black” Offset=”1″/>
                           <GradientStop Color=”White”/>
                          </LinearGradientBrush>
                         </Ellipse.Fill>
                        </Ellipse>
                    </Grid>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

 We start with placing a PathListbox, seting the itemssource to whatever string we are bound to and assigning it a LayoutPath which in this case is an ellipse and set few properties on the LayoutPath to customize the appearance.

Here is the codebehind to set the ItemsSource of the listbox

list2.ItemsSource = list1.ItemsSource = Enumerable.Range(0, 5).Select(x => “Option” + x.ToString());

Advertisements

4 thoughts on “PathListBox in SL4 – firstlook

    1. Sorry about that, the following should do
      <DataTemplate x:Key=”DataTemplate1″>
      <TextBlock Text=”{Binding}” Margin=”0,0,0,10″/>
      </DataTemplate>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s