Post
Ask Question

WPF Window With Buttons In Toolbar Preview

Today, in this article, I will explain how to add buttons in Application toolbar preview window,  as you may have seen in Windows Media Player, as shown below.

 

WPF

 

This is very simple, but still many developers do not know about it. 

Step 1

Create a WPF application and in App.xaml file place the below code in the Resource section.
  1. <DrawingImage x:Key="Rocket">  
  2.             <DrawingImage.Drawing>  
  3.                 <DrawingGroup ClipGeometry="M0,0 V128 H128 V0 H0 Z">  
  4.                     <DrawingGroup>  
  5.                         <DrawingGroup>  
  6.                             <GeometryDrawing Brush="#FFF68C29" Geometry="F1 M128,128z M0,0z M83.5,85.6C82.9,85 82.9,84.1 83.5,83.5 84.1,82.9 85,82.9 85.6,83.5L94.4,92.5C95,93.1 95,94 94.4,94.6 93.8,95.2 92.9,95.2 92.3,94.6L83.5,85.6z" />  
  7.                             <GeometryDrawing Brush="#FFF68C29" Geometry="F1 M128,128z M0,0z M76.6,92.5C76,92 76,91 76.6,90.4 77.2,89.8 78.1,89.8 78.7,90.4L90.4,102.3C91,102.9 91,103.8 90.4,104.4 89.8,105 88.9,105 88.3,104.4L76.6,92.5z" />  
  8.                             <GeometryDrawing Brush="#FFF68C29" Geometry="F1 M128,128z M0,0z M90.4,78.7C89.8,78.1 89.8,77.2 90.4,76.6 91,76 91.9,76 92.5,76.6L104.2,88.5C104.8,89.1 104.8,90 104.2,90.6 103.6,91.2 102.7,91.2 102.1,90.6L90.4,78.7z" />  
  9.                             <GeometryDrawing Brush="#FFF7D309" Geometry="F0 M128,128z M0,0z M26.5,26.5L26.5,26.5C32.5,20.5,42.3,20.5,48.3,26.5L91.5,69.7C93.7,71.9,93.7,75.5,91.5,77.7L77.7,91.5C75.5,93.7,71.9,93.7,69.7,91.5L26.5,48.3C20.5,42.3,20.5,32.5,26.5,26.5z" />  
  10.                             <GeometryDrawing>  
  11.                                 <GeometryDrawing.Brush>  
  12.                                     <SolidColorBrush Color="#FF002535" Opacity="1" Transform="-0.7071,-0.7071,0.7071,-0.7071,41.5737,100.3503" />  
  13.                                 </GeometryDrawing.Brush>  
  14.                                 <GeometryDrawing.Geometry>  
  15.                                     <RectangleGeometry RadiusX="0" RadiusY="0" Rect="35.7,26.1,11.7,30.9" Transform="-0.7071,-0.7071,0.7071,-0.7071,41.5737,100.3503" />  
  16.                                 </GeometryDrawing.Geometry>  
  17.                             </GeometryDrawing>  
  18.                             <GeometryDrawing>  
  19.                                 <GeometryDrawing.Brush>  
  20.                                     <SolidColorBrush Color="#FF002535" Opacity="1" Transform="-0.7071,-0.7071,0.7071,-0.7071,78.5369,189.5846" />  
  21.                                 </GeometryDrawing.Brush>  
  22.                                 <GeometryDrawing.Geometry>  
  23.                                     <RectangleGeometry RadiusX="0" RadiusY="0" Rect="75.6,63.1,5.8,30.9" Transform="-0.7071,-0.7071,0.7071,-0.7071,78.5369,189.5846" />  
  24.                                 </GeometryDrawing.Geometry>  
  25.                             </GeometryDrawing>  
  26.                             <GeometryDrawing Brush="#FFE0ECC1">  
  27.                                 <GeometryDrawing.Geometry>  
  28.                                     <EllipseGeometry RadiusX="10.6" RadiusY="10.6" Center="57.1,57.1" />  
  29.                                 </GeometryDrawing.Geometry>  
  30.                             </GeometryDrawing>  
  31.                             <GeometryDrawing Brush="#FF002535" Geometry="F1 M128,128z M0,0z M57.1,48.1C54.8,48.1,52.5,49,50.7,50.8L50.7,50.8C48.9,52.6 48,54.9 48,57.2 48,59.5 48.9,61.8 50.7,63.6L50.7,63.6C52.5,65.4 54.8,66.3 57.1,66.3 59.4,66.3 61.7,65.4 63.5,63.6L63.5,63.6C65.3,61.8 66.2,59.5 66.2,57.2 66.2,54.9 65.3,52.6 63.5,50.8L63.5,50.8C61.8,48.9,59.5,48.1,57.1,48.1z M48.6,48.6C51,46.2 54,45.1 57.1,45.1 60.2,45.1 63.3,46.3 65.6,48.6L65.6,48.6C68,51 69.1,54 69.1,57.1 69.1,60.2 67.9,63.3 65.6,65.6L65.6,65.6C63.2,68 60.2,69.1 57.1,69.1 54,69.1 50.9,67.9 48.6,65.6L48.6,65.6C46.2,63.2 45.1,60.2 45.1,57.1 45.1,54 46.3,51 48.6,48.6L48.6,48.6z" />  
  32.                             <GeometryDrawing Brush="#FFE53839" Geometry="F1 M128,128z M0,0z M63.3,85.2C58,90.5 59.2,98 63.8,106 37.7,85 52,73.9 52,73.9L63.3,85.2z" />  
  33.                             <GeometryDrawing Brush="#FFEE464A" Geometry="F1 M128,128z M0,0z M85.1,63.3C90.4,58 97.9,59.2 105.9,63.8 85,37.7 73.9,52 73.9,52L85.1,63.3z" />  
  34.                             <GeometryDrawing Brush="#FFDBBC26" Geometry="F0 M128,128z M0,0z M65.7,65.7C63.3,68.1 60.3,69.2 57.2,69.2 54.1,69.2 51,68 48.7,65.7 46.3,63.3 45.2,60.3 45.2,57.2 45.2,54.1 46.4,51 48.7,48.7L45.8,45.8 34.8,56.6 63.3,85.1 65.5,87.3 76.4,76.4 65.7,65.7z" />  
  35.                             <GeometryDrawing Brush="#FFDBBC26" Geometry="F0 M128,128z M0,0z M80.6,80.6L69.7,91.5C71.5,93.3 74.3,93.6 76.5,92.4 76.9,92.2 77.3,91.9 77.7,91.5L78.8,90.4 83.6,85.6 84.7,84.5 83.6,83.4 80.6,80.6z" />  
  36.                             <GeometryDrawing Brush="#FFDBBC26" Geometry="F0 M128,128z M0,0z M26.5,48.3L37.4,37.4 26.5,26.5C20.5,32.5,20.5,42.3,26.5,48.3z" />  
  37.                         </DrawingGroup>  
  38.                     </DrawingGroup>  
  39.                 </DrawingGroup>  
  40.             </DrawingImage.Drawing>  
  41.         </DrawingImage>  
  42.         <DrawingImage x:Key="Boat">  
  43.             <DrawingImage.Drawing>  
  44.                 <DrawingGroup ClipGeometry="M0,0 V128 H128 V0 H0 Z">  
  45.                     <DrawingGroup>  
  46.                         <DrawingGroup>  
  47.                             <GeometryDrawing Brush="#FFECE46F" Geometry="F0 M128,128z M0,0z M18.5,87.5L108.3,87.5C109.5,87.5,110.5,88.5,110.5,89.7L110.5,108.6 37.7,108.6C26.6,108.6,17.5,99.5,17.5,88.4L17.5,88.4C17.6,87.9,18,87.5,18.5,87.5z" />  
  48.                             <GeometryDrawing Brush="#FFF7D309" Geometry="F0 M128,128z M0,0z M69.1,22.8L69.1,87.5 52.4,87.5 35.8,87.5C36,63.1,42.7,38.1,69.1,22.8z" />  
  49.                             <GeometryDrawing Brush="#FFDBBC26" Geometry="F0 M128,128z M0,0z M72.3,39.6L72.3,39.6 72.1,87.5 88.8,87.5 102.8,87.5z" />  
  50.                             <GeometryDrawing Brush="#FFD2CB60" Geometry="F0 M128,128z M0,0z M110.4,99.1L20.7,99.2C24.3,104.8,30.6,108.5,37.7,108.5L110.4,108.5 110.4,99.1z" />  
  51.                             <GeometryDrawing Brush="#FF005E5D" Geometry="F0 M128,128z M0,0z M69.1,87.5L72.3,87.5 72.3,21C72.3,20.1,71.6,19.4,70.7,19.4L70.7,19.4C69.8,19.4,69.1,20.1,69.1,21L69.1,87.5z" />  
  52.                         </DrawingGroup>  
  53.                     </DrawingGroup>  
  54.                 </DrawingGroup>  
  55.             </DrawingImage.Drawing>  
  56.         </DrawingImage>  
  57.         <DrawingImage x:Key="Balloon">  
  58.             <DrawingImage.Drawing>  
  59.                 <DrawingGroup ClipGeometry="M0,0 V128 H128 V0 H0 Z">  
  60.                     <DrawingGroup>  
  61.                         <DrawingGroup>  
  62.                             <GeometryDrawing Brush="#FF002535" Geometry="F1 M128,128z M0,0z M49.1,62.4C49.1,61.6 49.7,61 50.5,61 51.3,61 51.9,61.6 51.9,62.4L51.8,80.5C51.8,81.3 51.2,81.9 50.4,81.9 49.6,81.9 49,81.3 49,80.5L49.1,62.4z" />  
  63.                             <GeometryDrawing Brush="#FF002535" Geometry="F1 M128,128z M0,0z M76.1,62.4C76.1,61.6 76.7,61 77.5,61 78.3,61 78.9,61.6 78.9,62.4L78.8,80.5C78.8,81.3 78.2,81.9 77.4,81.9 76.6,81.9 76,81.3 76,80.5L76.1,62.4z" />  
  64.                             <GeometryDrawing Brush="#FF002535" Geometry="F1 M128,128z M0,0z M22.6,62.9C22,62.4 21.9,61.5 22.4,60.9 22.9,60.3 23.8,60.2 24.4,60.7L48.8,81.6C49.4,82.1 49.5,83 49,83.6 48.5,84.2 47.6,84.3 47,83.8L22.6,62.9z" />  
  65.                             <GeometryDrawing Brush="#FF002535" Geometry="F1 M128,128z M0,0z M79.7,83.9C79.1,84.4 78.2,84.3 77.7,83.7 77.2,83.1 77.3,82.2 77.9,81.7L103.6,60.8C104.2,60.3 105.1,60.4 105.6,61 106.1,61.6 106,62.5 105.4,63L79.7,83.9z" />  
  66.                             <GeometryDrawing Brush="#FFF7D309" Geometry="F0 M128,128z M0,0z M55,80.5L73,80.5C75.4,80.5,77.4,82.5,77.4,84.9L77.4,103C77.4,105.4,75.4,107.4,73,107.4L55,107.4C52.6,107.4,50.6,105.4,50.6,103L50.6,84.9C50.5,82.5,52.5,80.5,55,80.5z" />  
  67.                             <GeometryDrawing Brush="#FFDBBC26" Geometry="F0 M128,128z M0,0z M48.8,85.1L77.9,85.1C79.2,85.1,80.2,84.1,80.2,82.8L80.2,82.8C80.2,81.5,79.2,80.5,77.9,80.5L48.8,80.5C47.5,80.5,46.5,81.5,46.5,82.8L46.5,82.8C46.5,84.1,47.5,85.1,48.8,85.1z" />  
  68.                             <GeometryDrawing Brush="#FFE0ECC1" Geometry="F0 M128,128z M0,0z M50.5,63.9L50.5,63.9C49.7,63.9,49.1,63.3,49.1,62.5L49.1,62.5 49.1,62.5C49.1,59.2 47.7,56.1 45.6,53.9 43.4,51.7 40.4,50.4 37,50.4 33.7,50.4 30.8,51.7 28.6,53.8 26.4,55.9 25,58.8 24.9,62 24.9,62.8 24.2,63.4 23.4,63.3 22.6,63.3 22,62.6 22.1,61.8L22.1,61.8C22.3,50.4 27,40.1 34.6,32.6 42.2,25.1 52.6,20.5 64,20.5 75.5,20.5 85.9,25.1 93.4,32.6 101,40.1 105.7,50.4 105.9,61.8L105.9,61.8 105.9,61.8 105.9,61.8C105.9,62.6 105.3,63.2 104.5,63.2 103.7,63.2 103.1,62.6 103.1,61.9L103.1,61.9C103,58.7 101.6,55.8 99.4,53.7 97.2,51.6 94.3,50.3 91,50.3 87.7,50.3 84.6,51.7 82.4,53.8 80.2,56 78.9,59 78.9,62.4L78.9,62.4 78.9,62.4C78.9,63.2,78.3,63.8,77.5,63.8L77.5,63.8 77.5,63.8 77.5,63.8C76.7,63.8,76.1,63.2,76.1,62.4L76.1,62.4 76.1,62.4C76.1,59.1 74.7,56 72.6,53.8 70.4,51.6 67.4,50.3 64,50.3 60.7,50.3 57.6,51.7 55.4,53.8 53.2,56 51.9,59 51.9,62.4L51.9,62.4 51.9,62.4C51.9,63.2,51.3,63.9,50.5,63.9L50.5,63.9 50.5,63.9z" />  
  69.                             <GeometryDrawing Brush="#FFEE464A" Geometry="F0 M128,128z M0,0z M34.6,32.6C27,40.1,22.3,50.4,22.1,61.8L22.1,61.8C22.1,62.6 22.7,63.2 23.4,63.3 23.8,63.3 24.2,63.1 24.5,62.8 24.7,62.6 24.9,62.3 24.9,61.9 25,58.7 26.4,55.8 28.6,53.7 30.8,51.6 33.7,50.3 37,50.3 40.3,50.3 43.4,51.7 45.6,53.8 47.8,56 49.1,59 49.1,62.4L49.1,62.4C49.1,63.2 49.7,63.8 50.5,63.8 50.5,63.8 50.5,63.8 50.5,63.8 50.5,48.6 56.1,28.4 64,20.4 52.5,20.5 42.1,25.1 34.6,32.6z" />  
  70.                             <GeometryDrawing Brush="#FFE53839" Geometry="F0 M128,128z M0,0z M93.4,32.6C101,40.1,105.7,50.4,105.9,61.8L105.9,61.8C105.9,62.6 105.3,63.2 104.6,63.3 104.2,63.3 103.8,63.1 103.5,62.8 103.3,62.6 103.1,62.3 103.1,61.9 103,58.7 101.6,55.8 99.4,53.7 97.2,51.6 94.3,50.3 91,50.3 87.7,50.3 84.6,51.7 82.4,53.8 80.2,56 78.9,59 78.9,62.4L78.9,62.4C78.9,63.2 78.3,63.8 77.5,63.8 77.5,63.8 77.5,63.8 77.5,63.8 77.5,48.6 71.9,28.4 64,20.4 75.5,20.5 85.9,25.1 93.4,32.6z" />  
  71.                         </DrawingGroup>  
  72.                     </DrawingGroup>  
  73.                 </DrawingGroup>  
  74.             </DrawingImage.Drawing>  
  75.         </DrawingImage>   

Please take a note that this code is nothing but images. Here I have used DrawingImage class to prepare images from SVG data.

Step 2

  • To add button, we will use TaskbarItemInfo
  • Define TaskbarItemInfo for MainWindow.xaml as mentioned below
  1. <Window.TaskbarItemInfo>  
  2.      <TaskbarItemInfo>  
  3.            
  4.      </TaskbarItemInfo>  
  5. </Window.TaskbarItemInfo>  

Step 3

With TaskbarItemInfo we can work with the below-mentioned features

  • Description
  • Overlay
  • ProgressState
  • ProgressValue
  • ThumbButtonInfos
  • ThumbnailClipMargin

In this article we will use ThumbButtonInfos to add button.

Step 4

Declare Three ThumbButtonInfos under TaskbarItemInfo declared in the previous step as mentioned below.

  1. <ThumbButtonInfo Description="First Button" Click="ThumbButtonInfo1_Click" ImageSource="{StaticResource Rocket}"></ThumbButtonInfo>  
  2.                 <ThumbButtonInfo Description="Second Button" Click="ThumbButtonInfo2_Click" ImageSource="{StaticResource Boat}"></ThumbButtonInfo>  
  3.                 <ThumbButtonInfo Description="Third Button" Click="ThumbButtonInfo3_Click" ImageSource="{StaticResource Balloon}"></ThumbButtonInfo> 

Here I have declared Click Events for all those buttons to show messagebox. And bound images declared in App.xaml resources.

Complete code of MainWindow Xaml should looks like below.

  1. <Window x:Class="WpfWindowWithTaskBarButtons.MainWindow"  
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
  4.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
  5.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
  6.         xmlns:local="clr-namespace:WpfWindowWithTaskBarButtons"  
  7.         mc:Ignorable="d"  
  8.         Title="MainWindow" Height="350" Width="525">  
  9.     <Window.TaskbarItemInfo>  
  10.         <TaskbarItemInfo>  
  11.             <TaskbarItemInfo.ThumbButtonInfos>  
  12.                 <ThumbButtonInfo Description="First Button" Click="ThumbButtonInfo1_Click" ImageSource="{StaticResource Rocket}"></ThumbButtonInfo>  
  13.                 <ThumbButtonInfo Description="Second Button" Click="ThumbButtonInfo2_Click" ImageSource="{StaticResource Boat}"></ThumbButtonInfo>  
  14.                 <ThumbButtonInfo Description="Third Button" Click="ThumbButtonInfo3_Click" ImageSource="{StaticResource Balloon}"></ThumbButtonInfo>  
  15.             </TaskbarItemInfo.ThumbButtonInfos>  
  16.         </TaskbarItemInfo>  
  17.     </Window.TaskbarItemInfo>  
  18.     <Grid>  
  19.           
  20.     </Grid>  
  21. </Window>  

Class File for MainWindow should look like below.

  1. public partial class MainWindow : Window  
  2.     {  
  3.         public MainWindow()  
  4.         {  
  5.             InitializeComponent();  
  6.         }  
  7.         private void ThumbButtonInfo1_Click(object sender, EventArgs e)  
  8.         {  
  9.             MessageBox.Show("First Button Clicked");  
  10.         }  
  11.         private void ThumbButtonInfo2_Click(object sender, EventArgs e)  
  12.         {  
  13.             MessageBox.Show("Second Button Clicked");  
  14.         }  
  15.         private void ThumbButtonInfo3_Click(object sender, EventArgs e)  
  16.         {  
  17.             MessageBox.Show("Third Button Clicked");  
  18.         }  
  19.     }  

That’s it guys, we have added three buttons in Application toolbar preview window similar to WindowMedia Player.

Run the application and have a look.

 

WPF

 


Similar Articles