我有 n 个播放 map ，我使用 ScrollViewer在 map 上移动，我希望使用 ViewBox连同 PinchManipulations放大和缩小 map 。到目前为止，我已经通过设置 ScrollViewer 来完成此操作。的 Manipulation模式为 control ，但是这让我在缩放时出现滞后。有没有办法得到 ViewBox和 ScrollViewer更好地合作，从而避免滞后？到目前为止我得到的代码是:

滚动查看器:

<ScrollViewer Grid.Column ="0"  Width="768" Height="380" HorizontalScrollBarVisibility="Hidden">
    <Viewbox Stretch="None">
        <View:Map/>
    </Viewbox>
</ScrollViewer>

双指缩放:

<Grid x:Name="Map" Width="1271" Height="1381.5">

    <Grid.RenderTransform>
        <ScaleTransform ScaleX="{Binding Path=deltaZoom}" ScaleY="{Binding Path=deltaZoom}"/>
    </Grid.RenderTransform>

    <i:Interaction.Triggers>
        <i:EventTrigger EventName="ManipulationStarted">
            <cmd:EventToCommand Command="{Binding Path=ZoomStartedCommand}" PassEventArgsToCommand="True"/>
        </i:EventTrigger>

        <i:EventTrigger EventName="ManipulationDelta">
            <cmd:EventToCommand Command="{Binding Path=ZoomDeltaCommand}" PassEventArgsToCommand="True"/>
        </i:EventTrigger>

        <i:EventTrigger EventName="ManipulationCompleted">
            <cmd:EventToCommand Command="{Binding Path=ZoomCompletedCommand}" PassEventArgsToCommand="True"/>
        </i:EventTrigger>
    </i:Interaction.Triggers>

</Grid>

我使用双指缩放的代码:

public ICommand ZoomStartedCommand { get; set; }
public ICommand ZoomDeltaCommand { get; set; }
public ICommand ZoomCompletedCommand { get; set; }

private double _deltaZoom;
public double deltaZoom
{
    get
    {
        return _deltaZoom;
    }
    set
    {
        _deltaZoom = value;
        RaisePropertyChanged("deltaZoom");
    }
}

public double distance;
public MainViewModel()
{
    ZoomStartedCommand = new RelayCommand<ManipulationStartedEventArgs>(ZoomStart);
    ZoomDeltaCommand = new RelayCommand<ManipulationDeltaEventArgs>(ZoomDelta);
    ZoomCompletedCommand = new RelayCommand<ManipulationCompletedEventArgs>(ZoomCompleted);
}

public void ZoomStart(ManipulationStartedEventArgs e)
{
    FrameworkElement Element = (FrameworkElement)e.OriginalSource;

    var myScrollViewer = FindParentOfType<ScrollViewer>(Element) as ScrollViewer;
    myScrollViewer.SetValue(ScrollViewer.ManipulationModeProperty, ManipulationMode.Control);

}

public void ZoomDelta(ManipulationDeltaEventArgs e)
{
    if (e.PinchManipulation != null)
    { 
        deltaZoom = deltaZoom * e.PinchManipulation.DeltaScale;
    }
    else
    {
        FrameworkElement Element = (FrameworkElement)e.OriginalSource;

        var myScrollViewer = FindParentOfType<ScrollViewer>(Element) as ScrollViewer;
        myScrollViewer.SetValue(ScrollViewer.ManipulationModeProperty, ManipulationMode.System);
    }
}

public void ZoomCompleted(ManipulationCompletedEventArgs e)
{
    FrameworkElement Element = (FrameworkElement)e.OriginalSource;

    var myScrollViewer = FindParentOfType<ScrollViewer>(Element) as ScrollViewer;
    myScrollViewer.SetValue(ScrollViewer.ManipulationModeProperty, ManipulationMode.System);
}

最佳答案

当我尝试在单个容器中处理大量数据时，我也遇到了这个问题。 您不能简单地将整个 map 加载到 View 框中并使用滚动查看器并期望一切正常。

使应用程序在大数据集上表现良好的第一个解决方案是尝试UI 虚拟化。接受虚拟化的控件只创建显示当前 View 所需的元素，或者更准确地说，只创建在显示器上可见的元素。为了更好地理解这个概念，我会给你一个真实世界的例子。看看 Facebook 如何呈现其新闻提要。它在 X html 元素中加载 X 个帖子，然后当用户向下滚动时，它卸载不可见的并加载新的。

1.UI虚拟化

它只是简单地重用元素。这就是UI虚拟化的概念。不得不提一个重要的特性:延迟滚动(用户可以滚动但是结果只在点击释放后显示，如果用户喜欢上下滚动条，这是一个性能提升)

回到你的问题。如果 map 已完全加载，则滚动或放大会出现性能问题，因为不可见的部分也会缩放和滚动。想象一下如果 Google Maps 不支持 UI 虚拟化会发生什么。当用户尝试放大时，整个地球都会放大(成吨的 GB)。

2.数据虚拟化

但是您的 map 应该完全加载到内存中的某处。如果它很大，这就是一个问题，数据虚拟化就会出现。 它不是完全加载所有 map ，而是只加载显示所需的部分。如果你想有更好的响应能力，你可以使用谷歌地图使用的概念。加载到内存中的数据比呈现时适合显示器的数据少，因此当您尝试滚动时，UI 不会卡住(直到数据被加载到内存中)。

你可以阅读更多:

1. Implementing virtualized panel
2. Item container generator
3. Measure core
4. Results

我使用 Virtualized Canvas 解决了我的问题.使用虚拟 Canvas 的应用程序示例:http://pavzav.blogspot.ro/2010/11/virtualized-canvas.html

您可能想看看 Wpf Bing Maps Control

关于c# - 让 Viewbox 和 ScrollViewer 协同工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20287846/