I am currently testing with Silverlight 2.0 Beta 2, and my goal is to define a resource element once and then reuse it many times in my rendering. This simple example defines a rectangle (myRect) as a resource and then I attempt to reuse it twice -- which fails with the error:
Attribute {StaticResource myRect} value is out of range. [Line: 9 Position: 83]
BTW, this sample works fine in WPF.
<UserControl x:Class="ReuseResourceTest.Page"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="200">
<Canvas x:Name="LayoutRoot" Background="Yellow">
<Canvas.Resources>
<RectangleGeometry x:Key="myRect" Rect="25,50,25,50" />
</Canvas.Resources>
<Path Stroke="Black" StrokeThickness="10" Data="{StaticResource myRect}" />
<Path Stroke="White" StrokeThickness="4" Data="{StaticResource myRect}" />
</Canvas>
</UserControl>
Any thoughts on what's up here.
Thanks,
-- Ed
I have also encountered the same problem when trying to reuse components defined as static resources. The workaround I have found is not declaring the controls as resources, but defining styles setting all the properties you need, and instantiating a new control with that style every time you need.
EDIT: The out of range exception you are getting happens when you assign a control to a container that already is inside another container. It also happens in many other scenarios (such as applying a style to an object that already has one), but I believe this is your case.
Related
A have a ListBox of items, every ListBoxItem contains an icon in the form of a Path object, like so:
<ListBox.ItemTemplate>
<DataTemplate>
<Grid ...>
...
<Path Margin="4" Style="{StaticResource ErrorIconPath}"
Stretch="Uniform" Width="26" Height="26"
RenderTransformOrigin="0.5,0.5" Grid.Column="1" Grid.Row="1"
UseLayoutRounding="False"
HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
The Path's style is contained in Appl.xaml (Application.Resources section) and is the following:
<Style x:Key="ErrorIconPath" TargetType="Path">
<Setter Property="Data" Value="F1M874.094,289.369L854.3,254.63C854.028,254.151 853.515,253.856 852.958,253.856 852.403,253.856 851.89,254.151 851.617,254.63L831.824,289.369C831.555,289.84 831.559,290.416 831.835,290.883 832.111,291.348 832.618,291.634 833.165,291.634L872.752,291.634C873.299,291.634 873.805,291.348 874.081,290.883 874.357,290.416 874.361,289.84 874.094,289.369 M855.653,287.189L850.264,287.189 850.264,282.745 855.653,282.745 855.653,287.189z M855.653,279.41L850.264,279.41 850.264,266.077 855.653,266.077 855.653,279.41z" />
</Style>
The trouble is that only the first item in the ListBox binds the Data property as expected, the other ones don't bind it at all (hence they appear as blank space, but match the size of the Path). Also when I use the style anywhere else (i.e. outside the ListBox), only the first instance that occurs will bind.
The weird thing is that if I define for example the Fill property in the Style instead of inline, it works just fine and doesn't exibit the same problems as the Path property.
My guess is that is has something to do with Data not being a primitive type, but I haven't found any fixes.
EDIT: Interestingly, when I bind the Data property directly to System.String resource, it works. I would still like to be able to define this property via a Style though.
EDIT 2: I've just came across the same issue in WPF, when setting Path to a Content of a Button via a Style that is used across more buttons. The path shows up in just one buttons, the others are blank.
Path.Fill is a DependencyProperty, while Path.Data isn't. Instead do:
<DataTemplate>
<Grid ...>
...
<ContentPresenter Content="{StaticResource MyPath}"/>
</Grid>
</DataTemplate>
ContentPresenter.Content is a DependencyProperty so this should work:
<Path x:Key="MyPath" Margin="4" Style="{StaticResource ErrorIconPath}"
Stretch="Uniform" Width="26" Height="26" VerticalAlignment="Center"
RenderTransformOrigin="0.5,0.5" Grid.Column="1" Grid.Row="1"
UseLayoutRounding="False" HorizontalAlignment="Center"
Data="F1M874.094,289.369L854.3,254.63C854.028,254.151 853.515,253.856 852.958,253.856 852.403,253.856 851.89,254.151 851.617,254.63L831.824,289.369C831.555,289.84 831.559,290.416 831.835,290.883 832.111,291.348 832.618,291.634 833.165,291.634L872.752,291.634C873.299,291.634 873.805,291.348 874.081,290.883 874.357,290.416 874.361,289.84 874.094,289.369 M855.653,287.189L850.264,287.189 850.264,282.745 855.653,282.745 855.653,287.189z M855.653,279.41L850.264,279.41 850.264,266.077 855.653,266.077 855.653,279.41z"/>
I am guessing that Geometry cannot be shared. Have you tried setting the x:Shared= "false" to:
<Style x:Key="ErrorIconPath" TargetType="Path">
I've experienced the same behavior in Silverlight and asked a similar question here on StackOverflow.com
( https://stackoverflow.com/q/13426198/1796930), but as I'm writing this, it's been 1 month and I've yet to get even a single answer.
However, as you mentioned in your first edit, I too was able to perform a workaround by creating a resource with my geometry data as a string and then binding the Data property of the Path objects to the string resource resource.
I also had to create two instances of the Path objects that were identical other than each one using a different resource (i.e. two different icons) and then binding the visibility of each to a property in my ViewModel to display the appropriate one.
I am very sure that you did not forgot the stroke here in Path style
<Setter Property="Stroke" Value="Red"/>
I have tested you code on my machine , it worked fine if above line added in style
My first tought was your Path would be broken or not valid. But then I saw you are using the Syncfusion Metro Studio. I tried it with exactly the same code you have and it worked very well. In a Data Template of 5 Items or as a single Path Item.
Have you tried to set the Fill statically to Red or something?
Also maybe try this for the Style definition
<Style x:Key="ErrorIconPath" TargetType="{x:Type Path}">
Third suggestion would be to move the style definition from the App to your Page or even to your Control itself.
To be sure there will be no default styles applied, try
OverridesDefaultStyle="True"
Hope this helps :)
Hey guys, I've been playing around with WPF's Path shape, but I'm a bit annoyed with some behaviour.
Specifically, the path does not size itself as I would like. If you look at the image below, what I want is for the entire path to be within the white square (which represents the bounds of the Path control), but the arcs hang out a bit. I think this is because Path sizes itself according to the points used to draw the shape, and not according to the shape that is actually drawn.
My question is: does anyone know how to overcome this? I mean, aside from explicitly setting the dimensions of the path. Is there some option that I have overlooked in order to get the path to size itself according to the shape, and not according to the points used to make the shape? Thanks for any answers.
Here's two versions of (what should be) equivalent code:
1) First, using databindings (written out in a very verbose manner):
<UserControl x:Class="OrbitTrapWpf.LineSegmentTool"
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"
xmlns:local="clr-namespace:OrbitTrapWpf"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300"
x:Name="Root" Background="White">
<UserControl.Resources>
<local:ArcSizeConverter x:Key="ArcSizeConverter"/>
<local:ArcPointConverter x:Key="ArcPointConverter"/>
</UserControl.Resources>
<Path Name="path" Stroke="Black">
<Path.Data>
<PathGeometry>
<PathGeometry.Figures>
<PathFigureCollection>
<PathFigure IsClosed="True">
<PathFigure.StartPoint>
<Binding ElementName="Root" Path="point0"></Binding>
</PathFigure.StartPoint>
<PathFigure.Segments>
<PathSegmentCollection>
<ArcSegment SweepDirection="Counterclockwise" >
<ArcSegment.Size>
<Binding ElementName="Root" Path="Radius" Converter="{StaticResource ArcSizeConverter}"/>
</ArcSegment.Size>
<ArcSegment.Point>
<Binding ElementName="Root" Path="point1" />
</ArcSegment.Point>
</ArcSegment>
<LineSegment>
<LineSegment.Point>
<Binding ElementName="Root" Path="point2" />
</LineSegment.Point>
</LineSegment>
<ArcSegment SweepDirection="Counterclockwise">
<ArcSegment.Size>
<Binding ElementName="Root" Path="Radius" Converter="{StaticResource ArcSizeConverter}"/>
</ArcSegment.Size>
<ArcSegment.Point>
<Binding ElementName="Root" Path="point3" />
</ArcSegment.Point>
</ArcSegment>
</PathSegmentCollection>
</PathFigure.Segments>
</PathFigure>
</PathFigureCollection>
</PathGeometry.Figures>
</PathGeometry>
</Path.Data>
</Path>
2) And this one, using the mini-language:
<UserControl x:Class="OrbitTrapWpf.LineSegmentTool"
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"
xmlns:local="clr-namespace:OrbitTrapWpf"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300"
x:Name="Root" Background="White">
<UserControl.Resources>
<local:ArcSizeConverter x:Key="ArcSizeConverter"/>
<local:ArcPointConverter x:Key="ArcPointConverter"/>
</UserControl.Resources>
<Grid Name="grid">
<Path Name="path" Stroke="Black" Data="M 0.146446609406726,1.14644660940673 A 0.5,0.5 0 1 0 0.853553390593274,1.85355339059327 L 1.85355339059327,0.853553390593274 A 0.5,0.5 0 1 0 1.14644660940673,0.146446609406726 Z " />
I thought that the two should be roughly the same, but apparently the mini-language version sizes nearly correctly, while the original is much different.
Basically, what your path xaml says, is:
Start at Point0, draw an arc to Point1.
From Point1, draw a line to Point2.
From Point2, draw an arc to Point 3.
'IsClosed' draws another line from Point3 to Point0.
What you've defined is exactly what is being produced - the only way you can change it is to change your positions - but the arc will still extend beyond Point0 on the X axis because that's what you have defined.
If you need your shape to fit entirely within some boundary, you can put a border around your shape, with margin of, say, 1/2 radius (I'm sure there is a formula for the exact protrusion) at the bottom and right.
Since the second screenshot looks different to the first, I would conclude that they are different shapes - which can only mean that the path data was translated incorrectly.
Okay, so I found the problem and solved it. I had set the IsLargeArc flag in the mini-language version, while in the purely XAML version I had left this as False. So I changed it to True, and I magically got the results I expected.
This seems to be a bug to me, because in this case the large and small arcs are one and the same, since I am drawing a half-arc. If anyone knows a reason for this behaviour, it would be awesome to hear about it!
I ran across this post and thought I would post an answer in case anyone is looking for a easy way to resize paths or Icons. The easiest way I have found is by using a Viewbox for all of my Path displays. This is because a path will scale itself nicely inside of a Viewbox. I use a Canvas to hold each path, the size of this Canvas is very important if you want to be able to use "Nice" numbers.
Here is a example of how to do this:
First (Optional) Draw your shape in a Vector Program like Inkscape or CorelDraw! I used CorelDraw to create the .svg File. Note: When using a program to create a vector make your page size something like 100 X 100 Pixels this is what you are going to set your Canvas Size to. If you are writing the path by hand this is also a very handy approach just pick a size like 100 X 100 and all of your path measurements are < 100 use that as your scale in other words.
Next use a translator program like Vector to Xaml Converter and generate a path. Save this into a Resource Dictionary or put it in the file where you need it. Put the Path inside a Canvas like so:
<Canvas x:Key="someName" Width="100" Height="100">
<Path Fill="#FF000000" Stroke="#FF373435" StrokeThickness="1" Data="M92,8L92,8C103,18,103,35,92,45L45,92C35,103,18,103,8,92L8,92C-3,82,-3,65,8,55L55,8C65,-3,82,-3,92,8z"/>
</Canvas>
Again note the size of the Canvas, this should match the dimensions of your "Drawing Board".
Then to use this just put a ContentControl inside of a ViewBox that has the Width and Height that you want the Path to display at like so:
<Viewbox x:Name="btnClose" Width="30" Height="30">
<ContentControl Content="{StaticResource someName}" />
</Viewbox>
Thats it! Another nice thing about using Paths is you can bind the Color of hte Background (Fill) or Foreground (Stroke). Taking our example here is how to control the Colors:
<SolidColorBrush x:Key="stForeColor" Color="#FFD4D7EA" />
<Canvas x:Key="someName" Width="100" Height="100">
<Path Fill="{StaticResource stForeColor}" Stroke="Transparent" StrokeThickness="1" Data="M92,8L92,8C103,18,103,35,92,45L45,92C35,103,18,103,8,92L8,92C-3,82,-3,65,8,55L55,8C65,-3,82,-3,92,8z"/>
</Canvas>
There are also tons of other things that you can do, anything that you can do with any other Shape, Effects, Animations etc.
I'm trying to put a rounded border on a control which is hosted through a WindowsFormHost object. It seems like no matter what I set for OpacityMask, it has no effect on the rendering. Is there something I've missed?
Here is the XAML code I am using. The child control is added at run-time. I've tried various combinations of masks, none of which worked for me. Any help would be appreciated. Thanks!
<WindowsFormsHost Background="#FF2BBA62" Height="414" Width="516" Margin="176.5,223,309.5,92" Name="vcxHost1" UseLayoutRounding="False" ClipToBounds="True" >
<WindowsFormsHost.OpacityMask>
<VisualBrush>
<VisualBrush.Visual>
<Rectangle Height="10" Width="100" Name="border1" />
</VisualBrush.Visual>
</VisualBrush>
</WindowsFormsHost.OpacityMask>
</WindowsFormsHost>
I suspect it doesn't work for the same reason that the z-indexing doesn't work. From the linked doc: "A hosted Windows Forms control is drawn in a separate HWND, so it is always drawn on top of WPF elements."
See the paragraph on Layout Limitations ...
http://msdn.microsoft.com/en-us/library/ms744952.aspx
This may also be helpful ... http://msdn.microsoft.com/en-us/library/ms742522.aspx
this is a problem that regularly arises when I write Silverlight XAML. In this case, I've made a usercontrol VerticalTabStop (code attached) that has a ToolTip attached. I instanciate a couple of my usercontrols, and then I get the debugging window and the following error:
Line:52
Error: Unhandled Error in Silverlight 2 Application
Code: 2028
Category: ParserError
Message: The name already exists in the tree: AltLabel.
File:
Line: 0
Position: 0
I get an awful lot of these messages as I hover my mouse over the buttons. Any suggestions to what I'm doing wrong here?
Cheers
Nik
<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"
mc:Ignorable="d"
x:Class="SLEntityPresenterWebPart.VerticalTabStop"
d:DesignWidth="20" d:DesignHeight="27">
<Grid x:Name="LayoutRoot">
<StackPanel>
<Canvas x:Name="TabStopCanvas" Height="27" Width="20">
<ToolTipService.ToolTip>
<TextBlock x:Name="AltLabel" Text="Substitute me"/>
</ToolTipService.ToolTip>
<Image x:Name="IconImg" Canvas.Left="7" Canvas.Top="9" Width="26" Height="26" Source="Contact.png" Canvas.ZIndex="5" Margin="0,-9,0,0" RenderTransformOrigin="0.5,0.5">
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="0.85" ScaleY="0.85"/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform X="0"/>
</TransformGroup>
</Image.RenderTransform>
</Image>
<Image Source="stop.png" Margin="3,0,0,0"/>
</Canvas>
</StackPanel>
</Grid>
</UserControl>
There is very similar bug even in Silverlight 4.
If you create custom usercontrol, usually:
<UserControl xmlns:MyNameSpace="clr-namespace:MyNameSpace" x:Class="MyNameSpace.MyClass"
x:Name="userControl" ... />
Then, if you add 2 controls without names to the xaml code (with preview):
<MyNameSpace:MyClass ... />
<MyNameSpace:MyClass ... />
There will be exception "The name already exists in the tree: userControl". It occurs because Silverlight can't find the name (unnamed [MyClass]) and looks to the UserControl where it finds "userControl" twice.
One of the solution is to give some names to the controls:
<MyNameSpace:MyClass x:Name = "MyControl1" ... />
Or initialize this control from code:
MyClass control = new MyClass();
SomeGrid.Children.Add(control);
This is a bug in Silvelight. The way to work around it is to remove the Name attribute on the TextBlock in the Tooltip.
I presume that you have the name there for a reason, and that not being able to refer to this element from code is going to be a problem for you. As a work around for that, try replacing the tooltip xaml with this:
<ToolTipService.ToolTip>
<ToolTip x:Name="AltLabel" Content="Substitute me" />
</ToolTipService.ToolTip>
Now you can get to the text by doing AltLabel.Content.
If this does not solve your problem, please let me know.
I was struggling with the same message yesterday...
ParserError - The name already exists in the tree: blah
In my case the problem was that somehow a reference was added... to itself. (The DLL of the project in the projects own bin/debug folder). Removing this reference sorted out the problem.
Seems that this error message is too vague.
Try to remove any name like ' x:Name="TabStopCanvas" ' in stack panel, it worked for me.
I have a visual brush which is a group of shapes, the main colour of which is a dynamic resource itself - so the shape is for example MyShape and the Colour, MyColour which is referenced by the Shape object.
My problem is when I update the colour for this - it only happens the first time the shape is loaded (the colour needs to be set first) however as much as I change the colour it won't update the dynamic resource that uses the colour - how do I make this work?
Just need to make a dynamic resource work within another dynamic resource and have them both update when I change the colour.
I have no idea how to get this to work - I spent time creating a colour-picker for WPF only to find I cannot change the colour of this item - 1-Tier resources work where I set the brush/colour directly but not a colour within another object or 2-Tier Resource.
Edit: My problem seems to be specific to using these in a seperate Resource / Dictionary as my program needs to access this item from a class not the Window, the main example mentioned does not work when the MyColor is in a seperate Resource.
Unless I misunderstand the situation, exactly what you're talking about works pretty well. I just tried it out with this Xaml:
<Window x:Class="ConditionalTest.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Window.Resources>
<SolidColorBrush x:Key="MyColor" Color="Aqua" />
<VisualBrush x:Key="MyBrush">
<VisualBrush.Visual>
<Ellipse Height="50" Width="100" Fill="{DynamicResource MyColor}" />
</VisualBrush.Visual>
</VisualBrush>
</Window.Resources>
<Grid Background="{DynamicResource MyBrush}">
<Button Height="30" Width="Auto" VerticalAlignment="Center" HorizontalAlignment="Center" Content="ChangeColor" Click="Button_Click" />
</Grid>
</Window>
And then changed the color in the click handler for that button:
private void Button_Click(object sender, RoutedEventArgs e)
{
((SolidColorBrush)Resources["MyColor"]).Color = Colors.Purple;
}
And it worked like a champ.
Can you post an example of how you are attempting to change the color in the resource dictionary?
When I make a sample app and try to change the resource value it appears that the SolidColorBrush in the resource dictionary has been frozen so it can't be modified. To get around this I just set the new value to a new SolidColorBrush.