FlowDocumentPageViewer WPF Example

WPF > Documents > FlowDocumentPageViewer

FlowDocumentPageViewer shows content in a page at a time in view mode.  It is fixed to a particular viewing mode.

Components:

• Content Area
• Toolbar
• Page Navigation Controls
• Zoom Controls
• Search - The user can use the Ctr+F keyboard shortcut

Example:

<Window

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:NumericTextBox="clr-namespace:NumericTextBox;assembly=NumericTextBox" x:Class="WpfApplication3.MainWindow"
        Title="MainWindow" Height="400" Width="600">
    <FlowDocumentPageViewer Margin="10" BorderBrush="Black" BorderThickness="1">
        <FlowDocument ColumnWidth="400" IsOptimalParagraphEnabled="True" IsHyphenationEnabled="True">
            <Section FontSize="12">
                <Paragraph>
                    <Bold>Paragraph bold</Bold>
                   fdgfdgfdsggggggggggggg  sgflkklgf  gf s fgiohiohiofhds gfd gfgoihiw4hrior3    fgreretretretre rrtreretertrererererererererere
                    rrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr
                    tttttttttttttttttttttttttttttttttttttyyyyyyyyyyyyyy
                    ytuyutyutyuytuytuuuuuuuuuuuuuuuuuuuuuuuu
                    uytuyuytutyutyutyutyuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu
                    <Figure Width="140" Height="50" Background="GhostWhite" HorizontalAnchor="PageLeft" HorizontalOffset="300" VerticalOffset="20">
                        <Paragraph FontStyle="Italic" TextAlignment="Left" Background="Beige" Foreground="DarkGreen">
                           Figure is here
                        </Paragraph>
                    </Figure>
                </Paragraph>
             </Section>
            <Section>
                <Paragraph>Sales
                <Floater    HorizontalAlignment="Left">
                    <Table>
                    <Table.Resources>
                        <!-- Style for header/footer rows. -->
                        <Style x:Key="headerFooterRowStyle" TargetType="{x:Type TableRowGroup}">
                            <Setter Property="FontWeight" Value="DemiBold"/>
                            <Setter Property="FontSize" Value="16"/>
                            <Setter Property="Background" Value="LightGray"/>
                        </Style>
                        <!-- Style for data rows. -->
                        <Style x:Key="dataRowStyle" TargetType="{x:Type TableRowGroup}">
                            <Setter Property="FontSize" Value="12"/>
                            <Setter Property="FontStyle" Value="Italic"/>
                        </Style>
                    </Table.Resources>
                    <Table.Columns>
                        <TableColumn/>
                        <TableColumn/>
                        <TableColumn/>
                        <TableColumn/>
                    </Table.Columns>
                    <!-- This TableRowGroup hosts a header row for the table. -->
                    <TableRowGroup Style="{StaticResource headerFooterRowStyle}">
                        <TableRow>
                            <TableCell/>
                            <TableCell>
                                <Paragraph>Puma</Paragraph>
                            </TableCell>
                            <TableCell>
                                <Paragraph>Adidas</Paragraph>
                            </TableCell>
                            <TableCell>
                                <Paragraph>Nike</Paragraph>
                            </TableCell>
                        </TableRow>
                    </TableRowGroup>
                    <!-- This TableRowGroup hosts the main data rows for the table. -->
                    <TableRowGroup Style="{StaticResource dataRowStyle}">
                        <TableRow>
                          <TableCell>
                                <Paragraph Foreground="Blue">Blue</Paragraph>
                            </TableCell>
                            <TableCell>
                                <Paragraph>1</Paragraph>
                            </TableCell>
                            <TableCell>
                                <Paragraph>2</Paragraph>
                            </TableCell>
                            <TableCell>
                                <Paragraph>3</Paragraph>
                            </TableCell>
                        </TableRow>
                        <TableRow>
                            <TableCell>
                                <Paragraph Foreground="Red">Red</Paragraph>
                            </TableCell>
                            <TableCell>
                                <Paragraph>1</Paragraph>
                            </TableCell>
                            <TableCell>
                                <Paragraph>2</Paragraph>
                            </TableCell>
                            <TableCell>
                                <Paragraph>3</Paragraph>
                            </TableCell>
                        </TableRow>
                        <TableRow>
                            <TableCell>
                                <Paragraph Foreground="Green">Green</Paragraph>
                            </TableCell>
                            <TableCell>
                                <Paragraph>1</Paragraph>
                            </TableCell>
                            <TableCell>
                                <Paragraph>2</Paragraph>
                            </TableCell>
                            <TableCell>
                                <Paragraph>3</Paragraph>
                            </TableCell>
                        </TableRow>
                    </TableRowGroup>
                   <!-- This TableRowGroup hosts a footer row for the table. -->
                    <TableRowGroup Style="{StaticResource headerFooterRowStyle}">
                        <TableRow>
                            <TableCell>
                                <Paragraph>Total</Paragraph>
                            </TableCell>
                            <TableCell>
                                <Paragraph>3</Paragraph>
                            </TableCell>
                            <TableCell>
                                <Paragraph>6</Paragraph>
                            </TableCell>
                            <TableCell>
                                        <Paragraph>12</Paragraph>
                                    </TableCell>
                        </TableRow>
                    </TableRowGroup>
                </Table>
</Floater>
                </Paragraph>
            </Section>
        </FlowDocument>
    </FlowDocumentPageViewer>
</Window>

WPF Windows Namespace

WPF > Windows

WPF Windows Namespace contains base classes, classes that support the WPF property system and event logic.

• Dependency Property
• Splashscreen
• Open file dialog
• Documents
• Media
• Controls

WPF DependencyProperty Example

WPF > Windows > DependencyProperty 

DependencyProperty is a property that can be set through methods such as, styling, data binding, animation, and inheritance.

Example: Create a numeric TextBox with DependencyProperty 

Create new WPF User Control Library

NumericTextBox.xaml

<TextBox x:Class="NumericTextBox.NumericTextBox"
             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"
          >
</TextBox>

 NumericTextBox.xaml.cs

using System;

using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Text.RegularExpressions;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace NumericTextBox
{
    /// <summary>
    /// Interaction logic for NumericTextBox.xaml
    /// </summary>
    public partial class NumericTextBox : TextBox
    {
        public NumericTextBox()
        {
            InitializeComponent();
            this.PreviewTextInput += OnPreviewTextInput;
        }

        /// <summary>
        /// The max value property
        /// </summary>

        public static readonly DependencyProperty MaxValueProperty =

            DependencyProperty.Register("MaxValue", typeof(double?),
            typeof(NumericTextBox), new UIPropertyMetadata(null));

        public double? MaxValue

        {
            get { return (double?)GetValue(MaxValueProperty); }
            set { SetValue(MaxValueProperty, value); }
        }

        /// <summary>

        /// The min value property
        /// </summary>

        public static readonly DependencyProperty MinValueProperty =

            DependencyProperty.Register("MinValue", typeof(double?),
            typeof(NumericTextBox), new UIPropertyMetadata(null));

        public double? MinValue

        {
            get { return (double?)GetValue(MinValueProperty); }
            set { SetValue(MinValueProperty, value); }
        }

        private bool CheckNumeric(string text)

        {
             var regex = new Regex("[^0-9.]+");
            return !regex.IsMatch(text);
        }

        private void OnPreviewTextInput(object sender, TextCompositionEventArgs e)
        {
            if (this.CheckNumeric(e.Text))
            {
                if (e.Text == "." && this.Text.Contains("."))
                    e.Handled = true;
                else
                {
                    // Check min value
                    if (MinValue != null && Convert.ToDouble(this.Text + e.Text) < MinValue)
                    {
                        this.Text = MinValue.ToString();
                        this.SelectionStart = this.Text.Length;
                        e.Handled = true;
                    }

                    // Check max value
                    if (MaxValue != null && Convert.ToDouble(this.Text + e.Text) > MaxValue)
                    {
                        this.Text = MaxValue.ToString();
                        this.SelectionStart = this.Text.Length;
                        e.Handled = true;
                    }
                }
            }
            else
                e.Handled = true;
        }
    }
}

MainWindow.xaml

You can set MinValue and MaxValue properties

<Window

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        xmlns:NumericTextBox="clr-namespace:NumericTextBox;assembly=NumericTextBox" x:Class="WpfApplication3.MainWindow"

        Title="MainWindow" Height="350" Width="525">

    <Grid>

        <NumericTextBox:NumericTextBox HorizontalAlignment="Left" Margin="98,89,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top"

                                     Width="201" MinValue="1" MaxValue="100000"/>

    </Grid>

</Window>

WPF Frame Control

WPF > Controls  > ContentControl > Frame

WPF frame control is capable of displaying both WPF and HTML content. Also it allows  navigation between different contents.

Example:

 

 

XAML:

 

<Window x:Class="WpfApplication2.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow"
       xmlns:src="clr-namespace:WpfApplication2" Width="362.5"
        >
    <StackPanel>
        <Frame Source="Page1.xaml">
        </Frame>
        <Frame Source="Page1.xaml">
            <Frame.LayoutTransform>
                <RotateTransform Angle="90" />
            </Frame.LayoutTransform>
        </Frame>
    </StackPanel>
</Window>

 

WPF Binding to Web Service Example

WPF > Binding > Web Service

Add reference to your Web service. We will use com.microsoft.msdn.services as example:

 



XAML:

<Window x:Class="WpfApplication2.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="300" Width="300"
       xmlns:src="clr-namespace:WpfApplication2"
        >
    <Grid>
        <ListView  ItemsSource="{Binding Path=availableVersionsAndLocales}" HorizontalAlignment="Left" Height="240" VerticalAlignment="Top" Width="266">
            <ListView.View>
                <GridView>
                    <GridViewColumn  DisplayMemberBinding="{Binding Path=locale}" Header="Locale" />
                    <GridViewColumn  DisplayMemberBinding="{Binding Path=version}" Header="Version" />
                </GridView>
            </ListView.View>
        </ListView>
   </Grid>
</Window>

C# Code:

using WpfApplication2.com.microsoft.msdn.services;

namespace WpfApplication2

{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    ///
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            getContentRequest request = new getContentRequest();
            request.contentIdentifier = "abhtw0f1";
            ContentService proxy = new ContentService();
            this.DataContext = proxy.GetContent(request);
        }
    }
}

Result: