Question

我正在编写一个UWP照片查看器应用程序，其中包含一个包含Viewbox的自定义控件，并在FlipView中具有自定义ManipulationEvents。我想做到这一点，当你一直缩小时，你可以滑动翻转，但仍然能够放大。这就是我的问题所在。

当我将视图框设置为除 ManipulationMode = ManipulationModes.System之外的任何内容时，拖动视图框不会触发FlipView。问题是我希望能够在缩放级别1时仍然放大图像。

基本上我想设置一些类似于ManipulationMode="Scale, System"的东西，其中所有不规模的东西都会被冒出来。甚至可以在代码隐藏中触发它。

我将如何做到这一点？

以下是我正在做的事情的基础：

CustomControl.xaml

<UserControl ...>
<Grid>
    <ScrollViewer ...
        ManipulationMode="System">
        <Viewbox ManipulationMode="TranslateX, TranslateY, Rotate, Scale"
            ManipulationStarted="Viewbox_OnManipulationStarted"
            ManipulationDelta="Viewbox_ManipulationDelta">
            <ContentControl Content="{Binding ElementName=MyControl, Path=ViewboxContext}" />
        </Viewbox>
    </ScrollViewer>
</Grid>

CustomControl.xaml.cs

...
void ViewboxHost_OnManipulationStarted(object sender, ManipulationStartedRoutedEventArgs e)
{
    ...
}

void ViewboxHost_OnManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
    if (IsAtMinZoom && e.Delta.Scale <= 1)
    {
        e.Handled = false;
    } else {
        e.Handled = true;
        return;
    }

    ...
}

MainPage.xaml中

<Page ...>
<Grid>
    <FlipView>
        <FlipView.Items> <!-- These will later be added view ItemsSource -->
            <FlipViewItem>
                <controls:CustomControl>
                    <Image src="..." />
                </controls:CustomControl>
            </FlipViewItem>

            <!-- More of these guys --->

        </FlipView.Items>
    </FlipView>
</Grid>

Answer 1

如果我正确理解了您的问题，您希望在每个FlipViewItem中显示一张图片，并且可以缩放此图片。当FlipView在移动设备上运行时，可以在项目之间滑动，并且您希望确保只有当iamge的FlipView = 1时才能刷这个ZoomFactor。

我在这里写了一个示例来解决这个问题，我这里没有使用任何ViewBox和UserControl，如果你需要使用它们，你可以更改我的DataTemplate样品：

<FlipView x:Name="flipView" ItemsSource="{x:Bind mylist}">
    <FlipView.ItemTemplate>
        <DataTemplate>
            <ScrollViewer ZoomMode="Enabled" MinZoomFactor="1" MaxZoomFactor="4" PointerPressed="ScrollViewer_PointerPressed">
                <Image Source="{Binding ImageSource}"  Stretch="Uniform" />
            </ScrollViewer>
        </DataTemplate>
    </FlipView.ItemTemplate>
</FlipView>

代码背后的代码：

private ObservableCollection<MyFlipViewItem> mylist = new ObservableCollection<MyFlipViewItem>();

public MainPage()
{
    this.InitializeComponent();
    this.Loaded += MainPage_Loaded;
}

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    mylist.Clear();
    mylist.Add(new MyFlipViewItem { ImageSource = "Assets/1.jpeg" });
    mylist.Add(new MyFlipViewItem { ImageSource = "Assets/1.jpeg" });
    mylist.Add(new MyFlipViewItem { ImageSource = "Assets/1.jpeg" });
    mylist.Add(new MyFlipViewItem { ImageSource = "Assets/1.jpeg" });
}

private ScrollViewer flipviewscrollviewer;

private void MainPage_Loaded(object sender, RoutedEventArgs e)
{
    flipviewscrollviewer = FindChildOfType<ScrollViewer>(flipView);
}

public static T FindChildOfType<T>(DependencyObject root) where T : class
{
    var queue = new Queue<DependencyObject>();
    queue.Enqueue(root);
    while (queue.Count > 0)
    {
        DependencyObject current = queue.Dequeue();
        for (int i = 0; i < VisualTreeHelper.GetChildrenCount(current); i++)
        {
            var child = VisualTreeHelper.GetChild(current, i);
            var typedChild = child as T;
            if (typedChild != null)
            {
                return typedChild;
            }
            queue.Enqueue(child);
        }
    }
    return null;
}

private void ScrollViewer_PointerPressed(object sender, PointerRoutedEventArgs e)
{
    var itemscrollviewer = sender as ScrollViewer;
    if (itemscrollviewer.ZoomFactor != 1)
    {
        flipviewscrollviewer.HorizontalScrollMode = ScrollMode.Disabled;
    }
    else
    {
        flipviewscrollviewer.HorizontalScrollMode = ScrollMode.Enabled;
    }
}

MyFlipViewItem类：

public class MyFlipViewItem
{
    public string ImageSource { get; set; }
}

在我的示例中，您可以看到我使用PointerPressed event来检测操作是否已启动。因此，您可以参考我的其他案例：ListView ManipulationCompleted event doesn't work on phone。

UWP Viewbox和Flipview操作

CustomControl.xaml

CustomControl.xaml.cs

MainPage.xaml中

1 个答案: