Windows from have web browser control since .net 2.0, WPF also introduced a browser control from .net 3.5 sp1, well the controls are very good as far as functionality is concern, i my self prefer windows forms browser since it have more control with the functionality.

Today i encountered with a strange problem, in one of my application i used a modal dialog to present data as light box effect, inside the modal i added a browser control and then populated appropriate data, when i run the application the modal showed up, but the browser was just blank, no data what so ever. Later after few trial and error i found that my modal windows allow transparency property is set to true,  when i turned it to false, browser's content showed up.

Its a small problem perhaps many of you already knew about it, but since it killed almost two hour of my time, i thought its worth sharing. Happy coding..

Introduction

Tooltip is very important part of any modern software. It helps and suggests what to do with the any user interaction item control or what a particular content or legends means. In this article I am going to discuss about a small yet interesting feature of WPF, the “ToolTipService”. Using tooltip service we can do a good amount of customization on how we can display tooltip.

let putdown a small example how we can define a tooltip of any content in xaml markup.

<Button Width="100" Height="30" Content="Click Me!"
ToolTip="Click here to do some thing"></Button>

WPF have two default event to help the developers do some level of customization, the events are  ToolTipOpening and ToolTipClosing.

Customizing the tooltip

In almost all the technology exists except WPF, tooltip is not that much of customizable. But in WPF all most all the gates are opened. We can customize tooltip in such a way that we can put any content in a tooltip, event a data grid!, just kidding, no scenario can be that much bizarre. But no kidding, we can put almost any thing in a tooltip content. Enough talk let put a example and see actually how pretty handy it is.

<Button Width="100" Height="30" Content="Click Me!">
<Button.ToolTip>
<Border Margin="-4,0,-4,-3" Padding="10" Background="Silver">
<Border.BitmapEffect>
<OuterGlowBitmapEffect></OuterGlowBitmapEffect>
</Border.BitmapEffect>
<Label>This is a simple customization of tooltip</Label>
</Border>
</Button.ToolTip>
</Button>

In the above example we have added a border as a content of the tooltip and also applied few changed on the look and feel of the border. And the effect after running the application is look like the following image.

Using the tooltip service

So we now know that tooltip is very good level of customizable in WPF. Now lets explore a service that is evolved around tooltip the “ToolTipService”. Normally a tooltip is displayed exactly where the mouse pointer is. If we want to display the tooltip always at a particular position we can just modify the markup little using ToolTipService and set the ToolTipService.Placement property to our desired location, bellow code is given to show a tooltip always at bottom of a button element

<Button Width="100" Height="30" Content="Click Me!" 
ToolTipService.Placement="Bottom">
<Button.ToolTip>
<Border Margin="-4,0,-4,-3" Padding="10" Background="Silver">
<Border.BitmapEffect>
<OuterGlowBitmapEffect></OuterGlowBitmapEffect>
</Border.BitmapEffect>
<Label>This is a simple customization of tooltip</Label>
</Border>
</Button.ToolTip>
</Button>

And the result is look like the following image.

Lets see another very interesting feature about the tooltipservice. If we have a disable element the tooltip does not get showed when we move over on the element. But using ToolTipService.ShowOnDisabled property we can display tooltip even on a disabled item. Bellow the code is given.

<Button Width="100" Height="30" Content="Click Me!" 
IsEnabled="False"
ToolTipService.ShowOnDisabled="True"
ToolTipService.Placement="Bottom">
<Button.ToolTip>
<Border Margin="-4,0,-4,-3" Padding="10" Background="Silver">
<Border.BitmapEffect>
<OuterGlowBitmapEffect></OuterGlowBitmapEffect>
</Border.BitmapEffect>
<Label>This is a simple customization of tooltip</Label>
</Border>
</Button.ToolTip>
</Button>

And the effect of the above code is look like this

Lets put few more interesting code here.

<Button Width="100" Height="30" Content="Click Me!" 
ToolTipService.HasDropShadow="False"
ToolTipService.InitialShowDelay="100"
ToolTipService.ShowDuration="5000"
ToolTipService.ShowOnDisabled="True"
ToolTipService.Placement="Bottom">
<Button.ToolTip>
<Border Margin="-4,0,-4,-3" Padding="10" Background="Silver">
<Border.BitmapEffect>
<OuterGlowBitmapEffect></OuterGlowBitmapEffect>
</Border.BitmapEffect>
<Label>This is a simple customization of tooltip</Label>
</Border>
</Button.ToolTip>
</Button>

In above code we have set the ToolTipService.InitialShowDelay to 100 ms. Which allow the tooltip to show almost just after we mouse over the button. New we have made the tooltip stay open a little longer using ToolTipService.ShowDuration to 5000 ms. we can customize more using the other properties of ToolTipService.

Summery

References

1. http://msdn.microsoft.com/en-us/library/system.windows.controls.tooltipservice.aspx [About ToolTipService Class]
2. http://msdn.microsoft.com/en-us/library/ms752368.aspx [How to Position a ToolTip]
3. http://msdn.microsoft.com/en-us/library/system.windows.controls.tooltipservice_fields.aspx [Fields of ToolTip service]

Introduction

In this short article we are going to see few tricks about WPF ItemsControl. ItemsControl is one of the simplest yet powerful control in WPF. ItemsControl is just like the repeater control in asp.net. It supports Binding and supports custom template to display the data. for detail study about power of ItemsControl please read MSDN documentation here. In this article we going to focus on how to display alternating item in ItemsControl and apply few effects on items of ItemsControl.

Use Alternating Item Style

Items control can be used to display data both via populating the ItemsControl.Items collection or specify a Items Source in ItemControl.ItemsSource property. In this example we are going to use ItemsSource to display our data. Lets assume we have a custom class called country and we want to display the information about country in a ItemsControl. Bellow a simple code listing is given to get the total idea.

public partial class Window1 : Window
{
    public Window1()
    {
        loadDemoData();
        this.DataContext = this;
    }

    public static readonly DependencyProperty DataListProperty = 
        DependencyProperty.Register(
        "DataList", typeof(ObservableCollection<Country>), 
        typeof(Window1));
    
    private void loadDemoData()
    {
        ObservableCollection<Country> data = 
            new ObservableCollection<Country>();
        Country c1 = new Country { ID = "1", Name = "Bangladesh", 
            Capital = "Dhaka", Continent = "Asia" };
        Country c2 = new Country { ID = "2", Name = "India", 
            Capital = "Delhi", Continent = "Asia" };
        Country c3 = new Country { ID = "3", Name = "U.S.A", 
            Capital = "Washington", Continent = "North America" };
        Country c4 = new Country { ID = "4", Name = "Australia", 
            Capital = "Canbarra", Continent = "Australia" };
        Country c5 = new Country { ID = "5", Name = "Kenya", 
            Capital = "", Continent = "Africa" };
        data.Add(c1);
        data.Add(c2);
        data.Add(c3);
        data.Add(c4);
        data.Add(c5);
        this.SetValue(Window1.DataListProperty, data);
    }

    public class Country
    {
        public string ID { get; set; }
        public string Name { get; set; }
        public string Continent { get; set; }
        public string Capital { set; get; }
    }
}

<Window x:Class="WPFDemo.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="ItemsControl" MinHeight="350" 
        MinWidth="550" Background="#f5f5f5">
    <Window.Resources>
        <Style x:Key="alternatingWithTriggers" 
               TargetType="{x:Type ContentPresenter}">
            <Setter Property="Height" Value="25"></Setter>
        </Style>
        <DataTemplate x:Key="MyItemTemplate">
            <Border x:Name="yahoo">
                <StackPanel Orientation="Horizontal">
                    <Label Content="{Binding Name}"></Label>
                    <Label Content="is in"></Label>
                    <Label Content="{Binding Continent}"></Label>
                </StackPanel>
            </Border>
            <DataTemplate.Triggers>
                <Trigger Property="ItemsControl.AlternationIndex" Value="0">
                    <Setter Property="Background" Value="#e9e9e9" 
                            TargetName="yahoo"></Setter>
                </Trigger>
                <Trigger Property="ItemsControl.AlternationIndex" Value="1">
                    <Setter Property="Background" Value="#d9d9d9" 
                            TargetName="yahoo"></Setter>
                </Trigger>
            </DataTemplate.Triggers>
        </DataTemplate>
    </Window.Resources>
    <Grid MinHeight="350" MinWidth="550">
        <ItemsControl ItemsSource="{Binding DataList}" 
            ItemContainerStyle="{StaticResource alternatingWithTriggers}" 
            AlternationCount="2" 
            ItemTemplate="{StaticResource MyItemTemplate}"/>
    </Grid>
</Window>

Hover Effect

Applying hover effect is now easy since we know how to apply styles using trigger. but in this case we wont use AlternatingItemIndex. We want to apply a mouse over effect regardless of whether its item or alternating item. Bellow the code snippet is give for hover effect on items.

<Style x:Key="onmouseover" TargetType="{x:Type StackPanel}"> 
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background" Value="Yellow">
            </Setter>
        </Trigger>
    </Style.Triggers>
</Style>
<DataTemplate x:Key="MyItemTemplate">
    <Border x:Name="yahoo">
        <StackPanel Orientation="Horizontal" 
                    Style="{StaticResource onmouseover}">
            <Label Content="{Binding Name}"></Label>
            <Label Content="is in"></Label>
            <Label Content="{Binding Continent}"></Label>
        </StackPanel>
    </Border>
    <DataTemplate.Triggers>
        <Trigger Property="ItemsControl.AlternationIndex" Value="0">
            <Setter Property="Background" Value="#e9e9e9" 
                    TargetName="yahoo"></Setter>
        </Trigger>
        <Trigger Property="ItemsControl.AlternationIndex" Value="1">
            <Setter Property="Background" Value="#d9d9d9" 
                    TargetName="yahoo"></Setter>
        </Trigger>
    </DataTemplate.Triggers>
</DataTemplate>

Summery

In this short article we have seen how we can use alternating item using ItemsControl. In this demonstration we have used AlternatingItemCount as 2, but user can set grater than two, but to get the alternating item effect it must be larger than 1. The styles must be modified to support according to AlternatingItemCount. for more study on ItemsControl please visit the references.

Reference

• http://msdn.microsoft.com/en-us/library/system.windows.controls.itemscontrol.aspx
• http://msdn.microsoft.com/en-us/library/system.windows.controls.itemscontrol.alternationcount.aspx
• http://blogs.msdn.com/vinsibal/archive/2008/05/28/wpf-3-5-sp1-feature-alternating-rows.aspx

Today I am going to share a interesting learning experience that I had about editable combo box. In one of my project we have a requirement that all editable text need to support  multi-line support. very easy stuff. Just set IsEditable property of combo box to "true".

   1: <ComboBox x:Name="ddlCombo" 

   2: MaxDropDownHeight="200"  

   3: FontWeight="Normal" 

   4: Text="{my:CellEditorBinding}"  

   5: BorderThickness="0" 

   6: Padding="0" Margin="0" 

   7: IsEditable="True"  

   8: Foreground="Black" />

Now, the problem is, in couple of our grid cell we had combo box with editable feature. User can write their own choice or they can pick a value from the drop down list. since the text box of combo is a text editing area. clients wanted warp text with new line in the edit area of the combo box. After few minutes of "R & D" we discovered the way to override the control template and modified the textbox of combo box in such a way so that it can take multi-line and warp text content in combo box.

To give a textbox warped text feature i just added the following code, and it will do the job.

   1: <TextBox x:Name="PART_EditableTextBox"

   2:             Style="{x:Null}" 

   3:             Template="{StaticResource ComboBoxTextBox}" 

   4:             HorizontalAlignment="Left" 

   5:             VerticalAlignment="Center" 

   6:             Margin="3,3,23,3"

   7:             Focusable="True" 

   8:             Background="Transparent"

   9:             Visibility="Hidden"

  10:             TextWrapping="Wrap" 

  11:             AcceptsReturn="True"                                 

  12:             IsReadOnly="{TemplateBinding IsReadOnly}"/>

Best of luck and happy programming.

Light box effect is becoming a trend to show modal dialog in both web and desktop applications now a days. In WPF we can also achieve this goal with little effort. Its not actually a light box but give users a elusion of a light box.

Wpf Container controls display last element of the logical tree on top of all visual elements. we have used that feature to produce this effect. First of all we are going to add a grid as the root element of a page or window, and we are going to add the dialog XAML as the last child of the grid.

<Border x:Name="panelDialog" Visibility="Collapsed">
<Grid>
<Border Background="Black" Opacity="0.49"></Border>
<!--While Xmal Content of the dialog will go here-->
</Grid>
</Border>

Just put two function for hide and display the dialog. Total Code is given bellow. In bellow code I have Displayed a loading screen with light box effect. When displaying modal dialog just invoke show and hide wait screen methods. Its good to send your cpu expansive jobs to background thread and use dispatcher to update UI while you are in background thread.

<Page x:Class="Home">
<Grid>
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<!--All the contents will go here-->
</ScrollViewer>
<Border x:Name="panelLoading" Visibility="Collapsed">
<Grid>
<Border Background="Black" Opacity="0.49"></Border>
<local:TMEWaitScreen></local:TMEWaitScreen>
</Grid>
</Border>
</Grid>
</Page>

#region About Wait Screen
/// <summary>
/// Show wait screen before a web request
/// </summary>
public void ShowWaitScreen()
{
Process del = new Process(ShowWaitScreenUI);
Dispatcher.Invoke(System.Windows.Threading.DispatcherPriority.Normal, del);
}
private void ShowWaitScreenUI()
{
panelLoading.Visibility = Visibility.Visible;
}
/// <summary>
/// Hide a wait screen after a web request
/// </summary>
public void HideWaitScreen()
{
Process del = new Process(HideWaitScreenUI);
Dispatcher.Invoke(System.Windows.Threading.DispatcherPriority.Normal, del);
}
private void HideWaitScreenUI()
{
panelLoading.Visibility = Visibility.Collapsed;
}
#endregion

Story of displaying html content in WPF or XBAP (WPF browser application) begins with a simple requirement, we have to show printer friendly version(which is a html content) on few reports in our project that run on Internet and which is a WPF browser application. Well it is a quite simple requirement and most of the application needs such kind of printer friendly version that run on web. There are several techniques or solutions to this problem we are going to take a look each of a kind in short.

WPF Frame Element

First of all we are going to see a simple solution to this problem. WPF have an element called Frame element. Frame element is used to display wpf  page and user control. We can also use a frame element to show our html contents. User need to set the source property of the "Frame" to Uri of the Html Page. Here is a simple code example that shows how to do that.

<Grid Height="300" Width="479">
    <Frame x:Name="myframe" Source="C:\TabotGenerator\TestXbap\HTMLPage1.htm"></Frame>
</Grid>

Few things must need to take in concern before using frame wpf frame or other elements don't support uri other than the site of origin in partial trust mode. so report handler html or aspx or custom handler must be in the site of origin. And while navigating the source must be marked as a Absolute Uri using the "UriKind" Enum.

Open a new Browser Window

Second solution to show html page in wpf is to use a navigation window object of wpf. Its kind of a mini browser where any wpf page or any resource that is viewable can be loaded. The following code snippet will show how to use a navigation window to show html page.

NavigationWindow window = new NavigationWindow();
Uri source = new Uri("http://mydomain/myapp/report.aspx", UriKind.Absolute);
window.Source = source;window.Show();

In the same category we can also use Hyperlink to Popup more traditional kind of browser window, that is popup a IE browser window just like traditional printer friendly version on sites. but to lunch a new browser window target name property must be set to _blank or some thing like that. bellow code snippet is given. Note that hyperlink element is created inside a label. WPF is by designed like this. hyperlink must be inside text elements for example label and text block.

<Label>
    <Hyperlink TargetName="_blank" NavigateUri="http://mydomain/myapp/report.aspx"></Hyperlink>
</Label>

3.5 SP1 Web Browser Control

Microsoft dot net framework 3.5 Service pack one is equipped with a new control type called web browser control. Web browser control is a very smart control supporting navigation to normal Uri source and also displays html content dynamically. User can set its source property to display html page which is traditional way just like two above mentions technique. Web browser control also support three life saving methods.

Uri source = new Uri("http://mydomain/myapp/report.aspx", UriKind.Absolute);
WebBrowser browser = new WebBrowser();
this.Content = browser;browser.Navigate(source);
browser.NavigateToStream(new FileStream("Pathofthehtmlfile",FileMode.OpenOrCreate));
browser.NavigateToString("<html> whole html content </html>");

Among the above mention methods “NavigateToString” is very usefull in case we need to display html content which is available to us as a string data. And we don’t have to use any printer friendly handler page on the source of origin site in this case. We can retrieve our printer friendly html content using a string content and then just use NavigateToString to display the conent. We can also use template html to generate html content for printer friendly version.

Using Windows Forms Web Browser control

In case we are not using dot net framework 3.5 sp1 we can still implement the technique to display html content directly in browser without having a ASPX handler page in the site of origin of the XBAP. We are going to use a legacy browser control of window forms. Window forms have a built-in browser control from the release of Microsoft .net framework 2. We can also use this control using this legacy browser control via windows forms host control of WPF.

<Grid Height="300" Width="479"><WindowsFormsHost Name="windowsFormsHost1" /></Grid>

System.Windows.Forms.WebBrowser browser = new System.Windows.Forms.WebBrowser();
windowsFormsHost1.Child = browser;
//do assign the html content directly 
browser.DocumentText = "our html string";
//or do assign the uri of the html page
Uri source = new Uri("http://mydomain/myapp/report.aspx", UriKind.Absolute);
browser.Navigate(source);

Conclusion

Using the above solution one thing must be kept in mind that any time you can encounter with the system.net.permission error or perhaps partial security violation error. for this you need to modify your code in such a way so that you can get the best out of it. In my case I will use the new 3.5 sp1 browser control. I will retrieve the html content via some web service or WCF service and then assign the string to web browser using navigate to string method. Best of luck and happy programming.

WPF applications often needs to call time consuming methods or processes, the time consuming methods or processes can be, huge time consuming calculation or perhaps a web service call. In case of WPF specially XBAP (wpf browser application) which run on remote client machines browser, this sort of calls can make your user interface unresponsive.  I am working with WPF for more than four month. Lot of things come in to way and dealt with nicely. Well in this post I am going to share a simple trick for avoiding unresponsiveness of user interface. We have already used this technique in many cases in our application, but this is for WPF.

The "Thread & Invoke"

BackgroundWorker is a very smooth and useful tool for our purpose of making more responsive UI(user interface). Before discussing more about BackgroundWorker lets take a flash back of legacy technique (which is pretty smart)  implementation of making  more responsive UI. Previously I used threading for implementing such kind of UI smoothness. What I did is to create a background thread and call expansive operation on that thread. When the job is finished use the "MethodInvoker" method to let know the UI thread that the job is finished. And this model is called asynchronous model. And this is quite smart model and rest of the models are based on this approach. Here is a quick code snippet for demonstration the technique.

//first start the method with tread
System.Threading.ThreadStart ts = new System.Threading.ThreadStart(ExpansiveMethod);
System.Threading.Thread t = new System.Threading.Thread(ts);
t.Start();
protected void ExpansiveMethod()
{
//Very expansive call will go here...
//after the job is finished call method to update ui
MethodInvoker updaterMI = new MethodInvoker(UpdateChange);
this.BeginInvoke(UpdateChange);
}
protected void UpdateChange()
{
//again back to main ui thread
}

The "Background Worker"

Okay, its time to use the BackgroundWorker. An amazing thing about background worker is, its simple to use.  First, lets see what a background worker is. "BackgroundWorker" is a class under "System.ComponentModel" which executes an operation on a separate thread. Which is introduced from dot net framework 2.0. Things are again pretty simple just like tread, All you have to do is instantiate a BackgroundWorker and subscribe its events, and call the "RunWorkerAsync()" method. Lets put a code snippet. Since we are programmers we understand code better.

void MyMethodToCallExpansiveOperation()
{
//Call method to show wait screen
BackgroundWorker workertranaction = new BackgroundWorker();
workertranaction.DoWork += new DoWorkEventHandler(workertranaction_DoWork);
workertranaction.RunWorkerCompleted += new RunWorkerCompletedEventHandler(workertranaction_RunWorkerCompleted);
workertranaction.RunWorkerAsync();
}
void workertranaction_RunWorkerCompleted(object sender, RunWorkerCompletedEventArgs e)
{
//Call method to hide wait screen
}
void workertranaction_DoWork(object sender, DoWorkEventArgs e)
{
//My Expansive call will go here...
}

As you can see in above code I have subscribed two event "DoWork" (which is the main function) and "RunWorkerCompleted", In dowork event handler we will put our expansive time consuming operations, as the name imply's RunWorkerCompleted event is fired when the work is finished . BackgroundWorker also has "ProgressChanged" event which is used to let the main UI thread know how much work is completed.

The "Dispatcher"

In few cases the BackgroundWorker needs to access the main UI thread. In WPF we can use "Dispatcher" which is a class of "System.Windows.Threading" and a delegate to access the main thread. First of all we have to declare a delegate for our candidate methods, and then use the delegate to call the method using Dispatcher. Dispatcher has few thread priority and you can use various priority from DispatcherPriority enum. "Send" has the highest priority in DispatcherPriority.

//delegate for our method of type void
public delegate void Process();
//and then use the dispatcher to call the method. 
Process del = new Process(UpdateMyUI);
this.Dispatcher.Invoke(System.Windows.Threading.DispatcherPriority.Background, del);
void UpdateMyUI()
{
//get back to main UI thread
}

For more reading about this Asynchronous Programming please visit the references.

Reference

http://msdn.microsoft.com/en-us/library/system.componentmodel.backgroundworker.aspx

http://weblogs.asp.net/justin_rogers/articles/126345.aspx

http://www.eggheadcafe.com/articles/20050926.asp

Hi after a long time I am back in my blog. In this post I will discuss few things about WPF image object. Recently I have been working in a project whose UI Layer is build entirely with windows presentation foundation.

Background

WPF has another way to display image. That is, using BitmapImage object. You can declare BitmapImage tag and in WPF XAML just like Image tag. But in case of BitmapImage the source property is a Uri name is UriSource. Luckily BitmapImage is the source property of Image. Here is a simple code segment of Image and BitmapImage.

ImageSource & BitmapImage

WPF has another way to display image. That is, using BitmapImage object. You can declare BitmapImage tag and in wpf xaml just like Image tag. But in case of BitmapImage the source property is a Uri name is UriSource. Luckily BitmapImage is the source property of Image. Here is a simple code segment of Image and BitmapImage

<Image Width="200" Margin="5" Grid.Column="1" Grid.Row="1" >
<Image.Source>
<BitmapImage UriSource="sampleImages/bananas.jpg" />
</Image.Source>
</Image>

Mouse hover effect

Bellow I have listed few lines of code when i change the image in mouse enter and mouse out of an image object. Of course I am using Uri to define the location of my image then using the Uri to make a new BitmapImage and finally use BitmapImage to assign Image.Source Property.

   1:  private void btnGoToHome_MouseEnter(object sender, MouseEventArgs e)

   2:  {

   3:      this.Cursor = Cursors.Hand;

   4:      Uri src = new Uri(@"C:/Images/DifferentTransaction_Icon_Active.png");

   5:      BitmapImage img = new BitmapImage(src);

   6:      btnGoToHome.Source = img;

   7:  }

   8:  

   9:  private void btnGoToHome_MouseLeave(object sender, MouseEventArgs e)

  10:  {

  11:      this.Cursor = Cursors.Arrow;

  12:      Uri src = new Uri(@"C:/Images/DifferentTransaction_Icon_Normal.png");

  13:      BitmapImage img = new BitmapImage(src);

  14:      btnGoToHome.Source = img;

  15:  }

Thats it you are done

Reference

http://msdn.microsoft.com/en-us/library/system.windows.controls.image.aspx

In my previous blog post i have discussed about how to hide the navigation ui of xbap while you hosting Xbap ( Xaml browser application) in iframe. Note that xbap can be accessed directly from browsers url address and can also be viewed in a iframe in existing web site. In both case user can have contents that requires scrolling.If user developed the xbap application in such a way that the application will be accessed directly form url address, user can archive the goal by adding a "scrollableview" element in your xmal page. bellow a code sample is provided.

   1:  <Page x:Class="CookieTest.Page1"

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

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

   4:        Title="Page1">

   5:      <ScrollViewer>

   6:          <Grid>

   7:              <!--your content will go here–>-->

   8:          </Grid>

   9:      </ScrollViewer>

  10:  </Page>

Next case is if user hosted the xbap application in a iframe. In this case there is a good chance that user will be viewing two vertical scrollbar in user's browser if users existing site's page is long enough to cause view a vertical scroll bar, that is the browser's vertical scrollbar. Xbap host have a defined size, which generally as long and wide as the browser window. So if your content is longer than the size of xbap host, you can loose your content from viewable content area. or you will end up having two scrollbar.Well there is several solutions to this problem. Lets discuss with a simpler version. Make the iframe's height property as long as the xbap that is hosting the xbap. And make sure that your xbap will not grow larger than that. but if your xbap has variable content and has variable height and you got to keep the constant look you need to do some engineering to keep things smooth.Xbap do support get and set of cookie in the site of origin. so do calculate your height for your content in xbap and then set the height as a cookie, make sure you do set the height of the content as a cookie each time the content of xbap has changed, of course in case of the content that cause the xbap to change its size. here is a code example to set cookie for site from xbap.

Application.SetCookie(BrowserInteropHelper.Source, "HEIGHT=" + DemoHeight );

Now in the page, where you hosted your xbap in iframe read the cookie with javascript and the change the height of the iframe. that's it you will have a smooth operation of auto grow or shrink of your xbap and wont cause any extra scrollbar. for reading the cookie do a little engineering for example always track the height cookie with javascript timer based function.

   1:  <script language="javascript" type="text/javascript">

   2:  function getCookie(c_name)

   3:  {

   4:      if (document.cookie.length>0)

   5:      {

   6:        c_start=document.cookie.indexOf(c_name + "=");

   7:        if (c_start!=-1)

   8:          {

   9:          c_start=c_start + c_name.length+1;

  10:          c_end=document.cookie.indexOf(";",c_start);

  11:          if (c_end==-1) c_end=document.cookie.length;

  12:          return unescape(document.cookie.substring(c_start,c_end));

  13:          }

  14:      }

  15:      return "";

  16:  }

  17:  function InCreaseHeight()

  18:  {

  19:      var hight = getCookie('HEIGHT');

  20:      if(hight != "")

  21:      {

  22:          if(document.getElementById('framename')!=null)

  23:          {

  24:              if(hight<600)

  25:              {

  26:                  hight = 600;

  27:              }

  28:              document.getElementById('framename').height = hight;

  29:          }

  30:      }

  31:      setTimeout("InCreaseHeight()",250);

  32:  }

  33:  </script>

one more thing do call the javascript increase height function on body on load event of the page to kick start the process.

   1:  <body onload="InCreaseHeight();">

Reference:

http://www.w3schools.com/js/js_cookies.asp
http://msdn2.microsoft.com/en-us/library/ms750478.aspx#Cookies

Xbap application can be used directly in browser or can be used in a iframe in a web page. when you use directly in browser, browsers nagivation ui is used as xbap navigation UI . But if you use xbap in a iframe xbap host automatically add two back forward button and add a navigation header to your xbap application. if you are using the xbap in a existing web page and in a iframe this cause a little bit problem.

but we can hide the navigation ui very easyly... all we have to do is to set the wpf page object's ShowsNavigationUI property to false... thats all... you are done. But if you are using an "user control" as startup object there is no way to set the property. This works only in case of WPF Page project item template.

But you can still hide the navigation UI... on application's contractor subscribe the navigated event ..

public App()
{
this.Navigated += new NavigatedEventHandler(App_Navigated);
}

void App_Navigated(object sender, NavigationEventArgs e)
{
NavigationWindow ws = (e.Navigator as NavigationWindow);
ws.ShowsNavigationUI = false;
}