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

Question

am writing a C# WPF program to view and edit SVGs. So i have a List of pathes (PathList) and i diplay them inside a border on a canvas here's my 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>

as i said in the title my goal is to fit those paths inside a border and as you can see in my code i used Viewbox to stretch the paths but the problem is it stretches each and every path inside the list to fill the size (500*500) distorting the form of the vector graphics.. i want the scaling to happen to all the list at once as an entity leaving the relative scale and locations of those paths intact.

Did you try to put the whole ItemsControl in a Viewbox, instead of the individual items? — Clemens, Mar 23 '15 at 13:27
You also have to set the Width and Height of the ItemsControl (or the ItemsPanel Canvas) to 500. — Clemens, Mar 23 '15 at 13:55

score 1 · Accepted Answer · answered Mar 23 '15 at 14:00

The following simplified example shows how to put a list of Geometry items in a scalable ItemsControl. It is necessary that you set the Width and Height of the 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>

well that definitely worked but some stuff needs to be tweaked but that certainly did the trick — Mohab Mesherf, Mar 23 '15 at 14:16

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

1 Answers1