XAMLでのボタンの作成

Question

通知があるたびにWhatsAppのように、下部にコンテンツとして画像とラベル、上部の右隅に通知画像を持つボタンを作成したいとします。

通知ロジックを使用することはできますが、図のように正しく表示することはできません。

私はキャンバスとグリッドで試してみましたが、できませんでした。助けていただければ幸いです。ドッキングパネルとスタックパネルを使ってみましたが、同じことができませんでした。

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

画像は私が

Answer 1

はあなたがあなた自身にあなたがしたいレイアウトを与えること<Button>コンテンツを指定することができたい

画像を取得します。

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