ankyAS ankyAS - 3 months ago 16
C# Question

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

Answer

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>