水平列表框无法滚动 Windows Phone 8.1 WP8.1

Horizontal ListBox unable to scroll Windows Phone 8.1 WP8.1

我在我的 WP8.1 应用程序 (WinRT) 中遇到 ListBox 问题,我无法使其水平滚动。 5 张图片适合屏幕,第 6 张之后的所有图片都被裁剪掉了。 我尝试在列表框周围添加 ScrollViewer,在 ItemsPanelTemplate 周围添加 ListBox,但没有任何效果。 这是我的 xaml 代码

    <ListBox x:Name="AppBarMenu"
         Grid.Row="1"
         Canvas.ZIndex="1"
         ScrollViewer.HorizontalScrollBarVisibility="Auto"
         Background="{StaticResource BackgroundColorApp}"
         ItemTemplate="{StaticResource StackMenuItem}"
         ItemsSource="{Binding}"
         Style="{StaticResource ListBoxHorizontal}"
         ItemContainerStyle="{StaticResource ListBoxContainerStylePP}"
         Foreground="{StaticResource TBColorNonSelected}"
         SelectedIndex="{Binding SelectedIndex, ElementName=PetProtectorFrames, Mode=TwoWay}"
         Height="0"
         VerticalAlignment="Top"
         SelectionChanged="AppBarMenu_SelectionChanged"
         ScrollViewer.VerticalScrollBarVisibility="Disabled">

     </ListBox>

这是 ItemsPanelTemplate

的模板
<Style x:Key="ListBoxHorizontal"
       TargetType="ListBox">
    <Setter Property="BorderThickness"
            Value="0" />
    <Setter Property="ItemsPanel">
        <Setter.Value>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal"
                            VerticalAlignment="Center"
                            HorizontalAlignment="Center" />
            </ItemsPanelTemplate>
        </Setter.Value>
    </Setter>
</Style>

我尝试添加 VirtualizationStackpanel 而不是堆栈面板作为 ItemsPanemTemplate,但它的作用是一样的。当我尝试设置 属性 CanHorizontallyScroll=true 时,我得到两个错误,第一个是这个 属性 在 VirtualizationStackpanel 中不存在,然后删除这个 属性 并再次返回,我收到错误 Syntax Error found in XBF generation。 我试着自己寻找解决方案,看这里,用谷歌搜索,但我找不到解决方案。有人可以帮我弄这个吗?我用它搞了 2 天。

更新:

列表框位于网格内,设置如下:

    <Grid x:Name="MainGrid">
    <Grid.RowDefinitions>
        <RowDefinition Height="0.091*" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="0.01*" />
        <RowDefinition Height="0.9*" />

    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

第二行高度设置为自动,因为我正在设置列表框高度的动画。列表框充当应用栏,当我按下应用栏上的按钮时,列表框显示包含菜单项。

解决方案更新:

受 SWilko 提供的解决方案的启发,我也设法通过对 'ListBox' 进行更多配置来解决我的问题,因此对我以前的代码的修复如下所示:

    <ListBox x:Name="AppBarMenu"
     Grid.Row="1"
     Canvas.ZIndex="1"
     ScrollViewer.HorizontalScrollMode="Enabled"
     ScrollViewer.HorizontalScrollBarVisibility="Visible"
     ScrollViewer.VerticalScrollBarVisibility="Disabled"
     ScrollViewer.VerticalScrollMode="Disabled"
     Background="{StaticResource BackgroundColorApp}"
     ItemTemplate="{StaticResource StackMenuItem}"
     ItemsSource="{Binding}"
     Style="{StaticResource ListBoxHorizontal}"
     ItemContainerStyle="{StaticResource ListBoxContainerStylePP}"
     Foreground="{StaticResource TBColorNonSelected}"
     SelectedIndex="{Binding SelectedIndex, ElementName=PetProtectorFrames, Mode=TwoWay}"
     Height="0"
     VerticalAlignment="Top"
     SelectionChanged="AppBarMenu_SelectionChanged">

 </ListBox>

所有应该做的就是禁用垂直滚动并启用水平滚动。

首先是您的 ListBox 的高度设置为 0,但假设这可能是打字错误:)

这是一个 ListBox 水平滚动的简单示例。

Item.cs

public class Item
{
    public string Name { get; set; }
}

MainPage.xaml.cs构造函数

public MainPage()
    {
        this.InitializeComponent();

        this.NavigationCacheMode = NavigationCacheMode.Required;

        var list = new List<Item>
        {
            new Item { Name = "Item 1" },
            new Item { Name = "Item 2" },
            new Item { Name = "Item 3" },
            new Item { Name = "Item 4" },
            new Item { Name = "Item 5" },
            new Item { Name = "Item 6" },
            new Item { Name = "Item 7" },
            new Item { Name = "Item 8" }
        };

        this.AppBarMenu.ItemsSource = list;
    }

MainPage.xaml

 <Grid>
    <ScrollViewer
    ScrollViewer.HorizontalScrollMode="Enabled"
    ScrollViewer.HorizontalScrollBarVisibility="Visible"
    ScrollViewer.VerticalScrollBarVisibility="Disabled"
    ScrollViewer.VerticalScrollMode="Disabled">
        <ListBox x:Name="AppBarMenu"
            ScrollViewer.HorizontalScrollBarVisibility="Disabled"
            ScrollViewer.VerticalScrollBarVisibility="Disabled"
                 Height="100"
            VerticalAlignment="Top">
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Name}" Foreground="Red" 
                           FontSize="30"/>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </ScrollViewer>
</Grid>

注意 ListBox scrollviewer 被禁用并且 ScrollViewer 环绕它。 希望你能适应你的代码