Geek Answers Handbook

IPhone, how is the red icon notification in a WPF project?

I have a C # WPF project that automatically generates daily and weekly reports. I want to tell the user when new reports are available, so I thought of the icon, like on the iPhone, where the number of new messages appears on a small red circle: alt text http://i46.tinypic.com/so3l2u.png

I thought of three images: two images with semicircles on the left and right, if the displayed number is small. And the third image is for the middle for the case when the number is large (123) and does not fit in a circle. alt text http://i49.tinypic.com/11lr7mp.png

I want a glossy effect, so I thought about the pictures. Does anyone have a good idea how to do this without photos, but programmatically?

+5
source share
5 answers

Use the Border element and put your text in it. You can set the CornerRadius property for the border correctly so that it looks like a circle (or the shape of a rounded rectangle if the number is larger).

Here's the first cut using the fact that the CornerRadius will be clamped halfway in height or width in Y and X, respectively:

 <Border Background="Red" CornerRadius="999" Padding="4">
    <TextBlock Foreground="White" FontWeight="Bold" FontSize="12">125</TextBlock>
 </Border>
+15
source

I recently had the same requirement and quickly knocked this UserControl down. It uses short animation to draw the user's attention to the icon.

"Big Nick's", UserControl UIElement Adorner (, ""!): http://blog.bignickolson.com/2009/10/15/overlaying-controls-in-wpf-with-adorners/

(, !)

alt text

<UserControl x:Class="BadgeControl"
             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" 
             mc:Ignorable="d" 
             Opacity="0.8"
              ClipToBounds="False"
             d:DesignHeight="300" d:DesignWidth="300">
    <UserControl.Resources>
        <Style TargetType="Label" x:Key="BadgeLabel">
            <Setter Property="Foreground" Value="White" />
            <Setter Property="FontWeight" Value="Bold" />
            <Setter Property="FontSize" Value="12" />
            <Setter Property="Height" Value="22" />
            <Setter Property="MinWidth" Value="22" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Label">
                        <Border Name="badgeOuterBorder" CornerRadius="10" BorderBrush="White" BorderThickness="2" Background="#C80103">
                            <Border.RenderTransform>
                                <!-- 
                                The TranslateTransform moves the badge so that when used as an Adorner, it bleeds over the upper left
                                edge of the adorned control.
                                The ScaleTransform ensures the badge is initially invisible on load ,
                                but gives the storyboard the ability to 'animate' it into visibility (by manipulating the ScaleTransform).
                                -->
                                <TransformGroup>
                                    <TranslateTransform X="-8" Y="-8"/>
                                    <ScaleTransform ScaleX="0" ScaleY="0" />
                                </TransformGroup>
                            </Border.RenderTransform>
                            <Border.BitmapEffect>
                                <!-- Give some depth to the badge with a drop-shadow -->
                                <DropShadowBitmapEffect Color="Black" Direction="270" ShadowDepth="3" Softness="0.2" Opacity="1"/>
                            </Border.BitmapEffect>
                            <Border CornerRadius="8" Padding="5 0 5 0">
                                <Border.Background>
                                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1" Opacity="0.8">
                                        <GradientStop Color="White" Offset="0" />
                                        <GradientStop Color="Transparent" Offset="0.6" />
                                    </LinearGradientBrush>
                                </Border.Background>
                                <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Content="{TemplateBinding Content}"></ContentPresenter>
                            </Border>
                        </Border>
                        <ControlTemplate.Triggers>
                            <EventTrigger RoutedEvent="Loaded">
                                <EventTrigger.Actions>
                                    <BeginStoryboard>
                                        <!--
                                        The following storyboard animates the ScaleTransform in both the X and Y planes, so that the
                                        badge appears to 'pop' into visibility.
                                        The 1 second delay ensures that the parent control is fully visible before the animation begins,
                                        otherwise, the animation may actually run before the form has rendered to the screen.
                                        -->
                                        <Storyboard>
                                            <DoubleAnimation
                                        Storyboard.TargetName="badgeOuterBorder"
                                        Storyboard.TargetProperty="(Border.RenderTransform).(TransformGroup.Children)[1].(ScaleTransform.ScaleX)"
                                        From="0"
                                        To="0.75"
                                        BeginTime="0:0:1"
                                        Duration="0:0:0.5">
                                                <DoubleAnimation.EasingFunction>
                                                    <BackEase Amplitude='1' EasingMode='EaseOut' />
                                                </DoubleAnimation.EasingFunction>
                                            </DoubleAnimation>
                                            <DoubleAnimation
                                        Storyboard.TargetName="badgeOuterBorder"
                                        Storyboard.TargetProperty="(Border.RenderTransform).(TransformGroup.Children)[1].(ScaleTransform.ScaleY)"
                                        From="0"
                                        To="0.75"
                                        BeginTime="0:0:1"
                                        Duration="0:0:0.5">
                                                <DoubleAnimation.EasingFunction>
                                                    <BackEase Amplitude='1' EasingMode='EaseOut' />
                                                </DoubleAnimation.EasingFunction>
                                            </DoubleAnimation>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </EventTrigger.Actions>
                            </EventTrigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    </UserControl.Resources>

    <Grid HorizontalAlignment="Left" VerticalAlignment="Top"  ClipToBounds="False">
        <Grid HorizontalAlignment="Center" VerticalAlignment="Center" Name="d" ClipToBounds="False">
            <Label Style="{StaticResource BadgeLabel}" Content="Badge Text" ToolTip="Badge Tooltip" ClipToBounds="False" />
        </Grid>
    </Grid>
</UserControl>
+7

Chris1, , . , Windows, , .

DropShadowEffect Rectangle, DropShadowEffect , DropShadowEffect , Rectangle , DropShadowEffect, ,

<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <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}">4</Label>
      <Label Style="{StaticResource CircularLabel}">100000</Label>
      <Label Style="{StaticResource CircularLabel}">CLICK HERE</Label>
    </UniformGrid>
  </Grid>
</Page>
+2

Here is my approach to it, it is not perfect, but it looks good enough.

<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Page.Resources>
    <DropShadowEffect x:Key="ShadowEffect" Direction="270" BlurRadius="5" ShadowDepth="3"/>
        <Style TargetType="Label" x:Key="CircularLabel">
            <Setter Property="Foreground" Value="White" />
            <Setter Property="FontWeight" Value="Bold" />
            <Setter Property="FontSize" Value="12" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Label">
                        <Grid>
                            <Rectangle HorizontalAlignment="Center" VerticalAlignment="Center" Width="20" Height="20" Fill="#FFC90000" RadiusX="10" RadiusY="10" Stroke="White" StrokeThickness="2" Effect="{StaticResource ShadowEffect}" />
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Content="{TemplateBinding Content}"></ContentPresenter>
                            <Rectangle x:Name="TopShine" RadiusX="10" RadiusY="10" Width="20" Height="20" StrokeThickness="2">
                                <Rectangle.Fill>
                                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1" Opacity="0.8">
                                        <GradientStop Color="White" Offset="0" />
                                        <GradientStop Color="Transparent" Offset="0.6" />
                                    </LinearGradientBrush>
                                </Rectangle.Fill>
                            </Rectangle>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
  </Page.Resources>
  <Grid>  
    <Label Style="{StaticResource CircularLabel}">1</Label>
  </Grid>
</Page>
0
source

More articles:


All Articles