I'm developing an app and I'm facing the same problem.
For some reason, Path does not stretch to the entire area of the program window (I programmatically stretch the application window to two screens), but the Path seems to have its own limit Width. Here is the markup of the Path itself
<Grid >
<InkCanvas Name="inkCanvas"
Cursor="Cross"
UseCustomCursor="True"
EditingMode="{Binding EditingMode}">
<InkCanvas.InputBindings>
<KeyBinding Command="{Binding CloseAppCommand}"
Key="Esc"/>
<KeyBinding Command="{Binding DrawModeCommand}"
Key="F1"/>
</InkCanvas.InputBindings>
<i:Interaction.Behaviors>
<if:MouseBehaviour MouseX="{Binding MouseX, Mode=OneWayToSource}"
MouseY="{Binding MouseY, Mode=OneWayToSource}" />
</i:Interaction.Behaviors>
<InkCanvas.Background>
<ImageBrush ImageSource="{Binding Screenshot.Source}"></ImageBrush>
</InkCanvas.Background>
<Path Stroke="Black" Fill="Green" Opacity=".3">
<Path.Data>
<CombinedGeometry GeometryCombineMode="Exclude">
<CombinedGeometry.Geometry1>
<RectangleGeometry Rect="{Binding BlackoutRect.Rect}" >
</RectangleGeometry>
</CombinedGeometry.Geometry1>
<CombinedGeometry.Geometry2>
<RectangleGeometry Rect="{Binding SelectionRect.Rect}" >
</RectangleGeometry>
</CombinedGeometry.Geometry2>
</CombinedGeometry>
</Path.Data>
</Path>
</InkCanvas>
</Grid>
As a result, we see the following picture:
https://imgur.com/nqbqHFO
For example, if we specify Width="300px" for the path
<Path Stroke="Black" Fill="Green" Opacity=".3" Width="300px"...
, then the width of the green area on the screen above will actually be 300px, but if you specify for example 300000px, the picture will be the same as on the screen above. That is, I concluded that the Path element has a maximum width (by the way, if you specify MaxWitdh="30000px", then nothing will change anyway and it will be the same as in the screenshot above)
Hence the main question of this thread: How to change the maximum size of a Path element?
An InkCanvas does not stretch its child elements.
You could add a Panel that performs the desired layout, and bind its Width and Height to the ActualWidth and ActualHeight of the parent InkCanvas:
<InkCanvas ...>
...
<Grid Width="{Binding ActualWidth,
RelativeSource={RelativeSource AncestorType=InkCanvas}}"
Height="{Binding ActualHeight,
RelativeSource={RelativeSource AncestorType=InkCanvas}}">
<Path Stretch="Uniform" ...>
...
</Path>
</Grid>
</InkCanvas>
Related
I have a simple window with an image and a button. When the user resizes the window, I would like the button to be resized with the image in the exact same proportions. Below is an example of the desired behaviour I would like to have. The button around the head of the dog just extends and translates with the image.
I managed to have the above behaviour with a "Path" (above in blue), but I didn't manage to get the same behaviour with a button. I would like to perform some actions when the user clicks on the button.
Here is the xaml code I used for the working "Path" senario:
<Grid>
<Canvas x:Name="polylineCanvas" Grid.Row="1">
<Image x:Name="imgTraining"
Width="{Binding ActualWidth, ElementName=polylineCanvas, Mode=OneWay}"
Height="{Binding ActualHeight, ElementName=polylineCanvas, Mode=OneWay}"
Stretch="Uniform"
HorizontalAlignment="Left"
VerticalAlignment="Top">
</Image>
<Path Stroke="Blue" StrokeThickness="3">
<Path.Data>
<PathGeometry x:Name="polyline">
<PathGeometry.Transform>
<ScaleTransform
ScaleX="{Binding ActualWidth, ElementName=imgTraining}"
ScaleY="{Binding ActualHeight, ElementName=imgTraining}"/>
</PathGeometry.Transform>
</PathGeometry>
</Path.Data>
</Path>
</Canvas>
</Grid>
I tried to apply the same logic by adding a button instead of a Path. In this case, the button streches to the size of the window (but not to the size of the image):
Here is the xaml code I added for the button:
<Button x:Name="buttSelection" Opacity="0.5" Background="#FF000CFF">
<Button.LayoutTransform>
<ScaleTransform
ScaleX="{Binding ActualWidth, ElementName=imgTraining}"
ScaleY="{Binding ActualHeight, ElementName=imgTraining}"/>
</Button.LayoutTransform>
</Button>
Questions:
How could I scale my button in the same proportion as the image?
How could I set the size and position of this button to only be a part of the image (and not to be as big as the image itself)?
Thanks a lot for the support!
PS: I am very new to wpf/xaml, so there is a big chance that I am not doing things in the "intended way" or that there is a completely different solution.
You should put both the Image and the Button in a common Viewbox, which would automatically scale them together. There is usually no need to bind the size of an element to the actual size of another. This is done by using appropriate layout panels.
Inside the Viewbox, there would be a Grid as common parent, and a Canvas to position the Button. The Button Template would contain a Border around a ContentPresenter that could optionally show the Button's Content.
<Grid>
<Viewbox>
<Grid>
<Image x:Name="imageTraining"/>
<Canvas>
<Button x:Name="buttonSelection" Width="200" Height="200"
Canvas.Left="200" Canvas.Top="200">
<Button.Template>
<ControlTemplate TargetType="Button">
<Border BorderThickness="10"
BorderBrush="Blue"
Background="Transparent">
<ContentPresenter
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
</ControlTemplate>
</Button.Template>
</Button>
</Canvas>
</Grid>
</Viewbox>
</Grid>
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 try to get into creation of custom controls with for WPF. I found many good
tutorials and advises on the web so I started width a really simple example to get
my hands dirty and get some practice. I figured out that the issue stumbled across
is not really related to the subject of custom controls. So I extracted the xaml code to a simple wpf form.
<Window x:Class="WpfVerticalAigmentTest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="200" Width="200">
<Grid>
<Grid Height="40" Background="LightCyan" VerticalAlignment="Center">
<Path Stroke="Red"
StrokeThickness="20" VerticalAlignment="Center" >
<Path.Data>
<LineGeometry StartPoint="0,0" EndPoint="100,0"></LineGeometry>
</Path.Data>
</Path>
</Grid>
</Grid>
My expectation was to get a line centered in the grid and claiming the half of the stroke thickness on each side from the center. But as the linked image shows differs from my expectation.
"Resulting visualization"
So it look like I missed a detail about the line shape or linegeomtry. How do I get the the line displayed as shown in the following image?
"Expected result"
You need to match the Width and Height of the LineGeometry to the Width and Height of the Path and set the VerticalAlignment property to Bottom:
<Grid Height="20" Width="200" Background="LightCyan" VerticalAlignment="Center">
<Path Stroke="Red" StrokeThickness="20" VerticalAlignment="Bottom">
<Path.Data>
<LineGeometry StartPoint="0,0" EndPoint="200,0"></LineGeometry>
</Path.Data>
</Path>
</Grid>
If your goal is your the expectaions, and not the way how u have reached this, I could prefer to you this:
<Grid>
<Grid Height="40" Background="LightCyan" VerticalAlignment="Center">
<Border BorderThickness="10" VerticalAlignment="Center" BorderBrush="Red" />
</Grid>
</Grid>
The problem here is that the starting point of the XY Coordinates of the Path starts on the top left, and the stroke expands in both directions but thereby only makes the Path bigger to the bottom (I can't really tell you why, but that's just what seems to happen).
You can see this pretty good in the Design View:
To work around this simply move your Y Coordinates down half of the stroke size.
<Grid Height="40"
VerticalAlignment="Center"
Background="LightCyan">
<Path VerticalAlignment="Center"
Stroke="Red"
StrokeThickness="20">
<Path.Data>
<LineGeometry StartPoint="0,10" EndPoint="100,10" />
</Path.Data>
</Path>
</Grid>
Or wrap it in another control (Canvas is the commonly used controls for Paths) with the desired height:
<Grid Height="40"
VerticalAlignment="Center"
Background="LightCyan">
<Canvas Height="20" VerticalAlignment="Center">
<Path Stroke="Red"
StrokeThickness="20">
<Path.Data>
<LineGeometry StartPoint="0,10" EndPoint="100,10" />
</Path.Data>
</Path>
</Canvas>
</Grid>
And you are good to go:
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.
I'd like to resize a circle on my canvas with the help of a slider. This circle can be moved around on the canvas by some drag&drop stuff I did in code behind, so its position is not fixed.
I have bound the slider's value to an ellipse's height and width. Unfortunately, when I use the slider, the circle gets resized with its top left point (actually the top left point of the rectangle it's sitting in) staying the same during the operation.
I would like to resize it with its center point being constant during the operation. Is there an easy way to do this in XAML? BTW, I already tried ScaleTransform, but it didn't quite do what I wanted.
Thanks a bunch! :-)
Jan
<Canvas x:Name="MyCanvas">
<!-- this is needed for some adorner stuff I do in code behind -->
<AdornerDecorator Canvas.Left="10"
Canvas.Top="10">
<Ellipse x:Name="myEllipse"
Height="{Binding Path=Value, ElementName=mySlider}"
Width="{Binding Path=Value, ElementName=mySlider}"
Stroke="Aquamarine"
Fill="AliceBlue"
RenderTransformOrigin="0.5 0.5">
<Ellipse.RenderTransform>
<RotateTransform Angle="{Binding Path=Value, ElementName=myRotationSlider}" />
</Ellipse.RenderTransform>
</Ellipse>
</AdornerDecorator>
<Slider x:Name="mySlider"
Maximum="100"
Minimum="0"
Width="100"
Value="10"
Canvas.Left="150"
Canvas.Top="10" />
<Slider x:Name="myRotationSlider"
Maximum="360"
Minimum="0"
Width="100"
Value="0"
Canvas.Left="150"
Canvas.Top="50" />
</Canvas>
You can bind your Canvas.Left and Canvas.Top to your Height and Width via a ValueConverter.
Specifically (edit):
Create a property each for the Canvas.Left and Canvas.Top and bind to these.
Store the old values for Width and Heigth or the old slider value.
Whenever the slider is changed, get the incremental change "dx" by subtracting the stored value.
(Don't forget to update the stored value...)
Add dx to Width and Height property.
And, as Will said, add dx/2*-1 to Canvas.Left and Canvas.Top properties.
Does that make sense?
The problem is that you are using the SLIDER to adjust the width and height. Width and height are not calculated around RenderTransformOrigin; only RenderTransforms use that value.
Here's a corrected version (brb, kaxaml):
<Canvas x:Name="MyCanvas">
<!-- this is needed for some adorner stuff I do in code behind -->
<AdornerDecorator Canvas.Left="50" Canvas.Top="50">
<Ellipse
x:Name="myEllipse"
Width="10"
Height="10"
Fill="AliceBlue"
RenderTransformOrigin="0.5 0.5"
Stroke="Aquamarine">
<Ellipse.RenderTransform>
<TransformGroup>
<RotateTransform Angle="{Binding Path=Value, ElementName=myRotationSlider}"/>
<ScaleTransform
CenterX=".5"
CenterY=".5"
ScaleX="{Binding Path=Value, ElementName=mySlider}"
ScaleY="{Binding Path=Value, ElementName=mySlider}"/>
</TransformGroup>
</Ellipse.RenderTransform>
</Ellipse>
</AdornerDecorator>
<Slider
x:Name="mySlider"
Width="100"
Canvas.Left="150"
Canvas.Top="10"
Maximum="10"
Minimum="0"
SmallChange=".01"
Value="1"/>
<Slider
x:Name="myRotationSlider"
Width="100"
Canvas.Left="150"
Canvas.Top="50"
Maximum="360"
Minimum="0"
Value="0"/>
</Canvas>
Of course, this will probably not work for you. Why? Well, the ScaleTransform I used zooms not only the circle but also the border; as the circle gets bigger the border does as well. Hopefully you won't care about this.
Also, realize when combining transforms (scale then rotate in this case) that they are applied in order, and one may affect how another is done. In your case, you would not notice this. But if, say, you were doing a rotate and translate, the order would be relevant.
Ah, what was I thinking? Just stick the ellipse in a Grid (simplest solution but other containers would work). The grid automatically takes care of centering the ellipse as it is resized. No need for any value converters! Here's the code:
<Canvas x:Name="MyCanvas">
<!-- this is needed for some adorner stuff I do in code behind -->
<Grid Width="100" Height="100">
<AdornerDecorator>
<Ellipse
x:Name="myEllipse"
Width="{Binding Path=Value, ElementName=mySlider}"
Height="{Binding Path=Value, ElementName=mySlider}"
Fill="AliceBlue"
RenderTransformOrigin="0.5 0.5"
Stroke="Aquamarine">
<Ellipse.RenderTransform>
<RotateTransform Angle="{Binding Path=Value, ElementName=myRotationSlider}"/>
</Ellipse.RenderTransform>
</Ellipse>
</AdornerDecorator>
</Grid>
<Slider
x:Name="mySlider"
Width="100"
Canvas.Left="150"
Canvas.Top="10"
Maximum="100"
Minimum="0"
Value="10"/>
<Slider
x:Name="myRotationSlider"
Width="100"
Canvas.Left="150"
Canvas.Top="50"
Maximum="360"
Minimum="0"
Value="0"/>
</Canvas>
Since you're using a Canvas, the location an element has is the location. If you want the Top,Left position to change you need to do it yourself. If you were using another Panel type, like a Grid, you could change the alignment of your Ellipse to place it in the same relative location no matter what the size. You could get that effect by adding a Grid inside your AdornerDecorator and centering the Ellipse but you'd also need to set the AdornerDecorator or Grid to a fixed size because they won't stretch in a Canvas.
The best solution you could use would be a ScaleTransform applied to the RenderTransform property with a RenderTransformOrigin of 0.5,0.5. You said you had problems with ScaleTransform but not what the problem was.
Wrap your Ellipse in a Grid of the maximum size. As long as it is smaller, the Ellipse will be centered in the Grid:
<Grid
Canvas.Left="10"
Canvas.Top="10"
Width="100"
Height="100">
<AdornerDecorator>
<Ellipse x:Name="myEllipse"
Height="{Binding Path=Value, ElementName=mySlider}"
Width="{Binding Path=Value, ElementName=mySlider}"
Stroke="Aquamarine"
Fill="AliceBlue"
RenderTransformOrigin="0.5 0.5">
<Ellipse.RenderTransform>
<RotateTransform Angle="{Binding Path=Value, ElementName=myRotationSlider}" />
</Ellipse.RenderTransform>
</Ellipse>
</AdornerDecorator>
</Grid>
You may need to adjust your dragging logic to handle dragging the Grid instead of the Ellipse itself.
I've found a very easy way to do this in plain XAML: set Margin="-1000000". Read more here: Positioning an element inside the Canvas by its center (instead of the top left corner) using only XAML in WPF