WPF - Draw curved line from center screen to margin that dynamically adapts as the screen changes

Question

I want to draw a curved line from the center of the screen to the top left margin. As the window resizes the line should change it's coordinates. Is it possible to do this respecting MVVM ? Example:

Clemens · Accepted Answer · 2017-03-01T10:08:25.280

3

Note that a Viewbox scales the rendered output of its content (including e.g. the StrokeThickness of a Path), but not the geometry of a drawing.

The following approach works without scaling the StrokeThickness, because the Ellipse control scales its geometry to fit its bounds:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Border ClipToBounds="True">
        <Ellipse Stroke="Black" StrokeThickness="1" RenderTransformOrigin="0,1">
            <Ellipse.RenderTransform>
                <ScaleTransform ScaleX="2" ScaleY="2"/>
            </Ellipse.RenderTransform>
        </Ellipse>
    </Border>
</Grid>

edited Mar 01 '17 at 10:08

answered Feb 28 '17 at 18:06

Clemens

123,504
12
155
268

I have observed the scaling of the stroke thickness. In a WPF application this solution works, unfortunately when using the same code in a UWP project Border does not have the property ClipToBounds witch I have seen is essential to mimic a line and not half an ellipse. – Ciprian Dragoe Feb 28 '17 at 18:29
You have tagged your question with WPF only. Anyway, see here: http://stackoverflow.com/q/13668236/1136211 – Clemens Feb 28 '17 at 18:37
my mistake, have marked this as a more optimal answer – Ciprian Dragoe Feb 28 '17 at 19:36

score 1 · Answer 2 · answered Feb 28 '17 at 16:31

Create a grid in your window with 2 columns both with a width of 1*

To your grid in the first column add a viewbox with StretchDirection = Both and Stretch = Fill

Within the viewbox add your curve.

As the window resizes the columns will get smaller and the viewbox will stetch the contents down.

<Window x:Class="MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:WpfApplication1"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525">
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="1*"/>
        <ColumnDefinition Width="1*"/>   
    </Grid.ColumnDefinitions>
    <Viewbox StretchDirection="Both" Stretch="Fill">
        <Canvas Width="100" Height="200">
            <Path Stroke="Black" StrokeThickness="3">
                <Path.Data>
                    <PathGeometry>
                        <PathGeometry.Figures>
                            <PathFigure StartPoint="0,0" IsClosed="False">
                                <ArcSegment Point="100,100" Size="100 100"/>
                            </PathFigure>
                        </PathGeometry.Figures>
                    </PathGeometry>
                </Path.Data>
            </Path>
        </Canvas>
    </Viewbox>
</Grid>

WPF - Draw curved line from center screen to margin that dynamically adapts as the screen changes

2 Answers2