如何在通用 Windows 平台中添加 360 度图像视图答案

【问题标题】：How to add a 360 Image View in Universal Windows Platform如何在通用 Windows 平台中添加 360 度图像视图
【发布时间】：2018-12-30 12:41:49
【问题描述】：

我想在通用 Windows 应用程序 Windows 10 中将普通图像适合 360 度图像查看器。

如何使用基本控件来做到这一点？我尝试实现一个集线器来解决这个问题，但未能获得图像的连续流动。（图片开头到图片结尾相连）

    <Hub>
        <HubSection >
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <Image Source="sample.jpg" HorizontalAlignment="Center" Margin="0,0,0,0" VerticalAlignment="Top" />
                </StackPanel>
            </DataTemplate>
        </HubSection>

    </Hub>

【问题讨论】：

到目前为止你做了什么？ stackoverflow.com/help/how-to-ask
我尝试使用集线器和滚动查看器，但无法获得连续视图。如果我可以构建图像的连续流，集线器似乎可以解决问题。（要连接的图像的开始和图像的结束）
请阅读我发布的链接。请在您的问题中添加示例代码。这里没有人会为您完成所有工作
很抱歉给您带来不便。我已经添加了代码 sn-p

标签： c# xaml uwp windows-10-universal uwp-xaml

【解决方案1】：

经过几次改动.. 我设法构建了一个足以完成我的任务的解决方案。我使用ScrollViewer 处理ViewChanged 事件。我的代码如下。

        <ScrollViewer Name="scroll" HorizontalScrollBarVisibility="Hidden" VerticalScrollMode="Disabled" ViewChanged="scroll_ViewChanged">
            <Grid VerticalAlignment="Stretch" Height="500">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <Image Name="img1" Grid.Column="0" Source="sample.jpg" Stretch="Fill"/>
                <Image Name="img2" Grid.Column="1" Source="sample.jpg" Stretch="Fill"/>
                <Image Name="img3" Grid.Column="2" Source="sample.jpg" Stretch="Fill"/>
            </Grid>
        </ScrollViewer>

ViewChanged事件方法如下

        private void scroll_ViewChanged(object sender, ScrollViewerViewChangedEventArgs e)
        {

            var horizontalOffset = scroll.HorizontalOffset;
            var maxHorizontalOffset = scroll.ScrollableWidth; //sv.ExtentHeight - sv.ViewportHeight;


            if (maxHorizontalOffset < 0 ||
                horizontalOffset == maxHorizontalOffset ||
                horizontalOffset == 0)
            {
                // Scrolled to end or scrolled to the begining
                scroll.ScrollToHorizontalOffset(2000);
            }
            else
            {
                // In the middle, do nothing
            }
        }

PageLoaded事件如下，

        private void Page_Loaded(object sender, RoutedEventArgs e)
        {
            img1.Height = ((Frame)Window.Current.Content).ActualHeight;
            img1.Width = 2000;
            img2.Height = ((Frame)Window.Current.Content).ActualHeight;
            img2.Width = 2000;
            img3.Height = ((Frame)Window.Current.Content).ActualHeight;
            img3.Width = 2000;
        }

尽管这可能不是最好的解决方案，但它对我有用。希望对您有所帮助。

【讨论】：