WPF Grid Example

WPF > Controls > Layout > Grid

Grid is a flexible grid area which contains columns and rows

Example:

<Window x:Class="WpfApplication1.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid VerticalAlignment="Top" HorizontalAlignment="Left"  Width="400" Height="100">
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition  />
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>

        <TextBlock FontSize="20" FontWeight="Bold" Grid.ColumnSpan="3" Grid.Row="0" HorizontalAlignment="Center">Sales</TextBlock>
        <TextBlock FontSize="12" FontWeight="Bold" Grid.Row="1" Grid.Column="0">January</TextBlock>
        <TextBlock FontSize="12" FontWeight="Bold" Grid.Row="1" Grid.Column="1">February</TextBlock>
        <TextBlock FontSize="12" FontWeight="Bold" Grid.Row="1" Grid.Column="2">March</TextBlock>
        <TextBlock Grid.Row="2" Grid.Column="0">20000</TextBlock>
        <TextBlock Grid.Row="2" Grid.Column="1">30000</TextBlock>
        <TextBlock Grid.Row="2" Grid.Column="2">50000</TextBlock>
        <TextBlock FontSize="16" FontWeight="Bold" Grid.ColumnSpan="3" Grid.Row="3">Total : 100000</TextBlock>
    </Grid>
</Window>

StackPanel WPF

WPF > Controls > Layout > StackPanel

StackPanel arranges its elements into a single line that can be oriented horizontally or vertically.

Example:


XAML

<Window x:Class="WpfApplication1.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <StackPanel>
        <Button Content="Button" Margin="0,0,385,0"/>
        <ComboBox Margin="0,0,211,0"/>
        <Label Content="Label"/>
        <TextBox Height="65" TextWrapping="Wrap" Text="TextBox"/>
    </StackPanel>
</Window>

Layout Controls WPF

WPF > Controls > Layout

Layout Controls WPF  contains elements that support application layout in Windows Presentation Foundation (WPF).

• StackPanel
• Grid
• DockPanel
• WrapPanel
• Expander

Control Templates WPF

WPF > Controls  > Templates

Windows Presentation Foundation Control Templates allows developers to completely change the look and feel of the controls.

Almost every control in WPF uses a control template to define how it displays and its contents. You can override the control template on  built-in control to make it appear as you want.

• ControlTemplate

ControlTemplate WPF Example

WPF > Controls  > Templates > ControlTemplate

ControlTemplate defines the visual elements tree that is applied as the control template for a control.
ContentPresenter it is a placeholder for any XAML content and it can be used to insert content at runtime.

Example: Create Ellipse Button

<Window x:Class="WPF_Tutorial.MainWindow"

 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1">

    <Window.Resources>
        <ControlTemplate TargetType="Button" x:Key="ctButton" >
            <Grid>
                <Ellipse Fill="{ TemplateBinding Background }" Height="{TemplateBinding Height }">
                </Ellipse>
                <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" Content="{TemplateBinding Button.Content}" />
            </Grid>
        </ControlTemplate>
    </Window.Resources>

    <Grid>
        <Button Content="Ellipse Button" HorizontalAlignment="Left" VerticalAlignment="Top"
                Background="BlueViolet"
                Width="100" Height="100" Template="{ StaticResource ctButton}" Foreground="#FFF3E2E2">
        </Button>
    </Grid>
</Window>

Disable Script Errors WebBrowser WPF

WPF > Controls  > > WebBrowser > Disable Script Errors

WebBrowser WPF control doesn't have property to disable script errors.
Using reflection we can solve this problem.

Solution:

private void Window_Loaded(object sender, RoutedEventArgs e)

{
   wb1.Navigated += new NavigatedEventHandler(WebBrowser_Navigated);
}

void WebBrowser_Navigated(object sender, NavigationEventArgs e)
{
   HideJsScriptErrors((WebBrowser) sender);
}

public void HideJsScriptErrors(WebBrowser wb)
{
   // IWebBrowser2 interface
   // Exposes methods that are implemented by the WebBrowser control 
   // Searches for the specified field, using the specified binding constraints.

   FieldInfo fld = typeof(WebBrowser).GetField("_axIWebBrowser2", BindingFlags.Instance | BindingFlags.NonPublic);

   if (fld == null)
       return;
   object obj = fld.GetValue(wb);
   if (obj == null)
       return;
// Silent: Sets or gets a value that indicates whether the object can display dialog boxes.
// HRESULT IWebBrowser2::get_Silent(VARIANT_BOOL *pbSilent);HRESULT IWebBrowser2::put_Silent(VARIANT_BOOL bSilent);
     obj.GetType().InvokeMember("Silent", BindingFlags.SetProperty, null, obj, new object[] { true });
}

ObservableCollection Example WPF

WPF > Controls  > ObservableCollection

ObservableCollection is a dynamic data collection with automatic notifications when items are added, removed, or updated.


Example: Very simple ObservableCollection

In this example we will create a new class named Person and a list of persons using ObservableCollection. Using a DataGrid we will set only a property ItemsSource.  When press Add button the grid is automatically update. Please also see OnCollectionChanged event in which we can display some status of operations.

XAML:

    <Grid>
        <Label Content="First Name" HorizontalAlignment="Left" Margin="9,0,0,0" VerticalAlignment="Top"/>
        <TextBox x:Name="txtFname" HorizontalAlignment="Left" Height="23" Margin="10,26,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="216"/>
        <Label Content="Last Name" HorizontalAlignment="Left" Margin="10,59,0,0" VerticalAlignment="Top"/>
        <TextBox x:Name="txtLname" HorizontalAlignment="Left" Height="23" Margin="11,85,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="215"/>
        <Button x:Name="btnAdd" Content="Add" HorizontalAlignment="Left" Margin="151,127,0,0" VerticalAlignment="Top" Width="75" Click="btnAdd_Click"/>
        <DataGrid x:Name="dgPerson" HorizontalAlignment="Left" Margin="242,10,0,0" VerticalAlignment="Top" Height="300" Width="552"/>
        <Label x:Name="lblStatus" Content="" HorizontalAlignment="Left" Margin="0,284,0,0" VerticalAlignment="Top" Width="226"/>
    </Grid>
 
C# Code:

    public partial class MainWindow : Window

    {
        public class Person
        {
            public string FirstName { get; set; }
            public string LastName { get; set; }
        }

        private ObservableCollection<Person> persons = new ObservableCollection<Person>();

        public MainWindow()

        {

            InitializeComponent();

            dgPerson.ItemsSource = persons;
            persons.CollectionChanged += this.OnCollectionChanged;

        }

        void OnCollectionChanged(object sender, NotifyCollectionChangedEventArgs e)
        {
            //Get the sender observable collection
            ObservableCollection<Person> obsSender = sender as ObservableCollection<Person>;
            NotifyCollectionChangedAction action = e.Action;
            if (action == NotifyCollectionChangedAction.Add)
                lblStatus.Content = "New person added";
            if (action == NotifyCollectionChangedAction.Remove)
                lblStatus.Content = "Person deleted";
        }
        private void btnAdd_Click(object sender, RoutedEventArgs e)
        {
            Person p = new Person();
            p.FirstName = txtFname.Text;
            p.LastName = txtLname.Text;
            persons.Add(p);

        }

    }