首页 > 解决方案 > 如何在通用 Windows 平台中添加 360 度图像视图

问题描述

我想在通用 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>

标签: c#xamluwpwindows-10-universaluwp-xaml

解决方案


经过几次改动..我已经设法构建了一个足以完成我的任务的解决方案。我使用了一个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;
        }

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


推荐阅读