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>
Related
I am trying change all icons to some kind of vector images for beter showing in higher size of "text, apps, and other items".
I tried svg image format, but it doesn't look sharp. (I tried many libraries, finest was sharpvector).
Sharp images:
Unsharp images when size is 250%:
Using svg converted to XAML with inkscape:
SVG Markup is:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
<circle fill="#FFFFFF" cx="7.9" cy="7.9" r="7.461"/>
<radialGradient id="SVGID_1_" cx="7.9004" cy="7.9004" r="7.4609" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
<stop offset="0.1198" style="stop-color:#DDEEFF;stop-opacity:0.1453"/>
<stop offset="0.4662" style="stop-color:#80C1FF;stop-opacity:0.5656"/>
<stop offset="0.7087" style="stop-color:#45A4FF;stop-opacity:0.8598"/>
<stop offset="0.8242" style="stop-color:#2E99FF"/>
</radialGradient>
<circle fill="url(#SVGID_1_)" cx="7.9" cy="7.9" r="7.461"/>
<line fill="none" stroke="#B80613" stroke-width="1.5" stroke-linecap="square" stroke-miterlimit="10" x1="7.984" y1="12.729" x2="7.984" y2="15.072"/>
<line fill="none" stroke="#B80613" stroke-width="1.5" stroke-linecap="square" stroke-miterlimit="10" x1="15.072" y1="8.016" x2="12.729" y2="8.016"/>
<line fill="none" stroke="#B80613" stroke-width="1.5" stroke-linecap="square" stroke-miterlimit="10" x1="3.272" y1="7.984" x2="0.928" y2="7.984"/>
<line fill="none" stroke="#B80613" stroke-width="1.5" stroke-linecap="square" stroke-linejoin="bevel" stroke-miterlimit="10" x1="7.984" y1="0.928" x2="7.984" y2="3.272"/>
<ellipse fill="none" stroke="#1D1D1B" stroke-miterlimit="10" cx="8" cy="8" rx="7.406" ry="7.484"/>
<line fill="#1D1D1B" stroke="#1D1D1B" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" x1="4.133" y1="4.586" x2="7.813" y2="8.203"/>
<line fill="none" stroke="#1D1D1B" stroke-width="1.5" stroke-linecap="round" stroke-miterlimit="10" x1="10.914" y1="6.258" x2="7.984" y2="8.313"/>
</svg>
Even when I use Paths, it shows unsharp:
<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="HZS_pdf" Width="16" Height="16" Clip="F1 M 0,0L 16,0L 16,16L 0,16L 0,0">
<Canvas x:Name="HZS_pdf_0" Width="16" Height="16" Canvas.Left="0" Canvas.Top="0">
<Path x:Name="Path" Width="14.9227" Height="14.9227" Canvas.Left="0.344" Canvas.Top="0.453335" Stretch="Fill" Fill="#FFFFFFFF" Data="F1 M 15.2667,7.91733C 15.2667,12.0373 11.928,15.376 7.808,15.376C 5.828,15.376 3.93333,14.5893 2.532,13.1933C 1.13067,11.792 0.344,9.896 0.344,7.91733C 0.344,3.79734 3.688,0.453335 7.808,0.453335C 11.928,0.453335 15.2667,3.79734 15.2667,7.91733 Z "/>
<Path x:Name="Path_1" Width="14.9227" Height="14.9227" Canvas.Left="0.344" Canvas.Top="0.453335" Stretch="Fill" Data="F1 M 15.2667,7.91733C 15.2667,12.0373 11.928,15.376 7.808,15.376C 5.828,15.376 3.93333,14.5893 2.532,13.1933C 1.13067,11.792 0.344,9.896 0.344,7.91733C 0.344,3.79734 3.688,0.453335 7.808,0.453335C 11.928,0.453335 15.2667,3.79734 15.2667,7.91733 Z ">
<Path.Fill>
<RadialGradientBrush RadiusX="0.0294518" RadiusY="0.0294518" Center="0.500116,0.500116" GradientOrigin="0.500116,0.500116">
<RadialGradientBrush.GradientStops>
<GradientStop Color="#FF000000" Offset="0"/>
<GradientStop Color="#FF252525" Offset="0.1198"/>
<GradientStop Color="#FF909090" Offset="0.4662"/>
<GradientStop Color="#FFDBDBDB" Offset="0.7087"/>
<GradientStop Color="#FFFFFFFF" Offset="0.8242"/>
<GradientStop Color="#FFFFFFFF" Offset="1"/>
</RadialGradientBrush.GradientStops>
<RadialGradientBrush.RelativeTransform>
<TransformGroup>
<RotateTransform CenterX="0.500116" CenterY="0.500116" Angle="180"/>
</TransformGroup>
</RadialGradientBrush.RelativeTransform>
</RadialGradientBrush>
</Path.Fill>
</Path>
<Path x:Name="Line" Width="1.5" Height="3.844" Canvas.Left="7.14067" Canvas.Top="11.9953" Stretch="Fill" StrokeThickness="1.5" StrokeLineJoin="Round" Stroke="#FFB80613" Data="F1 M 7.89067,12.7453L 7.89067,15.0893"/>
<Path x:Name="Line_2" Width="3.844" Height="1.5" Canvas.Left="11.886" Canvas.Top="7.282" Stretch="Fill" StrokeThickness="1.5" StrokeLineJoin="Round" Stroke="#FFB80613" Data="F1 M 14.98,8.032L 12.636,8.032"/>
<Path x:Name="Line_3" Width="3.844" Height="1.5" Canvas.Left="0.0833334" Canvas.Top="7.25" Stretch="Fill" StrokeThickness="1.5" StrokeLineJoin="Round" Stroke="#FFB80613" Data="F1 M 3.17733,8L 0.833334,8"/>
<Path x:Name="Line_4" Width="1.5" Height="3.844" Canvas.Left="7.14067" Canvas.Top="0.192668" Stretch="Fill" StrokeThickness="1.5" StrokeLineJoin="Round" Stroke="#FFB80613" Data="F1 M 7.89067,0.942668L 7.89067,3.28667"/>
<Path x:Name="Path_5" Width="15.8133" Height="15.968" Canvas.Left="2.38419e-007" Canvas.Top="0.0320013" Stretch="Fill" StrokeThickness="1" StrokeLineJoin="Round" Stroke="#FF1D1D1B" Data="F1 M 15.3133,8.016C 15.3133,12.152 11.9947,15.5 7.90667,15.5C 3.81867,15.5 0.5,12.152 0.5,8.016C 0.5,3.88 3.81867,0.532001 7.90667,0.532001C 11.9947,0.532001 15.3133,3.88 15.3133,8.016 Z "/>
<Path x:Name="Line_6" Width="5.176" Height="5.11467" Canvas.Left="3.5635" Canvas.Top="4.02067" Stretch="Fill" StrokeThickness="1.5" StrokeLineJoin="Round" Stroke="#FF1D1D1B" Data="F1 M 4.3135,4.77067L 7.9895,8.38534"/>
<Path x:Name="Line_7" Width="4.428" Height="3.552" Canvas.Left="7.14067" Canvas.Top="5.526" Stretch="Fill" StrokeThickness="1.5" StrokeLineJoin="Round" Stroke="#FF1D1D1B" Data="F1 M 10.8187,6.276L 7.89067,8.328"/>
</Canvas>
</Canvas>
Makes:
Similar:
<Canvas x:Name="Layer_1" Width="16" Height="16" Canvas.Left="0" Canvas.Top="0">
<Ellipse x:Name="Ellipse" Width="17" Height="17" Canvas.Left="-0.5" Canvas.Top="-0.500000" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FFFFFFFF"/>
</Canvas>
What is correct way to show sharp images in 250% size?
Your problem is that your SVGs are not "pixel perfect", for example coordinates like y1="12.729" . WPF is really bad at deciding how to render non pixel perfect stuff smaller than the size it was initially created, while scaling up mostly is no problem.
Usually what I did was to open up Microsoft Expression Design and either adjusted the icon and make sure everything was starting and ending exactly on integer pixels or recreating them from scratch with inspiration from the original icon (which both are admittedly not the most satisfying solutions).
Also about the "unsharp" text stuff you can look into this.
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;
I have downloaded this pack : http://modernuiicons.com/ and I'm trying to use the xaml icons.
I have added a xaml file to my solution with the following content
<?xml version="1.0" encoding="utf-8"?>
<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="appbar_check" Width="76" Height="76" Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0">
<Path Width="37.9998" Height="31.6665" Canvas.Left="19.0001" Canvas.Top="22.1668" Stretch="Fill" Fill="#FF000000" Data="F1 M 23.7501,33.25L 34.8334,44.3333L 52.2499,22.1668L 56.9999,26.9168L 34.8334,53.8333L 19.0001,38L 23.7501,33.25 Z "/>
</Canvas>
Now, how do I reference this canvas to my usercontrol?
Usercontrol
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
mc:Ignorable="d"
x:Class="UserControlSolution.UserControlButton"
x:Name="UserControl"
Height="50" Background="#FF2F2F2F" BorderBrush="#FF919191">
<Grid x:Name="LayoutRoot" Height="50" RenderTransformOrigin="0.5,0.5">
<Rectangle x:Name="rectangle" RenderTransformOrigin="0.5,0.5" Width="230" Height="50"/>
<TextBlock x:Name="NameLabel" FontSize="16" Foreground="#FFE5E5E5" Height="34" Width="149" Text="Onthaal Telefoon" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="10,10,0,0" FontFamily="Segoe UI Semibold"/>
<Viewbox HorizontalAlignment="Right" VerticalAlignment="Top" Height="16.5" Width="17.789" Margin="0,15,24.5,0">
// Here I want to reference the canvas
</Viewbox>
</Grid>
</UserControl>
I can copy the content of the canvas offcourse but there must be another solution.
Add the Canvas and Path as a resource on the page or in the App.xaml or whatever, remember to set x:Key. Then use a ContentControl to reference the resource.
<!-- In Resources, either on the Page or App.xaml for app-wide reuse -->
<Canvas x:Key="TickCanvas" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="appbar_check" Width="76" Height="76" Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0">
<Path Width="37.9998" Height="31.6665" Canvas.Left="19.0001" Canvas.Top="22.1668" Stretch="Fill" Fill="#FF000000" Data="F1 M 23.7501,33.25L 34.8334,44.3333L 52.2499,22.1668L 56.9999,26.9168L 34.8334,53.8333L 19.0001,38L 23.7501,33.25 Z "/>
</Canvas
<!-- On your page, or somewhere -->
<ViewBox>
<ContentControl Content="{StaticResource TickCanvas}" />
</ViewBox>
As proof it works, I was able to see its a tick!
Just a side note, I often take just the path data, the mini-markup and save that as a string resource. Then using a Path I reference the markup resource via Data={StaticResource TickPath} that way I can resize the vector using the Height and Width on the Path itself or let it expand and shrink by its parent by setting Stretch="Uniform". Saves the overhead of the Viewbox.
<!-- In App.xaml for app-wide reuse -->
<x:String x:Key="TickPath">F1 M 23.7501,33.25L 34.8334,44.3333L 52.2499,22.1668L 56.9999,26.9168L 34.8334,53.8333L 19.0001,38L 23.7501,33.25 Z </x:String>
<!-- On page, template or wherever -->
<Path Data="{StaticResource TickPath} />
This technique may not work in this instance as there's a clip geometry there. But for simple vectors its fine, I have hand drawn typefaces (that can't be embedded as fonts) stored as markup in files, I then load them in at runtime - Data={Binding PathData} works just as well.
A variation based on Luke's answer allowing a color to be specified down to the path.
<Style TargetType="{x:Type ContentControl}" x:Key="TickIcon">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Viewbox Width="{Binding Width, RelativeSource={RelativeSource AncestorType=ContentControl}}">
<Canvas x:Name="appbar_check" Width="76" Height="76" Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0">
<Path Width="37.9998" Height="31.6665" Canvas.Left="19.0001" Canvas.Top="22.1668" Stretch="Fill" Fill="{Binding Foreground, RelativeSource={RelativeSource AncestorType=ContentControl}}" Data="F1 M 23.7501,33.25L 34.8334,44.3333L 52.2499,22.1668L 56.9999,26.9168L 34.8334,53.8333L 19.0001,38L 23.7501,33.25 Z "/>
</Canvas>
</Viewbox>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
and
<Button Command="{Binding ConnectCommand}" VerticalAlignment="Stretch">
<WrapPanel>
<ContentControl Foreground="AliceBlue" Style="{StaticResource TickIcon}" Width="20" />
<TextBlock>Connect</TextBlock>
</WrapPanel>
</Button>
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>
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));