Styling A Button In WPF

Here we discuss that how we can style a WPF Button. In this example we take a Button Control and an Image Control.

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: