Jun 6

admin

wpf

WPF TextBox Multiline

  • Created: 6/6/2014
  • admin

Making a Textbox multiline in WPF is pretty simple. You just need to set the AcceptsReturn property to true from the Textbox element and the TextWrapping property to Wrap. This will give you the wanted effect.

Below you can find a sample in XAML:


    
        
    

Jun 3

admin

wpf

WPF TextBox

  • Created: 6/3/2014
  • admin

The textbox is one the most popular controls in WPF. It allows user to input data or text into your application. The information they put in here is basically plain text that you can later manipulate using code. Below you can find a simple example using XAML code:


    
        
    


For changing the text inside the textbox, you can use the Text property and type the label you want to show. In the sample below, we're pre-filling the text with the welcome word:


    
        
    


Numeric textbox

If need to make a textbox just numeric, we need to add some simple code in the application that will validate the characters on the textbox and just let numbers to go through. Below you can check the XAML code:


    
        
    



This is the C# code:

namespace WpfApplication12
{
    /// 
    /// Interaction logic for MainWindow.xaml
    /// 
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
        private void NumberValidationTextBox(object sender, TextCompositionEventArgs e)
        {
            Regex regex = new Regex("[^0-9]+");
            e.Handled = regex.IsMatch(e.Text);
        }
    }
}


In the code above, we're validating that text contains numbers using regular expressions. If the text contains only numbers, the IsMatch method returns true allowing then the event to be handled. If not, the event is cancelled and nothing is changed on the textbox.

May 27

admin

wpf

WPF ToggleButton

  • Created: 5/27/2014
  • admin

The ToogleButton in WPF allows you to hold the actual state when it's clicked. It works like the checkbox control but it renders in a button. When the button is toggle for the first time the IsChecked property has a true value, when clicked again, it has a value of false.

The toggle button also fires a Checked event when the IsChecked property changes. It also has a property called IsThreeState that when enabled, changes the cycle of values that IsChecked can have to true, false and null as the third state.

Below you can check a sample in XAML code:


    
        
                      

   

On the first click you'll get the following screen:

On the second click you'll get the following screen:

And on the third click you'll get the following screen:

May 24

admin

wpf

WPF TextBlock Multiline

  • Created: 5/24/2014
  • admin

The WPF TextBlock allows to add labels to a form in its simplest form. We can say that the Label control is more advanced than the TextBlock one, but the TextBlock will fit most of the common scenarios. Below you can find a simple example of the TextBlock in XAML:


    
        Hello world!
    


In the previous screen shot we can see a simple label been drawn in the window. You can also check that there's no margin at the top or left but we can easily change this using the margin property.


    
        Hello world!
    


WPF TextBlock and Multilines

One of the problems that we usually confront with the TextBlock is how to deal with multiple lines, like what happens when a line or label is too big that is doesn't fit the window. For this, we can use several approaches to handle the big string. Below you can check an example with all possible variations:


    
        This is a very very very very very very long line of text
        This is a very very very very very very long line of text
        This is a very very very very very very long line of text
    

In the previous sample, we're dealing with the multiple lines in various ways.

  • The first one, we're just adding a LineBreak control in the middle of the string forcing it to insert a carriage return and breaking the line. This is perfect for when you want to explicitly add the line break. This is the same as the
    tag in HTML.
  • In the second TextBlock, we're just add an ellipsis at the end of the string. using the TextTrimming property. This is great for when you have long text and just don't know where to break the line. WPF will automatically add the ellipsis at the end of the window so you don't have to do these calculations yourself.
  • The third TextBlock is cutting the line using the Wrap value of the TextWrapping property. It'll simply wrap the text to fit the window as needed. Also, the calculation for wrapping is done automatically for you and it changes when the window resizes by any action from the user.
May 16

admin

wpf

WPF LinkLabel

  • Created: 5/16/2014
  • admin

WPF doesn't include a control that displays a hyperlink like LinkLabel that was included in Windows Forms. But still, this kind of control is really important and can have a lot of uses around our applications.

What I have done below is simply combine multiple WPF controls to recreate a simple LinkLabel that you can actually click and browse to some address on the Internet. Below you can find the XAML markup:


    
        
            The link Text
        
    


And this is the C# code:

namespace WpfApplication9
{
    /// 
    /// Interaction logic for MainWindow.xaml
    /// 
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void Hyperlink_Click(object sender, RoutedEventArgs e)
        {
            System.Diagnostics.Process.Start(LinkLabel.NavigateUri.ToString());
        }
    }
}

In the code above I'm just creating a TextBlock and adding the Hyperlink inside of it. Then defining the NavigateUri property with some url and then adding the text. In the C# code, we're just handling the click and opening a process and passing the url as a parameter. This will open the default browser with the link.

May 14

admin

wpf

WPF ListBox ItemTemplate

  • Created: 5/14/2014
  • admin

ItemTemplates in WPF ListBoxes allows you to present information to users in a way that makes more sense for them without having to do a lot of programming. For example, let's say you have information that you'd like to present about some web search results. The objects holding the information look like this:

List results = new List();
            results.Add(new SearchResult() { SiteTitle = "SkyXoft", SiteDescription = "Provide useful software to customers", SiteUrl = "http://www.skyxoft.com" });
            results.Add(new SearchResult() { SiteTitle = "LicenseSpot", SiteDescription = ".NET licenisng in the cloud", SiteUrl = "http://www.licensespot.com" });
            results.Add(new SearchResult() { SiteTitle = "Expiration Reminder", SiteDescription = "Keep your expirations in one place", SiteUrl = "http://www.expirationreminder.net" });

Displaying this information in a listbox without any formatting will look like the image below:

As you can see, it just even have the object names. If we want, we could add a ToString method to the object so we can get some more meaningful information but this is not what we want to achieve. We want to give it some styling using WPF controls.

ListBox and the ItemTemplate

For giving it some styling, we can use the ItemTemplate element of the ListBox and inside it declare a DataTemplate that will hold the information for displaying the results. In this case, we want to paint the items in the list like the results from web search. For this, we're using the following XAML markup:


    
        
            
                
                    
                        
                        
                        
                    
                
            
        
    


And also the following C# code:

namespace WpfApplication9
{
    /// 
    /// Interaction logic for MainWindow.xaml
    /// 
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            List results = new List();
            results.Add(new SearchResult() { SiteTitle = "SkyXoft", SiteDescription = "Provide useful software to customers", SiteUrl = "http://www.skyxoft.com" });
            results.Add(new SearchResult() { SiteTitle = "LicenseSpot", SiteDescription = ".NET licenisng in the cloud", SiteUrl = "http://www.licensespot.com" });
            results.Add(new SearchResult() { SiteTitle = "Expiration Reminder", SiteDescription = "Keep your expirations in one place", SiteUrl = "http://www.expirationreminder.net" });

            SearchResultsListBox.ItemsSource = results;
        }
    }
    public class SearchResult
    {
        public string SiteTitle { get; set; }
        public string SiteDescription { get; set; }
        public string SiteUrl { get; set; }
    }
}

As you can see, now we have the results in a nicely formatted way. In the code, we're just declaring the ItemTemplate element and inside it we're adding a StackPanel and then adding TextBlock objects that will render information in the interface. We then just use some basic WPF properties to change the colors and fonts.

May 9

admin

wpf

WPF ListBox Binding

  • Created: 5/9/2014
  • admin

Binding a ListBox to a collection is simple. You just need to declare the Binding element in the XAML markup to make the connection to the list of objects. This will allow the ListBox to automatically populate itself with the items.

Below you can find the XAML markup example:


    
        
            
                
                    
                
            
        
    


An this is the C# code:

namespace WpfApplication8
{
    /// 
    /// Interaction logic for MainWindow.xaml
    /// 
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            List colors = new List();
            colors.Add(new MyColor("Red"));
            colors.Add(new MyColor("Green"));
            colors.Add(new MyColor("Blue"));

            ListBoxTest.ItemsSource = colors;

        }

    }
    public class MyColor
    {
        public string Name { get; set; }

        public MyColor(string n)
        {
            this.Name = n;
        }
    }
   
}

In this sample we're binding the Name property of the MyColor class to the Text property of the TextBlock element. We're connecting both using the ItemsSource property of the ListBox object. This will automatically fill the ListBox

Binding to an ObservableCollection

Binding to an ObservableCollection will allow the ListBox to refresh itself anytime a change is made in any of the items on the List. This way, you don't need to tell the ListBox to look for the items again as the change will automatically trigger an event in the collection the the ListBox will catch and handle.

To do this, we just need to create the item that implements the INotifyPropertyChanged interface and handle the necessary events. Below, we've changed the MyColor class so it can support Observables:

public class MyColor : INotifyPropertyChanged
    {
       
        private string name;
       
        public String Name
        {
            get { return name; }
            set
            {
                if (name == value) return;
                name = value;
                RaisePropertyChanged("name");
            }
        }

        public MyColor(string n)
        {
             this.Name = n;
        }
        public event PropertyChangedEventHandler PropertyChanged;

        private void RaisePropertyChanged(string propName)
        {
            PropertyChangedEventHandler eh = PropertyChanged;
            if (eh != null)
            {
                eh(this, new PropertyChangedEventArgs(propName));
            }
        }
    }

When building the list, we don't use now a simple List object, we implement it using the ObservableCollection object as shown below:

ObservableCollection colors = new ObservableCollection();
colors.Add(new MyColor("Red"));
colors.Add(new MyColor("Green"));
colors.Add(new MyColor("Blue"));

ListBoxTest.ItemsSource = colors;
May 7

admin

wpf

WPF ListBox

  • Created: 5/7/2014
  • admin

The ListBox control in WPF allows you to display a list of items to the user. The user can then select one item or multiple items as needed.

Below you can find an example with XAML markup:


    
        
            Red
            Green
            Blue
        
    


Getting selected items

To the get the selected item in the ListBox you can use the SelectedItem property to get a single item or the SelectedItems property to get multiple items.

Below you can find an example for getting selected items:


    
        
        
            
                
                    
                
            
        
    


namespace WpfApplication8
{
    /// 
    /// Interaction logic for MainWindow.xaml
    /// 
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            List colors = new List();
            colors.Add(new MyColor("Red"));
            colors.Add(new MyColor("Green"));
            colors.Add(new MyColor("Blue"));

            ListBoxTest.ItemsSource = colors;

        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            foreach (MyColor item in ListBoxTest.SelectedItems)
            {
                MessageBox.Show(item.Name);
            }

        }


    }
    public class MyColor
    {
        public string Name { get; set; }

        public MyColor(string n)
        {
            this.Name = n;
        }
    }
   
}
May 3

admin

wpf

WPF StackPanel

  • Created: 5/3/2014
  • admin

The StackPanel is a layout control that allows you to organize controls one beside the other or one below the other. You can select the orientation by using the Orientation attribute on the element. Many other controls use the StackPanel internally to layout controls like the Menu, ComboBox or ListBox.

Below you can check a simple example:


    
        
            
            
            
            
            
        
    


Horizontal Stacking

If you want to stack the items inside the panel horizontally, you just have to set the Orientation attribute in the element to Horizontal like in the sample below:


    
        
            
            
            
            
            
        
    


Add padding to the StackPanel

If you want to add some padding to StackPanel, you can combine it with the Border control and then add the padding to the Border element as shown in the XAML markup below:


    
        
        
            
            
            
            
            
        
        
    


May 2

admin

wpf

WPF Timer

  • Created: 5/2/2014
  • admin

In windows forms we had class called Timer that allowed us to execute a certain piece of code in our application in a predefined schedule. In WPF we have better class called the DispatchTimer. Using this class we can schedule a event to trigger depending on a certain amount of time that we specify.

Below you can find a XAML mark up of an application that simulates a stop watch:


    
        
            
               
                
                
               
            
            
        
    


And this is the C# code:

namespace WpfApplication6
{
    /// 
    /// Interaction logic for MainWindow.xaml
    /// 
    public partial class MainWindow : Window
    {
        private DispatcherTimer timer;
        public MainWindow()
        {
            InitializeComponent();

            timer = new DispatcherTimer();
            timer.Interval = TimeSpan.FromSeconds(1);
            timer.Tick += timer_Tick;
        }

        void timer_Tick(object sender, EventArgs e)
        {
            TimerLabel.Content = DateTime.Now.ToLongTimeString();
        }

        private void StartButton_Click(object sender, RoutedEventArgs e)
        {
            timer.Start();
        }

        private void StopButton_Click(object sender, RoutedEventArgs e)
        {
            timer.Stop();
        }
    }
}

In the code above, we're setting up a timer variable and creating an instance of it in the window constructor. We're then setting the inverval in which the timer should trigger to one second. The next line just sets up the event that will handle when the trigger actually fires. When the event executes, it basically sets the content of the TimerLabel to the actual time.

Timer Tick

The timer tick is the property where we can configure the event that will be triggered when the timer interval lapses. In our code above, is executing the method timer_Tick

Timer and the UI

The interesting thing about DispatchTimer is that it executes on the Dispatcher queue which runs on separate thread than the one our application runs. This means, that when the timer runs and triggers the Tick event, I can actually draw on the screen with any lags, giving us the opportunity to do any kind of animation and screen updating as needed.