UWP Viewbox和Flipview操作

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的ZoomFactor = 1時才能刷這個FlipView 。

在這里我寫了一個示例來解決這個問題，我沒有在這里使用任何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事件來檢測操作是否已啟動。 因此，您可以參考我的另一種情況： ListView ManipulationCompleted事件在手機上不起作用 。