# Other .NET Programming > Windows Presentation Foundation (WPF) & XAML forum >  WPF ListBox with stackpanel

## originalmoose

I have a WPF application that is using Prism regions. I have a listbox declared as a region with a stackpanel as the itemspaneltemplate. The problem I am having is the items are being arranged vertically one on top of the other. I believe the issue is due to the list items being the fill width of the available space but I am not to sure. I have also tried using a wrappanel and it gives the same result.


```
<ListBox Name="MainMenuListBox" prism:RegionManager.RegionName="{x:Static inf:RegionNames.MainMenu}">
    <ListBox.ItemsPanel>           
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal"  IsItemsHost="True" />
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
</ListBox>
```

There are two modules which load a ListBoxItem into the MainMenu region. They are both practically the same except they use a different image and different text. For that reason I will only post code for one. Here is the view


```
<ListBoxItem x:Class="MovieModule.View.MainMenuButton"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" Style="{DynamicResource MovieMainMenuItemStyle}" Content="{Binding ButtonText}" />
```

And here is the corresponding style and template.


```
<Style x:Key="MovieMainMenuItemStyle" TargetType="ListBoxItem">
        <Setter Property="FocusVisualStyle" Value="{DynamicResource NuclearButtonFocusVisual}" />
        <Setter Property="Background" Value="{DynamicResource NormalBrush}" />
        <Setter Property="Foreground" Value="{DynamicResource TextBrush}" />
        <Setter Property="BorderBrush" Value="{DynamicResource NormalBorderBrush}" />
        <Setter Property="Margin" Value="20,0,20,0" />
        <Setter Property="Template" Value="{DynamicResource MovieMainMenuItemTemplate}" />
    </Style>

    <ControlTemplate x:Key="MovieMainMenuItemTemplate" TargetType="{x:Type ListBoxItem}">
        <ControlTemplate.Resources>
            <Storyboard x:Key="HoverOn">
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="HoverShineBorder"
                                               Storyboard.TargetProperty="(UIElement.Opacity)">
                    <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1" />
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="HoverBorder"
                                               Storyboard.TargetProperty="(UIElement.Opacity)">
                    <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1" />
                </DoubleAnimationUsingKeyFrames>

            </Storyboard>
            <Storyboard x:Key="HoverOff">
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="HoverShineBorder"
                                               Storyboard.TargetProperty="(UIElement.Opacity)">
                    <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0" />
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="HoverBorder"
                                               Storyboard.TargetProperty="(UIElement.Opacity)">
                    <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0" />
                </DoubleAnimationUsingKeyFrames>

            </Storyboard>
            <Storyboard x:Key="PressedOn">

                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="PressedBorder"
                                               Storyboard.TargetProperty="(UIElement.Opacity)">
                    <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1" />
                </DoubleAnimationUsingKeyFrames>

            </Storyboard>
            <Storyboard x:Key="PressedOff">

                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="PressedBorder"
                                               Storyboard.TargetProperty="(UIElement.Opacity)">
                    <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0" />
                </DoubleAnimationUsingKeyFrames>

            </Storyboard>
            <Storyboard x:Key="FocusedOn">
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="FocusVisualElement"
                                               Storyboard.TargetProperty="(UIElement.Opacity)">
                    <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1" />
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
            <Storyboard x:Key="FocussedOff">
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="FocusVisualElement"
                                               Storyboard.TargetProperty="(UIElement.Opacity)">
                    <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0" />
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>

        </ControlTemplate.Resources>
        <Grid x:Name="Grid" Width="250" Height="250" Margin="10" >
            <Border x:Name="Background" Background="{TemplateBinding Background}"
                    BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="3" />
            <Border x:Name="HoverBorder" Opacity="0" Background="{StaticResource HoverBrush}"
                    BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="3" />
            <Border x:Name="HoverShineBorder" Opacity="0" Background="{StaticResource HoverShineBrush}"
                    BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="3" />
            <Border x:Name="PressedBorder" Opacity="0" BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="3" Background="{StaticResource PressedBrush}" />
            <Border x:Name="ShineBorder" BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="3" Background="{StaticResource ShineBrush}"
                    Opacity="1" />

            <StackPanel Margin="30,10,30,0" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Orientation="Vertical"
                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}" >
                <Image Stretch="UniformToFill" HorizontalAlignment="Left">
                    <Image.Source>
                        <BitmapImage UriSource="Images/movieIcon.png" />
                    </Image.Source>
                </Image>
                <TextBlock Margin="0,20,0,10" Text ="{TemplateBinding Content}" TextAlignment="Center"/>

            </StackPanel>
            <Border x:Name="FocusVisualElement" IsHitTestVisible="false" BorderBrush="{StaticResource HoverShineBrush}"
                    BorderThickness="1" CornerRadius="3,3,3,3" Margin="1,1,1,1" Opacity="0" />
        </Grid>
        <ControlTemplate.Triggers>
            <Trigger Property="IsSelected" Value="true">
                <Setter TargetName="Background" Property="Effect" >
                    <Setter.Value>
                        <DropShadowEffect Color="Red" BlurRadius="5" ShadowDepth="0" />
                    </Setter.Value>
                </Setter>
            </Trigger>
            <Trigger Property="IsKeyboardFocused" Value="true">
                <Trigger.ExitActions>
                    <BeginStoryboard Storyboard="{StaticResource FocussedOff}" x:Name="FocussedOff_BeginStoryboard" />
                </Trigger.ExitActions>
                <Trigger.EnterActions>
                    <BeginStoryboard Storyboard="{StaticResource FocusedOn}" x:Name="FocusedOn_BeginStoryboard" />
                </Trigger.EnterActions>

            </Trigger>
            <Trigger Property="IsMouseOver" Value="true">
                <Trigger.ExitActions>
                    <BeginStoryboard Storyboard="{StaticResource HoverOff}" x:Name="HoverOff_BeginStoryboard" />
                </Trigger.ExitActions>
                <Trigger.EnterActions>
                    <BeginStoryboard Storyboard="{StaticResource HoverOn}" />
                </Trigger.EnterActions>

            </Trigger>
            <Trigger Property="IsEnabled" Value="true" />
            <Trigger Property="IsEnabled" Value="false">
                <Setter Property="Background" Value="{DynamicResource DisabledBackgroundBrush}" TargetName="Background" />
                <Setter Property="BorderBrush" Value="{DynamicResource DisabledBorderBrush}" TargetName="ShineBorder" />
                <Setter Property="Opacity" TargetName="Grid" Value="0.5" />
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
```

----------

