Blog

Styling A Button In WPF

Posted by Mahak Gupta Blogs | WPF Mar 27, 2012
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:

wpf1.gif

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" />

wpf2.gif

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:

wpf3.gif

COMMENT USING
PREMIUM SPONSORS
MCN is your source for developing solutions involving websites, mobile apps, cloud-computing, databases, BI, back-end services and processes and client-server applications.
SPONSORED BY
  • MCN is your source for developing solutions involving websites, mobile apps, cloud-computing, databases, BI, back-end services and processes and client-server applications.
Employers - Post Free Jobs