locked
Wrappanel with ItemsControl will not Orientate Horizontally RRS feed

  • Question

  • I have a nav menu that's just a Silverlight control with a wrappanel. It pulls correctly from a List of menu items. It aligns everything vertically no matter what properties I try.

        <StackPanel x:Name="LayoutRoot" Background="Red" Orientation="Horizontal">	
            <ItemsControl 
                    x:Name="navMenuControl"
                    ItemsSource="{Binding NavMenu}">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
    		<controlsToolkit:WrapPanel>
                        <Button Background="Blue" Content="{Binding Title}" />
    		</controlsToolkit:WrapPanel>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </StackPanel>
    Thanks for any info, Freddie
    Friday, April 9, 2010 4:03 AM

Answers

  • So first the reasons what you have doesn't work, to hopefully help with your understanding of templating :)

     

    • The StackPanel orientation would apply to items in the stackpanel, you only have 1 item in the stackpanel, the ItemsControl
    • The WrapPanel would apply to all of its children, but it only has 1 child, the button, you actually end up with an itemscontrol that is full of individual wrap panels each holding 1 item.

    There are probably a few ways to do what you want.  The simplest is to right click your items control, select "Edit Additional Templates" -> "ItemsPanel".  This is the template that lays out the individually templated items.  By default this will give you a stackpanel, which you can now select and set its orientation to horizontal.

     

    It looks like this in xaml:

    <UserControl.Resources>
    		<DataTemplate x:Key="ItemTemplate2">
    			<StackPanel>
    				<TextBlock Text="{Binding Title}"/>
    			</StackPanel>
    		</DataTemplate>
    		<ItemsPanelTemplate x:Key="ItemsPanelTemplate1">
    			<StackPanel Orientation="Horizontal" Margin="-317,0,0,0"/>
    		</ItemsPanelTemplate>
    	</UserControl.Resources>
    
    	<Grid x:Name="LayoutRoot" Background="White" DataContext="{Binding Source={StaticResource SampleDataSource}}">
    		<ItemsControl Height="188" HorizontalAlignment="Right" Margin="0,8,0,0" VerticalAlignment="Top" Width="297" ItemTemplate="{StaticResource ItemTemplate2}" ItemsSource="{Binding Collection}" ItemsPanel="{StaticResource ItemsPanelTemplate1}"/>
    	</Grid>

     

    Friday, April 9, 2010 1:22 PM
    Moderator

All replies

  • So first the reasons what you have doesn't work, to hopefully help with your understanding of templating :)

     

    • The StackPanel orientation would apply to items in the stackpanel, you only have 1 item in the stackpanel, the ItemsControl
    • The WrapPanel would apply to all of its children, but it only has 1 child, the button, you actually end up with an itemscontrol that is full of individual wrap panels each holding 1 item.

    There are probably a few ways to do what you want.  The simplest is to right click your items control, select "Edit Additional Templates" -> "ItemsPanel".  This is the template that lays out the individually templated items.  By default this will give you a stackpanel, which you can now select and set its orientation to horizontal.

     

    It looks like this in xaml:

    <UserControl.Resources>
    		<DataTemplate x:Key="ItemTemplate2">
    			<StackPanel>
    				<TextBlock Text="{Binding Title}"/>
    			</StackPanel>
    		</DataTemplate>
    		<ItemsPanelTemplate x:Key="ItemsPanelTemplate1">
    			<StackPanel Orientation="Horizontal" Margin="-317,0,0,0"/>
    		</ItemsPanelTemplate>
    	</UserControl.Resources>
    
    	<Grid x:Name="LayoutRoot" Background="White" DataContext="{Binding Source={StaticResource SampleDataSource}}">
    		<ItemsControl Height="188" HorizontalAlignment="Right" Margin="0,8,0,0" VerticalAlignment="Top" Width="297" ItemTemplate="{StaticResource ItemTemplate2}" ItemsSource="{Binding Collection}" ItemsPanel="{StaticResource ItemsPanelTemplate1}"/>
    	</Grid>

     

    Friday, April 9, 2010 1:22 PM
    Moderator
  • edit: When I previous tried it the datasource was also a static resource. It worked, Thanks!

    I've tried this and will try it again tonight but since my data soruce is dynamic (based on the INotifyPropertyChanged interface) and not a static list it didn't update when the list changed and the OnPropertyChanged was called.

     Thanks, Freddie

    Friday, April 9, 2010 7:47 PM