Создание кнопки в XAML

Я хочу создать кнопку с изображением и меткой в качестве содержимого внизу и изображение уведомления в верхнем правом углу, как в WhatsApp, когда есть уведомление.Создание кнопки в XAML

Я могу работать с логикой уведомлений, но не могу правильно отобразить изображение, как показано на рисунке.

Я пробовал с холстом и сеткой, но не смог этого сделать. Любая помощь будет оценена. Я также пробовал использовать панель панели док-станции и панели, но не смог добиться того же.

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

изображение я получить

изображение, которое я хочу

источник

2016-08-29 ankyAS

Мы можем помочь вам указать, что происходит с образцом кода. что вы попробовали? поделиться некоторым кодом, он будет более эффективным – Mathieu

Возможно, StackPanel может включать ваши фиксированные элементы (зеленый телефон и ярлык для ex). Затем добавьте другое изображение _ над ним (или над стеком), где вы рисуете изображение вручную и записываете в него текст (количество уведомлений). Или, может быть, подготовить 11 изображений с (1, 2, 3, .. 10, 10+) и отобразить один из них соответствует количеству уведомлений. –

Можете ли вы поместить образ результата, который вы получаете сейчас, я имею в виду не тот –

Вы можете указать <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>

источник

2016-08-29 16:52:10 Zack

Создание кнопки в XAML

ответ

Смежные вопросы