Click here to Skip to main content
15,889,200 members
Please Sign up or sign in to vote.
5.00/5 (1 vote)
See more:
Hello,

In WPf we can convert shapes(rectangle, ellipse etc) in to a button through Xaml i.e., in design mode.
similarly can we convert a shape(rectangle or ellipse) in to a button from code behind.
ie., we can draw shapes at run time on the WPF window by dragging Mouse. Now can we convert this shapes in to button and display some message when we click on the particular shape.

Plz give any example how can we do that. any help acn be appreciated.

Thanks,
Posted

Well. This is pretty easy. I am giving you a example. In this example you will see that I have used label and a button. When we click the button the label will Grow/Shrink. But i have maintain it from code behind

The xaml is given below

XML
<Window x:Class="WpfTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid Height="311" Width="474">
        <Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="188,263,0,0" Name="button1" VerticalAlignment="Top" Width="100" Click="button1_Click" />
        <Label Content="Hi!!" Height="100" HorizontalAlignment="Center" Margin="188,76,186,0" Name="label1" VerticalAlignment="Top" Width="100" Background="#FFBBF23E"  />
    </Grid>
</Window>


And the code behind is given below

C#
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfTest
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void button1_Click(object sender, RoutedEventArgs e)
        {
            Button btn = (Button)sender;
            Grid grd = btn.Parent as Grid;

            Label lbl = grd.Children[1] as Label;

            if (lbl.Width < 100)
            {
                lbl.Width = 100;
            }
            else
            {
                lbl.Width = 50;
            }

            if (lbl.Height < 100)
            {
                lbl.Height = 100;
            }
            else
            {
                lbl.Height = 50;
            }
        }
    }
}


So What i am doing here is that I just get the Button Object and then the Parent of the Button Which is Grid. In this Grid the Second Child is My Label and Once we have the Label Object we could change its Property as we could do in the xaml.
 
Share this answer
 
v2
Comments
KiranBabu M 23-Aug-11 4:49am    
Hi Rashim uddin,
thanks for the reply.
Your example is good.
My question is on the wpf window(expression Blend) we can drag shapes like rectangle , ellipse after that we can change that shape in to control for eg:select rectangle then right click on it we have option Make in to control, so we can make that rectangle in to button control(now we can raise click event).
similarly at runtime, now i draw a rectangle shape with mouse(with Mousedown, mousemove, mouseup events) on the WPF window.
now if i click on this rectangle i cannot show any message, so i want to make this rectangle as a button.
Now how can we make this rectangle as a control from code behind..!
MVKbgl, Thanks for your Question. I have Updated My Answer.

To make a button or any other control you might need to inherit the Control and then could add your custom property. Here I have created a custom button named EclipseButton which is usually a usercontrol. Please have a look on the XAMl on the control

XML
<UserControl x:Class="WpfTest.EclipseButton"
             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"
             mc:Ignorable="d"
             >
    <Grid>
        <Button>
            <StackPanel Orientation="Horizontal" Margin="10">
                <Ellipse  Name="ellipse1" Stroke="Black"
                      Width="{Binding ElementName=UC, Path=ButtonWidth}"
                       Height="{Binding ElementName=UC, Path=ButtonHeight}"
                          />
                <TextBlock Text="{Binding ElementName=UC, Path=Text}"
                           Margin="10,0,0,0"/>
            </StackPanel>
        </Button>

    </Grid>
</UserControl>


And the code behind of this control looks like that,

C#
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfTest
{
    /// <summary>
    /// Interaction logic for EclipseButton.xaml
    /// </summary>
    public partial class EclipseButton : UserControl
    {
        public EclipseButton()
        {
            InitializeComponent();
        }

        public double ButtonWidth
        {
            get { return (double)GetValue(WidthProperty); }
            set { SetValue(WidthProperty, value); }
        }

        public static readonly DependencyProperty WidthProperty =
            DependencyProperty.Register("ImageWidth", typeof(double), typeof(EclipseButton), new UIPropertyMetadata(16d));

        public double ButtonHeight
        {
            get { return (double)GetValue(HeightProperty); }
            set { SetValue(HeightProperty, value); }
        }

        public static readonly DependencyProperty HeightProperty =
            DependencyProperty.Register("ImageHeight", typeof(double), typeof(EclipseButton), new UIPropertyMetadata(16d));

        public string Text
        {
            get { return (string)GetValue(TextProperty); }
            set { SetValue(TextProperty, value); }
        }

        public static readonly DependencyProperty TextProperty =
            DependencyProperty.Register("Text", typeof(string), typeof(EclipseButton), new UIPropertyMetadata(""));
    }
}



And now the XAML of main window is ,

XML
<Window x:Class="WpfTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525"
        xmlns:my="clr-namespace:WpfTest">
    <Grid Height="311" Width="474">
        <Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="188,263,0,0" Name="button1" VerticalAlignment="Top" Width="100" Click="button1_Click" />
        <Label Content="Hi!!" Height="100" HorizontalAlignment="Center" Margin="188,76,186,0" Name="label1" VerticalAlignment="Top" Width="100" Background="#FFBBF23E"  />

        <my:EclipseButton Text="Eclipse Button" HorizontalAlignment="Left" VerticalAlignment="Top"
                        ButtonWidth="16" ButtonHeight="16" Margin="10" ButtonBase.Click="Button_Click" />
    </Grid>
</Window>



And the Code behind of this main window is

C#
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfTest
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void button1_Click(object sender, RoutedEventArgs e)
        {
            Button btn = (Button)sender;
            Grid grd = btn.Parent as Grid;

            Label lbl = grd.Children[1] as Label;

            if (lbl.Width < 100)
            {
                lbl.Width = 100;
            }
            else
            {
                lbl.Width = 50;
            }

            if (lbl.Height < 100)
            {
                lbl.Height = 100;
            }
            else
            {
                lbl.Height = 50;
            }
        }
        private void Button_Click(object sender, RoutedEventArgs e)
        {
            EclipseButton btn = (EclipseButton)sender;
            Grid grd = btn.Parent as Grid;

            Label lbl = grd.Children[1] as Label;

            if (lbl.Width < 100)
            {
                lbl.Width = 100;
            }
            else
            {
                lbl.Width = 50;
            }

            if (lbl.Height < 100)
            {
                lbl.Height = 100;
            }
            else
            {
                lbl.Height = 50;
            }
        }
    }
    
}


In this code you will see that i have used my own button which has a Click Event and this event is handle in the code behind of main window.

I think it will help you enough. And let me know if you need any assistance please.

Thanks,
Rashim
 
Share this answer
 
v2
Comments
KiranBabu M 23-Aug-11 8:31am    
Thanks a lot Rashim..!
Md. Rashim Uddin 23-Aug-11 12:45pm    
If it solves your problems please mark it as corrected so that other could use it without any hesitation

Thanks,
Rashim
Md. Rashim Uddin 25-Aug-11 14:20pm    
Is it Solve Your Problems Please lemme know..
KiranBabu M 26-Aug-11 3:31am    
not exactly,
but using this i solved the problem..

Cheers,
I'm not sure you actually need to do this. Shapes already support keyboard and mouse events and receiving focus. Just hook event handlers up to it and it will act just like a button.
 
Share this answer
 
[]
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900