Custom Border Control
Last post 05-10-2008 11:40 AM by Jim Mangaly. 5 replies.
Sort Posts:
05-08-2008 10:41 AM
Custom Border Control

Hi,

I am new to Silverlight and this website, so sorry if I am posting in the wrong section.

I am trying to create a custom border control in Silverlight 2 which acts like the Border control already existing in System.Windows.Controls, however I want it to have a different look (specifically, I am trying to draw sharp corners rather than rounded corners).

I want to be able to set the content property of this control in xaml just like the Border control, so that it is easy to add any kind of item inside it
e.g.:
<
CustomBorder>
    <TextBox />

</CustomBorder>

So far this is what I have tried to do:

<UserControl x:Class="Test.CustomBorder"
   
xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

   
<Canvas>
       
<Polygon x:Name="polygon" Stroke="Black" StrokeThickness="1" />
       
<ContentPresenter />
   
</Canvas>

</UserControl>

 However, when this is used and something is placed in the Content of the CustomBorder as shown in the example above, the entire actual content is replaced, so the Polygon is not shown.

I have tried binding the ContentPresenter to the Content of the actual UserControl as well, and that didn't work.

Can anyone help show me what I am doing wrong here? Any help would be appreciated Smile

Thanks.

dustamulet

Joined on 05-08-2008
Posts 3
05-08-2008 10:57 AM
Re: Custom Border Control

Why not use the silverlight 2 Border control? It's doing exactly what you want: You can put any control inside it as content.

 

 

Software Engineer
Aprimo, Inc

Please remember to mark the replies as answers if they answered your question

sladapter

Joined on 03-05-2008
Indiana, US
Posts 404
05-08-2008 11:02 AM
Re: Re: Custom Border Control

I want to be able to customize the look of the Border more than you are able to with the current Border (I am under the impression you can't change the look of the Border control because it is a Decorator?).

I want the border to initially look something like this:

<Polygon x:Name="polygon" Points="10,0 290,0 300,10 300,40 290,50 10,50 0,40 0,10" Stroke="Black" StrokeThickness="1" />

(this looks like a border, but doesn't have rounded corners - instead it has sharp edges on the corners)

However I want to also be able to change this easily in xaml in the future for all the CustomBorders used.

 

dustamulet

Joined on 05-08-2008
Posts 3
05-08-2008 12:27 PM
Re: Re: Custom Border Control

OK. I see it.

You might be better off to write this border control as Custom Control in stead of UserControl. Have it Inherited from ContentControl or from FrameworkElement but Tag the class with [ContentProperty("Child", true)]

public class CustomBorder : ContentControl

{

}

Or: 

[ContentProperty("Child", true)]
    public class CustomBorder : FrameworkElement
    {
    }
 

Since Polygon can not have content, so you have to write code to position the Content/Child on top of the Polygon shape. You also need to write the code to adjust the Points so it has the right size based on the content.ActualWidth/ActualHeight.

Take a look at some tutorials on how to write Custome Control. 

 

 

 

Software Engineer
Aprimo, Inc

Please remember to mark the replies as answers if they answered your question

sladapter

Joined on 03-05-2008
Indiana, US
Posts 404
05-10-2008 10:29 AM
Re: Re: Re: Custom Border Control

OK I have been trying to do as you suggested.  I have searched for tutorials clearly showing the steps involved, but haven't found any.

When trying to make a class inherit from FrameworkElement, I get an error saying that FrameworkElement has no constructors defined.

When trying to make a class inherit from CustomBorder, I am unsure how to attach items to the Control programmatically.  I have tried this:

using System;
using System.Windows.Controls;
using System.Windows.Media;

namespace Test
{
   
public class TestBorder : ContentControl
   
{
       
public TestBorder()
       
{
           
Grid grid = new Grid();
           
TextBox textBox = new TextBox();

           
grid.Children.Add( textBox );

           
this.Content = grid;
        }
    }
}

but it doesn't work.  Can anyone point out what I am doing wrong here?

dustamulet

Joined on 05-08-2008
Posts 3
05-10-2008 11:40 AM
Marked as Answer
Re: Re: Re: Custom Border Control

You are doing the right thing by extending the ContentControl class. But you should not add controls to it the way you have.

Custom controls in Silverlight (and WPF) are "lookless", which means that you only specify the behavior of the control, you do not hard wire the look. So your C# code should only have behavior. But you would want to attach a default template for the control by defining it in generic.xaml. This would allow the consumer of the control to use the default look if he wants, OR change the template the way he likes.

You would also have to specify a contract (UIElements, Storyboards and public properties) so that those consuming your control know what to do.

All of this can be overwhelming in the beginning. This tutorial will help.

Hope this helps,
Jim (http://jimmangaly.blogspot.com/)

Please MARK the replies as answers if they answered your question

http://www.identitymine.com/

Jim Mangaly

Joined on 04-21-2008
Kochi, India
Posts 108