none
How to add text and image to button using C# code?

    Question

  • Hi,

    I want to add an icon and a text to the button using c# code.

    the button addition should be placed at the left and text at right.How do ican acheive this using C# Code.

    Can any body help on this please?

    Thanks,

    T Sudarshan Reddy.

    Monday, June 02, 2008 2:45 AM

Answers

  • You should be able to add a Panel (Stack or Grid) to the Content as container and to the Panel add an Image and a TextBlock which will serve the purpose.

     Thanks
    Shankar.

    Monday, June 02, 2008 8:58 AM
  • Ok, you have to create a template button. This is the best.

    Add a new class to the project and inherit Control. myButton.cs

    Add a new xml file with the name generic.xaml. MUST be place in the root of the project.

    generic.xaml This is the template where you can specify a button's color and set an image as a background. You can easily add also a TextBlock to support a text on the right side. Remove the "*".

    <ResourceDictionary
        xmlns="http://schemas.microsoft.com/client/2007"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:src="clr-namespace:*myButton class namespace *;assembly=*project name*"
        >
        <Style TargetType="src:myButton">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="src:myButton">
                        <Grid x:Name="RootElement" Margin="3">
                            <Rectangle Width="46" Height="46" Fill="{TemplateBinding Fill}" RadiusX="4" RadiusY="4"></Rectangle>
                            <Image Source="{TemplateBinding Source}"  Width="46" Height="46" ></Image>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ResourceDictionary>

     
     

     myButton.cs

    using System;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Documents;
    using System.Windows.Ink;
    using System.Windows.Input;
    using System.Windows.Media;
    using System.Windows.Media.Animation;
    using System.Windows.Shapes;

    namespace *your namespace*
    {
        public class myButton: Control
        {
            public    static    readonly    DependencyProperty    BackgroundImageProperty    =
                DependencyProperty.Register( "Source", typeof( ImageSource ), typeof( ToolButton ), null );

            public    ImageSource    BackgroundImage
            {
                get{ return    ( ImageSource )GetValue( BackgroundImageProperty ); }
                set{ SetValue( BackgroundImageProperty, value ); }
            }

            public    static    readonly    DependencyProperty    BackgroundColorProperty    =
                DependencyProperty.Register( "Fill", typeof( Brush ), typeof( ToolButton ), null );

            public    Brush    BackgroundColor
            {
                get{ return    ( Brush )GetValue( BackgroundColorProperty ); }
                set{ SetValue( BackgroundColorProperty, value ); }
            }
        }
    }

     

    page.xaml this is how to use the new template button

    <UserControl x:Class="Paint.App_Code.Toolbar.Toolbar"
        xmlns="http://schemas.microsoft.com/client/2007"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:scr="clr-namespace:*your namespace*"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" Visibility="Visible">
        <UserControl.Resources>
           
        </UserControl.Resources>
       
        <Grid Height="300" Width="52" VerticalAlignment="Top">
           
                <Rectangle HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch" RadiusX="3" RadiusY="3" Stroke="#FFA1A1A1" StrokeThickness="1" Fill="Transparent"/>
            <StackPanel Orientation="Vertical">
                <scr:ToolButton x:Name="btnMove" Width="52" Height="52" BackgroundColor="Black" BackgroundImage="../../Images/ToolButtons/Move.png" MouseLeftButtonUp="btnMove_MouseLeftButtonUp" ></scr:ToolButton>
                <scr:ToolButton x:Name="btnPen" Width="52" Height="52" BackgroundColor="Black" BackgroundImage="../../Images/ToolButtons/pen.png" MouseLeftButtonUp="btnPen_MouseLeftButtonUp" ></scr:ToolButton>
               
            </StackPanel>
              
           
        </Grid>
    </UserControl>
     

     

    Good luck! :) 

    Monday, June 02, 2008 10:11 AM
  • 2 more simple ways to create your button with Image and Text:

    1) you just create a UserControl with the Text and Image in it. Make sure you layout them correctly. Then in your code:

    MyButton.Content = new MyButtonImageTextControl();

    2) you make the Image as the Button Background, and set the Content = YourText.

     

     


    Monday, June 02, 2008 10:38 AM

All replies

  • I think you can use the content property of button for that. Just simply add Image control and text to that property.  

    Monday, June 02, 2008 3:07 AM
  • yes you are right we can add the image to the content property but where do could I add the text to the button.

    Could i have a sample how you have tried?

    Monday, June 02, 2008 3:14 AM
  • You should be able to add a Panel (Stack or Grid) to the Content as container and to the Panel add an Image and a TextBlock which will serve the purpose.

     Thanks
    Shankar.

    Monday, June 02, 2008 8:58 AM
  • Ok, you have to create a template button. This is the best.

    Add a new class to the project and inherit Control. myButton.cs

    Add a new xml file with the name generic.xaml. MUST be place in the root of the project.

    generic.xaml This is the template where you can specify a button's color and set an image as a background. You can easily add also a TextBlock to support a text on the right side. Remove the "*".

    <ResourceDictionary
        xmlns="http://schemas.microsoft.com/client/2007"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:src="clr-namespace:*myButton class namespace *;assembly=*project name*"
        >
        <Style TargetType="src:myButton">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="src:myButton">
                        <Grid x:Name="RootElement" Margin="3">
                            <Rectangle Width="46" Height="46" Fill="{TemplateBinding Fill}" RadiusX="4" RadiusY="4"></Rectangle>
                            <Image Source="{TemplateBinding Source}"  Width="46" Height="46" ></Image>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ResourceDictionary>

     
     

     myButton.cs

    using System;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Documents;
    using System.Windows.Ink;
    using System.Windows.Input;
    using System.Windows.Media;
    using System.Windows.Media.Animation;
    using System.Windows.Shapes;

    namespace *your namespace*
    {
        public class myButton: Control
        {
            public    static    readonly    DependencyProperty    BackgroundImageProperty    =
                DependencyProperty.Register( "Source", typeof( ImageSource ), typeof( ToolButton ), null );

            public    ImageSource    BackgroundImage
            {
                get{ return    ( ImageSource )GetValue( BackgroundImageProperty ); }
                set{ SetValue( BackgroundImageProperty, value ); }
            }

            public    static    readonly    DependencyProperty    BackgroundColorProperty    =
                DependencyProperty.Register( "Fill", typeof( Brush ), typeof( ToolButton ), null );

            public    Brush    BackgroundColor
            {
                get{ return    ( Brush )GetValue( BackgroundColorProperty ); }
                set{ SetValue( BackgroundColorProperty, value ); }
            }
        }
    }

     

    page.xaml this is how to use the new template button

    <UserControl x:Class="Paint.App_Code.Toolbar.Toolbar"
        xmlns="http://schemas.microsoft.com/client/2007"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:scr="clr-namespace:*your namespace*"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" Visibility="Visible">
        <UserControl.Resources>
           
        </UserControl.Resources>
       
        <Grid Height="300" Width="52" VerticalAlignment="Top">
           
                <Rectangle HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch" RadiusX="3" RadiusY="3" Stroke="#FFA1A1A1" StrokeThickness="1" Fill="Transparent"/>
            <StackPanel Orientation="Vertical">
                <scr:ToolButton x:Name="btnMove" Width="52" Height="52" BackgroundColor="Black" BackgroundImage="../../Images/ToolButtons/Move.png" MouseLeftButtonUp="btnMove_MouseLeftButtonUp" ></scr:ToolButton>
                <scr:ToolButton x:Name="btnPen" Width="52" Height="52" BackgroundColor="Black" BackgroundImage="../../Images/ToolButtons/pen.png" MouseLeftButtonUp="btnPen_MouseLeftButtonUp" ></scr:ToolButton>
               
            </StackPanel>
              
           
        </Grid>
    </UserControl>
     

     

    Good luck! :) 

    Monday, June 02, 2008 10:11 AM
  • 2 more simple ways to create your button with Image and Text:

    1) you just create a UserControl with the Text and Image in it. Make sure you layout them correctly. Then in your code:

    MyButton.Content = new MyButtonImageTextControl();

    2) you make the Image as the Button Background, and set the Content = YourText.

     

     


    Monday, June 02, 2008 10:38 AM
  • Code Xaml 

    <Button Content="Thm mi" FontWeight="bold" x:Name="btnAdd" Click="btnAdd_Click" Height="30" Margin="3" >

    </Button>

    I using code   C# below

    st =
    new StackPanel();

    st.Orientation = Orientation.Horizontal;

    img = new Image();img.HorizontalAlignment = HorizontalAlignment.Left;

    img.Height = 25;

    img.Width = 20;

    img.Source =
    new BitmapImage(new Uri("all-al_10.png", UriKind.Relative));

    st.Children.Add(img);

    tb =
    new TextBlock();

    tb.Margin = new Thickness(0, 0, 0, 0);

    tb.VerticalAlignment = VerticalAlignment.Center;

    tb.FontWeight = FontWeights.Normal;

    tb.Foreground = new SolidColorBrush(Colors.Black);tb.Text = "Thm mi";

    st.Children.Add(tb);

    btnAdd.Content = st;

    Saturday, May 08, 2010 2:03 AM
  •              Button b = sender as Button;
                 StackPanel st = new StackPanel();
                st.Orientation = Orientation.Horizontal;
                Image img = new Image();
                img.HorizontalAlignment = HorizontalAlignment.Left;
                img.Height = 25;
                img.Width = 20;
                img.Source = new BitmapImage(new Uri("goodxriddance30.jpg", UriKind.Relative));
                st.Children.Add(img);
                TextBlock tb = new TextBlock();
                tb.Margin = new Thickness(0, 0, 0, 0);
                tb.VerticalAlignment = VerticalAlignment.Center;
                tb.FontWeight = FontWeights.Normal;
                tb.Foreground = new SolidColorBrush(Colors.Black);
                tb.Text = "chirag";
                st.Children.Add(tb);
                b.Content = st;

    Wednesday, September 29, 2010 2:09 AM