如何在 WPF 中将路径列表放入边框内

Question

我正在编写一个 C# WPF 程序来查看和编辑 SVG。所以我有一个路径列表 (PathList)，我将它们显示在 canvas 的边框内，这是我的 XAML:

            <ItemsControl ItemsSource="{Binding PathList}" >
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>                          
                        <Canvas>
                            <i:Interaction.Triggers>
                                <i:EventTrigger EventName="MouseDown" >
                                    <cmd:EventToCommand Command="{Binding Path= OnMouseDownCommand}" PassEventArgsToCommand="True" />
                                </i:EventTrigger>
                            </i:Interaction.Triggers>
                        </Canvas>

                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>

                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Viewbox Stretch="Uniform"  Height="500" Width="500">
                        <Path Stroke="{Binding Stroke}" 
                              StrokeThickness="{Binding StrokeThickness}" 
                              Fill="{Binding Fill}" 
                              Data="{Binding Data}" 
                              Tag="{Binding Tag}"
                        </Viewbox>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>

正如我在标题中所说，我的目标是让这些路径适合边框，正如您在我的代码中看到的那样，我使用 Viewbox 来拉伸路径，但问题是它将列表中的每条路径都拉伸到填充大小 (500*500) 扭曲矢量图形.. 我希望缩放作为一个实体同时发生在所有列表上，而这些路径的相对比例和位置保持不变。

Answer 1

下面的简化示例演示了如何将 Geometry 项列表放入可缩放的 ItemsControl 中。您必须设置 ItemsControl 的宽度和高度。

<Viewbox>
    <ItemsControl Width="500" Height="500">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <Canvas/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Path Stroke="Black" StrokeThickness="3" Data="{Binding}"/>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
        <ItemsControl.Items>
            <EllipseGeometry Center="150,150" RadiusX="100" RadiusY="100"/>
            <EllipseGeometry Center="350,350" RadiusX="100" RadiusY="100"/>
        </ItemsControl.Items>
    </ItemsControl>
</Viewbox>

如何在 WPF 中将路径列表放入边框内

How to fit a list of paths inside a border in WPF

wpf

xaml

svg

itemscontrol

viewbox