Skip to main content
Home Forums Silverlight Programming Visual Studio & Silverlight Development Tools Dynamically apply fill and stroke color to shapes
15 replies. Latest Post by LilVJ on July 22, 2008.
(0)
LilVJ
Member
1 points
10 Posts
07-21-2008 9:34 AM |
I am developing an app using Silverlight 2 beta 2 which allows a shape to be dragged onto a page. I have would like to be able to allow the user to customise the fill color and stroke color of the shape dynamically however I can't work out how to apply a fill color to a shape in code. Can anyone help please?
texmex5
Contributor
2239 points
382 Posts
07-21-2008 9:58 AM |
myRectangle.Fill = new SolidColorBrus(Color.Red);
Check out Brushes documentation article: http://msdn.microsoft.com/en-us/library/cc189003(VS.95).aspx
and also
Color documentation for different ways to define colors: http://msdn.microsoft.com/en-us/library/system.windows.media.solidcolorbrush(VS.95).aspx
07-21-2008 10:10 AM |
Thank you but I've tried that, my problem is that I cannot get the .Fill within the code behind file so I must be missing something somewhere. I've tried it in the page.xaml.cs and the usercontrol.xaml.cs files and I'm getting nowhere.
I get this error:
Error 1 'designEditor.shape' does not contain a definition for 'Fill' and no extension method 'Fill' accepting a first argument of type 'designEditor.shape' could be found (are you missing a using directive or an assembly reference?) C:\SilverLight2\MasterProject\Version1\designEditor\designEditor\Page.xaml.cs 775 27 designEditor
07-21-2008 10:20 AM |
can you post some example code, what object are you trying to color?
07-21-2008 10:36 AM |
I have a user control called shape and I have set up its properties in XAML and added some code behind to enable transformation to its size. The shape is displayed in page.xaml and has an x:Name rectangle: <shape:shape x:Name="rectangle"
Canvas.Left="10"
I have a color palette x: name 'palette' on the page.xaml so the user can select a colour by clicking on the palette. This is also a user control.
I need to be able to apply communication between the rectangle and the palette. I have added a button for fill and a button for stroke onto my page.xaml so the user can pick a colour then click either the fill button or the stroke button and the button event handler should get the color from the palette and fill that color onto the shape. I have tried to simply change the colour in the page.xaml.cs using the following code:
{
}
but I get the error described earlier. NB: active shape is the shape currently on top of the page. I hope this makes sense.
07-21-2008 11:26 AM |
The problem is that your shape type is usercontrol and a usercontrol doesn't contain fill attribute.
But I assume that your usercontrol contains a bunch of other objects .. and you can get to their attributes as long as you have set their x:Name attributes.
I made a simple example.
1. UserControl named ShapeTest that has 3 objects in it: a rectangle and 2 ellipses.
2. in Page.xaml I have
<
and a Button called aButton.
Now in Page.xaml.cs in Click eventhandler of the button I have the following:
aShape.shapeEllipse2.Fill = aShape.shapeEllipse1.Fill =
aShape.shapeRectangle.StrokeThickness = 3;
Now if I press the button the attributes of the myShape userconrol are changed.
You can check out the example live from here: http://math.ut.ee/~texmex5/Silverlight/ShapeTest/
Full source code can be downloaded from here: http://math.ut.ee/~texmex5/Silverlight/ShapeTest/ShapeTest.zip
In case I totally misunderstood you and you really want to only change the background color of the shape usercontrol then you can do it like this:
aShape.Background = new SolidColorBrush(
07-21-2008 12:07 PM |
Thank you, I will take some time to look through your example and try to apply it to my app, I'm a bit slow, still learning. I'll let you know if I can make it work.
07-21-2008 3:07 PM |
sure, and surely make another post if something comes up :)
SteveWong
6343 points
1,281 Posts
07-22-2008 3:47 AM |
Hey I think you are creating a UserControl called shape
inside the usercontrol in the codebehind add the line
public SolidColorBrush Fill{ get { return (SolidColorBrush)LayoutRoot.Background; } set { LayoutRoot.Background = (SolidColorBrush)value; }}
After created the property yourself, you can set or get it coz it is a public property defined.
07-22-2008 5:17 AM |
Thank you, the sample you gave me led me to the solution for my problem and I am now able to dynamically fill the boxes. Is there any way to use the hex value of a colour in the reference rather than the color name?
07-22-2008 5:35 AM |
OF course, you can use the colorConverter
Things like here? a colorConverter
http://blogs.microsoft.co.il/blogs/alex_golesh/archive/2008/04/29/colorconverter-in-silverlight-2.aspx
07-22-2008 9:32 AM |
Thank you, I found a ColorPicker app by Page Brooks which I have managed to integrate into my app, I have included it into my page.xaml and it works great on its own. My problem now is that I don't know how to apply the selected color as my fill color. The selected color is collected and converted from within the ColorPicker User Control (ColorPicker.xaml.cs). The Color Picker app clearly converts the hexvalue and uses the selected color to fill a rectangle on its xaml. My problem is that I don't know how to grab that color and use it in my page.xaml.cs, any ideas?
07-22-2008 10:14 AM |
As I know the sample inlcude the lines
Color c = m_colorSpace.GetColorFromPosition(huePos * gradientStops); rectSample.Fill = new SolidColorBrush(c);
Then what you can do is
myUserControl.Fill = new SolidColorBrush(c);
07-22-2008 10:24 AM |
I wish it was that simple, and maybe it is but I'm missing something. I have incorporated the Color Picker into my app however I have added a button for fill and a button for stroke. The idea is that the user clicks on the color picker to choose the color they want and then clicks either the Fill button or the Stroke button to apply the chosen color to the active shape. At the moment I am simply adding a color eg:
What I would like to do is add the chosen color from the ColorPicker user control when the fill button is clicked.
I have tried adding the code you suggest into the fill button event handler but this won't work. I am very much a novice so I could just be missing a declaration somewhere, all help is very welcome.
07-22-2008 12:00 PM |
Ok let me explain how it works
07-22-2008 12:42 PM |
Thank you so much, you have led me directly to the solution, I can't believe I have been so thick. Thank you!!
Dynamically apply fill and stroke color to shapes