Ndtyjky

So I am trying to flip an image and a canvas within a Grid with other canvas and label, but other canvas object mouse move coordinate system is affected.

Using rendertransform.scaletransform to flip the image and a canvas also flips the coordinate system of the canvas with MeasurementControl (named CanvasOverlay). Just don't understand why.

My understanding is that a transform will act on the object it is contained in and not other objects. But clearly that is not the case.

One other key is that the interaction.trigger is changing the transform property ProbeAlignRight to either 1 or -1. This should flip the image and the canvas with ellipse and polygon. Problem is that CanvasOverlay is not flipped but when the control is moved it moves mirrored to the mouse. Clearly it is flipped the coordinate system from upper left 0,0 to upper right. This is so confusing.

            <Grid>

                <Image Name="usimagesrc" Source="{Binding UltrasoundImageSource, Converter={StaticResource nullValueConverter}}" Height="512" Width="512" 

                       RenderTransformOrigin="0.5,0.5">

                    <Image.RenderTransform>

                        <ScaleTransform ScaleX="{Binding ProbeAlignRight}"/>

                    </Image.RenderTransform>

                </Image>

                <Canvas RenderTransformOrigin="0.5,0.5" Focusable="True" Height="25" VerticalAlignment="Top">

                    <Ellipse x:Name="circleFrench" Height="25" Width="25" Fill="{DynamicResource StepperButtonBlueBorderBrush}" HorizontalAlignment="Left" VerticalAlignment="Top" />

                    <Polygon  Points="0,0 0.05,0.5 0,1 0.5,0.5" Fill="{DynamicResource StepperButtonBlueBorderBrush}" Width="25" Height="25" Stretch="Fill" HorizontalAlignment="Left" VerticalAlignment="Top" Canvas.Left="25" />

                    <Canvas.RenderTransform>

                        <ScaleTransform ScaleX="{Binding ProbeAlignRight}" />

                    </Canvas.RenderTransform>

                    <i:Interaction.Triggers>

                        <i:EventTrigger EventName="MouseDown" >

                            <i:InvokeCommandAction Command="{Binding _flipImageCommandObj}" />

                        </i:EventTrigger>

                    </i:Interaction.Triggers>

                </Canvas>

                <Canvas>

                    <Label Canvas.Top="-2" Canvas.Left="18" Style="{DynamicResource InstructionsLabel}" Content="{lex:Loc DragMeasurementCircle}" Visibility="{Binding EnableMeasurementMessage, Converter={StaticResource BooleanToVisibilityConverter}}"/>

                </Canvas>

                <Canvas x:Name="CFMBoxCanvas" ClipToBounds="True" />

                <UIUtilities:UltrasoundDepthGauge x:Name="DepthGauge" Opacity=".4" DepthInCentimeters="{Binding DepthInCentimeters}"/>

                <Canvas x:Name="CanvasOverlay" Visibility="{Binding EnableMeasureController, Converter={StaticResource BooleanToVisibilityConverter}}" >

                    <UIUtilities:MeasurementControl x:Name="MeasurementTool" Canvas.Top="100" Canvas.Left="300"/>

                </Canvas>

                <Label  Content="{Binding DepthString}" Foreground="White" FontSize="16" FontWeight="Bold" VerticalAlignment="Bottom" HorizontalAlignment="Center" Background="Black"/>

            </Grid>