Solved

Confirmation box in wpf

Posted on 2010-09-10
16
1,135 Views
Last Modified: 2013-11-12
Hi!

I want to create in a WPF application a box, on which we can set a text/color/icon and is displayed during a specified times and after disapear.

The goal is to confirm that action that the user have order have been correctly made.

It has to be not blocking anything else, it's only a "user feedback".

Something like a "Live messenger" popup(but not a the same place and with only one event possible).

How can I do this in WPF?

Thank you!
0
Comment
Question by:Nargzul
  • 9
  • 7
16 Comments
 
LVL 29

Expert Comment

by:Gautham Janardhan
Comment Utility
you can create a user control which will inherit from  window  ,put your logic in this user control

have a static method in the user control which will pop it to the user.
0
 
LVL 1

Author Comment

by:Nargzul
Comment Utility
Sure I can, but how to:
-Create the effect(appear & disappear)
-put it on foreground without it takes the focus
-have no item in the taskbar
0
 
LVL 29

Expert Comment

by:Gautham Janardhan
Comment Utility
If we use a pop up instead of the window then we can utilize the inherent appear/disappear animation, this will also take care of the next two requirements also (not stealing focus and not showing up in the task bar)..By setting the property StaysOpen in the popup we can make sure the popup stays open until the uses closes it or the timer runs out
0
 
LVL 1

Author Comment

by:Nargzul
Comment Utility
can you furnish me a sample of a creation of popup?
0
 
LVL 29

Accepted Solution

by:
Gautham Janardhan earned 500 total points
Comment Utility
xaml
<Window x:Class="Tes1234.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1">
    <Grid x:Name="LayoutRoot">

        <Button Width="120" Height="24" Click="Button_Click">Open Popup</Button>

        <Popup x:Name="confPopUp" StaysOpen="True" PopupAnimation="Fade">
            <Border BorderBrush="Black" BorderThickness=".2" CornerRadius="5">
                <Grid Background="White" Width="350" Height="250">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <Button HorizontalAlignment="Right" Width="20" Height="20" Content="x" Click="Button_Click_1"/>
                    <TextBlock Text="Some message" Grid.Row="1"/>
                    <StackPanel Grid.Row="2" Orientation="Horizontal" HorizontalAlignment="Right">
                        <Button Width="120" Height="24" Margin="5" Content="Ok" Click="Button_Click_2"/>
                        <Button Width="120" Height="24" Margin="5" Content="Cancel" Click="Button_Click_3"/>
                    </StackPanel>
                </Grid>
            </Border>
        </Popup>

        <!--<TreeView Name="treeView1" ItemsSource="{Binding Filters}" Grid.Row="5" Grid.ColumnSpan="3" SelectedItemChanged="treeView1_SelectedItemChanged">
            <TreeView.ItemTemplate>
                <HierarchicalDataTemplate ItemsSource="{Binding Path=SubItems}">
                    <TextBlock FontWeight="Bold" Text="{Binding Path=Category}" />
                    <HierarchicalDataTemplate.ItemTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding Path=CommonName}"/>
                        </DataTemplate>
                    </HierarchicalDataTemplate.ItemTemplate>
                </HierarchicalDataTemplate>
            </TreeView.ItemTemplate>
        </TreeView>-->
    </Grid>
</Window>

Open in new window

0
 
LVL 29

Assisted Solution

by:Gautham Janardhan
Gautham Janardhan earned 500 total points
Comment Utility
code behind
public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();

            Filters = new ObservableCollection<Filter>();
            Filters.Add(new Filter()
            {
                Category = "categ1",
                CommonName = "commonName 1",
                Value = "test 1234",
                SubItems = new ObservableCollection<Filter>()
                 {
                     new Filter()
                     {
                         Category = "categ2",
                         CommonName = "commonName 2",
                         Value = "test 4321",
                         SubItems = new ObservableCollection<Filter>()
                         {
                             new Filter()
                             {
                                 Category = "categ3",
                                 CommonName = "commonName 3",
                                 Value = "test 2255",
                             }
                         }
                     }
                 }
            });

            this.DataContext = this;
        }

        public ObservableCollection<Filter> Filters { get; set; }


        private void treeView1_SelectedItemChanged(object sender, RoutedPropertyChangedEventArgs<object> e)
        {
            MessageBox.Show(((Filter)(sender as TreeView).SelectedItem).CommonName);
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            confPopUp.PlacementTarget = this;
            confPopUp.Placement = System.Windows.Controls.Primitives.PlacementMode.Center;
            confPopUp.IsOpen = true;
        }

        private void Button_Click_1(object sender, RoutedEventArgs e)
        {
            confPopUp.IsOpen = false;
        }

        private void Button_Click_2(object sender, RoutedEventArgs e)
        {
            confPopUp.IsOpen = false;
        }

        private void Button_Click_3(object sender, RoutedEventArgs e)
        {
            confPopUp.IsOpen = false;
        }
    }

Open in new window

0
 
LVL 1

Author Comment

by:Nargzul
Comment Utility
Thank you! Do you think I can put this in a different user-control? It has to be used in several pages
0
 
LVL 29

Expert Comment

by:Gautham Janardhan
Comment Utility
yeh you can.. i was lazy so everything was in the same page :-)
0
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
LVL 1

Author Comment

by:Nargzul
Comment Utility
Is there a way to specify in how much time the popup is showed?

I've a rounded corner, but the small part of the corner comes black, you know why?

0
 
LVL 29

Expert Comment

by:Gautham Janardhan
Comment Utility
You can create a timer in the user control , and when the timer runs out you can close the popup.

Not sure about the rounded corner.Can you post the xaml for this
0
 
LVL 1

Author Comment

by:Nargzul
Comment Utility
Excuse me, I misspoke:

I want to know, how to change the time the popup take to be fully displayed(with fading).


<UserControl x:Class="Misc.MessagePopup"

             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" 

             d:DesignHeight="300" d:DesignWidth="300">

    <Grid Background="Transparent">

        <Popup x:Name="uxPopup" StaysOpen="True" PopupAnimation="Fade" Grid.ColumnSpan="2"  >

            <Border Name="uxBorder" BorderThickness="5" CornerRadius="10">

                <Grid Width="350" Height="150" Name="uxMainGrid">

                    <Grid.ColumnDefinitions>

                        <ColumnDefinition Width="20*" />

                        <ColumnDefinition Width="80*" />

                    </Grid.ColumnDefinitions>

                    <Image Name="uxIcon" Width="48" Height="48" />

                    <StackPanel Orientation="Vertical" Grid.Column="1">

                        <Label Name="uxMessage" FontSize="16">Message Here</Label>

                        <Button Name="uxCloseButton" Content="Close" Visibility="Collapsed" Click="Button_Click" />

                    </StackPanel>

                </Grid>

            </Border>

        </Popup>

    </Grid>

</UserControl>



//Code behind

using System;

using System.Timers;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Media;

using System.Windows.Media.Imaging;



namespace Misc

{

    /// <summary>

    /// Interaction logic for MessagePopup.xaml

    /// </summary>

    public partial class MessagePopup : UserControl

    {

        #region private vars

        private Timer _timer;

        private Window _window;

        private BitmapImage _okIcon;

        private BitmapImage _warningIcon;

        private BitmapImage _errorIcon;

        private delegate void StopPopupDelegate();

        #endregion



        #region constructor

        /// <summary>

        /// Initializes a new instance of the <see cref="MessagePopup"/> class.

        /// </summary>

        public MessagePopup()

        {

            InitializeComponent();

            InitIcons();

        }

        #endregion



        #region private vars

        /// <summary>

        /// Inits the icons.

        /// </summary>

        private void InitIcons()

        {

            _okIcon = new BitmapImage();

            _okIcon.BeginInit();

            _okIcon.UriSource = new Uri("pack://application:,,,/GuiResources;component/StatusIcon/ok.png");

            _okIcon.EndInit();



            _warningIcon = new BitmapImage();

            _warningIcon.BeginInit();

            _warningIcon.UriSource = new Uri("pack://application:,,,/GuiResources;component/StatusIcon/warning.png");

            _warningIcon.EndInit();



            _errorIcon = new BitmapImage();

            _errorIcon.BeginInit();

            _errorIcon.UriSource = new Uri("pack://application:,,,/GuiResources;component/StatusIcon/error.png");

            _errorIcon.EndInit();

        }





        /// <summary>

        /// Handles the Elapsed event of the _timer control.

        /// </summary>

        /// <param name="sender">The source of the event.</param>

        /// <param name="e">The <see cref="System.Timers.ElapsedEventArgs"/> instance containing the event data.</param>

        private void _timer_Elapsed(object sender, ElapsedEventArgs e)

        {

            uxPopup.Dispatcher.BeginInvoke(new StopPopupDelegate(StopPopup));

        }

        /// <summary>

        /// Stops the popup.

        /// </summary>

        private void StopPopup()

        {

            uxPopup.IsOpen = false;

        }



        /// <summary>

        /// Handles the Click event of the Button control.

        /// </summary>

        /// <param name="sender">The source of the event.</param>

        /// <param name="e">The <see cref="System.Windows.RoutedEventArgs"/> instance containing the event data.</param>

        private void Button_Click(object sender, RoutedEventArgs e)

        {

            uxPopup.IsOpen = false;

        }

        #endregion



        #region public members

        /// <summary>

        /// Opens the specified events.

        /// </summary>

        /// <param name="events">The events.</param>

        public void Open(GfKUserControlEventParameter events )

        {

            uxMessage.Content = events.Text;

            Boolean useTimer = true;

            Boolean useButton = false;

            

            switch(events.EventType)

            {

                case ViewFlowManager.Enums.EventType.Warning:

                    uxBorder.BorderBrush = Brushes.Orange;

                    uxMainGrid.Background = Brushes.SandyBrown;

                    uxIcon.Source = _warningIcon;

                    _timer = new Timer(3000);

                    break;

                case ViewFlowManager.Enums.EventType.Error:

                    uxBorder.BorderBrush = Brushes.Crimson;

                    uxMainGrid.Background = Brushes.Orchid;

                    uxIcon.Source = _errorIcon;

                    useTimer = false;

                    useButton = true;

                    break;

                case ViewFlowManager.Enums.EventType.Confirmation:

                default:

                    uxBorder.BorderBrush = Brushes.SpringGreen;

                    uxMainGrid.Background = Brushes.PaleGreen;

                    uxIcon.Source = _okIcon;

                    _timer = new Timer(1000);

                    break;

            }



            uxPopup.PlacementTarget = _window;

            uxPopup.Placement = System.Windows.Controls.Primitives.PlacementMode.Center;

            uxPopup.IsOpen = true;

            if (useTimer)

            {

                _timer.Elapsed += new ElapsedEventHandler(_timer_Elapsed);

                _timer.AutoReset = false;

                _timer.Start();

            }

            if (useButton)

            {

                uxCloseButton.Visibility = System.Windows.Visibility.Visible;

            }

            else

            {

                uxCloseButton.Visibility = System.Windows.Visibility.Collapsed;

            }



        }



        /// <summary>

        /// Sets the window.

        /// </summary>

        /// <param name="window">The window.</param>

        public void setWindow(Window window)

        {

            _window = window;

        }

        #endregion



    }

}

Open in new window

0
 
LVL 29

Expert Comment

by:Gautham Janardhan
Comment Utility
   <Border Name="uxBorder" BorderThickness="5" CornerRadius="10" background="Transparent">
                <Grid Width="350" Height="150" Name="uxMainGrid">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="20*" />
                        <ColumnDefinition Width="80*" />
                    </Grid.ColumnDefinitions>
                    <Image Name="uxIcon" Width="48" Height="48" />
                    <StackPanel Orientation="Vertical" Grid.Column="1">
                        <Label Name="uxMessage" FontSize="16">Message Here</Label>
                        <Button Name="uxCloseButton" Content="Close" Visibility="Collapsed" Click="Button_Click" />
                    </StackPanel>
                </Grid>
            </Border>
        </Popup>
0
 
LVL 29

Expert Comment

by:Gautham Janardhan
Comment Utility
i made the bacground of the popup transparent ..this will take careof your rounded edges
0
 
LVL 1

Author Comment

by:Nargzul
Comment Utility
I tried to put it on the popup but there wasn't any properties, seems you put it on border in your example, I've done that but it doesn't change anything
border.png
0
 
LVL 29

Assisted Solution

by:Gautham Janardhan
Gautham Janardhan earned 500 total points
Comment Utility
my bad i should have tested before posting...no VS .. try setting AllowsTransparency="True" for the Pop up it should work...
0
 
LVL 1

Author Closing Comment

by:Nargzul
Comment Utility
Thank you!
0

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

For a while now I'v been searching for a circular progress control, much like the one you get when first starting your Silverlight application. I found a couple that were written in WPF and there were a few written in Silverlight, but all appeared o…
Exception Handling is in the core of any application that is able to dignify its name. In this article, I'll guide you through the process of writing a DRY (Don't Repeat Yourself) Exception Handling mechanism, using Aspect Oriented Programming.
This is Part 3 in a 3-part series on Experts Exchange to discuss error handling in VBA code written for Excel. Part 1 of this series discussed basic error handling code using VBA. http://www.experts-exchange.com/videos/1478/Excel-Error-Handlin…
Get a first impression of how PRTG looks and learn how it works.   This video is a short introduction to PRTG, as an initial overview or as a quick start for new PRTG users.

728 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now