Question

我有ItemsControl使用Canvas作为ItemsPanel，其项目根据绑定类型呈现为不同的WPF形状，基本上是这样的：

<ItemsControl  ItemsSource="{Binding PreviewShapes}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
    <ItemsControl.Resources>
        <DataTemplate DataType="{x:Type local:UiPreviewLineViewModel}">
            <Line X1="{Binding Start.X}" Y1="{Binding Start.Y}"
                        X2="{Binding End.X}" Y2="{Binding End.Y}" 
                        StrokeThickness="0.75" Stroke="{Binding Brush}" x:Name="Line" ToolTip="{Binding Text}">
            </Line>
        </DataTemplate>
        <DataTemplate DataType="{x:Type local:UiPreviewEllipsisViewModel}">
            <Ellipse Canvas.Left="{Binding UpperLeft.X" Canvas.Top="{Binding UpperLeft.Y}" 
                     Width="{Binding Width}" Height="{Binding Height}" 
                     StrokeThickness="0.75" Stroke="{Binding Brush}" x:Name="Ellipse" ToolTip="{Binding Text}">
            </Ellipse>
        </DataTemplate>
    </ItemsControl.Resources>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas IsItemsHost="True" HorizontalAlignment="Center" VerticalAlignment="Center" x:Name="SketchCanvas" ClipToBounds="False">
            </Canvas>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>

所以我基本上将对象添加到viewmodel的PreviewShapes，并根据它们呈现给WPF Line或Ellipse的类型。这基本上有效但附加属性Canvas.Left和Canvas.Top会被忽略，即使使用静态值也是如此。

VS或ReSharper也通知我附加属性在当前上下文中没有效果。

如何在不使用附加属性的情况下将Ellipse定位在画布上？或者其他解决方案是合适的？

Answer 1

不幸的是，没有人想发布答案。

首先，Clemens链接很有帮助。这些项目位于ContentPresenter内，这就是为Canvas.Left/Top设置Ellipsis无效的原因。

解决方案1 

通过向项容器添加样式，可以在那里设置位置的绑定：

<ItemsControl.ItemContainerStyle>
    <Style TargetType="ContentPresenter">
        <Setter Property="Canvas.Left" Value="{Binding UpperLeft.X}" />
        <Setter Property="Canvas.Top" Value="{Binding UpperLeft.Y}" />
    </Style>
</ItemsControl.ItemContainerStyle>

这有效但DataTemplate放置<Line>会产生绑定警告，因为该视图模型没有属性UpperLeft。然而，它适用于省略号，并且行由X1，Y1，X2和Y2值放置。

解决方案2

如果您想使用更细粒度的控制方法，可以通过使用自定义行为/附加属性代理它们，将附加的Canvas属性设置为ContentPresenter。让我们将它命名为 CanvasPointProxyBehavior ，您可以将它用于Ellipse，如下所示：

<DataTemplate DataType="{x:Type local:UiPreviewEllipsisViewModel}">
    <Ellipse behaviors:CanvasPointProxyBehavior.Point="{Binding UpperLeft}"
             Width="{Binding Width}" Height="{Binding Height}" 
             StrokeThickness="0.75" Stroke="{Binding Brush}" x:Name="Ellipse" ToolTip="{Binding Text}">
    </Ellipse>
</DataTemplate>

Line不需要它。此附加属性的代码可能如下所示：

public class CanvasPointProxyBehavior
{
    public static readonly DependencyProperty PointProperty = DependencyProperty.RegisterAttached("Point", typeof(Point), typeof(CanvasPointProxyBehavior), new UIPropertyMetadata(null, PointChangedCallback));

    public static void SetPoint(DependencyObject depObj, Point point)
    {
        depObj.SetValue(PointProperty, point);
    }

    public static Point GetPoint(DependencyObject depObj)
    {
        return depObj.GetValue(PointProperty) as Point;
    }

    private static void PointChangedCallback(DependencyObject dependencyObject, DependencyPropertyChangedEventArgs e)
    {
        UIElement uiElement = (dependencyObject as UIElement);
        if (uiElement == null) return;
        UIElement elementToBePositioned = uiElement;
        var visualParent = VisualTreeHelper.GetParent(uiElement);
        if (visualParent is ContentPresenter)
        {
            elementToBePositioned = visualParent as ContentPresenter;
        }

        var point = e.NewValue as Point;
        if (point != null)
        {
            Canvas.SetLeft(elementToBePositioned, point.X);
            Canvas.SetTop(elementToBePositioned, point.Y);
        }
    }
}

希望有人能找到一种或两种解决方案。

Answer 2

请注意，我遇到了与@ZoolWay相同的ReSharper警告消息，但在我的情况下，它是在数据网格中，我希望右边的按钮是右对齐而不是左对齐：

附加属性设置“Grid.Column”对当前没有影响上下文，可以删除。

以下是我在Button Grid.Column="2"上发出警告的代码：

        <Border VerticalAlignment="Center" Style="{DynamicResource InspectionsCustomDataGridHeader}">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="10*"/>
                </Grid.ColumnDefinitions>
                <StackPanel  Orientation="Horizontal" VerticalAlignment="Top">
                    <Label Name="InspectionsDataGridTitle" Background="White" Content="{Binding InspectionsCollectionView.View.Count, ConverterParameter={x:Static resx:Resources.InspectionsDataGridTitle}, Converter={StaticResource DataGridHeaderCountConverter}}" Style="{DynamicResource InspectionsCustomDataGridHeaderLabel}" MouseDown="InspectionsDataGridTitle_MouseDown" />
                    <!-- more labels, etc... -->
                    <Button Grid.Column="2" Width="30" Height="30" Margin="0,0,10,0" Background="Transparent" BorderThickness="0" HorizontalAlignment="Right" Command="{Binding CreatePDFCommand,Mode=OneWay}" >
                        <StackPanel Orientation="Horizontal" Background="Transparent">
                            <Image Width="30" Height="30" Source="/Inspections;component/Icons/pdf_btn.png" />
                    </StackPanel>
                    </Button>
                </StackPanel>
            </Grid>
        </Border>

这就是我修复警告的方法，我在第一个StackPanel下面移动了按钮：

        <Border VerticalAlignment="Center" Style="{DynamicResource InspectionsCustomDataGridHeader}">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <StackPanel  Orientation="Horizontal" VerticalAlignment="Top">
                    <Label Name="InspectionsDataGridTitle" Background="White" Content="{Binding InspectionsCollectionView.View.Count, ConverterParameter={x:Static resx:Resources.InspectionsDataGridTitle}, Converter={StaticResource DataGridHeaderCountConverter}}" Style="{DynamicResource InspectionsCustomDataGridHeaderLabel}" MouseDown="InspectionsDataGridTitle_MouseDown" />
                    <!-- more labels, etc... -->
                </StackPanel>
                <Button Grid.Column="2" Width="30" Height="30" Margin="0,0,10,0" Background="Transparent" BorderThickness="0" HorizontalAlignment="Right" Command="{Binding CreatePDFCommand,Mode=OneWay}" >
                    <StackPanel Orientation="Horizontal" Background="Transparent">
                        <Image Width="30" Height="30" Source="/Inspections;component/Icons/pdf_btn.png" />
                    </StackPanel>
                </Button>
            </Grid>
        </Border>

HTH

使附加属性在DataTemplate中工作

2 个答案: