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>
Related
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>
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.
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>
I've made a circle for display the status of a connection for my DB, it's working nice but I want to make it look like a bulb with glass effects.
<Canvas Visibility="Visible" x:Name="connection_red" Grid.Column="1">
<Ellipse
Fill="Red"
Height="13"
Width="13"
Margin="0,7,80,0"
StrokeThickness="1"
Stroke="White"/>
</Canvas>
I have visited many online tutorials, but they use too much code and I do not want to use 50 lines of code to achieve this effect. Someone knows how to do to get the effect glass bulb in a few lines of code? You can show me the way?
This is the actual preview:
You need to either specify the opacity seperately...
<Ellipse Fill="#FF0000" Opacity="0.25"
Height="130"
Width="130"
Margin="0,7,80,0"
StrokeThickness="1"
Stroke="White" />
...or use a SolidColorBrush...
<Canvas Visibility="Visible" x:Name="connection_red" Grid.Column="1">
<Ellipse Height="130"
Width="130"
Margin="0,7,80,0"
StrokeThickness="1"
Stroke="White">
<Ellipse.Fill>
<SolidColorBrush>
<SolidColorBrush.Color>
<Color A="25" R="255" G="0" B="0" />
</SolidColorBrush.Color>
</SolidColorBrush>
</Ellipse.Fill>
</Ellipse>
Would be good though if you could clarify exactly what type of effect you're after.
<Canvas Visibility="Visible" x:Name="connection_red" Grid.Column="1">
<Ellipse
Fill="#7FFF0000"
Height="13"
Width="13"
Margin="0,7,80,0"
StrokeThickness="1"
Stroke="White"/>
</Canvas>
I have the below code. I am trying to place the image directly to the right of the textblock within the border, but the image is almost touching the right side of the screen. How can I allign the image to the right of the textblock
<Border BorderBrush="#FFD6D4D4" BorderThickness="0,0,0,1" Grid.Column="0" Grid.Row="1"
Height="28" VerticalAlignment="Top" Background="#FFF7F7F7"
HorizontalAlignment="Stretch">
<DockPanel LastChildFill="False">
<TextBlock DockPanel.Dock="Left"
Style="{StaticResource HeaderTextBlockStyle}"
Text="Check new items"
VerticalAlignment="Center" Margin="2" />
<Image
DockPanel.Dock="Left"
VerticalAlignment="Center"
SnapsToDevicePixels="True"
UseLayoutRounding="True"
RenderOptions.BitmapScalingMode="HighQuality"
Source="/Media/pointer.png"
RenderTransformOrigin="0.95,4.046"
HorizontalAlignment="Center" Margin="0"
Height="25.306" Width="25.008>
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="49.57"/>
<TranslateTransform X="-39.746" Y="-21.185"/>
</TransformGroup>
</Image.RenderTransform>
</Image>
</DockPanel>
</Border>
Try using the Grid control and define two columns into it
<Border BorderBrush="#FFD6D4D4" BorderThickness="0,0,0,1" Grid.Column="0" Grid.Row="1"
Height="28" VerticalAlignment="Top" Background="#FFF7F7F7"
HorizontalAlignment="Stretch">
<Grid>
<Grid.ColumnDefinitions>
<Column Definition Width="*"/>
<Column Definition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Style="{StaticResource HeaderTextBlockStyle}"
Text="Check new items"
VerticalAlignment="Center" Margin="2" />
<Image
Grid.Column="1" VerticalAlignment="Center"
SnapsToDevicePixels="True"
UseLayoutRounding="True"
RenderOptions.BitmapScalingMode="HighQuality"
Source="/Media/pointer.png"
RenderTransformOrigin="0.95,4.046"
HorizontalAlignment="Center" Margin="0"
Height="25.306" Width="25.008>
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="49.57"/>
<TranslateTransform X="-39.746" Y="-21.185"/>
</TransformGroup>
</Image.RenderTransform>
</Image>
</Grid>
</Border>
Try using a StackPanel with Orientation set to horizontal instead of the dockpanel. That should put the image right next to the textblock.
if you still want to use the dock panel try setting the margin you want, on the image like margin="0,0,100,0"