在 XAML 中创建按钮答案

【问题标题】：Creation of Button in XAML在 XAML 中创建按钮
【发布时间】：2017-01-05 17:09:02
【问题描述】：

我想创建一个按钮，在底部有图像和标签作为内容，在右上角有通知图像，就像在 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>

我得到的图像

我想要的图片

【问题讨论】：

我们可以帮助您指出代码示例的问题所在。你试过什么？分享一些代码会更高效
也许使用 StackPanel 来包含您的固定元素（绿色电话和 ex 的标签）。然后是另一个图像在其上方（或堆栈上方），您可以在其中手动绘制图像并在其中写入文本（通知计数）或者可能准备 11 个图像（1、2、3、.. 10, 10+) 并根据通知的数量显示其中一个。
你能放一张你现在得到的结果的图片吗，我的意思是错误的
stackoverflow.com/questions/5450985 这可以帮助你，它建议画布方式

标签： c# wpf

【解决方案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>

【讨论】：