在 XAML 中创建按钮

Posted 2023-02-22

【中文标题】在 XAML 中创建按钮

【英文标题】：Creation of Button in 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+) 并根据通知的数量显示其中一个。

你能放一张你现在得到的结果的图片吗，我的意思是错误的

***.com/questions/5450985 这可以帮助你，它建议画布方式

【参考方案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>