使用绑定填充路径数据属性时路径位置不正确

本文关键字：路径 位置 不正确 数据属性 绑定 填充 | 更新日期: 2023-09-27 18:30:05

我在Canvas内部有一个硬编码的Path形状。我想在这个画布中有多个形状，所以我试图将每个形状的信息推到一个类中，然后使用ItemsControl来渲染每个形状。当我使用ItemsControl时，每个形状的位置都不正确（向上和向左太远）。

正确显示

<Canvas>
    <Path Style="{StaticResource OverlayPath}" 
              Height="87.934" 
              Width="96.067" 
              Canvas.Left="348.456" 
              Canvas.Top="204.525" 
              Data="M432.9,245.5 L428.26666,258.46667 439.86716,261.26627 443.46698,246.46662 443.06664,242.33348 437.06651,242.60046 428.26633,239.13402 429.9994,232.33489 424.66584,230.73536 423.86545,234.46865 414.39771,236.46845 413.86433,239.66813 409.99697,236.73509 403.8631,235.80185 402.66265,233.66874 405.86266,231.13566 404.39584,224.73631 407.06279,221.93696 407.19614,217.00454 402.52898,211.00525 401.46255,204.73933 389.99435,207.00605 387.06071,211.4055 387.32706,222.20415 377.85934,219.93777 355.4564,218.33797 354.38926,226.20365 348.38853,227.80345 348.52187,233.93602 351.18886,239.53532 C351.18886,239.53532 356.12278,238.6021 355.72274,238.6021 355.32269,238.6021 361.99016,251.80045 361.99016,251.80045 L366.79074,253.53357 366.39069,258.5996 369.05768,259.13287 367.32414,268.73167 368.57429,275.93113 371.64132,279.19775 374.44166,279.73103 374.57501,286.46394 387.57658,287.19684 387.84328,290.06317 394.64409,291.66265 396.64434,285.79638 394.77744,284.99648 396.24429,279.99709 398.17785,279.13053 396.17761,276.99746 398.91128,274.99771 406.64554,277.86402 417.78022,267.79859 417.91357,262.53257 414.12144,259.02467 425.4228,249.8258 420.92226,244.72642 423.52258,243.02663 428.92323,242.82666 z" />
</Canvas>

显示错误

<Canvas>
    <ItemsControl ItemsSource={Binding CanvasPaths}>
         <ItemsControl.ItemTemplate>
             <DataTemplate>
                    <Path Style="{StaticResource OverlayPath}" 
                          Data="{Binding Data}" 
                          Height="{Binding Height}" 
                          Width="{Binding Width}" 
                          Canvas.Left="{Binding CanvasLeft}" 
                          Canvas.Top="{Binding CanvasTop}" />
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
 </Canvas>

型号

public class CanvasPath
{
    public CanvasPath(string data, double height, double width, double canvasTop, double canvasLeft)
    {
        Data = data;
        Height = height;
        Width = width;
        CanvasTop = canvasTop;
        CanvasLeft = canvasLeft;
    }
    public string Data { get; set; }
    public double Height { get; set; }
    public double Width { get; set; }
    public double CanvasTop { get; set; }
    public double CanvasLeft { get; set; }
}

ViewModel

public class TestViewModel
{
    private ObservableCollection<CanvasPath> test = new ObservableCollection<CanvasPath>()
    {
        new CanvasPath("M432.9,245.5 L428.26666,258.46667 439.86716,261.26627 443.46698,246.46662 443.06664,242.33348 437.06651,242.60046 428.26633,239.13402 429.9994,232.33489 424.66584,230.73536 423.86545,234.46865 414.39771,236.46845 413.86433,239.66813 409.99697,236.73509 403.8631,235.80185 402.66265,233.66874 405.86266,231.13566 404.39584,224.73631 407.06279,221.93696 407.19614,217.00454 402.52898,211.00525 401.46255,204.73933 389.99435,207.00605 387.06071,211.4055 387.32706,222.20415 377.85934,219.93777 355.4564,218.33797 354.38926,226.20365 348.38853,227.80345 348.52187,233.93602 351.18886,239.53532 C351.18886,239.53532 356.12278,238.6021 355.72274,238.6021 355.32269,238.6021 361.99016,251.80045 361.99016,251.80045 L366.79074,253.53357 366.39069,258.5996 369.05768,259.13287 367.32414,268.73167 368.57429,275.93113 371.64132,279.19775 374.44166,279.73103 374.57501,286.46394 387.57658,287.19684 387.84328,290.06317 394.64409,291.66265 396.64434,285.79638 394.77744,284.99648 396.24429,279.99709 398.17785,279.13053 396.17761,276.99746 398.91128,274.99771 406.64554,277.86402 417.78022,267.79859 417.91357,262.53257 414.12144,259.02467 425.4228,249.8258 420.92226,244.72642 423.52258,243.02663 428.92323,242.82666 z",
                87.934, 96.067, 204.525, 348.456)
    };
    public ObservableCollection<CanvasPath> CanvasPaths
    {
        get 
        {
            return test;
        }
    }
}

使用绑定填充路径数据属性时路径位置不正确

ItemTemplate中的Canvas.Left和Canvas.Top绑定无效，因为DataTemplate中的Path控件没有Canvas父控件。

为了使其工作，您必须设置ItemsPanel和ItemContainerStyle属性，如下所示：

<ItemsControl ItemsSource="{Binding CanvasPaths}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemContainerStyle>
        <Style TargetType="ContentPresenter">
            <Setter Property="Canvas.Left" Value="{Binding CanvasLeft}"/>
            <Setter Property="Canvas.Top" Value="{Binding CanvasTop}"/>
        </Style>
    </ItemsControl.ItemContainerStyle>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Path Style="{StaticResource OverlayPath}" 
                  Data="{Binding Data}" 
                  Height="{Binding Height}" 
                  Width="{Binding Width}"/>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>
相关文章：