垂直排列的 ListBoxItem

Question

下面是我的 XAML 设计带选择的水平菜单的代码 highlight.I 实现了突出显示所选项目但每个项目显示项目采用完整设计

 <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>

预期菜单设计为

但是我把每个部分都一个一个垂直地作为

请指导我解决问题。

Answer 1

您应该将 ItemsPanelTemplate's Orientation 更改为 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>

垂直排列的 ListBoxItem

ListBoxItem in Vertically

xaml

listbox

windows-phone-8.1