Значок значка на кнопке управления бегущей лентой в WPF - PullRequest
Новая
       39

Значок значка на кнопке управления бегущей лентой в WPF

0 голосов
/ 11 октября 2018

Я новичок в WPF и пытаюсь показать значок в правом верхнем углу изображения кнопки.Кнопка отображается на ленте Fluent.Я встречал здесь ответ nir, который выглядит неплохо, но я не знаю, как применить это к кнопочному управлению.

Уведомление, напоминающее красный значок на iPhone в проекте WPF? 

<Page x:Class="Page1"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
  xmlns:local="clr-namespace:WpfApplication1"
  mc:Ignorable="d" 
  d:DesignHeight="300" d:DesignWidth="300"
  Title="Page1">
<Page.Resources>
    <Style TargetType="Label" x:Key="CircularLabel">
        <Setter Property="Foreground" Value="White" />
        <Setter Property="FontWeight" Value="Bold" />
        <Setter Property="FontSize" Value="13" />
        <Setter Property="FontFamily" Value="Arial" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Label">
                    <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
                        <Rectangle Margin="0 3 0 -3" Fill="LightGray" 
                  RadiusX="11" RadiusY="11" Opacity="0.8"/>
                        <Border CornerRadius="11"
                  BorderBrush="DarkGray"
                  BorderThickness="1">
                            <Border
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center" CornerRadius="10"
                    Background="#FFC90000"
                    BorderBrush="White"
                    BorderThickness="2">
                                <Grid>
                                    <ContentPresenter
                        HorizontalAlignment="Center" VerticalAlignment="Center"
                        Content="{TemplateBinding Content}" Margin="5 1 6 1"/>
                                    <Rectangle x:Name="TopShine" RadiusX="9" RadiusY="9"
                        VerticalAlignment="Stretch">
                                        <Rectangle.Fill>
                                            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1" Opacity="0.6">
                                                <GradientStop Color="White" Offset="0.2" />
                                                <GradientStop Color="Transparent" Offset="0.7" />
                                            </LinearGradientBrush>
                                        </Rectangle.Fill>
                                    </Rectangle>
                                </Grid>
                            </Border>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Page.Resources>
<Grid>
    <UniformGrid>
        <Label Style="{StaticResource CircularLabel}">2000</Label>
    </UniformGrid>
</Grid>

enter image description here

Вот кнопка управления, к которой я пытаюсь применить значок. 

  <Fluent:RibbonGroupBox Fluent:KeyTip.Keys="C" Header="">
                        <Fluent:Button Fluent:KeyTip.Keys="LC" Header=" Transactions" Name="btnTransactions" MinHeight="67" Icon="Images/transferbig.gif" LargeIcon="Images/transfer.gif" FontWeight="Normal"></Fluent:Button>
                    </Fluent:RibbonGroupBox>

Пожалуйстасоветую, если есть какой-то другой способ сделать это, совместимый с Windows 7, 8 и 10.

Я сталкивался с этим https://mahapps.com/controls/badged-control.html, который я считаю открытым для любого, чтобы использовать его, но неуверен, что работает с windows 8.

1 Ответ

0 голосов
/ 11 октября 2018

Если я правильно понимаю ваш вопрос, вы можете поместить Label поверх Button и скорректировать его положение с помощью свойства Margin, например: 

<Fluent:RibbonGroupBox Fluent:KeyTip.Keys="C" Header="" ClipToBounds="False" Margin="10">
    <Grid>
        <Fluent:Button Fluent:KeyTip.Keys="LC" Header=" Transactions" Name="btnTransactions" MinHeight="67" FontWeight="Normal" />
        <Label Style="{StaticResource CircularLabel}" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,-8,-8,0">2000</Label>
    </Grid>
</Fluent:RibbonGroupBox>

Это должно дать вамзначок в правом верхнем углу Button.

...