CODEWITHSUNDEEP
c#wpf
ankyAS
ankyAS

Reputation: 301

Creation of Button in XAML

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

enter image description here

Upvotes: 0

Views: 155

Answers (1)

Zack
Zack

Reputation: 2859

You could specify the <Button> content to give yourself the layout you want.enter image description here

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

Upvotes: 1

Related Questions