当网格列*行（4 * 5）停留在wpf的画布上时，如何在网格上实现拖动增量

时间：2017-09-10 10:12:27

标签： c# wpf xaml canvas

我已经创建了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>

enter image description here

我在c＃文件中写了我的拇指代码，这很好用。 但是当我通过拇指在画布上使用dragDelta时，此画布使用拇指调整大小，但网格不会调整大小。网格保持在相同的位置。 enter image description here

提前致谢。那么如何使用这个父画布绑定网格。

1 个答案:

答案 0 :(得分：0)

您正在为布局选择错误的容器（Canvas）。 Canvas使用绝对定位放置其子项，这意味着每个子项的位置被定义为画布的[offsetX, offSetY]。当画布调整大小时，孩子们会留在原地。如果容器是Canvas，则VerticalAlignment/HorizontalAlignment属性不起作用。

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

进一步阅读WPF Canvas layout。

您可以通过将GridLayout的宽度/高度绑定到画布的实际宽度/高度来解决此问题。但更好的解决方案是选择Grid作为容器。

我删除了Canvas，还将一些列/行定义从Auto替换为*（您还可以测试两者之间的差异）。 

<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>
相关问题
最新问题