无法在自定义项目控件上自动调整画布项目面板的大小：每个元素都使用 MouseDragElementBehavior
我能够渲染一组项目并用鼠标移动它们。我无法让画布项目面板自动调整大小。按原样尝试代码，看看矩形是如何渲染的，以及如何用鼠标将它们拖来拖去。请注意，它们仅限于父边界 (400x400)。接下来找到注释行 取消注释并注释掉其上面的行 。现在请注意矩形是如何正确渲染的，但是一旦您拖动矩形，它们就会飞到左上角并且无法再移动！请帮忙！
您将需要这些命名空间
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>
I am able to render a collection of items and move them around with the mouse. I am having trouble getting the canvas itemspanel to resize automatically. Try the code as is and see how the rectangles are rendered and how they can be dragged hither and thither with the mouse. Note that they are constrained to the parent bounds (400x400). Next find the commented line <!--<Canvas>--> uncomment it and comment out the line above it <Canvas Height="400" Width="400">. Now note how the rectangles are rendered correctly but as soon as you drag one they fly off to the top left corner and cannot be moved anymore! Please help!
You will need these namespaces
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
Complete XAML is below, drop this in on a page or in a control
<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>
In the VM or the code behind provide a collection for the itemssource to bind to:
public int[] anArrayOfThreeOrFourThingsInTheVM { get { return new int[] { 1, 2, 3 }; } }
Edit:
Sweet baby Jesus! As a last ditch effort before bed I tried replacing the canvas with a grid and it all worked!
Here is the new working xaml in case someone else has the same problem:
<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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我用这个答案编辑了上面的问题。把它放在这里是为了回答/结束问题。
这是新的工作 xaml，以防其他人遇到同样的问题：
I edited my question above with this answer. Putting it here to answer/close the question.
Here is the new working xaml in case someone else has the same problem: