transform affects different object coordinate system - wpf

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>

Related

Set the button on top of the video streaming[WPF]

I use LibVLCSharp.WPF in a WPF application.
I want to put some icons and buttons above the video.
But after the VideoView control has loaded, it overwrite everything.
<Canvas Width="325" Height="182">
<Image Source="/Resource/BgLoading_1.png"
Width="325"
Height="182"
Stretch="Fill"
StretchDirection="Both"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Panel.ZIndex="0"
Visibility="Visible" />
<fa:ImageAwesome Foreground="White"
Icon="Spinner"
Spin="True"
Height="48"
Width="48"
Visibility="{Binding LoadImageStatus}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Canvas.Left="139"
Canvas.Top="67" />
<Image x:Name="imgLeftIcon"
Width="30"
Height="30"
Source="{Binding LeftIconSource}"
Stretch="Fill"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="10,10,10,10"
Visibility="{Binding LeftIconStatus}"
Panel.ZIndex="2" />
<Image x:Name="imgRightIcon"
Width="30"
Height="30"
Source="{Binding RightIconSource}"
Stretch="Fill"
Margin="285,10,10,142"
Visibility="{Binding RightIconStatus}"
Panel.ZIndex="2" />
<!--Video-->
<vlc:VideoView Grid.Row="0"
Height="182"
Width="325"
Visibility="{Binding VideoPlayerStatus}"
Panel.ZIndex="1" />
</Canvas>
RTFM
The controls that must appear on top of the video should be placed as children of the VideoView element.
<Window ...
xmlns:vlc="clr-namespace:LibVLCSharp.WPF;assembly=LibVLCSharp.WPF"
...>
<Grid>
<vlc:VideoView x:Name="VideoView">
<Button x:Name="PlayButton"
Click="PlayButtonOnClick"
Content="Play"
Margin="8"
HorizontalAlignment="Right"
VerticalAlignment="Bottom" />
</vlc:VideoView>
</Grid>
</Window>
Avoid Canvas since they are pretty dumb.
Working example sources based on the manual.
I haven't used vlc, if it covers the icons, I think it should be a window drawn with a separate handle. just like WindowsFormHost. try use Popup control, it can be displayed on top of any control.
<Grid>
<!--video control-->
<Grid Name="video">
<!--Video-->
<vlc:VideoView Grid.Row="0"
Height="182"
Width="325"
Visibility="{Binding VideoPlayerStatus}"
Panel.ZIndex="1" />
</Grid>
<Popup PlacementTarget="{Binding ElementName=video}" Placement="Center">
<Grid>
<Image x:Name="imgLeftIcon"
Width="30"
Height="30"
Source="{Binding LeftIconSource}"
Stretch="Fill"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="10,10,10,10"
Visibility="{Binding LeftIconStatus}"
Panel.ZIndex="2" />
</Grid>
</Popup>
</Grid>

how to draw a certain shape and place it next to a text inside a textbox in wpf

I want used polygone to draw a form inside a button and then put it inside a stackpanel with a text but the result is deceiving...
this is my code:
<Button x:Name="button2" HorizontalAlignment="Left" Margin="27,164,0,0" VerticalAlignment="Top" Height="30" Width="75">
<Grid>
<StackPanel Orientation="Vertical">
<Canvas>
<Polygon
Points="0,-10 16,-10 20,-6 20,10 0,10 0,-10"
Stroke="Black"
StrokeThickness="1"
Fill="#4C87B3"/>
<Polygon
Points="2,-10 14,-10 14,-3 2,-3 2,-10"
Stroke="#d6d6c2"
StrokeThickness="1"
Fill="#d6d6c2"/>
<Polygon
Points="4,-9 6,-9 6,-4 4,-4 4,-9"
Stroke="#4C87B3"
StrokeThickness="1"
Fill="#4C87B3"/>
</Canvas>
<TextBlock Text="Save" FontSize="12" Foreground="White"/>
</StackPanel>
</Grid>
</Button>
the result:
and then in adition to that i want to give this figure some effect like the shadow shown in this picture below:
Since you only want to stack the Polygon elements on top of each other, it is sufficient to add them to a Grid. When wrap this Grid into a Viewbox, the icon will automatically scale, when setting e.g. Viewbox.Width. To prevent the icon from overlapping due to its negative positions, you have to add some Margin to the Grid that hosts the shapes.
To add a drop shadow simply add a DropShadowEffect to the outer Polygon.Effect.
<Button x:Name="button2" HorizontalAlignment="Left" Margin="27,164,0,0" VerticalAlignment="Stretch" Width="75"
Height="30">
<StackPanel>
<Viewbox Width="12" Stretch="Uniform">
<Grid Margin="0,10,0,0">
<Polygon
Points="0,-10 16,-10 20,-6 20,10 0,10 0,-10"
Stroke="Black"
StrokeThickness="1"
Fill="#4C87B3">
<Polygon.Effect>
<DropShadowEffect Opacity="0.9"
ShadowDepth="5"
Direction="315"
Color="Black"
BlurRadius="10" />
</Polygon.Effect>
</Polygon>
<Polygon
Points="2,-10 14,-10 14,-3 2,-3 2,-10"
Stroke="#d6d6c2"
StrokeThickness="1"
Fill="#d6d6c2" />
<Polygon
Points="4,-9 6,-9 6,-4 4,-4 4,-9"
Stroke="#4C87B3"
StrokeThickness="1"
Fill="#4C87B3" />
</Grid>
</Viewbox>
<TextBlock Text="Save" FontSize="12" Foreground="White" HorizontalAlignment="Center" />
</StackPanel>
</Button>

Centre a label within my user control that is positioned within a canvas WPF

Attempting to centre my label in my User Control to my 'signal' I have drawn within my canvas.
This is what my signals currently look like, with their names below the signal. As you can see, due to the variation in name length, some are off centred.
My user control XAML code:
<UserControl x:Name="LeftUserControl"
d:DesignHeight="50" d:DesignWidth="50" RenderTransformOrigin="0.84,0.5">
<Viewbox Stretch="Uniform" Width="10" Height="10">
<Canvas Height="150" Width="150">
<Label Content="{Binding SignalName, ElementName=LeftUserControl}" Foreground="Black" Canvas.Top="108" FontSize="15" Canvas.Left="85"></Label>
<Line X1="130" X2="130" Y1="105" Y2="84" Stroke="Black" StrokeThickness="5" StrokeStartLineCap="Round" ></Line>
<Line X1="130" X2="100" Y1="105" Y2="105" Stroke="Black" StrokeThickness="5"></Line>
<Ellipse Fill="Red" Width="25" Height="25" Canvas.Left="85" Canvas.Top="92"/>
</Canvas>
</Viewbox>
</UserControl>
My main window where I'm using my user control:
<DataTemplate DataType="{x:Type viewModel:SignalLeftViewModel}">
<Canvas>
<userControls:SignalLeftControl SignalName="{Binding Name}" Canvas.Top="{Binding SignalCoords.Y, Converter={StaticResource ScaleYCoordConverter},ConverterParameter=leftSignal}" Canvas.Left="{Binding SignalCoords.X, Converter={StaticResource ScaleXCoordConverter}, ConverterParameter=leftSignal}">
<userControls:SignalLeftControl.RenderTransform>
<RotateTransform Angle="{Binding Angle}"/>
</userControls:SignalLeftControl.RenderTransform>
</userControls:SignalLeftControl>
</Canvas>
</DataTemplate>
I'm wondering what the easiest way is to centre my label within my user control, so that all the names are aligned properly. Thanks in advance.

Imagebrush is stretching one instance of an image but not another

One of the stranger occurrences I've come across, I have a set of repeatbuttons that use a certain image as a background. Despite the buttons being identical, one is displayed differently. Fully reproducible sample below, along with a number of variations each with different results.
Link to icons:
https://github.com/driftyco/ionicons/blob/master/png/512/plus.png
https://github.com/driftyco/ionicons/blob/master/png/512/minus.png
<Grid Margin="0,0,0,0" >
<StackPanel Orientation="Horizontal" Height="32">
<StackPanel.Resources>
<ImageBrush x:Key="plusImage" ImageSource="/Resources/plus.png" />
<ImageBrush x:Key="minusImage" ImageSource="/Resources/minus.png" />
</StackPanel.Resources>
<RepeatButton Width="20"
Height="20"
Background="{Binding Source={StaticResource minusImage}}"/>
<TextBlock Margin="5,0,5,0"
VerticalAlignment="Top"
FontWeight="Bold"
Text="X" />
<RepeatButton Width="20"
Height="20"
Background="{Binding Source={StaticResource plusImage}}"/>
<Separator Margin="5,0,5,0" Style="{StaticResource {x:Static ToolBar.SeparatorStyleKey}}" />
<RepeatButton Width="20"
Height="20"
Background="{Binding Source={StaticResource minusImage}}"/>
<TextBlock Margin="5,0,5,0"
VerticalAlignment="Top"
FontWeight="Bold"
Text="Y" />
<RepeatButton Width="20"
Height="20"
Background="{Binding Source={StaticResource plusImage}}"/>
<Separator Margin="5,0,5,0" Style="{StaticResource {x:Static ToolBar.SeparatorStyleKey}}" />
<RepeatButton Width="20"
Height="20"
Background="{Binding Source={StaticResource minusImage}}"/>
<TextBlock Margin="5,0,5,0"
VerticalAlignment="Top"
FontWeight="Bold"
Text="Z" />
<RepeatButton Width="20"
Height="20"
Background="{Binding Source={StaticResource plusImage}}"/>
</StackPanel>
</Grid>
I'm creating a control to control the x, y, z positions of a point. As you can see in the image above, only one of the plus icons appears to be stretched.
Variations:
If I remove Z and the icons associated with it, the last plus icon for Y is NOT stretched
Removing the fontweight from Z makes the plus icon appear normal (not stretched)
What would cause an imagebrush to stretch an image like this?
You could set the UseLayoutRounding property on the RepeatButtons:
<RepeatButton Width="20" Height="20" UseLayoutRounding="True"
Background="{Binding Source={StaticResource plusImage}}"/>

xaml TranslateTransform.X binding to value

I'm relatively new to some of Xaml features..
I'm trying to implement this progressbar with an arrow on top that shows the progress indicator in addition to the filled bar. I used polygon to display the arrow and just need to translate it in X direction to display it on top of the progrssBar. However, the binding applied below .
Binding PlaybackProgressTip
which is a double is causing the code to crash. Can someone please tell me how to bind the TranslateTransform.X to the double value or I need to do something else?
<Grid x:Name="grid" VerticalAlignment="Top" Margin="0,34,0,0" Grid.Row="1" Height="18" d:LayoutOverrides="VerticalAlignment, Width, VerticalMargin">
<ProgressBar x:Name="Progress" Maximum="1" Value="{Binding PlaybackProgress}" VerticalAlignment="Center" Background="LightGray" Height="6" Visibility="Collapsed" IsIndeterminate="False" Foreground="DarkBlue"/>
<Image x:Name="ProgressComplete" Source="/Images/checkbox.png" Height="18" VerticalAlignment="Center" HorizontalAlignment="Center" Visibility="Collapsed" Stretch="Uniform"/>
<Polygon Points="0,0 8,0, 4,5" Stroke="Black" Fill="Black" Margin="0,-2,0,0">
<Polygon.RenderTransform>
<TransformGroup>
<TranslateTransform x:Name="ProgressPositionTranslate" X="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=PlaybackProgressTip}" />
</TransformGroup>
</Polygon.RenderTransform>
</Polygon>
</Grid>

Resources