I have problem when draw lines have opacity.
Source i writing:
<Line X1="50" Y1="50" X2="100" Y2="100" Stroke="Red" StrokeThickness="10" Opacity="0.5" StrokeStartLineCap="Round" StrokeEndLineCap="Round"/>
<Line X1="100" Y1="100" X2="150" Y2="100" Stroke="Red" StrokeThickness="10" Opacity="0.5" StrokeStartLineCap="Round" StrokeEndLineCap="Round"/>
i would like picture as
you can help me?
thanks
There are many ways to achieve what you're after, but the basis of what you need to do is essentially to group each line inside one container then reduce the opacity of that container rather than the lines themselves.
For example, if you place the Line's inside a Canvas like so:
<Canvas Opacity="0.5">
<Line X1="50" Y1="50" X2="100" Y2="100" Stroke="Red" StrokeThickness="10" StrokeStartLineCap="Round" StrokeEndLineCap="Round"/>
<Line X1="100" Y1="100" X2="150" Y2="100" Stroke="Red" StrokeThickness="10" StrokeStartLineCap="Round" StrokeEndLineCap="Round"/>
</Canvas>
You can achieve what you're after:
The Canvas is a great tool for dealing with such things, but if really needed it can be substituted with just about any container that can deal with multiple children (such as a grid).
The key is to make the container control the opacity, not the children themselves.
Related
Take a look at this picture:
Notice how the line to the left has a clean corner, and the one to the right does not. Here's the XAML I used to create each:
<Canvas Margin="10">
<Polyline Stroke="Green" StrokeThickness="10">
<Polyline.Points>
<Point X="0" Y="0"/>
<Point X="30" Y="50"/>
<Point X="60" Y="0"/>
</Polyline.Points>
</Polyline>
<Line X1="100" Y1="0" X2="130" Y2="50" Stroke="Red" StrokeThickness="10"/>
<Line X1="130" Y1="50" X2="160" Y2="0" Stroke="Blue" StrokeThickness="10"/>
</Canvas>
Obviously the Polyline handles the corners easily, but it doesn't support segments with different colors, which is what I need. Creating separate lines solves this problem, but I lose the clean corners. I need to be able to create a line with the corners of line 1, but the colors of line 2.
My actual application is a line graph, so these lines are created dynamically and could have dozens of segments each with an angle ranging from 0 to 180 degrees.
The only solution I have come across is to use a LinearGradientBrush with Polyline.Stroke, and put in gradient stops where the corners should be. But considering the length of the line and each segment are totally variable and the gradient stops seem to be measured in percentages (from 0 at one end to 1 at the other) it just seems like it would be a pain to calculate and comes off as an over-complicated solution. Is there any simpler way to do this?
Set the start and end caps of the Lines' stroke to Round:
<Line X1="100" Y1="0" X2="130" Y2="50" Stroke="Red" StrokeThickness="10"
StrokeStartLineCap="Round" StrokeEndLineCap="Round"/>
<Line X1="130" Y1="50" X2="160" Y2="0" Stroke="Blue" StrokeThickness="10"
StrokeStartLineCap="Round" StrokeEndLineCap="Round"/>
My coordinates are relative to the control size, in the 0 to 1 range. I currently draw on my control using manual scaling by RenderSize, which works fine, but is surely the wrong way.
How can I draw directly in 0-1 coordinates instead?
You may use Path controls and scale their Data by applying an appropriate transform to the Geometry.Transform property, like in the trivial example shown below. This way you would scale the drawn shapes, but not their stroke thicknesses.
<Grid>
<Canvas>
<Canvas.Resources>
<ScaleTransform x:Key="transform"
ScaleX="{Binding Value, ElementName=scaleSlider}"
ScaleY="{Binding Value, ElementName=scaleSlider}"/>
</Canvas.Resources>
<Path Stretch="None" Stroke="Blue" StrokeThickness="2">
<Path.Data>
<RectangleGeometry Rect="0.1,0.1,0.8,0.4"
Transform="{StaticResource transform}"/>
</Path.Data>
</Path>
<Path Stretch="None" Stroke="Red" StrokeThickness="2">
<Path.Data>
<EllipseGeometry Center="0.6,0.5" RadiusX="0.3" RadiusY="0.3"
Transform="{StaticResource transform}"/>
</Path.Data>
</Path>
</Canvas>
<Slider x:Name="scaleSlider" HorizontalAlignment="Center" VerticalAlignment="Bottom"
Width="100" Minimum="100" Maximum="500"/>
</Grid>
I have to show a compass with an arrow inside a circle
I have the following code:
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Page.Resources>
<Pen x:Key="BlackPen1" Thickness="1" Brush="Black"></Pen>
</Page.Resources>
<Grid>
<!-- Image for the Circle -->
<Image>
<Image.Source>
<DrawingImage>
<DrawingImage.Drawing>
<GeometryDrawing Pen="{StaticResource BlackPen1}" >
<GeometryDrawing.Geometry>
<GeometryGroup>
<EllipseGeometry RadiusX="50" RadiusY="50"></EllipseGeometry>
</GeometryGroup>
</GeometryDrawing.Geometry>
</GeometryDrawing>
</DrawingImage.Drawing>
</DrawingImage>
</Image.Source>
</Image>
<Path Grid.Row="1" Data="M15,0 L30,40 L0,40Z" Stroke="Black" Fill="Black" StrokeThickness="1" HorizontalAlignment="Center" />
<Line Grid.Row="0" Y1="40" Y2="400" X1="0" X2="0" Stroke="Black" StrokeThickness="5" HorizontalAlignment="Center" />
</Grid>
</Page>
Now I have to transform this whole compass based on the input angle.
One thing I know is If I move my arrow shape into Image type I can tans form this using the following
<Image.RenderTransform>
<RotateTransform Angle="{Binding ElementName=root, Path=Angle}"/>
</Image.RenderTransform>
But I am not able to draw this geometry inside the Image tag.
How to achieve this?
Why would you need to rotate the Ellipse? Surely only the arrow moves in a compass. In order to make that job easier, why don't you create the arrow in just one Path, instead of additionally using a Line element? You could define the same arrow with rotation like this:
<Path Grid.Row="1" Data="M15,0 30,40 18,40 18,400 12,400 12,40 0,40Z" Stroke="Black"
Fill="Black" StrokeThickness="1" HorizontalAlignment="Center"
RenderTransformOrigin="0.5,0.5">
<Path.RenderTransform>
<RotateTransform Angle="{Binding Angle, ElementName=root}" />
</Path.RenderTransform>
</Path>
You can apply the rotation to the whole Grid That contains all of your controls. Don't forget to set RenderTransformOrigin="0.5,0.5" on the element you rotate so it rotates arround the center and not the top left corner.
Or you could add a RotationTransform to each of the elements Path, Line and Ellipse. However in this case Rotation centers will probably be different for each one and it makes it more complicated.
Are horizontal or vertical WPF Lines limited to 125,000 pixels? Looking at the following code the Green line displays correctly but the Red one does not display at all despite being just 0.01 longer. Any idea why?
<Window x:Class="DCView.Window11"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window11" Height="300" Width="300">
<ScrollViewer>
<Grid Width="150000">
<Line X1="0" X2="125000.00" Y1="10" Y2="10" StrokeThickness="1" Stroke="Green"></Line>
<Line X1="0" X2="125000.01" Y1="20" Y2="20" StrokeThickness="1" Stroke="Red"></Line>
</Grid>
</ScrollViewer>
</Window>
Andrew
This seems to be a limitation in WPF's handling of vector graphics.
To make it more complicated, try changing the StrokeThickness - if you set the StrokeThickness of your red line from 1 to 2, it displays again... until you increase the length above 250000.. Then it vanishes again.
<Grid>
<Line X1="0" X2="125000.00" Y1="10" Y2="10" StrokeThickness="1" Stroke="Green"></Line>
<Line X1="0" X2="250000.00" Y1="20" Y2="20" StrokeThickness="2" Stroke="Red"></Line>
<Line X1="0" X2="250000.01" Y1="30" Y2="30" StrokeThickness="2" Stroke="Blue"></Line>
</Grid>
The max length goes up as you increase your stroke thickness.
Also Note that if the line wasn't perfectly horizontal or vertical, the length limit seems to vanish:
<Grid>
<Line X1="0" X2="125000.00" Y1="10" Y2="10" StrokeThickness="1" Stroke="Green" />
<Line X1="0" X2="125000.01" Y1="20" Y2="20.0001" StrokeThickness="1" Stroke="Red" />
</Grid>
You can find the bug written up on connect: Disappearing Path (WPF)
It definitely draws past 150,000 pixels, It is a bit strange that the line is not seen in this case, because for example if you do this
<Line X1="0" X2="125000.01" Y1="20" Y2="20" StrokeThickness="2" Stroke="Red"></Line>
or this
<Line X1="0" X2="125000.01" Y1="21" Y2="20" StrokeThickness="1" Stroke="Red"></Line>
all works fine, There is probably a answer somewhere as to why, but good find as this would cause significant flicker if you were animating the value of X2.
I'm trying to create a custom control with C#/WPF. See below for the XAML of my control, and a window I'm trying to put it into.
The problem: When I set the HorizontalAlignment or vertical alignment properties to Center, the upper-left corner of the control is centered, but extends down and to the right. The bounding box of the control as shown in the designer is very small (zero width/heigh I think).
It seems like I have a problem with my control not reporting its size properly when the layout is doing its thing. Also, it doesn't seem to resize when Height and Width are adjusted. I have nothing in the code-behind (yet) that alters the appearance of the control (e.g. no Measure overrides).
This is my first attempt at a custom control - probably better ways of doing it (TextBlock comes to mind), but hey, this is how I learn! :D
The XAML defining my control:
<UserControl x:Class="LCD.LiquidCrystalDisplay"
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"
mc:Ignorable="d"
d:DesignWidth="300" d:DesignHeight="122">
<Canvas>
<Rectangle Fill="#FFD1D1D1" Width="300" Height="122" />
<Rectangle Fill="#FF345534" Margin="12,8,12,8" Width="276" Height="106" />
<Rectangle Fill="#FF293E29" Margin="15,11,15,11" Width="270" Height="100" />
<Line X1="32" X2="32" Y2="111" Y1="11" StrokeThickness="1" Stroke="#FF345534" />
<Line X1="50" X2="50" Y2="111" Y1="11" StrokeThickness="1" Stroke="#FF345534" />
<Line X1="67" X2="67" Y2="111" Y1="11" StrokeThickness="1" Stroke="#FF345534" />
<Line X1="84" X2="84" Y2="111" Y1="11" StrokeThickness="1" Stroke="#FF345534" />
<Line X1="101" X2="101" Y2="111" Y1="11" StrokeThickness="1" Stroke="#FF345534" />
<Line X1="117" X2="117" Y2="111" Y1="11" StrokeThickness="1" Stroke="#FF345534" />
<Line X1="134" X2="134" Y2="111" Y1="11" StrokeThickness="1" Stroke="#FF345534" />
<Line X1="151" X2="151" Y2="111" Y1="11" StrokeThickness="1" Stroke="#FF345534" />
<Line X1="168" X2="168" Y2="111" Y1="11" StrokeThickness="1" Stroke="#FF345534" />
<Line X1="184" X2="184" Y2="111" Y1="11" StrokeThickness="1" Stroke="#FF345534" />
<Line X1="201" X2="201" Y2="111" Y1="11" StrokeThickness="1" Stroke="#FF345534" />
<Line X1="218" X2="218" Y2="111" Y1="11" StrokeThickness="1" Stroke="#FF345534" />
<Line X1="235" X2="235" Y2="111" Y1="11" StrokeThickness="1" Stroke="#FF345534" />
<Line X1="251" X2="251" Y2="111" Y1="11" StrokeThickness="1" Stroke="#FF345534" />
<Line X1="268" X2="268" Y2="111" Y1="11" StrokeThickness="1" Stroke="#FF345534" />
<Line X1="15" X2="285" Y1="36" Y2="36" StrokeThickness="1" Stroke="#FF345534" />
<Line X1="15" X2="285" Y1="61" Y2="61" StrokeThickness="1" Stroke="#FF345534" />
<Line X1="15" X2="285" Y1="86" Y2="86" StrokeThickness="1" Stroke="#FF345534" />
</Canvas>
</UserControl>
And the XAML including it in a window:
<Window x:Class="TestJunk.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:my="clr-namespace:LCD;assembly=LCD"
Title="MainWindow" Height="341" Width="544">
<Grid Name="MainGrid">
<my:LiquidCrystalDisplay Name="lcd" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
</Window>
This is the behaviour of a Canvas. Here is what MSDN has to say:
Canvas is the only panel element that has no inherent layout
characteristics. A Canvas has default Height and Width properties of
zero, unless it is the child of an element that automatically sizes
its child elements. Child elements of a Canvas are never resized, they
are just positioned at their designated coordinates. This provides
flexibility for situations in which inherent sizing constraints or
alignment are not needed or wanted. For cases in which you want child
content to be automatically resized and aligned, it is usually best to
use a Grid element.
If you want to have the UserControl resize, wrap it around a Viewbox and set a Height and Width to the Canvas.