After this program the Output will be:
Step 1: Create a New Project In WPF.
Step 2: After that, we add a Button control in the design surface by
double-clicking Button in the Toolbox.
<Button
Height="100"
VerticalAlignment="Top"
HorizontalAlignment="Left"
Width="200">
</Button>
Step3: After that, we add a StackPanel control to our design surface and
set its orientation to Vertical.
<StackPanel
Orientation="Vertical"
Height="50">
</StackPanel>
Step 4: After that, we add an Image
control to our design surface by double-clicking Image in the Toolbox.
<Image
Height="50"
Name="img1"
Stretch="Fill"
Width="100"
IsEnabled="True"
/>
Step 5: After that we set the Source property of the Image control. For
this we use the dialog box to upload an image to our project.
<Image Source="Chrysanthemum.jpg" Height="50"
Name="img1"
Stretch="Fill"
Width="100"
IsEnabled="True" />
Step 6: We should add the Image Control it in the StackPanel like this:
<StackPanel
Orientation="Vertical"
Height="50">
<Image
Source="Chrysanthemum.jpg" Height="50"
Name="img1"
Stretch="Fill"
Width="100"
IsEnabled="True" />
</StackPanel>
Step 7: Now we add a <Button.Content></Button.Content> section to the
Button:
<StackPanel
Orientation="Vertical"
Height="50">
<Image
Source="Chrysanthemum.jpg" Height="50"
Name="img1"
Stretch="Fill"
Width="100"
IsEnabled="True" />
</StackPanel>
Step 8: Now we cut the entire section of the StackPanel and add it into
the <Button.Content> section of the Button Control:
<Button
Height="100"
VerticalAlignment="Top"
HorizontalAlignment="Left"
Width="200">
<Button.Content>
<StackPanel
Orientation="Vertical"
Height="50">
<Image
Source="Chrysanthemum.jpg" Height="50"
Name="img1"
Stretch="Fill"
Width="100"
IsEnabled="True" />
</StackPanel>
</Button.Content>
After that we can resize it according to our requirement. The output will be:
We can also add a Text Block in this program as if we want to show the Name of
the Button, we can do this by simply add a TextBlock Control in the StackPanel:
<TextBlock
Height="20"
Name="textBlock1"
Text="Click
Me Please !!!"
Width="100"
FontSize="10" FontWeight="Bold" HorizontalAlignment="Center"
/>
After adding this the complete program will be:
<Button
Height="100"
VerticalAlignment="Top"
HorizontalAlignment="Left"
Width="200">
<Button.Content>
<StackPanel
Orientation="Vertical"
Height="50">
<Image
Source="Chrysanthemum.jpg" Height="30"
Name="img1"
Stretch="Fill"
Width="100"
IsEnabled="True" />
<TextBlock
Height="20"
Name="textBlock1"
Text="Click
Me Please !!!"
Width="100"
FontSize="10" FontWeight="Bold" HorizontalAlignment="Center"
/>
</StackPanel>
</Button.Content>
</Button>
Here is the Output:
