top button
Flag Notify
    Connect to us
      Facebook Login
      Site Registration Why to Join

    Get Free Article Updates

Facebook Login
Site Registration

Adaptive Trigger For XAML UAP Devlopment?

+3 votes
247 views

This requires us to do the best practices that we have been doing for decades as Web Developers. Web Developers must know how to render pages in various kinds of screen sizes and devices.

Now in Windows 10 UAP app dev, the app just has one binary that potentially means that the app must run on many types of devices. So the UI must be adaptive such that the app can be rendered in many types of screen sizes that means from a small phone screen to a surface hub of 85 inches. So there must be some practices that will help us do that.

The following are the offerings of the XAML Toolbox.

XAML Toolbox

XAML views are a type of feature that ensures that the XAML can be broken down into multiple parts whereas the developer still has one single code behind. The usage of this can leverage the app developer the power of how to share the specific XAML for the tester or any other developer and hence ensuring better quality. Also, this is one of the major parts where we can start building our own apps in a better and simplified manner.

XAML RelativePanel ensures that the XAML tree will be more organized and this means that each child will be rendered relative to all the other children. The adaptive story begins from here and hence will be a big thing.

Now, having said all the preceding, the very important point here is that the developer doesn't need to bother themselves with any of the rendering stuff. The entire process is being automatically given by VS2015RC with Blend under the hood.

Visual State setters and triggers

The point before was to animate everything mostly using Object Key Frames when we wanted to go from Collapsed to Visible. But there was nothing between collapse and visible. Now we have setters to do the work and that simply eliminates the animation. 

Triggers on the other hand will provide the developer control on when will the VisualState when the MinWindowWidth or MinWindowHeight is set to any given value.

MinWindowWidth

Demo

I will be walking through a small demo of how to make full use of the VisualState. StateTrigger and see the experience.

I will be using Blend 2015.

Blend 2015

Create a new project.

Creating a New Project

Adding a new asset (a rectangle).

Adding new assets

Creating three Visual States and then placing the rectangles wherever I want them to look like in that specific video state.

Creating three Visual States

Renaming Visual State to ensure that we have a different Visual State for various screen sizes to use it.

Renaming Visual State

Setting Visual State for Phone and likewise for Tab and Desktop.

Setting Visual State for Phone

And we have the dynamic UI rendering with Adaptive Triggers.
 

posted Oct 1, 2015 by Jdk

  Promote This Article
Facebook Share Button Twitter Share Button LinkedIn Share Button


Related Articles

Why XAML is Important

XAML is a modern UI design Markup Language, it helps design a rich UI, 2d and 3d animation, plugin based applications and we also use XAML for:

  • Defining workflow content in Windows Workflow Foundation.
  • Defining services in Windows Communication Foundation.
  • A UI for Silverlight and Windows Presentation Foundation.
  • Rich graphics and animation based application.
  • Arranging controls based on fixed pixel coordinates.

The following summarizes the differences among Windows, Web and XAML Layout applications.

Normal Windows Layout Application

  • Controls have fixed coordinates.
  • The Location property has x and y coordinates representing the upper-left corner of the control retrieve to upper-left corner of container.
  • Some flexibility to dock the ok and cancel buttons to the lower right.
  • Anchor a list box to the left of the form using flow layout to arrange controls in a flow layout.
  • Use table layout to arrange controls in a table format.

Web Form Layout

  • Controls are, by default, anchored relative to the upper-left of the page.
  • You can specify absolute positioning if you want.
  • Re-sizing a window does not change the position of controls.

XAML Layout

  • XAML provides a rich set of built-in layout panels that help you to avoid the common pitfalls.
  • Flow Based Layout.
  • Content is organized in a Container.
  • All Containers are derived from Systems.Window.control.
  • Resolution and Size Independency.
  • Layout automatically adjusts if the screen resolution changes.

Element Size in XAML

  • The size can be specified as an absolute amount of logical units, as a percentage value or automatically.
  • Size is determined by calculating the available screen space, size of constraints and layout-specific properties (Margin, Padding, etc.) behavior of the present Panel.
  • Fixed size of logical units (1/96 inch).
  • Auto takes as much space as needed by the contained control.
  • Star (*) takes as much space as available (after filling all auto and fixed sized columns), proportionally divided over all star-sized columns. So 3*/5* means the same as 30*/50*.

Remember that star-sizing does not work if the grid size is calculated based on its content.

Panels in XAML

  • Grid Panel.
  • Stack Panel.
  • Dock Panel.
  • Wrap Panel.
  • Canvas Panel.

Grid Panel: combination of row and column layout is a Grid Panel; in other words, a Grid Panel arranges controls in a tabular format. The functionality is similar to the HTML table but more flexible as in the following example we try to show a row and column combination for the windows. There are 4 rows and 4 columns.

  • Row and Column definitions in a grid indicate row and column. If you create additional rows and columns, you have to add RowDefinition items to the RowDefinitions collection and ColumnDefinition items to the ColumnDefinitions collection, as the above example shows a grid with 4 rows and 4 columns.

Add controls in Grid Panel

To add controls to the grid layout panel ,just put the declaration between the opening and closing tags of the Grid. Keep in mind that the row and columndefinitions must proceed any definition of child controls.

The grid layout panel provides the two attached properties Grid.Column and Grid.Row to define the location of the control.

In the following example I try to show one normal data entry form design using XAML:



StackPanel

StackPanel is a useful XAML layout. It keeps a control horizontal and vertical; using a stack we design the application like many controls.

Stack Panel common properties are:

  • Stack child element horizontally or vertically.
  • Default is vertical.
  • Use orientation to change to horizontal.
  • Controls positioning of elements by setting their horizontal alignment or vertical alignment properties.
  • Control spacing by setting a margin and padding properties of elements.



Wrap Panel


In a Wrap Panel the child elements are positioned sequentially, from left to right and top to bottom.

By default the layout orientation is horizontal and the controls flow left to right; depending on the screen size the control might wrap to the next line.

By default the screen and code:

    <Grid>
      <Grid.RowDefinitions>
          <RowDefinition></RowDefinition>
      </Grid.RowDefinitions>  
      <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>        
        <WrapPanel Grid.Row="0" Grid.Column="0">
            <Button Margin="10">Mango</Button>
            <Button Margin="10">Apple</Button>
            <Button Margin="10">Grape</Button>
            <Button Margin="10">Banana</Button>
            <Button Margin="10">Bilberry</Button>
            <Button Margin="10">Lemon</Button>
        </WrapPanel>
    </Grid>



Elements wrap to the next line once to reduce screen width:



DockPanel: Dock Panel is a most useful layout panel in XAML, it arranges controls to the top, left, bottom, right and remaining space. A useful property is:

  • DockPanel.Dock Property indicates where the element controls are docked.

The default is left; if we don't set the dock property then it will be left:

  • DockPanel.lastChildFill DockPanel will fill up the remaining space of the window.


Canvas Layout:

  • Elements are placed according to coordinates
  • The Canvas layout is similar to Windows forms layout.
  • Elements do not resize automatically at run time.
  • Use canvas.left, canvas.right, canvas.top and canvas.buttom.

Drawbacks:

  • Time consuming and laborious.
  • Harder to line up elements.
  • No resolution and size independence.

Code

    <Canvas>
            <Label Content="Canvas Layout Demo"  FontSize="15" FontWeight="Bold"
                    Foreground="Red"  Canvas.Top="10" Canvas.Left="25"/> 
            <Label Content="ContactInfo" FontSize="12"  Canvas.Top="66" Canvas.Left="10"/> 
            <Label Content="Name"  Canvas.Top="45" Canvas.Left="93"/> 
            <Label Content="Address"  Canvas.Top="90" Canvas.Left="93"/>
            <TextBox  FontSize="15" FontWeight="Bold"         Canvas.Top="45" Canvas.Left="185" Width="93"/>
            <TextBox FontSize="15" FontWeight="Bold"          Canvas.Top="90" Canvas.Left="185" Width="93"/>
   </Canvas>



One small simple Data Entry Form Demo using all panels: stack, dock, wrap, and canvas.

In this example we try to show the real use of these panels and controls in WPF:

 

READ MORE

While analyzing some controls used for touch devices I found this effective and easy logic for touch control and slow finishing action after touch leaves. Normally in touch devices we like to have control of an application with very smooth touch interaction. We also expect some slow finish of the action, like if we tap and wipe a control then it will move some distance and stay. So I found this logic to do that in an effective manner.

Platform support this approach

  • WPF
  • Windows Stores (WinRT)
  • Windows Phones 8 

Concept behind the approach

In my logic I have handled the manipulation of the data to the control. Using the manipulation of the data, I reset the matrix value of the control as desired. For slow finishing, I used a timer that enables the control for slower and smooth finishing actions after touch leaves.

XAML Code snippet behind the approach

<Button x:Class="TouchApplication.SmoothestTouchControl"

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>

  </Grid>

</Button>

<Window x:Class="TouchApplication.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"

xmlns:local="clr-namespace:WpfApplication8">

  <Grid >

    <local:SmoothestTouchControl IsManipulationEnabled="True"

    RenderTransform="0.9 0 0 0.9 100 100" />

 

    <local:SmoothestTouchControl IsManipulationEnabled="True"

    RenderTransform="0.9 0 0 0.9 100 100" />

 

    <local:SmoothestTouchControl IsManipulationEnabled="True"

    RenderTransform="0.9 0 0 0.9 100 100" />

 

    <local:SmoothestTouchControl IsManipulationEnabled="True"

    RenderTransform="0.9 0 0 0.9 100 100" />

 

    <local:SmoothestTouchControl IsManipulationEnabled="True"

    RenderTransform="0.9 0 0 0.9 100 100" /

  </Grid>

</Window>

C# code snippet behind the approach
 

// Use required name space  using System;

using System.Linq;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Input;

using System.Windows.Media;

 

namespace TouchApplication

{

    /// Interaction logic for SmoothestTouchControl.xaml

 

    public partial class SmoothestTouchControl : Button

    {

        int i = 0; // Iteration count for slower animation to end

        UIElement uiElement = null; // contains current control

        MatrixTransform matrixTransform = null; // contains Matrix transform

        Matrix uiElementMatrix = new Matrix(); // contains Matrix of the UIElement

        ManipulationDelta manipulationDelta = null; // contains data of Manipulation

        Point centerPoint = new Point(); // contains center point of the element

        System.Windows.Forms.Timer smoother = new System.Windows.Forms.Timer(); // Animater that slow down the action after touch leave

        public SmoothestTouchControl()

        {

            smoother.Interval = 1; // Inverval for animater

            smoother.Tick += smoother_Tick; // hook event to animation

        }

        // override manupulation starting to reset the Z order to get the current touched UI element a top element

        protected override void OnManipulationStarting(ManipulationStartingEventArgs args)

        {

            args.ManipulationContainer = App.Current.MainWindow; // Get the parent window

 

            var frameworkElement = args.Source as FrameworkElement; // Get the current touched element

 

            var panel = frameworkElement.Parent as Panel; // Get parent element to have the children collection

 

            for (int i = 0; i < panel.Children.Count; i++) // Iterate the children collection to reset the Z order

            {

                Panel.SetZIndex(panel.Children[i], panel.Children[i] == frameworkElement ? panel.Children.Count : i);

            }

            args.Handled = true; // Get handled true

 

            base.OnManipulationStarting(args); // Call base for original action

        }

        // override manipulation delta for transform actions

        protected override void OnManipulationDelta(ManipulationDeltaEventArgs args)

        {

            uiElement = args.Source as UIElement; // Get the current touched element

            matrixTransform = uiElement.RenderTransform as MatrixTransform; // Get MatrixTransform of the element

            uiElementMatrix = matrixTransform.Matrix; // Get Matrix of the element

            manipulationDelta = args.DeltaManipulation; // Get delta manipulation of the touch action

            centerPoint = args.ManipulationOrigin; // Get center point of the manipulation

 

            uiElementMatrix.RotateAt(manipulationDelta.Rotation, centerPoint.X, centerPoint.Y); // Rotate the ccontrol acccording to manipulation

            uiElementMatrix.ScaleAt(manipulationDelta.Scale.X, manipulationDelta.Scale.Y, centerPoint.X, centerPoint.Y);// Scale the ccontrol acccording to manipulation

            uiElementMatrix.Translate(manipulationDelta.Translation.X, manipulationDelta.Translation.Y); // Move the ccontrol acccording to manipulation

 

            matrixTransform.Matrix = uiElementMatrix; // Reset the updated matrix to the element matrix

            args.Handled = true; // Get handled true

            base.OnManipulationDelta(args); // Call base for original action

        }

        // override manipulation completed to start slower finish of the touch action

        protected override void OnManipulationCompleted(ManipulationCompletedEventArgs e)

        {

            base.OnManipulationCompleted(e); // Call base for original action

            smoother.Interval = 1; // reset the interval of the slower finish action

            i = 10; // Reset the iterator of the slower finish

            smoother.Start(); // Start animation for slower finish

        }

 

        // slowe finish animater logic

        void smoother_Tick(object sender, EventArgs e)

        {

            i--; // for slow finish action

 

            smoother.Interval = smoother.Interval + 2; // increase interval for integrated slow finish

 

            if (smoother.Interval > 25) // Check for dezire interval

                smoother.Stop(); // Stop the animation

 

            if (manipulationDelta.Rotation != 0) // Check if the control atually in rotation

            {

                uiElementMatrix.RotateAt(manipulationDelta.Rotation - (i > 0 ? i : 1), centerPoint.X, centerPoint.Y); // keep rotation using iterated value

            }

            uiElementMatrix.Translate(manipulationDelta.Translation.X - (i > 0 ? i : 0), manipulationDelta.Translation.Y - (i > 0 ? i : 0)); // keep moving using iterated value

            matrixTransform.Matrix = uiElementMatrix; // reset the updated matrix to the element matrix  

        } 

    }

}

READ MORE

XAML StatusBar represents a status bar. A StatusBar is a horizontal window that usually sits at the bottom of a window to display various kinds of status information of an application. 

Introduction 

The StatusBar element in XAML represents a WPF StatusBar control. 

  1. <StatusBar></StatusBar>  

The Width and Height properties represent the width and the height of a StatusBar. The Name property represents the name of the control that is a unique identifier of a control. 

The following code snippet creates a StatusBar control and set its content to some text. 

  1. <StatusBar Name="McSBar" Height="30" VerticalAlignment="Bottom"  
  2.            Background="LightBlue" >       
  3.     This is a status bar         
  4. </StatusBar>  

The output looks as in Figure 1. 

status bar
                                                   Figure 1

Creating a StatusBar Dynamically

The StatusBar class in WPF represents a StatusBar control. This class is defined in using the System.Windows.Controls.Primitives namespace. Before you use this class, be sure to import this namespace. 

You may add any number of controls to a StatusBar control. For example, if you add images, a TextBox,TextBlock and/or other controls and place that StatusBar on a Window. The following code snippet creates a StatusBar at run-time and adds a TextBox to it.

  1. private void CreateDynamicStatusBar()  
  2. {  
  3.     StatusBar sBar = new StatusBar();  
  4.     sBar.Height = 30;  
  5.     sBar.Background = new SolidColorBrush(Colors.LightBlue);  
  6.   
  7.     TextBox tb = new TextBox();  
  8.     tb.Text = "This is a status bar";  
  9.     sBar.Items.Add(tb);          
  10.     LayoutRoot.Children.Add(sBar);  
  11. }  
READ MORE

Introduction

XAML provides UI element objects that can host child collection items. XAML also provides support to work with .NET collection types as data sources.

XAML Collections

A collection element usually is a parent control with child collection elements. The child collection elements are an ItemCollection that implements IList<object>. A ListBox element is a collection of ListBoxItem elements.

The code listing in Listing 1 creates a ListBox with a few ListBoxItems.

 

  1. <ListBox Margin="10,10,0,13" Name="listBox1" HorizontalAlignment="Left"  
  2. VerticalAlignment="Top" Width="194" Height="200">  
  3.   
  4. <ListBoxItem Content="Coffie"></ListBoxItem>  
  5. <ListBoxItem Content="Tea"></ListBoxItem>  
  6. <ListBoxItem Content="Orange Juice"></ListBoxItem>  
  7. <ListBoxItem Content="Milk"></ListBoxItem>  
  8. <ListBoxItem Content="Iced Tea"></ListBoxItem>  
  9. <ListBoxItem Content="Mango Shake"></ListBoxItem>  
  10.   
  11. </ListBox>  

 

Listing 1

The code listed above in Listing 1 generates Figure 1.

Figure 1

Add Collection Items

In the previous section, we saw how to add items to a ListBox at design-time from XAML. We can add items to a ListBox from the code.

Let's change our UI and add a TextBox and a button control to the page. See Listing 2.

 

  1. <TextBox Height="23" HorizontalAlignment="Left" Margin="8,14,0,0"  
  2. Name="textBox1" VerticalAlignment="Top" Width="127" />  
  3. <Button Height="23" Margin="140,14,0,0" Name="button1" VerticalAlignment="Top" HorizontalAlignment="Left" Width="76" Click="button1_Click">  
  4. Add Item  
  5. </Button>  

 

Listing 2

The final UI looks like Figure 2.

Figure 2.

We can access collection items using the Items property. On the button click event handler, we add the content of the TextBox to the ListBox by calling the ListBox.Items.Add method. The code in Listing 3 adds the TextBox content to the ListBox items.

 

  1. private void button1_Click(object sender, RoutedEventArgs e)  
  2. {  
  3. listBox1.Items.Add(textBox1.Text);  
  4. }  

 

Listing 3

Now if you enter text into the TextBox and click the Add Item button, it will add the contents of the TextBox to the ListBox. See Figure 3.

Figure 3

Delete Collection Items

We can use the ListBox.Items.Remove or ListBox.Items.RemoveAt method to delete an item from the collection of items in the ListBox. The RemoveAt method takes the index of the item in the collection.

Now, we modify our application and add a new button called Delete Item. The XAML code for this button looks as in the following.

 

  1. <Button Height="23" Margin="226,14,124,0" Name="DeleteButton"  
  2. VerticalAlignment="Top" Click="DeleteButton_Click">  
  3. Delete Item</Button>  

 

Listing 4

The button click event handler looks like the following. On this button click, we find the index of the selected item and call the ListBox.Items.RemoveAt method as in the following.

 

  1. private void DeleteButton_Click(object sender, RoutedEventArgs e)  
  2. {  
  3. listBox1.Items.RemoveAt  
  4. (listBox1.Items.IndexOf(listBox1.SelectedItem));  
  5. }  

 

Listing 5

Collection Types

XAML allows developers to access .NET class library collection types from the scripting language. The code snippet in the Listing creates an array of String types, a collection of strings. To use the Array and String types, we must import the System namespace.

The code listing in Listing 6 creates an Array of String objects in XAML. As you may noticed in Listing 2, you must import the System namespace in XAML using the xmlns.

 

  1. <Window x:Class="XamlCollectionsSample.MainWindow"  
  2. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  3. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
  4. xmlns:sys="clr-namespace:System;assembly=mscorlib"  
  5. Title="MainWindow" Height="402.759" Width="633.345">  
  6.   
  7. <Window.Resources>  
  8. <x:Array x:Key="AuthorList" Type="{x:Type sys:String}">  
  9. <sys:String>Mahesh Chand</sys:String>  
  10. <sys:String>Praveen Kumar</sys:String>  
  11. <sys:String>Raj Beniwal</sys:String>  
  12. <sys:String>Neel Beniwal</sys:String>  
  13. <sys:String>Sam Hobbs</sys:String>  
  14. </x:Array>  
  15. </Window.Resources>  
  16.   
  17. </Window>  

 

Listing 6

The ItemsSource property if ListBox in XAML is used to bind the ArrayList. See Listing 7.

 

  1. <ListBox Name="lst" Margin="5" ItemsSource="{StaticResource AuthorList}" />  

 

Listing 7

Summary

XAML supports collections including collection items and working with .NET collection types. In this article, we saw how to create a control with collection items and how to access its items dynamically.

READ MORE

The WPF Expander represents a control with an expanded view where the contents of the expanded area can be expanded or collapsed.

The following XAML code shows how to create an Expander control in WPF.

<Expander Name="ExpanderControl" Header="Click to Expand"   
          HorizontalAlignment="Left" >  
    <TextBlock TextWrapping="Wrap" FontSize="14" FontWeight="Light" Foreground="Black">  
        This is an Expander control. Within this control, all contents will be wrapped.  
        At run-time, you may expand or collapse this control. Type more text here to be typed.  
        Jump around and hype.   
    </TextBlock>  
</Expander> 

The default view of an Expander control looks like this.


If you click on the header, the expanded view looks like this.



Most of the time, you would want the header of the Expander control to look different from the contents. This can be done by simply setting the font properties of the Expander control different from the contents.
 

This code sets the FontSize and FontWeight of the Expander control different from the contents of the Expander control. 

<Window x:Class="ExpanderControlSample.Window1"  
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
        Title="Window1" Height="300" Width="300">  
    <Grid>  
        <Expander Name="ExpanderControl" Background="LavenderBlush"   
          HorizontalAlignment="Left" Header="Click to Expand"   
          ExpandDirection="Down" IsExpanded="False" Width="200"  
                  FontSize="20" FontWeight="Bold" Foreground="Green">  
            <TextBlock TextWrapping="Wrap" >  
                This is an Expander control. Within this control, all contents will be wrapped.  
                At run-time, you may expand or collapse this control. Type more text here to be typed.  
                Jump around and hype.   
            </TextBlock>  
        </Expander>  
    </Grid>  
</Window> 

The new output looks like this. As you can see from this figure, the header of the Expander control is different from the contents.


How to create an Expander control dynamically

The Expander class in WPF represents an Expander control.

This code snippet creates an Expander control at run-time.

private void CreateDynamicExpander()  
{  
   Expander dynamicExpander = new Expander();  
   dynamicExpander.Header = "Dynamic Expander";  
   dynamicExpander.HorizontalAlignment = HorizontalAlignment.Left;  
   dynamicExpander.Background = new SolidColorBrush(Colors.Lavender);  
   dynamicExpander.Width = 250;  
   dynamicExpander.IsExpanded = false;  
   dynamicExpander.Content = "This is a dynamic expander";  
  
   RootGrid.Children.Add(dynamicExpander);  

How to set the direction of an Expander Control
 

The ExpandDirection property of the Expander control sets the direction of the Header. It can be Up, Down, Left or Right. The following code snippet sets the ExpandDirection to Up.

<Expander Name="ExpanderControl" Background="LavenderBlush"   
          HorizontalAlignment="Left" Header="Click to Expand"   
          ExpandDirection="Up" IsExpanded="False" Width="200"  
                  FontSize="20" FontWeight="Bold" Foreground="Green">  
     <TextBlock TextWrapping="Wrap" >  
         This is an Expander control. Within this control, all contents will be wrapped.  
         At run-time, you may expand or collapse this control. Type more text here to be typed.  
         Jump around and hype.   
     </TextBlock>  
</Expander>

The control with Up direction looks like this.


How to set an image in an Expander Header

Expander.Header property may be used to style the header of an Expander control. Within the Header, you can set whatever contents you would like including an Image.
 

This code adds in image and text in the header of an Expander.

<Expander Name="ExpanderControl"   
  HorizontalAlignment="Left" Background="LavenderBlush"   
  ExpandDirection="Down"  IsExpanded="False" Width="250"  
          FontSize="20" FontWeight="Bold" Foreground="Green" >  
    <Expander.Header>  
        <BulletDecorator>  
            <BulletDecorator.Bullet>  
                <Image Width="50" Source="Flowers.jpg"/>  
            </BulletDecorator.Bullet>  
            <TextBlock Margin="20,0,0,0">Flower Header</TextBlock>  
        </BulletDecorator>  
    </Expander.Header>  
  
    <TextBlock TextWrapping="Wrap" FontSize="14" FontWeight="Light" Foreground="Black">  
        This is an Expander control. Within this control, all contents will be wrapped.  
        At run-time, you may expand or collapse this control. Type more text here to be typed.  
        Jump around and hype.   
    </TextBlock>  
</Expander>  

The control with an image header looks like this.


How to add scrolling to an Expander Control
 

Adding a Scrollviewer control in the contents of an Expander adds scrolling to the Expander. This code adds scrolling to the contents of an Expander. 

<Expander Name="ExpanderControl"   
  HorizontalAlignment="Left" Background="LavenderBlush"   
  ExpandDirection="Down"  IsExpanded="False" Width="250"  
          FontSize="20" FontWeight="Bold" Foreground="Green" >  
    <Expander.Header>  
        <BulletDecorator>  
            <BulletDecorator.Bullet>  
                <Image Width="50" Source="Flowers.jpg"/>  
            </BulletDecorator.Bullet>  
            <TextBlock Margin="20,0,0,0">Flower Header</TextBlock>  
        </BulletDecorator>  
    </Expander.Header>  
    <Expander.Content>  
        <ScrollViewer Height="100" VerticalAlignment="Top" >  
            <TextBlock TextWrapping="Wrap" FontSize="14" FontWeight="Light" Foreground="Black">  
                This is an Expander control. Within this control, all contents will be wrapped.  
                At run-time, you may expand or collapse this control. Type more text here to be typed.  
                Jump around and hype. This is an Expander control. Within this control, all contents will be wrapped.  
                At run-time, you may expand or collapse this control. Type more text here to be typed.  
                Jump around and hype.  
            </TextBlock>  
        </ScrollViewer>  
    </Expander.Content>  
</Expander> 

The Expander control with a scroll viewer looks like this.

READ MORE

The WPF Frame control using XAML and C# supports content navigation within content. A Frame can be hosted within a WindowNavigationWindowPageUserControl, or a FlowDocument control.

How to create a Frame in WPF

This XAML code shows how to create a Frame control and sets its Source property to load a XAML page within it.

  1. <Window x:Class="FrameSample.Window1"  
  2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
  4.     Title="Window1" Height="300" Width="300">  
  5.     <Grid>          
  6.         <TextBlock>Outside area of frame</TextBlock>  
  7.         <Frame Source="Page1.xaml">              
  8.         </Frame>  
  9.     </Grid>  
  10. </Window>  

The Window looks like this. The Purple area is the Page1.xaml and the White area is outside of the frame.



Now you can manage the contents of a frame the way you want.

For example, the following code rotates the contents of the frame to a 45 degree angle.

  1. <Frame Source="Page1.xaml">  
  2.     <Frame.LayoutTransform>  
  3.         <RotateTransform Angle="45" />  
  4.     </Frame.LayoutTransform>  
  5. </Frame>  

The new output looks like this.



How to Navigate to a URI in a WPF Frame

The following code creates a Frame within a window and adds a button control to the window. On the button click event handler we will navigate to a URI using a Frame.

  1. <Window x:Class="FrameSample.Window1"  
  2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
  4.     Title="Window1" Height="300" Width="300">  
  5.     <Grid>  
  6.         <TextBlock>Outside area of frame</TextBlock>  
  7.         <Frame Name="FrameWithinGrid" >  
  8.         </Frame>  
  9.         <Button Height="23" Margin="114,12,25,0"   
  10.                 Name="button1" VerticalAlignment="Top" Click="button1_Click">Navigate to C# Corner  
  11.         </Button>  
  12.     </Grid>  
  13. </Window>  

The Navigate method of Frame is used to navigate to a URI. The following code navigates to Page1.xaml.

  1. private void button1_Click(object sender, RoutedEventArgs e)  
  2. {  
  3.     FrameWithinGrid.Navigate(new System.Uri("Page1.xaml",  
  4.              UriKind.RelativeOrAbsolute));  
  5. }  

The following code navigates to an external website URL and opens the ASPX page within a Frame.

  1. FrameWithinGrid.Source = new Uri("http://www.c-sharpcorner.com/Default.aspx", UriKind.Absolute);  

If you need to open a URI in a new browser window, the following code will do that. This code first creates a NavigationWindow and then sets its Source to a URI.

  1. NavigationWindow window = new NavigationWindow();  
  2. Uri source = new Uri("http://www.c-sharpcorner.com/Default.aspx", UriKind.Absolute);  
  3. window.Source = source; window.Show();  
READ MORE

We've worked a lot on windows forms applications in C#.NET.

Page load event automatically added into the form.cs file when you double click anywhere on your form in windows form application. But this is not the case in UWP Applications. UWP stands for Universal Windows platform. XAML apps does't provide you the event handler for the page when you double clicks anywhere on your page in XAML apps.

So in order to add a page load event in XAML Apps. Make a UWP Project from Visual Studio. To make a project , open visual studio and select new project as given below,

  • Select "Universal" from left side.
     
  • Choose "Blank App ( Universal Windows )". and press enter.

Open MainPage.xaml from Solution explorer. Main page with visual design will be displayed.

type an event in opening tag of "Page" named " Loaded " just like below screenshot. An event handler for the page loading will be added to .cs file behind the UI page.

Take your cursor on the name of event which is "Page_Loaded" here and press F12 , you'll be redirected to the event handler in code page.

See the screen shot of event below.

READ MORE
Contact Us
+91 9880187415
sales@queryhome.net
support@queryhome.net
#280, 3rd floor, 5th Main
6th Sector, HSR Layout
Bangalore-560102
Karnataka INDIA.
QUERY HOME
...