CODEWITHSUNDEEP
wpfxaml
namg_engr
namg_engr

Reputation: 359

How do I scale an arcsegment in XAML without using Viewbox

I would like to scale an arcsegment similarly to how the linesegment is scaled. I don't want to use Viewbox since this will increase/decrease the line thickness as the window is resized. In my example I have a line segment that is scaled appropriately and I'd like to scale the arc segment similarly. How can this be done in XAML?

<UserControl x:Class="TMUI.UserControls.Chart"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
        xmlns:local="clr-namespace:TMUI"
        xmlns:c="clr-namespace:TMUI.Converters"
        xmlns:bc="clr-namespace:TMUI.BindingConverters"
        xmlns:vm="clr-namespace:TMUI.ViewModels"
        mc:Ignorable="d"
        Visibility="{Binding BBMainMenuVisibility}" >

<Grid x:Name="grid" Background="Black">
    <Grid.Resources>
        <ScaleTransform x:Key="transform"
                    ScaleX="{Binding ActualWidth, ElementName=grid}"
                    ScaleY="{Binding ActualHeight, ElementName=grid}"/>
    </Grid.Resources>
    <Path Stroke="White" StrokeThickness="1">
        <Path.Data>
            <LineGeometry StartPoint="0.01,0.01" EndPoint="0.99,0.99"
                        Transform="{StaticResource transform}"/>
        </Path.Data>
    </Path>

    <Path Stroke="White" StrokeThickness="1">
        <Path.Data>
            <PathGeometry>
                <PathGeometry.Figures>
                    <PathFigureCollection>
                        <PathFigure StartPoint="10,20">
                            <PathFigure.Segments>
                                <PathSegmentCollection>
                                    <ArcSegment Size="40,30" RotationAngle="45" IsLargeArc="True" SweepDirection="CounterClockwise" Point="100,100"/>
                                </PathSegmentCollection>
                            </PathFigure.Segments>
                        </PathFigure>
                    </PathFigureCollection>
                </PathGeometry.Figures>
            </PathGeometry>
        </Path.Data>
    </Path>
</Grid>

Upvotes: 0

Views: 162

Answers (1)

Clemens
Clemens

Reputation: 128180

You would scale the PathGeometry in the same way you scaled the LineGeometry, i.e. by assigning a ScaleTransform to its Transform property.

When you use the same ScaleTransform as for the LineGeometry, you would also need to use the same coordinate range from 0 to 1.

<Path Stroke="White" StrokeThickness="1">
    <Path.Data>
        <PathGeometry Transform="{StaticResource transform}">
            <PathGeometry.Figures>
                <PathFigureCollection>
                    <PathFigure StartPoint="0.1,0.2">
                        <PathFigure.Segments>
                            <PathSegmentCollection>
                                <ArcSegment Size="0.4,0.3" Point="1,1"
                                            RotationAngle="45" IsLargeArc="True"
                                            SweepDirection="CounterClockwise"/>
                            </PathSegmentCollection>
                        </PathFigure.Segments>
                    </PathFigure>
                </PathFigureCollection>
            </PathGeometry.Figures>
        </PathGeometry>
    </Path.Data>
</Path>

You may also draw a single Path with multiple geometries in a GeometryGroup:

<Path Stroke="White" StrokeThickness="1">
    <Path.Data>
        <GeometryGroup Transform="{StaticResource transform}">
            <LineGeometry StartPoint="0.01,0.01" EndPoint="0.99,0.99"/>
            <PathGeometry>
                <PathGeometry.Figures>
                    ...
                </PathGeometry.Figures>
            </PathGeometry>
        </GeometryGroup>
    </Path.Data>
</Path>

Upvotes: 1

Related Questions