none
Draw rectangle/border around a control dynamically RRS feed

  • Question

  • Hi,

    When i click on a control, I want to draw a rectangle/border around the clicked control. So N number of controls can hav rectangle/border around it at a time
    If i click next time on the same control, rectangle/border should be removed.

    How to do this dynamically?
    Thursday, January 28, 2010 6:39 AM

Answers

  • Hi Ksvimal,

    Based on my understanding, what you want is to choose some controls in a panel, and each control has a state to show if it is selected. At last you want add all the selected controls to another place.

    You can record the selected control in a list variable. And listen the click event of the panel which contains all the controls. Once the click event launched, check whether the event source element is already in the list, if it is, then delete it from the list, otherwise add it to the list. You  can also set the Tag property of the control which is clicked to indicate the state whether is selected.

    It would be easy if you implement this using the layout panel Canvas. Maybe it would be easy to get the position of a control in canvas.

    Here is a simple solution as follows:
    XAML
    <Window x:Class="WpfApplication1.CanvasControlPosition"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="CanvasControlPosition" Height="350" Width="300">

        <StackPanel>

            <Canvas Name="mycavas" PreviewMouseDown="mycavas_PreviewMouseDown" Width="280" Height="280">

                <TextBlock Name="mytb" Text="hello world" Height="33" Canvas.Left="56" Canvas.Top="37" Width="74" Background="Beige"></TextBlock>

                <TextBox Canvas.Left="117" Canvas.Top="100" Height="41" Name="textBox1" Width="99" />

                <TextBlock Canvas.Left="67" Canvas.Top="203" Height="21" Name="textBlock1" Width="120" Text="control" />

            </Canvas>

                <Button Click="Button_Click">Show select controls</Button>

        </StackPanel>

    </Window>


    Code-behind
        public partial class CanvasControlPosition : Window

        {

            double strokeThickness = 8;

            public CanvasControlPosition()

            {

                InitializeComponent();

            }

     

            private void Button_Click(object sender, RoutedEventArgs e)

            {

                foreach (FrameworkElement ui in mycavas.Children)

                {

                    if (ui.Tag != null)

                    {

                        MessageBox.Show(ui.GetType().Name);

                        //here you can get the heigh lighted controls in the panel

                    }

                }

            }

     

            private void mycavas_PreviewMouseDown(object sender, MouseButtonEventArgs e)

            {

                double left, top, width, height;

                List<Point> points = new List<Point>(5);

                if (e.Source is FrameworkElement)

                {

                    FrameworkElement ui = e.Source as FrameworkElement;

     

                    if (ui.Tag != null)

                    {

                        mycavas.Children.Remove(ui.Tag as UIElement);

                        ui.Tag = null;

                        return;

                    }

     

                    left = Canvas.GetLeft(ui);

                    top = Canvas.GetTop(ui);

                    width = ui.Width;

                    height = ui.Height;

     

                    //define 5 point to accurately describe the position of the heigh light border

                    points.Add(new Point(left - strokeThickness / 2, top - strokeThickness / 2));

                    points.Add(new Point(left + width + strokeThickness / 2, top - strokeThickness / 2));

                    points.Add(new Point(left + width + strokeThickness / 2, top + height + strokeThickness / 2));

                    points.Add(new Point(left - strokeThickness / 2, top + height + strokeThickness / 2));

                    points.Add(new Point(left - strokeThickness / 2, top - strokeThickness));

     

                    //use the Polyline to make the clicked control heigh lighted

                    Polyline polyLine = new Polyline();

                    polyLine.Points.Add(points[0]);

                    polyLine.Points.Add(points[1]);

                    polyLine.Points.Add(points[2]);

                    polyLine.Points.Add(points[3]);

                    polyLine.Points.Add(points[4]);

                    polyLine.StrokeThickness = strokeThickness;

                    polyLine.Stroke = Brushes.Red;

     

                    ui.Tag = polyLine;

                    mycavas.Children.Add(polyLine);

                    mycavas.UpdateLayout();

                }

            }

        }

    Hope this helps. If you still have any question about this, please feel free to reply.

    Best regards,
    Kevin

    • Marked as answer by Linda Liu Wednesday, February 3, 2010 8:33 AM
    Tuesday, February 2, 2010 11:35 AM
    Moderator

All replies

  • Are you trying to do this so that the control can have a active state look.

    I would suggest to edit the control template of your control so that it has a a border around it. Then in the triggers of the control template add a trigger to set the visibility to Visible or hidden on MouseDown.

    Let me know if this is not clear to you.


    Thursday, January 28, 2010 7:29 AM
  • Not really

    Actaully once i click on a particular control, it should be highlighted with a seperate border around it. I can select N number of controls at a time.

    After this i will open another screen where i should get all the selected controls and i will make visible/invisible/disable based on the setup.

    Thanks for your feedback. Expecting some good solution.

    Thursday, January 28, 2010 7:50 AM
  • Hi Ksvimal,

    Based on my understanding, what you want is to choose some controls in a panel, and each control has a state to show if it is selected. At last you want add all the selected controls to another place.

    You can record the selected control in a list variable. And listen the click event of the panel which contains all the controls. Once the click event launched, check whether the event source element is already in the list, if it is, then delete it from the list, otherwise add it to the list. You  can also set the Tag property of the control which is clicked to indicate the state whether is selected.

    It would be easy if you implement this using the layout panel Canvas. Maybe it would be easy to get the position of a control in canvas.

    Here is a simple solution as follows:
    XAML
    <Window x:Class="WpfApplication1.CanvasControlPosition"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="CanvasControlPosition" Height="350" Width="300">

        <StackPanel>

            <Canvas Name="mycavas" PreviewMouseDown="mycavas_PreviewMouseDown" Width="280" Height="280">

                <TextBlock Name="mytb" Text="hello world" Height="33" Canvas.Left="56" Canvas.Top="37" Width="74" Background="Beige"></TextBlock>

                <TextBox Canvas.Left="117" Canvas.Top="100" Height="41" Name="textBox1" Width="99" />

                <TextBlock Canvas.Left="67" Canvas.Top="203" Height="21" Name="textBlock1" Width="120" Text="control" />

            </Canvas>

                <Button Click="Button_Click">Show select controls</Button>

        </StackPanel>

    </Window>


    Code-behind
        public partial class CanvasControlPosition : Window

        {

            double strokeThickness = 8;

            public CanvasControlPosition()

            {

                InitializeComponent();

            }

     

            private void Button_Click(object sender, RoutedEventArgs e)

            {

                foreach (FrameworkElement ui in mycavas.Children)

                {

                    if (ui.Tag != null)

                    {

                        MessageBox.Show(ui.GetType().Name);

                        //here you can get the heigh lighted controls in the panel

                    }

                }

            }

     

            private void mycavas_PreviewMouseDown(object sender, MouseButtonEventArgs e)

            {

                double left, top, width, height;

                List<Point> points = new List<Point>(5);

                if (e.Source is FrameworkElement)

                {

                    FrameworkElement ui = e.Source as FrameworkElement;

     

                    if (ui.Tag != null)

                    {

                        mycavas.Children.Remove(ui.Tag as UIElement);

                        ui.Tag = null;

                        return;

                    }

     

                    left = Canvas.GetLeft(ui);

                    top = Canvas.GetTop(ui);

                    width = ui.Width;

                    height = ui.Height;

     

                    //define 5 point to accurately describe the position of the heigh light border

                    points.Add(new Point(left - strokeThickness / 2, top - strokeThickness / 2));

                    points.Add(new Point(left + width + strokeThickness / 2, top - strokeThickness / 2));

                    points.Add(new Point(left + width + strokeThickness / 2, top + height + strokeThickness / 2));

                    points.Add(new Point(left - strokeThickness / 2, top + height + strokeThickness / 2));

                    points.Add(new Point(left - strokeThickness / 2, top - strokeThickness));

     

                    //use the Polyline to make the clicked control heigh lighted

                    Polyline polyLine = new Polyline();

                    polyLine.Points.Add(points[0]);

                    polyLine.Points.Add(points[1]);

                    polyLine.Points.Add(points[2]);

                    polyLine.Points.Add(points[3]);

                    polyLine.Points.Add(points[4]);

                    polyLine.StrokeThickness = strokeThickness;

                    polyLine.Stroke = Brushes.Red;

     

                    ui.Tag = polyLine;

                    mycavas.Children.Add(polyLine);

                    mycavas.UpdateLayout();

                }

            }

        }

    Hope this helps. If you still have any question about this, please feel free to reply.

    Best regards,
    Kevin

    • Marked as answer by Linda Liu Wednesday, February 3, 2010 8:33 AM
    Tuesday, February 2, 2010 11:35 AM
    Moderator