ListBoxItem in Vertically - xaml

Question

Below is my XAML code to design the horizontal menu with selection highlight.I achieved the highlighting the selected item but each item displays item take the full design
<ListBox x:Name="ListboxTest" ItemsSource="{Binding ScheduleScreenItems}" Background="Gray" ScrollViewer.HorizontalScrollBarVisibility="Hidden" SelectionChanged="ListboxTest_SelectionChanged" ScrollViewer.VerticalScrollBarVisibility="Disabled" SelectionMode="Single">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected">
<Storyboard>
<ColorAnimation Duration="0" Storyboard.TargetName="myback" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="Transparent"/>
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedUnfocused">
<Storyboard>
<ColorAnimation Duration="0" Storyboard.TargetName="myback" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="Red"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="myback" Background="Transparent">
<ContentPresenter Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel >
<TextBlock Text="{Binding DayName}" FontFamily="Times New Roman" FontWeight="SemiBold" Height="25" TextAlignment="Center" Padding="0 0 0 0" Margin="0 0 0 0" Width="100" FontSize="18" Foreground="White" HorizontalAlignment="Center"/>
<TextBlock Text="{Binding Date}" FontWeight="SemiBold" FontSize="18" Margin="0 10 0 0" Foreground="White" HorizontalAlignment="Center" />
<Line X1="0" Y1="-70" X2="0" Y2="50"
Stroke="White"
StrokeThickness="2" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Expected Menu design as
But i am getting each section one by one verticaly as
Please guide me to solve issue.

Answer 1

You should change the ItemsPanelTemplate's Orientation to Horizontal
<ListBox ItemsSource="{Binding ListTest}" ScrollViewer.HorizontalScrollMode="Enabled" ScrollViewer.HorizontalScrollBarVisibility="Visible"
ScrollViewer.VerticalScrollMode="Disabled"
x:Name="MyListView">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected">
<Storyboard>
<ColorAnimation Duration="0" Storyboard.TargetName="myback" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="Transparent"/>
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedUnfocused">
<Storyboard>
<ColorAnimation Duration="0" Storyboard.TargetName="myback" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="Red"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="myback" Background="Transparent">
<ContentPresenter Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate >
<StackPanel Orientation="Vertical" >
<TextBlock Text="{Binding Name}"/>
<Line X1="0" Y1="-70" X2="0" Y2="50"
Stroke="White"
StrokeThickness="2" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>