Silverlight button with text and icon

Displaying icon along with button content is fairly easy. In this article i will try to explain the process. There are two things that i noticed doing this are:
  1. .png images are acceptable
  2. Image path from resource file is not an option here
Create Directory:

Create a folder inside your project and named it whatever you like, i named it Resource. Paste your images inside that folder.

Creating a Style in Resources:

Create a style inside your XAML file resources like below:

 <UserControl.Resources>
        
        <!-- add button style -->
        <Style x:Key="AddButtonStyle"
               TargetType="Button">
            <Setter Property="ContentTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <Canvas Width="100"
                                Height="25">
                            <Image Width="18"
                                   Height="18"
                                Source="/ButtonWithText;component/Resource/add-user-icon.png"
                                   Margin="0,0,0,0" />
                            <ContentPresenter Content="{Binding}"
                                              Margin="10,0,0,0"
                                              Canvas.Left="20"/>
                        </Canvas>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    </UserControl.Resources>

We hook the Content Property of button by creating ContentTemplate. Inside DataTemplate we add the Canvas container in which we place the Image as well as Text.
In ContentPresenter we bind the Text of the button to the value we gave when creating a button that will come afterwards.
Source: Contains two parts:
  1. /YourProjectName;component   =>   component following semocolon is somehow mandetory, did not find any explanation for that.
  2. /Resource/add-user-icon.png   =>   path of you image from your xaml file.

Applying the Style on Button:

Add this style to the button tyou created in your xaml page like :

<!-- use style to display icon -->
        <Button x:Name="add"
                Content="Add"
                Style="{StaticResource AddButtonStyle}"
                HorizontalAlignment="Left"
                VerticalAlignment="Top"
                Margin="146,51,0,0"
                Height="23"
                Width="74" />

Alternate Way:

Instead of creating a style, we can directly add the icon along with image inside Button tag like below.

<Button Command="{Binding rlcSearch}"
                Height="27"
                HorizontalAlignment="Left"
                Margin="1107,10,0,0"
                Name="button1"
                TabIndex="7"
                VerticalAlignment="Top"
                Width="95">
           
            <Button.Content>
               
                <StackPanel Orientation="Horizontal">

                    <Image Width="18"
                           Height="18"
                           Source="/MKPL;component/Views/A01/S010/Resources/Images/search.png" />
                    <TextBlock Text="{Binding Source={StaticResource mlResource}, Path=Search}"
                               Margin="10,0,0,0" />

                </StackPanel>
               
            </Button.Content>
        </Button>

In case of any query, leave a comment and i will respond to that.

Comments

Popular Posts