Creation of Button in XAML

Question

I want to create a button having image and label as content in the bottom and notification image on the Upper right corner as in the WhatsApp whenever there is notification.

I can work with Notification logic but can't able to display the image properly as shown in the figure.

I tried with canvas and grid but not able to do that.Any help will be appreciated.I also tried using dock panel and stack panel but was unable to achieve the same.

<Button Name="JobViewer" Tag="JobsIcon" Style="{DynamicResource ButtonAppStyle}" Margin="5" Click="UpdateAction" ToolTip="{Binding RelativeSource={RelativeSource Self }, Path=Name}"  >
<Button.Content>
  <DockPanel>
    <Image DockPanel.ZIndex="2"  Source="{StaticResource ContainerZoomWarningLightIcon}" DockPanel.Dock="Top" MaxHeight="40" MaxWidth="40" HorizontalAlignment="Right" ></Image>
    <Label Content="JobViewer" DockPanel.Dock="Bottom"></Label>
    <Image DockPanel.ZIndex="1"  Source="{StaticResource JobsIcon}"   ></Image>

  </DockPanel>
 </Button.Content>
</Button>

the image i get

the image i want

We can help you to point what's going wrong with a sample of code. what did you try ? share some code it will be more efficient — Mathieu, Aug 29 '16 at 15:44
Maybe use the StackPanel to include your fixed elements (Green Phone and the label for ex). Then another Image _above it_ (or above the stack) where you draw the image manually and write the text in it (count of notifications) Or maybe prepare 11 images with (1, 2, 3,.. 10, 10+) and display one of them according to the count of notifications. — Khalil Khalaf, Aug 29 '16 at 15:44
can you put an image of the result that you are getting now, I mean the wrong one — Hakan Fıstık, Aug 29 '16 at 16:36
http://stackoverflow.com/questions/5450985/ this could help you, it suggest the canvas way — Hakan Fıstık, Aug 29 '16 at 16:39

score 1 · Accepted Answer · answered Aug 29 '16 at 16:52

You could specify the <Button> content to give yourself the layout you want.

<Button Width="70" Height="70" Background="Transparent">
  <Button.Content>
    <Canvas Background="Black">
      <Border CornerRadius="8" Height="50" Width="50" Canvas.Left="-25" Canvas.Top="-25"
          BorderThickness="0" BorderBrush="Black" Background="#FF47B137">
        <Border.Effect>
          <DropShadowEffect BlurRadius="3" Opacity=".6" ShadowDepth="2" />
        </Border.Effect>
      </Border>
      <Border CornerRadius="20" Width="20" Height="20" Canvas.Left="10" Canvas.Top="-30"
          BorderBrush="White" BorderThickness="2" Background="#FFE40814">
        <Border.Effect>
          <DropShadowEffect BlurRadius="3" Opacity=".6" ShadowDepth="2" />
        </Border.Effect>
      </Border>
    </Canvas>
  </Button.Content>
</Button>

Creation of Button in XAML

1 Answers1