Question

我能够渲染一组项目并用鼠标移动它们。我无法让canvas itemspanel自动调整大小。按原样尝试代码，看看如何渲染矩形以及如何使用鼠标拖动它们。请注意，它们被约束到父边界（400x400）。接下来找到注释行取消注释，并注释掉它上方的行<Canvas Height="400" Width="400">。现在请注意矩形是如何正确渲染的，但是一旦拖动它们就会飞到左上角并且不能再移动了！请帮忙！

您将需要这些名称空间

xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"

完整XAML位于下方，将其放入页面或控件中

<Grid x:Name="LayoutRoot">

    <UserControl>

        <UserControl.Resources>
            <DataTemplate x:Key="ItemTemplateKey">
                <Canvas Height="400" Width="400">
                <!--<Canvas>-->
                    <Rectangle Height="50" Width="50" Fill="Red">
                        <i:Interaction.Behaviors>
                            <ei:MouseDragElementBehavior ConstrainToParentBounds="True"/>
                        </i:Interaction.Behaviors>
                    </Rectangle>
                </Canvas>
            </DataTemplate>
        </UserControl.Resources>

        <Grid x:Name="LayoutRoot2">
            <ItemsControl
                ItemsSource="{Binding anArrayOfThreeOrFourThingsInTheVM}"
                ItemTemplate="{StaticResource ItemTemplateKey}">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <Canvas/>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
            </ItemsControl>
        </Grid>

    </UserControl>

</Grid>

在VM或后面的代码中提供要绑定到的itemssource的集合：

    public int[] anArrayOfThreeOrFourThingsInTheVM { get { return new int[] { 1, 2, 3 }; } }

修改：亲爱的宝贝耶稣！作为睡前的最后努力，我尝试用网格替换画布，这一切都有效！

如果其他人遇到同样的问题，这是新的工作xaml：

<Grid x:Name="LayoutRoot">

    <UserControl>

        <UserControl.Resources>
            <DataTemplate x:Key="ItemTemplateKey">
                <Grid>
                    <Rectangle Height="50" Width="50" Fill="Red">
                        <i:Interaction.Behaviors>
                            <ei:MouseDragElementBehavior ConstrainToParentBounds="True"/>
                        </i:Interaction.Behaviors>
                    </Rectangle>
                </Grid>
            </DataTemplate>
        </UserControl.Resources>

        <Grid x:Name="LayoutRoot2">
            <ItemsControl
                ItemsSource="{Binding anArrayOfThreeOrFourThingsInTheVM}"
                ItemTemplate="{StaticResource ItemTemplateKey}">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <Grid/>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
            </ItemsControl>
        </Grid>

    </UserControl>

</Grid>

Answer 1

我用这个答案编辑了上面的问题。把它放在这里回答/关闭问题。

如果其他人遇到同样的问题，这是新的工作xaml：

<UserControl>

    <UserControl.Resources>
        <DataTemplate x:Key="ItemTemplateKey">
            <Grid>
                <Rectangle Height="50" Width="50" Fill="Red">
                    <i:Interaction.Behaviors>
                        <ei:MouseDragElementBehavior ConstrainToParentBounds="True"/>
                    </i:Interaction.Behaviors>
                </Rectangle>
            </Grid>
        </DataTemplate>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot2">
        <ItemsControl
            ItemsSource="{Binding anArrayOfThreeOrFourThingsInTheVM}"
            ItemTemplate="{StaticResource ItemTemplateKey}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <Grid/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
        </ItemsControl>
    </Grid>

</UserControl>

无法在自定义itemscontrol上自动调整canvas itemspanel：每个元素都使用MouseDragElementBehavior

1 个答案: