WPF Alert control similar to StackOverflow

Question

Looking for a WPF control similar to how SO displays alerts at the top of the browser using Javascript ( as explained here Notification alert similar to how stackoverflow functions )

There are a bunch of WPF controls for Notifications which display above the systray

http://www.hardcodet.net/projects/wpf-notifyicon

http://nickeandersson.blogs.com/blog/2007/12/a-wpf-desktop-a.html

However i'm looking to display the message at the top of the current window or usercontrol with a timed fadeout to keep the message local/relevant

I'm a WPF newbie so not sure how to position the controls linked above to the top of the current window/usercontrol - any tips/pointers are appreciated

score 0 · Answer 1 · answered May 23 '12 at 16:26

Use a DockPanel as your base panel inside the window. Set the usercontrol to DockPanel.Dock=Top. Use another panel to fill the remaining space.

As for the fadeout, you can animate the opacity of the entire usercontrol based on a timer and when the opacity reaches 0, set the visibility to collapsed so it doesn't take up space anymore.

score 0 · Answer 2 · answered May 23 '12 at 16:30

try this one.

Code behind.

public partial class dtfromdataset : Window
    {
        public dtfromdataset()
        {
            InitializeComponent();


            this.DataContext = this;

            time.Interval = 5000;
            time.Elapsed += new ElapsedEventHandler(time_Elapsed);
            time.Start();
        }
        Timer time = new Timer();



        void time_Elapsed(object sender, ElapsedEventArgs e)
        {
            Dispatcher.BeginInvoke(new Action(() =>
            {
                StatusBarText = "Time is " + DateTime.Now.ToString("ddd-MM-yy HH:mm:ss tt");
            }));
        }

        private DataTable dt = new DataTable();

        public string StatusBarText
        {
            get { return (string)GetValue(StatusBarTextProperty); }
            set { SetValue(StatusBarTextProperty, value); }
        }

        // Using a DependencyProperty as the backing store for StatusBarText.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty StatusBarTextProperty =
            DependencyProperty.Register("StatusBarText", typeof(string), typeof(dtfromdataset), new UIPropertyMetadata(""));

}

Xaml

   <Grid Name="stackPanel1">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="224*" />
        </Grid.RowDefinitions>
        <TextBlock Name="statusText"
                   Grid.Row="0"
                   HorizontalAlignment="Stretch"
                   Background="Silver"
                   FontSize="20"
                   Text="{Binding Path=StatusBarText,
                                  NotifyOnTargetUpdated=True}"
                   TextAlignment="Center">
            <TextBlock.Triggers>
                <EventTrigger RoutedEvent="Binding.TargetUpdated">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity">
                                <EasingDoubleKeyFrame KeyTime="0" Value="0" />
                                <EasingDoubleKeyFrame KeyTime="0:0:0.25" Value="1" />
                                <EasingDoubleKeyFrame KeyTime="0:0:4" Value="1" />
                                <EasingDoubleKeyFrame KeyTime="0:0:5" Value="0" />
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </TextBlock.Triggers>
        </TextBlock>
</Grid>

WPF Alert control similar to StackOverflow

2 Answers2