在MVVM架构下实现将基于ListViewBase控件的显示项滚动到可视范围内(Windows 8.1)


当我们在开发Windows Store应用的时候,一个常见的场景是,你需要在两个页面之间相互跳转,一个是项目列表页面,一个是详细信息页面。当你点击项目列表页面的某一个项目时,就会跳转到相应的详细信息页面,然后通过回退按钮,你就可以回到原来的项目列表页面。当项目列表的内容很多的时候,回退按钮就会把你带到第一个项目对应的视图上,这当然不是我们希望的,我们希望当页面会退的时候,项目列表页面还是能够显示刚才点击的那个项目。

这个问题很容易解决,Windows Store应用提供了两个API来实现这个功能:ScrollIntoViewMakeVisible。当基于LivstViewBase的控件,比如ListView, GridView单独使用的时候,那么就使用ScrollIntoView这个函数。如果基于ListViewBase的控件作为一个视图放在SemanticZoom控件中的时候,那么就使用MakeVisible函数。但是,这两个函数不是在什么时候调用都能够生效的,必须要等ListViewBase控件已经完成了布局以后才能够调用生效。在这里,比较保险的做法是在Page.Loaded事件处理函数中调用ScrollIntoView;在ListviewBase.Loaded事件处理函数中调用MakeVisible。这样的话,我们就需要将这些调用放在xaml的后台代码中,对于一个遵循MVVM设计模式的程序,这是需要尽量避免的。所以,这里我决定实现一个Behavior来完成将显示项滚动到可视范围内这个功能。

BehaviorWindows 8.1新支持的功能,为了实现Behavior,你需要定义一个实现了IBehavior接口的类,这个接口要求我们实现一个属性和两个函数:

public interface IBehavior

{

    DependencyObject AssociatedObject { get; }

    void Attach(DependencyObject associatedObject);

    void Detach();

}

AssociateObject属性很容易实现,它的值可以通过Attach函数得到,我们只需要实现标准的属性代码就可以了:

private DependencyObject _associatedObject;

        public DependencyObject AssociatedObject

        {

            get

            {

                return _associatedObject;

            }

        }

为了实现Behavior的功能,这里我也定义了一个依赖属性LastFocusedItem,它用来设置最后得到焦点的那项,也就是我们需要滚动到显示范围内的那一项:

private static readonly DependencyProperty LastFocusedItemProperty = DependencyProperty.Register("LastFocusedItem", typeof(object), typeof(ScrollIntoViewBehavior), null);

public object LastFocusedItem

{

        get

        {

            return (object)base.GetValue(LastFocusedItemProperty);

        }

        set

        {

            base.SetValue(LastFocusedItemProperty, (object)value);

        }

}

Attach函数会在每次Behavior附着的那个对象加载的时候调用,在Attach函数中,您可以从输入参数中得到这个关联对象。这里由于我们将这个Behavior附着在ListViewBase控件上,我们可以将在这里添加ListViewBase.Loaded的事件处理函数:

        public void Attach(DependencyObject associatedObj)

        {

            if (associatedObj != _associatedObject)

            {

                _associatedObject = associatedObj;

                var lv = _associatedObject as ListViewBase;

                if (lv != null)

                {

                    lv.Loaded += lv_Loaded;

                    lv.Unloaded += lv_Unloaded;

                }

 

            }

        }

lv_Loaded事件处理函数中,我们首先检查该ListViewBase控件是否是放在SemanticZoom中使用的,如果是的,那么就调用MakeVisible来讲当前视图滚动到LastFocusedItem对应的位置。如果不是的话,那么我们再寻找到页面对象,为Page.Loaded添加时间处理函数:

void lv_Loaded(object sender, RoutedEventArgs e)

        {

            var sz = FindSemanticZoom();

            if (sz != null)

            {

                if (_associatedObject != null)

                {

                    ListViewBase lv = _associatedObject as ListViewBase;

                    SemanticZoomLocation szLocation = new SemanticZoomLocation() { Item = LastFocusedItem };

                    lv.MakeVisible(szLocation);

                }

            }

            else

            {

                var page = FindPage();

                if (page != null)

                {

                    page.Loaded += page_Loaded;

 

                }

            }

        }

在上面的代码里用到了两个辅助函数FindSemanticZoom和FindPage分别用来寻找SemanticZoom和Page对象,这两个函数都是通过VisualTreeHelper的GetParent函数来实现的:

        private Page FindPage()

        {

            DependencyObject parent;

            for (DependencyObject obj = _associatedObject; obj != null; obj = parent)

            {

                parent = VisualTreeHelper.GetParent(obj);

                Page page = parent as Page;

                if (page != null)

                {

                    return page;

                }

            }

            return null;

        }

 

        private SemanticZoom FindSemanticZoom()

        {

            DependencyObject parent;

            for (DependencyObject obj = _associatedObject; obj != null; obj = parent)

            {

                parent = VisualTreeHelper.GetParent(obj);

                SemanticZoom sz = parent as SemanticZoom;

                if (sz != null)

                {

                    return sz;

                }

            }

            return null;

        }

在page_Loaded事件处理函数中, 我们就能安全的调用ScrollIntoView来滚动到LastFocusedItem所在的视图了。

       void page_Loaded(object sender, RoutedEventArgs e)

        {

            if (_associatedObject != null)

            {

                ListViewBase lv = _associatedObject as ListViewBase;

                lv.ScrollIntoView(LastFocusedItem);

            }

        }

最后,我们看一下如何在XAML中使用这个Behavior:

<GridView SelectedItem="{Binding SelectedItem, Mode=TwoWay}">

    <Interactivity:Interaction.Behaviors>

<utility:ScrollIntoViewBehavior LastFocusedItem="{Binding SelectedItem}"/>

    </Interactivity:Interaction.Behaviors>

</GridView>

采用这种方法,无论ListViewBase控件是否在SematicZoom控件中,我们都可以滚动到正确的位置,而且也不会破坏MVVM的架构。由于只需要在XAML中添加Behavior,你完全可以帮这个工作交给UI设计师去完成,很好的实现了代码逻辑和UI界面的分离。这里我也将ScrollIntoViewBehavior的代码附上以供你参考。

 

ScrollIntoViewBehavior .cs

Comments (0)

Skip to main content