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>
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;
Here is the xaml code to my graph:
<oxy:Plot HorizontalAlignment="Left"
Height="222"
Margin="0,49,0,0"
VerticalAlignment="Top"
Width="870"
Background="Transparent"
PlotAreaBorderColor="White"
LegendBorder="Transparent"
Name="viewCountPlot"
Title="Videos Watched"
TextColor="White" IsLegendVisible="False" IsManipulationEnabled="False" IsMouseWheelEnabled="False">
<oxy:Plot.Axes>
<oxy:DateTimeAxis Name="datetimeAxis" Position="Bottom" MajorGridlineColor="#40FFFFFF" TicklineColor="White" StringFormat="M/d/yy" IntervalType="Days" ShowMinorTicks="False"/>
</oxy:Plot.Axes>
<oxy:Plot.Series>
<oxy:LineSeries
Name="viewCountSeries"
Title="Videos Viewed"
DataFieldX="Date"
DataFieldY="Value"
Color="#CCFA6800"
StrokeThickness="2"
TrackerFormatString="Date: {2:M/d/yy}
Value: {4}"
ItemsSource="{Binding PlotItems}" MarkerStroke="#FFFDFDFD" />
</oxy:Plot.Series>
<oxy:Plot.DefaultTrackerTemplate>
<ControlTemplate>
<Canvas>
<Grid Canvas.Left="{Binding Position.X}" Canvas.Top="{Binding Position.Y}">
<Ellipse Fill="White" Width="12" Height="12" HorizontalAlignment="Left" VerticalAlignment="Top">
<Ellipse.RenderTransform>
<TranslateTransform X="-6" Y="-6" />
</Ellipse.RenderTransform>
</Ellipse>
<TextBlock Foreground="{DynamicResource OrangeTextColor}" Text="{Binding}" Margin="-60 -40 0 0" />
</Grid>
</Canvas>
</ControlTemplate>
</oxy:Plot.DefaultTrackerTemplate>
</oxy:Plot>
In the plot Series is there any way to show the plot points as circles or something of that nature?
Here is an example image of what I mean, each plot point has a small circle associated with it:
From the linked discussion:
This should be covered by the Marker* properties in the LineSeries
See examples in the Example browser.
It looks like you have to set MarkerFill and MarkerType. To show only markers (and no line), set the Color to Transparent.
<oxy:LineSeries ItemsSource="{Binding MyDataPoints}"
Color="Transparent"
MarkerFill="SteelBlue"
MarkerType="Circle" />
Answered on the Oxyplot forums for those who find this.
https://oxyplot.codeplex.com/discussions/528893
I'm trying to draw a square with a round hole in it, so that one can see what's behind the rectangle. I've used the following code to accomplish this in WPF:
<Path Grid.Row="0" Grid.Column="1" Stretch="Uniform" Stroke="Black" Fill="Yellow">
<Path.Data>
<CombinedGeometry GeometryCombineMode="Exclude">
<CombinedGeometry.Geometry1>
<RectangleGeometry Rect="0,0,100,100"></RectangleGeometry>
</CombinedGeometry.Geometry1>
<CombinedGeometry.Geometry2>
<EllipseGeometry Center="50,50" RadiusX="40" RadiusY="40"></EllipseGeometry>
</CombinedGeometry.Geometry2>
</CombinedGeometry>
</Path.Data>
</Path>
The CombinedGeometry class doesn't appear to exist in WinRT-XAML. Basically I want to create a game board that you drop pieces into from the top, and animate the pieces falling into place behind the board.
Any suggestions for what I should use instead of a CombinedGeometry? ... or suggestions on how to get CombinedGeometry to work in WinRT-XAML?
Thanks!
Dave
It is not really an equivalent, but it can do the Job :
<!-- Creates a composite shape from three geometries. -->
<GeometryGroup FillRule="EvenOdd">
<LineGeometry StartPoint="10,10" EndPoint="50,30" />
<EllipseGeometry Center="40,70" RadiusX="30" RadiusY="30" />
<RectangleGeometry Rect="30,55 100 30" />
</GeometryGroup>
</Path.Data>
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>