WPF GridView horizontal scrolling not working

weixin_30553777

于 2009-11-04 11:38:00 发布

阅读量82

点赞数

原文链接：http://www.cnblogs.com/javak/archive/2009/11/04/1595841.html

版权

GridView horizontal scrolling not working, help!

Hi all,

When a ListView/GridView isn't bound yet, or holds no data, then the scrollviewer doesn't seem to do its work.

I added a small example, if you run it, you will see that the scrollbar is inactive, BUT there is still a column outside the visible listview.

Q: How can I make the horizontal scrollbar also work when the data is empty?
Does anyone know how to fix this or why it's happening?

Example:

 
      <Window x:Class="Window1" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Title="Window1" Height="300" Width="300">  
    <Grid> 
        <ListView Grid.Row="0" Grid.ColumnSpan="4" ScrollViewer.HorizontalScrollBarVisibility="Visible">  
            <ListView.View> 
                <GridView> 
                    <GridViewColumn Header="Date" /> 
                    <GridViewColumn Header="Name"/>  
                    <GridViewColumn Header="Comment" /> 
                    <GridViewColumn Header="Commentdsgfdfgfdshgsfdhgsghsg" /> 
                    <GridViewColumn Header="Comdsqgdfgerrfement" /> 
                </GridView> 
            </ListView.View> 
        </ListView> 
    </Grid> 
</Window> 
 
     

Answers

Hi,

I'm afraid I have no idea why the scrollbar is disabled when there are no items present within the list. However, this looks like a fun challenge!

I have a solution to your problem .. it has a few quirks but might be what you are looking for.

If you inspect the ControlTemplate of the listView through Mole, or from this page:

http://msdn.microsoft.com/en-us/library/ms788747.aspx

You will see that the general layout is defined in a style with the key, {x:Static GridView.GridViewScrollViewerStyleKey}. From inspecting the template you can see that it contains a ScrollContentPresenter which renders your grid of items and also a GridViewHeaderRowPresenter which renders your column headers. The GridViewHeaderRowPresenteris within its own ScrollViewer where the horizontal and vertical scroll bars are disabled.

If you enable the horizontal scrollbar for the column headings you achieve the effect you desire, however you will find that you now have two scrollbars, one for the column headings and one for the content!

What I did was create a value converter that inspects the ListView.Items property to determine whether the header scrollbar and the items scrollbar should be visible or not.

Here is the modified style:

 
       <Style x:Key="{x:Static GridView.GridViewScrollViewerStyleKey}" TargetType="ScrollViewer"> 
    <Setter Property="Template"> 
        <Setter.Value> 
            <ControlTemplate TargetType="ScrollViewer"> 
                <Grid Background="{TemplateBinding Background}"> 
                    <Grid.ColumnDefinitions> 
                        <ColumnDefinition Width="*"/> 
                        <ColumnDefinition Width="Auto"/> 
                    </Grid.ColumnDefinitions> 
                    <Grid.RowDefinitions> 
                        <RowDefinition Height="*"/> 
                        <RowDefinition Height="Auto"/> 
                    </Grid.RowDefinitions> 
 
                    <DockPanel Margin="{TemplateBinding Padding}"> 
                                <ScrollViewer DockPanel.Dock="Top" 
                                HorizontalScrollBarVisibility="{Binding Path=TemplatedParent, Converter={StaticResource HeaderScrollbarVisibilityConverter}, RelativeSource={RelativeSource TemplatedParent}}" 
                                VerticalScrollBarVisibility="Hidden" Focusable="false"> 
                                    <GridViewHeaderRowPresenter DockPanel.Dock="Top" Margin="2,0,2,0" 
                                        Columns="{Binding Path=TemplatedParent.View.Columns, 
                                                  RelativeSource={RelativeSource TemplatedParent}}" 
                                        ColumnHeaderContainerStyle="{Binding 
                                                     Path=TemplatedParent.View.ColumnHeaderContainerStyle, 
                                                     RelativeSource={RelativeSource TemplatedParent}}" 
                                        ColumnHeaderTemplate="{Binding 
                                                     Path=TemplatedParent.View.ColumnHeaderTemplate, 
                                                     RelativeSource={RelativeSource TemplatedParent}}" 
                                        ColumnHeaderTemplateSelector="{Binding  
                                                     Path=TemplatedParent.View.ColumnHeaderTemplateSelector, 
                                                     RelativeSource={RelativeSource TemplatedParent}}" 
                                        AllowsColumnReorder="{Binding 
                                                     Path=TemplatedParent.View.AllowsColumnReorder, 
                                                     RelativeSource={RelativeSource TemplatedParent}}" 
                                        ColumnHeaderContextMenu="{Binding 
                                                     Path=TemplatedParent.View.ColumnHeaderContextMenu, 
                                                     RelativeSource={RelativeSource TemplatedParent}}" 
                                        ColumnHeaderToolTip="{Binding 
                                                     Path=TemplatedParent.View.ColumnHeaderToolTip, 
                                                     RelativeSource={RelativeSource TemplatedParent}}" 
                                        SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/> 
                                </ScrollViewer> 
 
                        <ScrollContentPresenter Name="PART_ScrollContentPresenter" 
                              KeyboardNavigation.DirectionalNavigation="Local" 
                              CanContentScroll="True" CanHorizontallyScroll="False"  
                              CanVerticallyScroll="False"/> 
                    </DockPanel> 
 
                    <ScrollBar Name="PART_HorizontalScrollBar" 
                        Orientation="Horizontal" 
                        Grid.Row="1" 
                        Maximum="{TemplateBinding ScrollableWidth}" 
                        ViewportSize="{TemplateBinding ViewportWidth}" 
                        Value="{TemplateBinding HorizontalOffset}" 
                        > 
                        <ScrollBar.Visibility> 
                            <MultiBinding Converter="{StaticResource ContentScrollbarVisible}"> 
                                <Binding Path="TemplatedParent" RelativeSource="{RelativeSource TemplatedParent}"/> 
                                <Binding Path="ComputedHorizontalScrollBarVisibility" RelativeSource="{RelativeSource TemplatedParent}"/> 
                            </MultiBinding> 
                        </ScrollBar.Visibility>                                 
                    </ScrollBar> 
 
                    <ScrollBar Name="PART_VerticalScrollBar" 
                        Grid.Column="1" 
                        Maximum="{TemplateBinding ScrollableHeight}" 
                        ViewportSize="{TemplateBinding ViewportHeight}" 
                        Value="{TemplateBinding VerticalOffset}" 
                        Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"/> 
                </Grid> 
            </ControlTemplate> 
        </Setter.Value> 
    </Setter> 
</Style> 
 
      

I have highlighte my changes in bold (sorry for the terrible formatting!)

The above style makes use of two value converters. The first enables the horizontal scrollbar on the header if no items are present:

 
       public class HeaderScrollbarVisibilityConverter : IValueConverter 
{        
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 
    { 
        ListView listView = value as ListView; 
        bool visible = listView.Items.Count == 0; 
        return visible ? ScrollBarVisibility.Visible : ScrollBarVisibility.Hidden; 
    } 
 
    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 
    { 
        throw new NotImplementedException(); 
    } 
} 
 
      

The other disables the scrollbar for your items if no items are present:

 
       public class ContentScrollbarVisible : IMultiValueConverter 
{ 
    #region IMultiValueConverter Members 
 
    public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture) 
    { 
        ListView listView = (ListView)values[0]; 
        Visibility visibility = (Visibility)values[1]; 
 
        if (listView.Items.Count == 0) 
            return Visibility.Hidden; 
 
        return visibility; 
    } 
 
    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, System.Globalization.CultureInfo culture) 
    { 
        throw new NotImplementedException(); 
    } 
    #endregion 
} 
 
      

All Replies

Hi,

I'm afraid I have no idea why the scrollbar is disabled when there are no items present within the list. However, this looks like a fun challenge!

I have a solution to your problem .. it has a few quirks but might be what you are looking for.

If you inspect the ControlTemplate of the listView through Mole, or from this page:

http://msdn.microsoft.com/en-us/library/ms788747.aspx

You will see that the general layout is defined in a style with the key, {x:Static GridView.GridViewScrollViewerStyleKey}. From inspecting the template you can see that it contains a ScrollContentPresenter which renders your grid of items and also a GridViewHeaderRowPresenter which renders your column headers. The GridViewHeaderRowPresenteris within its own ScrollViewer where the horizontal and vertical scroll bars are disabled.

If you enable the horizontal scrollbar for the column headings you achieve the effect you desire, however you will find that you now have two scrollbars, one for the column headings and one for the content!

What I did was create a value converter that inspects the ListView.Items property to determine whether the header scrollbar and the items scrollbar should be visible or not.

Here is the modified style:

 
       <Style x:Key="{x:Static GridView.GridViewScrollViewerStyleKey}" TargetType="ScrollViewer"> 
    <Setter Property="Template"> 
        <Setter.Value> 
            <ControlTemplate TargetType="ScrollViewer"> 
                <Grid Background="{TemplateBinding Background}"> 
                    <Grid.ColumnDefinitions> 
                        <ColumnDefinition Width="*"/> 
                        <ColumnDefinition Width="Auto"/> 
                    </Grid.ColumnDefinitions> 
                    <Grid.RowDefinitions> 
                        <RowDefinition Height="*"/> 
                        <RowDefinition Height="Auto"/> 
                    </Grid.RowDefinitions> 
 
                    <DockPanel Margin="{TemplateBinding Padding}"> 
                                <ScrollViewer DockPanel.Dock="Top" 
                                HorizontalScrollBarVisibility="{Binding Path=TemplatedParent, Converter={StaticResource HeaderScrollbarVisibilityConverter}, RelativeSource={RelativeSource TemplatedParent}}" 
                                VerticalScrollBarVisibility="Hidden" Focusable="false"> 
                                    <GridViewHeaderRowPresenter DockPanel.Dock="Top" Margin="2,0,2,0" 
                                        Columns="{Binding Path=TemplatedParent.View.Columns, 
                                                  RelativeSource={RelativeSource TemplatedParent}}" 
                                        ColumnHeaderContainerStyle="{Binding 
                                                     Path=TemplatedParent.View.ColumnHeaderContainerStyle, 
                                                     RelativeSource={RelativeSource TemplatedParent}}" 
                                        ColumnHeaderTemplate="{Binding 
                                                     Path=TemplatedParent.View.ColumnHeaderTemplate, 
                                                     RelativeSource={RelativeSource TemplatedParent}}" 
                                        ColumnHeaderTemplateSelector="{Binding  
                                                     Path=TemplatedParent.View.ColumnHeaderTemplateSelector, 
                                                     RelativeSource={RelativeSource TemplatedParent}}" 
                                        AllowsColumnReorder="{Binding 
                                                     Path=TemplatedParent.View.AllowsColumnReorder, 
                                                     RelativeSource={RelativeSource TemplatedParent}}" 
                                        ColumnHeaderContextMenu="{Binding 
                                                     Path=TemplatedParent.View.ColumnHeaderContextMenu, 
                                                     RelativeSource={RelativeSource TemplatedParent}}" 
                                        ColumnHeaderToolTip="{Binding 
                                                     Path=TemplatedParent.View.ColumnHeaderToolTip, 
                                                     RelativeSource={RelativeSource TemplatedParent}}" 
                                        SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/> 
                                </ScrollViewer> 
 
                        <ScrollContentPresenter Name="PART_ScrollContentPresenter" 
                              KeyboardNavigation.DirectionalNavigation="Local" 
                              CanContentScroll="True" CanHorizontallyScroll="False"  
                              CanVerticallyScroll="False"/> 
                    </DockPanel> 
 
                    <ScrollBar Name="PART_HorizontalScrollBar" 
                        Orientation="Horizontal" 
                        Grid.Row="1" 
                        Maximum="{TemplateBinding ScrollableWidth}" 
                        ViewportSize="{TemplateBinding ViewportWidth}" 
                        Value="{TemplateBinding HorizontalOffset}" 
                        > 
                        <ScrollBar.Visibility> 
                            <MultiBinding Converter="{StaticResource ContentScrollbarVisible}"> 
                                <Binding Path="TemplatedParent" RelativeSource="{RelativeSource TemplatedParent}"/> 
                                <Binding Path="ComputedHorizontalScrollBarVisibility" RelativeSource="{RelativeSource TemplatedParent}"/> 
                            </MultiBinding> 
                        </ScrollBar.Visibility>                                 
                    </ScrollBar> 
 
                    <ScrollBar Name="PART_VerticalScrollBar" 
                        Grid.Column="1" 
                        Maximum="{TemplateBinding ScrollableHeight}" 
                        ViewportSize="{TemplateBinding ViewportHeight}" 
                        Value="{TemplateBinding VerticalOffset}" 
                        Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"/> 
                </Grid> 
            </ControlTemplate> 
        </Setter.Value> 
    </Setter> 
</Style> 
 
      

 
       public class HeaderScrollbarVisibilityConverter : IValueConverter 
{        
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 
    { 
        ListView listView = value as ListView; 
        bool visible = listView.Items.Count == 0; 
        return visible ? ScrollBarVisibility.Visible : ScrollBarVisibility.Hidden; 
    } 
 
    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 
    { 
        throw new NotImplementedException(); 
    } 
} 
 
      

The other disables the scrollbar for your items if no items are present:

 
       public class ContentScrollbarVisible : IMultiValueConverter 
{ 
    #region IMultiValueConverter Members 
 
    public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture) 
    { 
        ListView listView = (ListView)values[0]; 
        Visibility visibility = (Visibility)values[1]; 
 
        if (listView.Items.Count == 0) 
            return Visibility.Hidden; 
 
        return visibility; 
    } 
 
    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, System.Globalization.CultureInfo culture) 
    { 
        throw new NotImplementedException(); 
    } 
    #endregion 
} 
 
      

Hi Colin,

Thanks for the reply, I was about to think that no-one understood my problem :)
I'm quite new to wpf. I taught that the solution could lay in the modification of the template, but I could have never created the code you created.

I will implement it this weekend, when I have time. (I'll set your post as answer after the implementation)
I'm also gonna add a clear filter button to the listview, and then I will post you the code of the updated FilterableListView ;)

Hi,

I think the problem with your question is that it is very much an edge-case. I think very few people would be concerned with the ListViews scroll behaviour when empty. Especially considering the effort required to rectify this.

I tried to make the solution generic, i.e. force the presence or abscence of the scrollbar when no items are present, otherwise respect the existing mechanism based on ComputedHorizontalScrollbarVisibility. However I have not tried all combinations, I have a feeling that you will find scrollbars appearing when they should not in some cases. However, solving this would simply involve more complex multibindings!

To be truely generic it should also honour the attached HorizontalScrollbarVisibilty property. However it might just be easier to create a special style for your type of ListView.

Good luck,
Colin E.

Great work Colin. Not so much of an edge case actually. We have added filter to the ListView headers, and when there are no rows, we still needed to be able to see all the filters which requires scrolling.

Managed to get it to only show 1 scroll bar though by changing you converters slightly and re-applying the Style when we do the filters.

HeaderScrollbarVisibilityConverter (what I renamed your converter to) now looks like

    public class HeaderScrollbarVisibilityConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            ListView listView = value as ListView;
            GridView gridView = (GridView)listView.View;
            bool visible = listView.Items.Count == 0 && gridView.Columns.Count > 0;
            return visible ? ScrollBarVisibility.Visible : ScrollBarVisibility.Hidden;
        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

And the ScrollViewer looks like this

   <Style x:Key="FilterGridStyleScrollViewer"
           TargetType="ScrollViewer">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ScrollViewer">
                    <Grid Background="{TemplateBinding Background}">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>

                        <DockPanel Margin="0">
                            <ScrollViewer DockPanel.Dock="Top"
                                          HorizontalScrollBarVisibility="{Binding Path=TemplatedParent, 
                                            Converter={StaticResource HeaderScrollbarVisibilityConv}, 
                                            RelativeSource={RelativeSource TemplatedParent}}"
                                          VerticalScrollBarVisibility="Hidden"
                                          Focusable="false">
                                <Grid Margin="0" DockPanel.Dock="Top" 
                                      Background="{DynamicResource searchGridHeaderBackground}">

                                    <GridViewHeaderRowPresenter Margin="5,0,2,0"
                                        Columns="{Binding Path=TemplatedParent.View.Columns,  
                                        RelativeSource={RelativeSource TemplatedParent}}"
                                        ColumnHeaderContainerStyle="{Binding  
                                        Path=TemplatedParent.View.ColumnHeaderContainerStyle,  
                                            RelativeSource={RelativeSource TemplatedParent}}"
                                        ColumnHeaderTemplate="{Binding  
                                        Path=TemplatedParent.View.ColumnHeaderTemplate,  
                                            RelativeSource={RelativeSource TemplatedParent}}"
                                        ColumnHeaderTemplateSelector="{Binding   
                                        Path=TemplatedParent.View.ColumnHeaderTemplateSelector,  
                                            RelativeSource={RelativeSource TemplatedParent}}"
                                        AllowsColumnReorder="{Binding  
                                        Path=TemplatedParent.View.AllowsColumnReorder,  
                                            RelativeSource={RelativeSource TemplatedParent}}"
                                        ColumnHeaderContextMenu="{Binding  
                                        Path=TemplatedParent.View.ColumnHeaderContextMenu,  
                                            RelativeSource={RelativeSource TemplatedParent}}"
                                        ColumnHeaderToolTip="{Binding  
                                        Path=TemplatedParent.View.ColumnHeaderToolTip,  
                                            RelativeSource={RelativeSource TemplatedParent}}"
                                        SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />

                                </Grid>

                            </ScrollViewer>

                            <ScrollContentPresenter Name="PART_ScrollContentPresenter"
                                                    KeyboardNavigation.DirectionalNavigation="Local"
                                                    CanContentScroll="True"
                                                    CanHorizontallyScroll="False"
                                                    CanVerticallyScroll="False" />
                        </DockPanel>

                        <ScrollBar Name="PART_HorizontalScrollBar"
                                   Orientation="Horizontal"
                                   Grid.Row="1"
                                   Maximum="{TemplateBinding ScrollableWidth}"
                                   ViewportSize="{TemplateBinding ViewportWidth}"
                                   Value="{TemplateBinding HorizontalOffset}" Visibility="Visible">
                        </ScrollBar>

                        <ScrollBar Name="PART_VerticalScrollBar"
                                   Grid.Column="1"
                                   Maximum="{TemplateBinding ScrollableHeight}"
                                   ViewportSize="{TemplateBinding ViewportHeight}"
                                   Value="{TemplateBinding VerticalOffset}"
                                   Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

And we just get the Style to be Re-Applied by some code elsewhere (er in the ViewModel obviously...errr yeah thats right)

原文：

http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/48c9e4be-626b-44ce-8d6e-3060d839b30e/

我试过了，光上面的还是不行的，因为Converter并不会在初始化的时候执行。

我的做法是

然后在程序中去调用下面的方法去控制Header Scroll Bar的显示或是隐藏

public void SetHeaderHorizontalScrollViewerVisibility()
        {
            if (this._headerScrollViewer == null)
            {
                this._headerScrollViewer = ListViewFinder.FindControlFromItem<ScrollViewer>(this, "PART_HeaderHorizontalScrollView");
            }

            if (this.Items.Count == 0)
            {
                if (this._headerScrollViewer != null)
                {
                    this._headerScrollViewer.HorizontalScrollBarVisibility = ScrollBarVisibility.Auto;
                }
            }
            else
            {
                if (this._headerScrollViewer != null)
                {
                    this._headerScrollViewer.HorizontalScrollBarVisibility = ScrollBarVisibility.Hidden;
                }
            }
        }