グリッド列*行（4 * 5）がwpfでキャンバスにとどまるとき、グリッドにドラッグデルタを実装するには

Question

私は以下のようにusercontrolを作成しました。 以下のコードに私のXAMLコードを参照してください。

<Border ClipToBounds="True" BorderThickness="2" BorderBrush="DeepPink" Width="200" Height="150" x:Name="TempMaxEntityBorder"> 

    <Canvas x:Name="TempMaxEntityCanvas" Background="LightPink" Focusable="True" AllowDrop="True" Tag="MatrixEntityCanvas" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" > 

     <Grid x:Name="GridLayout" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" > 
      <Grid.RowDefinitions > 
       <RowDefinition Height="Auto" ></RowDefinition> 
       <RowDefinition Height="Auto"></RowDefinition> 
       <RowDefinition Height="Auto"></RowDefinition> 
      </Grid.RowDefinitions> 
      <TextBlock Text="Entity" TextAlignment="Center" Grid.Row="0" Grid.Column="0" FontSize="16" VerticalAlignment="Center" HorizontalAlignment="Center" Width="200"></TextBlock> 
      <Line Margin="0,5,0,0" Grid.Row="1" Grid.Column="0" Stroke="DeepPink" StrokeThickness="2" X2="{Binding Path=ActualWidth, RelativeSource={RelativeSource Self}}" VerticalAlignment="Top" /> 
      <Grid x:Name="ChildGridLayout" Grid.Row="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" > 
       <Grid.ColumnDefinitions > 
        <ColumnDefinition Width="Auto"></ColumnDefinition> 
        <ColumnDefinition Width="Auto"></ColumnDefinition> 
        <ColumnDefinition Width="Auto"></ColumnDefinition> 
        <ColumnDefinition Width="Auto"></ColumnDefinition> 
       </Grid.ColumnDefinitions> 
       <Grid.RowDefinitions> 
        <RowDefinition Height="Auto"></RowDefinition> 
        <RowDefinition Height="Auto"></RowDefinition> 
        <RowDefinition Height="Auto"></RowDefinition> 
        <RowDefinition Height="Auto"></RowDefinition> 
        <RowDefinition Height="Auto"></RowDefinition> 
       </Grid.RowDefinitions> 
       <Rectangle Grid.Row="0" Grid.Column="0" Width="20" Height="25" StrokeThickness="2" Stroke="DeepPink" ></Rectangle> 
       <Rectangle Grid.Row="1" Grid.Column="0" Width="20" Height="20" StrokeThickness="1" Stroke="DeepPink" RadiusX="10" RadiusY="10" Fill="Transparent"></Rectangle> 
       <TextBlock Grid.Row="1" Grid.Column="0" Text="a" Padding="22,5"/> 
       <Rectangle Grid.Row="2" Grid.Column="0" Width="20" Height="20" StrokeThickness="1" Stroke="DeepPink" RadiusX="10" RadiusY="10" Fill="Transparent"></Rectangle> 
       <TextBlock Grid.Row="2" Grid.Column="0" Text="a" Padding="22,0"/> 
       <Rectangle Grid.Row="3" Grid.Column="0" Width="20" Height="20" StrokeThickness="1" Stroke="DeepPink" RadiusX="10" RadiusY="10" Fill="Transparent"></Rectangle> 
       <TextBlock Grid.Row="3" Grid.Column="0" Text="a" Padding="22,0"/> 
       <Rectangle Grid.Row="4" Grid.Column="0" Width="20" Height="20" StrokeThickness="1" Stroke="DeepPink" RadiusX="10" RadiusY="10" Fill="Transparent"></Rectangle> 
       <TextBlock Grid.Row="4" Grid.Column="0" Text="a" Padding="22,0"/> 

       <Rectangle Grid.Row="0" Grid.Column="1" Width="20" Height="25" StrokeThickness="2" Stroke="DeepPink"></Rectangle> 
       <Rectangle Grid.Row="1" Grid.Column="1" Width="20" Height="20" StrokeThickness="1" Stroke="DeepPink" RadiusX="10" RadiusY="10" Fill="Transparent"></Rectangle> 
       <TextBlock Grid.Row="1" Grid.Column="1" Text="b" Padding="22,0"/> 
       <Rectangle Grid.Row="2" Grid.Column="1" Width="20" Height="20" StrokeThickness="1" Stroke="DeepPink" RadiusX="10" RadiusY="10" Fill="Transparent"></Rectangle> 
       <TextBlock Grid.Row="2" Grid.Column="1" Text="b" Padding="22,0"/> 
       <Rectangle Grid.Row="3" Grid.Column="1" Width="20" Height="20" StrokeThickness="1" Stroke="DeepPink" RadiusX="10" RadiusY="10" Fill="Transparent"></Rectangle> 
       <TextBlock Grid.Row="3" Grid.Column="1" Text="b" Padding="22,0"/> 
       <Rectangle Grid.Row="4" Grid.Column="1" Width="20" Height="20" StrokeThickness="1" Stroke="DeepPink" RadiusX="10" RadiusY="10" Fill="Transparent"></Rectangle> 
       <TextBlock Grid.Row="4" Grid.Column="1" Text="b" Padding="22,0"/> 

       <Rectangle Grid.Row="0" Grid.Column="2" Width="20" Height="25" StrokeThickness="2" Stroke="DeepPink"></Rectangle> 
       <Rectangle Grid.Row="1" Grid.Column="2" Width="20" Height="20" StrokeThickness="1" Stroke="DeepPink" RadiusX="10" RadiusY="10" Fill="Transparent"></Rectangle> 
       <TextBlock Grid.Row="1" Grid.Column="2" Text="c" Padding="22,0"/> 
       <Rectangle Grid.Row="2" Grid.Column="2" Width="20" Height="20" StrokeThickness="1" Stroke="DeepPink" RadiusX="10" RadiusY="10" Fill="Transparent"></Rectangle> 
       <TextBlock Grid.Row="2" Grid.Column="2" Text="c" Padding="22,0"/> 
       <Rectangle Grid.Row="3" Grid.Column="2" Width="20" Height="20" StrokeThickness="1" Stroke="DeepPink" RadiusX="10" RadiusY="10" Fill="Transparent"></Rectangle> 
       <TextBlock Grid.Row="3" Grid.Column="2" Text="c" Padding="22,0"/> 
       <Rectangle Grid.Row="4" Grid.Column="2" Width="20" Height="20" StrokeThickness="1" Stroke="DeepPink" RadiusX="10" RadiusY="10" Fill="Transparent"></Rectangle> 
       <TextBlock Grid.Row="4" Grid.Column="2" Text="c" Padding="22,0"/> 

       <Rectangle Grid.Row="0" Grid.Column="3" Width="20" Height="25" StrokeThickness="2" Stroke="DeepPink"></Rectangle> 
       <Rectangle Grid.Row="1" Grid.Column="3" Width="20" Height="20" StrokeThickness="1" Stroke="DeepPink" RadiusX="10" RadiusY="10" Fill="Transparent"></Rectangle> 
       <TextBlock Grid.Row="1" Grid.Column="3" Text="d" Padding="22,0"/> 
       <Rectangle Grid.Row="2" Grid.Column="3" Width="20" Height="20" StrokeThickness="1" Stroke="DeepPink" RadiusX="10" RadiusY="10" Fill="Transparent"></Rectangle> 
       <TextBlock Grid.Row="2" Grid.Column="3" Text="d" Padding="22,0"/> 
       <Rectangle Grid.Row="3" Grid.Column="3" Width="20" Height="20" StrokeThickness="1" Stroke="DeepPink" RadiusX="10" RadiusY="10" Fill="Transparent"></Rectangle> 
       <TextBlock Grid.Row="3" Grid.Column="3" Text="d" Padding="22,0"/> 
       <Rectangle Grid.Row="4" Grid.Column="3" Width="20" Height="20" StrokeThickness="1" Stroke="DeepPink" RadiusX="10" RadiusY="10" Fill="Transparent"></Rectangle> 
       <TextBlock Grid.Row="4" Grid.Column="3" Text="d" Padding="22,0"/> 

      </Grid> 
     </Grid> 
    </Canvas> 
</Border> 

は、私はC＃のファイルと、この仕事は良いの私の親指のコードを記述します。 しかし、親指でキャンバスにdragDeltaを使用すると、このキャンバスはサムを使用してサイズ変更されますが、グリッドはサイズ変更されません。グリッドは同じ位置にとどまります。

ありがとうございます。だから、この親キャンバスにグリッドをバインドする方法。

Answer 1

レイアウトに間違ったコンテナ（キャンバス）を選択しています。 Canvasは絶対位置指定を使用して子を配置します。これは、各子の位置がキャンバスに対して[offsetX, offSetY]と定義されていることを意味します。キャンバスのサイズが変更されると、子供たちは元の位置に留まります。コンテナがキャンバスの場合、VerticalAlignment/HorizontalAlignmentプロパティは機能しません。

<Grid x:Name="GridLayout" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" 

WPF Canvas layoutでさらに読む。

幅と高さをGridLayoutにキャンバスの実際の幅/高さにバインドすることで回避できます。しかし、より良い解決策は、コンテナとしてGridを選択することです。

キャンバスを削除しました。また、一部の列/行の定義をAutoから*に置き換えました（2つの違いをテストすることもできます）。

<Border ClipToBounds="True" BorderThickness="2" BorderBrush="DeepPink" x:Name="TempMaxEntityBorder" Margin="159,85,137.667,55.667"> 
    <Grid x:Name="GridLayout" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" > 
     <Grid.RowDefinitions > 
      <RowDefinition Height="Auto" ></RowDefinition> 
      <RowDefinition Height="Auto"></RowDefinition> 
      <RowDefinition Height="*"></RowDefinition> 
     </Grid.RowDefinitions> 
     <TextBlock Text="Entity" TextAlignment="Center" Grid.Row="0" Grid.Column="0" FontSize="16" VerticalAlignment="Center" HorizontalAlignment="Center" Width="200"></TextBlock> 
     <Line Margin="0,5,0,0" Grid.Row="1" Grid.Column="0" Stroke="DeepPink" StrokeThickness="2" X2="{Binding Path=ActualWidth, RelativeSource={RelativeSource Self}}" VerticalAlignment="Top" /> 
     <Grid x:Name="ChildGridLayout" Grid.Row="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" > 
      <Grid.ColumnDefinitions > 
       <ColumnDefinition Width="*"></ColumnDefinition> 
       <ColumnDefinition Width="*"></ColumnDefinition> 
       <ColumnDefinition Width="*"></ColumnDefinition> 
       <ColumnDefinition Width="*"></ColumnDefinition> 
      </Grid.ColumnDefinitions> 
      <Grid.RowDefinitions> 
       <RowDefinition Height="*"></RowDefinition> 
       <RowDefinition Height="*"></RowDefinition> 
       <RowDefinition Height="*"></RowDefinition> 
       <RowDefinition Height="*"></RowDefinition> 
       <RowDefinition Height="*"></RowDefinition> 
      </Grid.RowDefinitions> 
      <Rectangle Grid.Row="0" Grid.Column="0" Width="20" Height="25" StrokeThickness="2" Stroke="DeepPink" ></Rectangle> 
      <Rectangle Grid.Row="1" Grid.Column="0" Width="20" Height="20" StrokeThickness="1" Stroke="DeepPink" RadiusX="10" RadiusY="10" Fill="Transparent"></Rectangle> 
      <TextBlock Grid.Row="1" Grid.Column="0" Text="a" Padding="22,5"/> 
      <Rectangle Grid.Row="2" Grid.Column="0" Width="20" Height="20" StrokeThickness="1" Stroke="DeepPink" RadiusX="10" RadiusY="10" Fill="Transparent"></Rectangle> 
      <TextBlock Grid.Row="2" Grid.Column="0" Text="a" Padding="22,0"/> 
      <Rectangle Grid.Row="3" Grid.Column="0" Width="20" Height="20" StrokeThickness="1" Stroke="DeepPink" RadiusX="10" RadiusY="10" Fill="Transparent"></Rectangle> 
      <TextBlock Grid.Row="3" Grid.Column="0" Text="a" Padding="22,0"/> 
      <Rectangle Grid.Row="4" Grid.Column="0" Width="20" Height="20" StrokeThickness="1" Stroke="DeepPink" RadiusX="10" RadiusY="10" Fill="Transparent"></Rectangle> 
      <TextBlock Grid.Row="4" Grid.Column="0" Text="a" Padding="22,0"/> 

      <Rectangle Grid.Row="0" Grid.Column="1" Width="20" Height="25" StrokeThickness="2" Stroke="DeepPink"></Rectangle> 
      <Rectangle Grid.Row="1" Grid.Column="1" Width="20" Height="20" StrokeThickness="1" Stroke="DeepPink" RadiusX="10" RadiusY="10" Fill="Transparent"></Rectangle> 
      <TextBlock Grid.Row="1" Grid.Column="1" Text="b" Padding="22,0"/> 
      <Rectangle Grid.Row="2" Grid.Column="1" Width="20" Height="20" StrokeThickness="1" Stroke="DeepPink" RadiusX="10" RadiusY="10" Fill="Transparent"></Rectangle> 
      <TextBlock Grid.Row="2" Grid.Column="1" Text="b" Padding="22,0"/> 
      <Rectangle Grid.Row="3" Grid.Column="1" Width="20" Height="20" StrokeThickness="1" Stroke="DeepPink" RadiusX="10" RadiusY="10" Fill="Transparent"></Rectangle> 
      <TextBlock Grid.Row="3" Grid.Column="1" Text="b" Padding="22,0"/> 
      <Rectangle Grid.Row="4" Grid.Column="1" Width="20" Height="20" StrokeThickness="1" Stroke="DeepPink" RadiusX="10" RadiusY="10" Fill="Transparent"></Rectangle> 
      <TextBlock Grid.Row="4" Grid.Column="1" Text="b" Padding="22,0"/> 

      <Rectangle Grid.Row="0" Grid.Column="2" Width="20" Height="25" StrokeThickness="2" Stroke="DeepPink"></Rectangle> 
      <Rectangle Grid.Row="1" Grid.Column="2" Width="20" Height="20" StrokeThickness="1" Stroke="DeepPink" RadiusX="10" RadiusY="10" Fill="Transparent"></Rectangle> 
      <TextBlock Grid.Row="1" Grid.Column="2" Text="c" Padding="22,0"/> 
      <Rectangle Grid.Row="2" Grid.Column="2" Width="20" Height="20" StrokeThickness="1" Stroke="DeepPink" RadiusX="10" RadiusY="10" Fill="Transparent"></Rectangle> 
      <TextBlock Grid.Row="2" Grid.Column="2" Text="c" Padding="22,0"/> 
      <Rectangle Grid.Row="3" Grid.Column="2" Width="20" Height="20" StrokeThickness="1" Stroke="DeepPink" RadiusX="10" RadiusY="10" Fill="Transparent"></Rectangle> 
      <TextBlock Grid.Row="3" Grid.Column="2" Text="c" Padding="22,0"/> 
      <Rectangle Grid.Row="4" Grid.Column="2" Width="20" Height="20" StrokeThickness="1" Stroke="DeepPink" RadiusX="10" RadiusY="10" Fill="Transparent"></Rectangle> 
      <TextBlock Grid.Row="4" Grid.Column="2" Text="c" Padding="22,0"/> 

      <Rectangle Grid.Row="0" Grid.Column="3" Width="20" Height="25" StrokeThickness="2" Stroke="DeepPink"></Rectangle> 
      <Rectangle Grid.Row="1" Grid.Column="3" Width="20" Height="20" StrokeThickness="1" Stroke="DeepPink" RadiusX="10" RadiusY="10" Fill="Transparent"></Rectangle> 
      <TextBlock Grid.Row="1" Grid.Column="3" Text="d" Padding="22,0"/> 
      <Rectangle Grid.Row="2" Grid.Column="3" Width="20" Height="20" StrokeThickness="1" Stroke="DeepPink" RadiusX="10" RadiusY="10" Fill="Transparent"></Rectangle> 
      <TextBlock Grid.Row="2" Grid.Column="3" Text="d" Padding="22,0"/> 
      <Rectangle Grid.Row="3" Grid.Column="3" Width="20" Height="20" StrokeThickness="1" Stroke="DeepPink" RadiusX="10" RadiusY="10" Fill="Transparent"></Rectangle> 
      <TextBlock Grid.Row="3" Grid.Column="3" Text="d" Padding="22,0"/> 
      <Rectangle Grid.Row="4" Grid.Column="3" Width="20" Height="20" StrokeThickness="1" Stroke="DeepPink" RadiusX="10" RadiusY="10" Fill="Transparent"></Rectangle> 
      <TextBlock Grid.Row="4" Grid.Column="3" Text="d" Padding="22,0"/> 
     </Grid> 
    </Grid> 
</Border>