Ball inside the pocket hole. WPF - c#

My Code is giving me a NaN value when I tried to test its return value. the code is here
C#:
var hx1 = Canvas.GetLeft(top);
var hy1 = Canvas.GetTop(top);
Rect h1 = new Rect(hx1, hy1, top.ActualWidth, top.ActualHeight);
Console.WriteLine(h1);
XAML
<Canvas Canvas.Left="134" Canvas.Top="98" Height="500" Width="1010">
<Ellipse Height="50" Name="top" Stroke="Black" Width="50" Margin="481,4,479,446" />
<Ellipse Height="50" Margin="30,21,930,429" Name="topLeft" Stroke="Black" Width="50" />
<Ellipse Height="50" Margin="30,430,930,20" Name="botLeft" Stroke="Black" Width="50" />
<Ellipse Height="50" Margin="481,444,479,6" Name="bot" Stroke="Black" Width="50" />
<Ellipse Height="50" Margin="930,430,30,20" Name="botRight" Stroke="Black" Width="50" />
<Ellipse Height="50" Margin="930,21,30,429" Name="topRight" Stroke="Black" Width="50" />
<Grid Canvas.Left="0" Canvas.Top="0" Height="500" Width="1010">
<!--<Canvas Height="500" Width="1010" Name="PoolCanvas">-->
<ContentControl x:Name="poolContainer">
</ContentControl>
<!--</Canvas>-->
</Grid>
</Canvas>
First of all, I am trying to make a pool game using WPF. Right now I am trying to make a 'pocket hole' for the ball to go in inside the pool. I was told about retrieving the holes x and y first or coordinates of the holes and later check the intersection and do the coding of balls putting it inside the pocket. However on my code, its only giving me this output:
NaN,NaN,50,50 when I tried to print that rect.
One more thing, If there is another type of method where I can fulfill these goals where if ball go inside the pocket hole. ball will disappear.
If you think I still need to give more code. Feel free to comment. I am open for suggestions. Thank you in advance and sorry if I have grammar errors.


Instead of using Ellipse to define each hole, you can use Path with EllipseGeometry:
<Canvas>
<Path Stroke="Black">
<Path.Data>
<EllipseGeometry x:Name="topLeft" Center="50,50" RadiusX="25" RadiusY="25"/>
</Path.Data>
</Path>
<Path Stroke="Black">
<Path.Data>
<EllipseGeometry x:Name="top" Center="500,50" RadiusX="25" RadiusY="25"/>
</Path.Data>
</Path>
<!-- More Paths, one for each hole -->
</Canvas>
Notice that now it's the geometries that are named, not the Paths themselves. So your C# code would be:
var hx1 = top.Center.X;
var hy1 = top.Center.Y;
var h1 = top.Center; // of type System.Windows.Point;
Rect h1rect = top.Bounds;

Related

Add shapes in Listview - xamarin form

I am using Xamarin.Form having android and ios project, I want to create add shapes in listview.
I search for same, we can use path class but dont know how to use it.
Please send me your solutions
Thanks

There is path class you can use it.
Path class have a data property. for example
<Path Data="M 10,100 L 100,100 100,50Z"
Stroke="Black"
Aspect="Uniform"
HorizontalOptions="Start" />
The Data string begins with the move command, indicated by M, which establishes an absolute start point for the path. L is the line command, which creates a straight line from the start point to the specified end point. Z is the close command, which creates a line that connects the current point to the starting point.
Please review link given below, path is added in listview:
https://xamarinuidesigns.blogspot.com/2021/12/listview-ui-design-2.html

You could use the Composite geometries.
<Path StrokeThickness="2" Fill="Orange">
<Path.Data>
<GeometryGroup FillRule="Nonzero">
<RectangleGeometry Rect="0,0,50,50" />
<EllipseGeometry RadiusX="25"
RadiusY="25"
Center="50,25" />
</GeometryGroup>
</Path.Data>
</Path>
Usage in Listview:
<ListView ItemsSource="{Binding list}" RowHeight="60">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal">
<Path StrokeThickness="2" Fill="Orange">
<Path.Data>
<GeometryGroup FillRule="Nonzero">
<RectangleGeometry Rect="0,0,50,50" />
<EllipseGeometry RadiusX="25"
RadiusY="25"
Center="50,25" />
</GeometryGroup>
</Path.Data>
</Path>
<Label Text="{Binding Name}"></Label>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
For more details of the Composite geometries, please check the link below.
https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/shapes/geometries#composite-geometries

<Path Data="M 10,100 L 100,100 100,50Z"
Stroke="Black"
Aspect="Uniform"
HorizontalOptions="Start" />
https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/shapes/path
please review this link and you have any question then you can ask me?

Make tooltip area bigger than the control

I have a chart with thin lines as markers which the user can hover over to get their values.
I would like to make the area in which the tooltip activates bigger but keep the actual line the same size as it is quite difficult for the use to actually hover over.
I also have one line that the user can drag around and it is very difficult to get the precise spot to click and drag.
This is my template for the marker but I am not sure how to accomplish this goal, can anyone point me in the right direction?
<Geometry x:Key="LineGeometry">M 0,0 L 5,0 L 5,15 L 0,15 Z</Geometry>
<DataTemplate>
<!-- Define the template for the actual markers -->
<Path Width="10"
Height="10"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Data="{StaticResource LineGeometry}"
Stretch="Fill"
Stroke="{StaticResource BlackBrush}"
StrokeThickness="0.5">
<Path.ToolTip>
<!-- Lots of tooltip definition stuff -->
</Path.ToolTip>
</Path>
</DataTemplate>
Visual Studio 2015
WPF
C#
Infragistics XamDataChart

Your actual problem is you have not used the Fill property of Path,so while creating this shape there is literally nothing in between lines, that's why if you check IsMouseOver property when Mouse pointer is inside this shape, it will return false. however if you specify Fill property result will be as expected.
Use Fill property as below and your ToolTip will be visible if Mouse is over Path shape anywhere.:
Fill="Transparent"
So your output won't get impacted visually. below is a sample program.
XAML:
<Window.Resources>
<Geometry x:Key="LineGeometry">M 0,0 L 5,0 L 5,15 L 0,15 Z</Geometry>
</Window.Resources>
<StackPanel>
<Path Width="100"
Height="100"
Name="path"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Data="{StaticResource LineGeometry}"
Stretch="Fill"
Stroke="Red" Margin="50"
StrokeThickness="5"
Fill="Transparent"
MouseLeftButtonDown="Path_MouseLeftButtonDown">
<Path.ToolTip>
<TextBlock Text="This is My Tooltip of Path" />
</Path.ToolTip>
</Path>
<StackPanel Orientation="Horizontal">
<Label Content="Is Mouse Over Path : " />
<Label Content="{Binding ElementName=path,Path=IsMouseOver}" BorderThickness="0.5" BorderBrush="Black"/>
</StackPanel>
</StackPanel>
Output:
Sorry,don't know how to captureMousein screenshot, but mouse is in between the shape while image was captured. RemoveFill
propertyfromPathand then see the change in ouput.

If I understand you correctly, you just want to show tooltip inside your rectangle represented by Path. If so you can just wrap your path in transparent border and set tooltip on border:
<Border Background="Transparent">
<Path Width="10"
Height="10"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Data="{StaticResource LineGeometry}"
Stretch="Fill"
Stroke="Black"
StrokeThickness="0.5"></Path>
<Border.ToolTip>
<TextBlock Text="Tooltip" />
</Border.ToolTip>
</Border>

Using canvas-based iconset

I just found an icon set here:
http://www.archetype-inc.com/yard/fundamentals/icons/
I've been looking for something like it for a long time, however this doesn't give lots of PNG files, but rather an adobe illustrator and XAML file.
Luckily I'm using WPF, so hopefully I should be able to use the XAML file. Infact I preffer the idea to PNG due to that fact that it's scalable.
Anyway, my problem is I have no idea how to use it. I'm relatively new to XAML.
It's formatted with groups of canvases, for example, here is a bit from the start:
<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="fundamental_icons" Width="1000" Height="1225" Clip="F1 M 0,0L 1000,0L 1000,1225L 0,1225L 0,0">
<Canvas x:Name="Document" Width="1000" Height="1225" Canvas.Left="0" Canvas.Top="0">
<Rectangle Width="1000" Height="1225" Canvas.Left="0" Canvas.Top="0" Stretch="Fill" Fill="#FFFFFFFF"/>
<Rectangle Width="0.75" Height="7.85938" Canvas.Left="449.967" Canvas.Top="18.9948" Stretch="Fill" Fill="#FF000000"/>
<Path Width="2.92188" Height="7.85938" Canvas.Left="451.573" Canvas.Top="18.9948" Stretch="Fill" Fill="#FF000000" Data="F1 M 454.354,21.1823L 453.245,21.1823L 453.245,20.6823C 453.245,20.0729 453.229,19.5885 453.995,19.5885C 454.167,19.5885 454.323,19.6041 454.495,19.6354L 454.495,19.0416C 454.276,19.0104 454.12,18.9948 453.917,18.9948C 452.807,18.9948 452.526,19.6823 452.542,20.6666L 452.542,21.1823L 451.573,21.1823L 451.573,21.7604L 452.542,21.7604L 452.542,26.8541L 453.245,26.8541L 453.245,21.7604L 454.354,21.7604L 454.354,21.1823 Z "/>
<Path Width="5.0625" Height="7.76563" Canvas.Left="457.433" Canvas.Top="21.1823" Stretch="Fill" Fill="#FF000000" Data="F1 M 459.699,26.8385L 459.464,27.4791C 459.23,28.0104 459.089,28.3698 458.48,28.3698C 458.324,28.3698 458.168,28.3541 457.996,28.3229L 457.996,28.901C 458.105,28.9479 458.261,28.9479 458.527,28.9479C 459.402,28.9479 459.636,28.6823 460.027,27.7291L 462.496,21.1823L 461.793,21.1823L 460.043,26.0104L 458.183,21.1823L 457.433,21.1823L 459.699,26.8385 Z "/>
<Path Width="5.35938" Height="6.01563" Canvas.Left="462.742" Canvas.Top="21.0104" Stretch="Fill" Fill="#FF000000" Data="F1 M 465.43,21.0104C 463.68,21.0104 462.742,22.3854 462.742,24.0104C 462.742,25.651 463.68,27.026 465.43,27.026C 467.164,27.026 468.102,25.651 468.102,24.0104C 468.102,22.3854 467.164,21.0104 465.43,21.0104 Z M 465.43,21.5885C 466.758,21.5885 467.414,22.8073 467.414,24.0104C 467.414,25.2291 466.758,26.4323 465.43,26.4323C 464.102,26.4323 463.43,25.2291 463.43,24.0104C 463.43,22.8073 464.102,21.5885 465.43,21.5885 Z "/>
<Path Width="4.60938" Height="5.84375" Canvas.Left="469.151" Canvas.Top="21.1823" Stretch="Fill" Fill="#FF000000" Data="F1 M 473.76,21.1823L 473.057,21.1823L 473.057,24.1666C 473.057,25.3073 472.541,26.4323 471.354,26.4323C 470.26,26.4323 469.87,25.901 469.838,24.8698L 469.838,21.1823L 469.151,21.1823L 469.151,24.8698C 469.151,26.1823 469.698,27.026 471.135,27.026C 471.979,27.026 472.729,26.5885 473.088,25.8385L 473.12,25.8385L 473.12,26.8541L 473.76,26.8541L 473.76,21.1823 Z "/>
<Rectangle Width="0.6875" Height="7.85938" Canvas.Left="478.131" Canvas.Top="18.9948" Stretch="Fill" Fill="#FF000000"/>
<Path Width="0.6875" Height="7.85938" Canvas.Left="480.155" Canvas.Top="18.9948" Stretch="Fill" Fill="#FF000000" Data="F1 M 480.155,26.8541L 480.843,26.8541L 480.843,21.1823L 480.155,21.1823L 480.155,26.8541 Z M 480.155,20.1041L 480.843,20.1041L 480.843,18.9948L 480.155,18.9948L 480.155,20.1041 Z "/>
How would I put these icons into a regular WPF application? Is there any way?

Each control in WPF can be a container for others controls.. so it's really esay to in add a xaml image in a button. Copy a row of your iconset a put it into the button content.
<Button Width="30" Height="30">
<Button.Content>
<Path Width="4.60938" Height="5.84375" Canvas.Left="539.166" Canvas.Top="21.0104" Stretch="Fill" Fill="#FF000000" Data="F1 M 539.166,26.8541L 539.853,26.8541L 539.853,23.5416C 539.869,22.4323 540.541,21.5885 541.635,21.5885C 542.76,21.5885 543.072,22.3385 543.072,23.3073L 543.072,26.8541L 543.775,26.8541L 543.775,23.1979C 543.775,21.8541 543.291,21.0104 541.681,21.0104C 540.885,21.0104 540.119,21.4791 539.869,22.151L 539.853,22.151L 539.853,21.1823L 539.166,21.1823L 539.166,26.8541 Z "/>
</Button.Content>
</Button>
For you 2nd question. It's possible to map each geometry in the resources with a different key, after you can add the icon simply by calling the its key.
<Window.Resources>
<StreamGeometry x:Key="Geometry1">F1M539.166,26.8541L539.853,26.8541 539.853,23.5416C539.869,22.4323 540.541,21.5885 541.635,21.5885 542.76,21.5885 543.072,22.3385 543.072,23.3073L543.072,26.8541 543.775,26.8541 543.775,23.1979C543.775,21.8541 543.291,21.0104 541.681,21.0104 540.885,21.0104 540.119,21.4791 539.869,22.151L539.853,22.151 539.853,21.1823 539.166,21.1823 539.166,26.8541z</StreamGeometry>
</Window.Resources>
<Grid>
<Button Width="30" Height="30">
<Button.Content>
<Path Width="9.2" Height="11.6" Stretch="Fill" Fill="#FF000000" Data="{DynamicResource Geometry1}"/>
</Button.Content>
</Button>
</Grid>

How do you set a Translate Transform to an ImageBrush within a Path?

I have the following simple path. But everytime in Expression Blend I try and set a translate transform to its image brush the image disappears. Ideally the fill should be none. I need to dynamicly set the x and y of the image within the brush if possible. If you have done this in C# that would be fine as well. Or am I mistaken and this just cant be done?
<Path Data="M0.5,0.5 L99.5,0.5 L99.5,439.5 L0.5,439.5 z" Fill="#BFF31313" Height="440" Canvas.Left="192" Stretch="Fill" Stroke="Black" Canvas.Top="176" Width="100" Visibility="Collapsed">
<Path.Fill>
<ImageBrush ImageSource="4x4.png" Stretch="None"/>
</Path.Fill>
</Path>

Something like this?
<Path Data="M0.5,0.5 L99.5,0.5 L99.5,439.5 L0.5,439.5 z" Fill="#BFF31313" Height="440" Canvas.Left="192" Stretch="Fill" Stroke="Black" Canvas.Top="176" Width="100" Visibility="Collapsed">
<Path.Fill>
<ImageBrush ImageSource="4x4.png" Stretch="None">
<ImageBrush.Transform>
<TranslateTransform X="10" Y="10"/>
</ImageBrush.Transform>
</ImageBrush>
</Path.Fill>
</Path>

How can I get the X and Y position of a path in Silverlight?

I have some paths that are not inside any canvas, and I want to know how to get their X and Y position to create animations based on it.
<Grid x:Name="LayoutRoot" Width="640" Height="480">
<Image Source="SC.png" Stretch="Fill" Width="640" Height="480" d:LayoutOverrides="HorizontalAlignment"/>
<Path x:Name="but77" DataContext="77" MouseLeftButtonDown="MapClick" MouseEnter="MouseOver" MouseLeave="MouseOut" Fill="#FF2400FF" Stretch="Fill" Stroke="Black" Height="17.5" HorizontalAlignment="Right" Margin="0,104.875,68.125,0" VerticalAlignment="Top" Width="17.875" UseLayoutRounding="False" Data="M555,105.375 L554.5,121.75 L571,121.875 L571.375,105.5 z" Opacity="0"/>
<Path x:Name="but51" DataContext="51" MouseLeftButtonDown="MapClick" MouseEnter="MouseOver" MouseLeave="MouseOut" Fill="#FF2400FF" Stretch="Fill" Stroke="Black" Height="17.5" HorizontalAlignment="Right" Margin="0,164.125,70.375,0" VerticalAlignment="Top" Width="17.875" Opacity="0" UseLayoutRounding="False" Data="M555,105.375 L554.5,121.75 L571,121.875 L571.375,105.5 z"/>
<Path x:Name="but50" DataContext="50" MouseLeftButtonDown="MapClick" MouseEnter="MouseOver" MouseLeave="MouseOut" Fill="#FF2400FF" Stretch="Fill" Stroke="Black" Height="17.5" HorizontalAlignment="Right" Margin="0,0,70.375,178.375" VerticalAlignment="Bottom" Width="17.875" Opacity="0" UseLayoutRounding="False" Data="M555,105.375 L554.5,121.75 L571,121.875 L571.375,105.5 z"/>
<Path x:Name="but82" DataContext="82" MouseLeftButtonDown="MapClick" MouseEnter="MouseOver" MouseLeave="MouseOut" Fill="#FF2400FF" Stretch="Fill" Stroke="Black" Height="17.5" HorizontalAlignment="Right" Margin="0,0,78.75,156.875" VerticalAlignment="Bottom" Width="17.875" Opacity="0" UseLayoutRounding="False" Data="M555,105.375 L554.5,121.75 L571,121.875 L571.375,105.5 z"/>
</Grid>

The tool you need is the TransformToVisual method which is provided by all UIElement derivatives including Path. To find the X,Y position of one of your paths relative to the containing Grid use:-
GeneralTransform gt = but77.TransformToVisual(LayoutRoot);
Point but77Position = gt.Transform(new Point(0,0));

Categories