Styling A Button In WPF

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.

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: