Scrollview領域外のScrollviewの子描画/描画

Question

メニュー領域からScrollView領域へのドラッグアンドドロップを使用して移動できる要素を持つWindows 10（UWP）のUIを実装すると、要素を移動することもできますScrollViewからメニュー領域に戻ります。要素がメニューからScrollViewに移動されると、その要素はメニューの子として削除され、子としてScrollViewの子に追加されます。

しかし、要素を戻そうとすると、メニューの後ろにレンダリングされます。私はzのインデックスと要素の順序をXAMLで行い、実行時にScrollViewを削除して追加して、一番上に置くようにテストしましたが、運がありません。

ScrollViewのような継ぎ目はビューの外側に描画されませんか？これを解決する方法に関する提案はありますか？

<Page x:Class="ScrollViewTest.MainPage" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="using:ScrollViewTest" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d"> 
<Grid Background="Transparent" 
     Height="200" 
     Width="200"> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="100"></ColumnDefinition> 
     <ColumnDefinition Width="100"></ColumnDefinition> 
    </Grid.ColumnDefinitions> 
    <Grid Grid.Column="1" 
      Canvas.ZIndex="1" 
      Background="Transparent"> 
     <Canvas Background="Transparent" 
       Height="0" 
       Width="0" 
       VerticalAlignment="Top" 
       HorizontalAlignment="Left"> 
      <Border Canvas.Left="-25" 
        Canvas.Top="100" 
        BorderThickness="2" 
        BorderBrush="Red" 
        Width="50" 
        Height="50"></Border> 
     </Canvas> 
    </Grid> 
    <ScrollViewer Grid.Column="0" 
        VerticalScrollMode="Enabled" 
        Canvas.ZIndex="2" 
        Background="Transparent"> 
     <Canvas Background="Transparent" 
       Height="0" 
       Width="0" 
       VerticalAlignment="Top" 
       HorizontalAlignment="Left"> 
      <Border Canvas.Left="75" 
        BorderThickness="2" 
        BorderBrush="Blue" 
        Width="50" 
        Height="50"></Border> 
     </Canvas> 
    </ScrollViewer> 
</Grid> 

そして結果は、私は青い枠線がグリッド

Answer 1

の上部に表示されるようにしたい：以下

は、問題を説明するいくつかのサンプルコードです

ScrollViewのような子どもたちはビューの外側に描画していないようですね。 Gridの内容が正確自体の大きさである限られたサイズを持っていますが、それは、スクロール可能なので、ScrollViewerの内容は全く限られたサイズを持っていないので、

これは、Grid、の子要素を好きではありませんScrollViewerは常にその内部でレンダリングされます。

...が、私は

正直であるために、私はドラッグアンドドロップを実装するためにCanvas.ZIndexを使用するために正しい方向ではないと思い青い枠線がグリッドの上部に表示させたいです異なる親の間のジェスチャー。 Canvas.ZIndex値は、値が設定されている最も近い親キャンバス要素によって解釈されます。この値は、子要素が重なっている場合の描画順序を明示的に定義するために使用されます。この場合、GridとScrollViewerは同じ親を持ちますが、Canvasは異なる親を持っています。後ろ

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" x:Name="rootGrid" 
     PointerPressed="rootGrid_PointerPressed" 
     PointerReleased="rootGrid_PointerReleased"> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="200"></ColumnDefinition> 
     <ColumnDefinition Width="200"></ColumnDefinition> 
    </Grid.ColumnDefinitions> 
    <Canvas x:Name="canvas" Grid.Column="1" Background="Wheat"> 
     <Border BorderThickness="2" BorderBrush="Red" Width="50" Height="50" /> 
     <Ellipse Width="50" Height="50" VerticalAlignment="Top" Fill="Red" /> 
    </Canvas> 
    <ScrollViewer x:Name="scrollViewer" Grid.Column="0" 
       VerticalScrollMode="Enabled" VerticalScrollBarVisibility="Hidden" 
       Background="LightBlue"> 
     <Canvas Width="100" x:Name="canvasInsideScrollViewer"> 
      <Border BorderThickness="2" BorderBrush="Blue" Width="50" Height="50" VerticalAlignment="Bottom" /> 
     </Canvas> 
    </ScrollViewer> 
</Grid> 

コード：：私はあなたにこの機能を実装する方法与えることができます

は、ここであなたが見ることができるように

public Page20() 
{ 
    this.InitializeComponent(); 
    this.Loaded += Page20_Loaded; 
} 

private void Page20_Loaded(object sender, RoutedEventArgs e) 
{ 
    gridRect = canvas.TransformToVisual(rootGrid).TransformBounds(new Rect(0.0, 0.0, canvas.ActualWidth, canvas.ActualHeight)); 
    scrollViewerRect = scrollViewer.TransformToVisual(rootGrid).TransformBounds(new Rect(0.0, 0.0, scrollViewer.ActualWidth, scrollViewer.ActualHeight)); 
} 

private Rect gridRect; 
private Rect scrollViewerRect; 
private FrameworkElement MoveElement; 

private void rootGrid_PointerPressed(object sender, PointerRoutedEventArgs e) 
{ 
    var pointer = e.GetCurrentPoint(rootGrid); 
    if (gridRect.Left <= pointer.Position.X && pointer.Position.X <= gridRect.Right && 
     gridRect.Top <= pointer.Position.Y && pointer.Position.Y <= gridRect.Bottom) 
    { 
     foreach (var childElement in canvas.Children) 
     { 
      var element = childElement as FrameworkElement; 
      Rect childBounds = element.TransformToVisual(rootGrid).TransformBounds(new Rect(0.0, 0.0, element.ActualWidth, element.ActualHeight)); 
      if (childBounds.Left <= pointer.Position.X && pointer.Position.X <= childBounds.Right && 
       childBounds.Top <= pointer.Position.Y && pointer.Position.Y <= childBounds.Bottom) 
      { 
       MoveElement = element; 
       canvas.Children.Remove(element); 
      } 
     } 
    } 
    else if (scrollViewerRect.Left <= pointer.Position.X && pointer.Position.X <= scrollViewerRect.Right && 
     scrollViewerRect.Top <= pointer.Position.Y && pointer.Position.Y <= scrollViewerRect.Bottom) 
    { 
     foreach (var childElement in canvasInsideScrollViewer.Children) 
     { 
      var element = childElement as FrameworkElement; 
      Rect childBounds = element.TransformToVisual(rootGrid).TransformBounds(new Rect(0.0, 0.0, element.ActualWidth, element.ActualHeight)); 
      if (childBounds.Left <= pointer.Position.X && pointer.Position.X <= childBounds.Right && 
       childBounds.Top <= pointer.Position.Y && pointer.Position.Y <= childBounds.Bottom) 
      { 
       MoveElement = element; 
       canvasInsideScrollViewer.Children.Remove(element); 
      } 
     } 
    } 
} 

private void rootGrid_PointerReleased(object sender, PointerRoutedEventArgs e) 
{ 
    var pointer = e.GetCurrentPoint(rootGrid); 
    if (MoveElement != null) 
    { 
     if (gridRect.Left <= pointer.Position.X && pointer.Position.X <= gridRect.Right && 
      gridRect.Top <= pointer.Position.Y && pointer.Position.Y <= gridRect.Bottom) 
     { 
      var canvasPointer = e.GetCurrentPoint(canvas); 
      canvas.Children.Add(MoveElement); 
      Canvas.SetLeft(MoveElement, canvasPointer.Position.X); 
      Canvas.SetTop(MoveElement, canvasPointer.Position.Y); 
     } 
     else if (scrollViewerRect.Left <= pointer.Position.X && pointer.Position.X <= scrollViewerRect.Right && 
      scrollViewerRect.Top <= pointer.Position.Y && pointer.Position.Y <= scrollViewerRect.Bottom) 
     { 
      var scrollviewPointer = e.GetCurrentPoint(canvasInsideScrollViewer); 
      canvasInsideScrollViewer.Children.Add(MoveElement); 
      Canvas.SetLeft(MoveElement, scrollviewPointer.Position.X); 
      Canvas.SetTop(MoveElement, scrollviewPointer.Position.Y); 
     } 
    } 

    MoveElement = null; 
} 

を、私はそう、Canvasに2列目のGridを変更しました要素はマウスポイントとして絶対位置にレンダリングできます。ここに私のデモのレンダリング画像は、次のとおりです。

ここで最も紛らわしい部分は、あなたが別の親コントロール間UIElementを翻訳したいということですが、中にも（ドラッグアンドドロップしたい）あなたのBorder Sを置く場合rootGrid、Grid、ScrollViewer、Borderの親が同じ場合は、CustomBehaviorControlのXAMLBehaviorsSampleに続き、ドラッグ＆ドロップ作業を完了できます。