ApplicationBar与ListBox内部的可滚动项重叠 [英] ApplicationBar overlaps the scrollable items inside of the ListBox

问题描述

你好，

我有一个枢轴页面，其中包含具有ListBox和透明ApplicationBar的枢轴项目. ApplicationBar与ListBox的滚动列表重叠，问题是ListBox不会自动调整臀部列表的大小，因此滚动中的最后一项 列表不会与ApplicationBar重叠.

我不确定ListBox是否应自动调整滚动列表，但是我已经看到很多应用程序(例如Skype)使用带有透明ApplicationBars的滚动列表，但是列表中的最后一项显示在栏上方.我不知道我在做什么错 或正确的方法.

这就是我的PivotItem的样子:

Hello,

I got a Pivot page with pivot items with a ListBox and a transparent ApplicationBar. The ApplicationBar overlaps the scrolling list of the ListBox, the problem is, the ListBox does not automatically adjust the buttom list size so that the last item in the scrolling list will not get overlaped by the ApplicationBar.

I'm not sure if the ListBox should adjust the scroll list automatically, but I've seen lots of apps (ex. Skype) using scrolling lists with transparent ApplicationBars but the last item in the list gets displayed above the bar. I don't know what I'm doing wrong, or how to do it right.

So this is how my PivotItem looks like:

<controls:PivotItem>
                <controls:PivotItem.Header>
                    <StackPanel Margin="-10,0,10,0">
                        <TextBlock Text="{Binding Path=LocalizedResources.HeaderLatest, Source={StaticResource LocalizedStrings}}"/>
                    </StackPanel>
                </controls:PivotItem.Header>
                <Grid>
                    <TextBlock x:Name="LatestPageLoading" HorizontalAlignment="Left" Foreground="Gray" FontSize="26" FontWeight="Normal"/>
                    <ListBox Width="455" HorizontalAlignment="Left" Name="LatestList" VerticalAlignment="Top" SelectionChanged="LatestList_SelectionChanged" Style="{StaticResource TUCaNListBoxStyle}">
                        <ListBox.ItemContainerStyle>
                            <Style TargetType="ListBoxItem">
                                <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                            </Style>
                        </ListBox.ItemContainerStyle>
                        <ListBox.ItemTemplate>
                            <DataTemplate>
                                <StackPanel x:Name="stackPanelLatestList" Margin="0,0,0,15" Orientation="Vertical">
                                    <TextBlock HorizontalAlignment="Left" Text="{Binding Title}" TextWrapping="Wrap" VerticalAlignment="Top" FontSize="35" FontWeight="Normal" Foreground="#FF99A619" />
                                    <StackPanel Orientation="Vertical" Margin="0,0,0,5" HorizontalAlignment="Left" Background="White" Hold="StackPanel_Hold">
                                        <toolkit:ContextMenuService.ContextMenu>
                                            <toolkit:ContextMenu>
                                                <toolkit:MenuItem Header="{Binding PinItem}"  Click="LatestContextMenuItem_Click"/>
                                                <toolkit:MenuItem Header="{Binding DeleteItem}"  Click="LatestContextMenuItem_Click"/>
                                            </toolkit:ContextMenu>
                                        </toolkit:ContextMenuService.ContextMenu>
                                        <TextBlock HorizontalAlignment="Left" Foreground="Black" FontSize="25" Text="{Binding Subject}" TextWrapping="Wrap" FontWeight="Bold" />
                                        <StackPanel Orientation="Vertical" HorizontalAlignment="Left">
                                            <TextBlock Margin="0,0,10,0" FontSize="20" Text="{Binding Sender}" TextWrapping="Wrap" Foreground="Black"/>
                                            <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
                                                <TextBlock Margin="0,0,10,0" FontSize="20" Text="{Binding Date}" TextWrapping="Wrap" Foreground="Black"/>
                                            </StackPanel>
                                        </StackPanel>
                                    </StackPanel>
                                </StackPanel>
                            </DataTemplate>
                        </ListBox.ItemTemplate>
                    </ListBox>
                </Grid>
            </controls:PivotItem>

这些是ListBox的自定义样式，它只是覆盖默认的滚动条颜色:

And these are the custom styles of the ListBox, it just overrides the default scroll bar color:

<Style x:Key="ScrollViewerStyle1" TargetType="ScrollViewer">
            <Setter Property="VerticalScrollBarVisibility" Value="Auto"/>
            <Setter Property="HorizontalScrollBarVisibility" Value="Disabled"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="Padding" Value="0"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="BorderBrush" Value="Transparent"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ScrollViewer">
                        <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="ScrollStates">
                                    <VisualStateGroup.Transitions>
                                        <VisualTransition GeneratedDuration="00:00:00.5"/>
                                    </VisualStateGroup.Transitions>
                                    <VisualState x:Name="Scrolling">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="VerticalScrollBar"/>
                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="HorizontalScrollBar"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="NotScrolling"/>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Grid Margin="{TemplateBinding Padding}">
                                <ScrollContentPresenter x:Name="ScrollContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}"/>
                                <ScrollBar x:Name="VerticalScrollBar" HorizontalAlignment="Right" Height="Auto" IsHitTestVisible="False" IsTabStop="False" Maximum="{TemplateBinding ScrollableHeight}" Minimum="0" Opacity="0" Orientation="Vertical" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{TemplateBinding VerticalOffset}" ViewportSize="{TemplateBinding ViewportHeight}" VerticalAlignment="Stretch" Width="5" Background="#FF99A616"/>
                                <ScrollBar x:Name="HorizontalScrollBar" HorizontalAlignment="Stretch" Height="5" IsHitTestVisible="False" IsTabStop="False" Maximum="{TemplateBinding ScrollableWidth}" Minimum="0" Opacity="0" Orientation="Horizontal" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Value="{TemplateBinding HorizontalOffset}" ViewportSize="{TemplateBinding ViewportWidth}" VerticalAlignment="Bottom" Width="Auto"/>
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="TUCaNListBoxStyle" TargetType="ListBox">
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
            <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
            <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="BorderBrush" Value="Transparent"/>
            <Setter Property="Padding" Value="0"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBox">
                        <ScrollViewer x:Name="ScrollViewer" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Foreground="{TemplateBinding Foreground}" Padding="{TemplateBinding Padding}" Style="{StaticResource ScrollViewerStyle1}" >

                            <ItemsPresenter/>
                        </ScrollViewer>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

这就是我初始化ApplicationBar的方式:

And this is how I initialize the ApplicationBar:

private void InitializeApplicationBar()
        {
            // application bar initializations
            ApplicationBar = new ApplicationBar();
            ApplicationBar.IsVisible = true;
            ApplicationBar.IsMenuEnabled = true;
            ApplicationBar.Mode = ApplicationBarMode.Default;
            ApplicationBar.Opacity = 0.8;
            ApplicationBar.BackgroundColor = Color.FromArgb(255, 153, 166, 25);
            ApplicationBar.ForegroundColor = Colors.White;

            // add refresh button
            ApplicationBarIconButton RefreshButton = new ApplicationBarIconButton(new Uri("/Images/appbar.refresh.rest.png", UriKind.Relative));
            RefreshButton.Text = RefreshButtonTitleLocalized;
            ApplicationBar.Buttons.Add(RefreshButton);
            RefreshButton.Click += (sender, e) =>
            {
                if (!App.Property.NewLoginRequest && !App.Property.SessionExpired && !App.Property.IPChanged)
                    UpdateHomePageContent();
                else
                    GetHomePageContent();

                currentWeekSelection = CalendarPickerCurrentWeekLocalized;
                CalendarPicker.SelectedItem = CalendarPickerCurrentWeekLocalized;
            };

            // add settings menu item
            ApplicationBarMenuItem SettingsMenuItem = new ApplicationBarMenuItem(SettingsMenuTitleLocalized);
            ApplicationBar.MenuItems.Add(SettingsMenuItem);
            SettingsMenuItem.Click += (sender, e) =>
            {
                NavigationService.Navigate(new Uri("//Views/SettingsPage.xaml", UriKind.Relative));
            };

            // add logout menu item
            ApplicationBarMenuItem LogoutMenuItem = new ApplicationBarMenuItem(LogoutMenuTitleLocalized);
            ApplicationBar.MenuItems.Add(LogoutMenuItem);
            LogoutMenuItem.Click += (sender, e) =>
            {
                NavigationService.Navigate(new Uri("/LoginPage.xaml", UriKind.Relative));
            };

            bool opacityChanged = false;
            ApplicationBar.StateChanged += (sender, e) =>
            {
                if (!opacityChanged)
                {
                    ApplicationBar.Opacity = 1.0;
                    opacityChanged = true;
                }
                else
                {
                    ApplicationBar.Opacity = 0.8;
                    opacityChanged = false;
                }
            };
        }

如果有人可以暗示我，我会非常着迷的.

If anyone could hint me, I would be very appriciated it.

推荐答案

您当前正在以编程方式添加ApplicationBar.您可以尝试最初在XAML中进行设置.

You are currently adding the ApplicationBar programmatically. You could try setting it up initially in the XAML.

http://msdn.microsoft.com/zh-cn/library/windowsphone/develop/hh394040(v = vs.105).aspx

更多ApplicationBar提示:

More ApplicationBar tips:

Microsoft Press电子书:Wi​​ndows Phone 7编程

希望这会有所帮助，
标记

Hope this helps,
Mark

这篇关于ApplicationBar与ListBox内部的可滚动项重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！