Develop Reference

Access Popup-Dialog inside a data template

I have just started learning windows app development. Like what do we call it (A dialog box, Contentdialogbox, Message Dialog)? Thanks in advance.
Okay I tried this since I have my data in a datatemplate inside a contentpresenter(Making a master detail view) now when user clicks on a icon the popup should open and also display the data related to that event selected inside that list.How do I achieve this since the popup dialog control is defined inside a datatemplate so in my cs file it does not recognize the control so I am not able to open the popup dialog.
Xaml Code:
<DataTemplate x:Key="DetailContentTemplate" x:DataType="data:Event">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="200" />
<RowDefinition Height="50" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid x:Name="Section2" Grid.Row="0">
<Grid.Background>
<ImageBrush ImageSource="ms-appx:///Assets/8.JPG" Stretch="Fill" />
</Grid.Background>
<TextBlock MaxWidth="250"
Margin="36,62,34,68"
FontFamily="Baskerville Old Face"
FontSize="30"
Foreground="{ThemeResource ToggleButtonPressedForegroundThemeBrush}"
TextWrapping="WrapWholeWords"
d:LayoutOverrides="Width, LeftPosition, RightPosition, TopPosition, BottomPosition">
<Run Text="Gravitas Premier League" />
</TextBlock>
</Grid>
<Grid x:Name="Content"
Grid.Row="1"
Margin="0,10,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0">
<RelativePanel>
<SymbolIcon x:Name="symbol"
Margin="0,0,5,0"
HorizontalAlignment="Left"
RelativePanel.AlignLeftWithPanel="True"
Symbol="Globe" />
<TextBlock HorizontalAlignment="Right"
VerticalAlignment="Top"
RelativePanel.RightOf="symbol"
Style="{ThemeResource BaseTextBlockStyle}"
Text="Category" />
</RelativePanel>
</StackPanel>
<StackPanel Grid.Column="1" HorizontalAlignment="Center">
<RelativePanel>
<SymbolIcon x:Name="symboll"
Margin="0,0,5,0"
HorizontalAlignment="Left"
RelativePanel.AlignLeftWithPanel="True"
Symbol="People" />
<TextBlock HorizontalAlignment="Right"
VerticalAlignment="Top"
RelativePanel.RightOf="symboll"
Style="{ThemeResource BaseTextBlockStyle}"
Text="SubCategory" />
</RelativePanel>
</StackPanel>
<StackPanel Grid.Column="2" HorizontalAlignment="Right">
<RelativePanel>
<SymbolIcon x:Name="symbllol"
Margin="0,0,5,0"
HorizontalAlignment="Left"
RelativePanel.AlignLeftWithPanel="True"
Symbol="Bullets" />
<TextBlock HorizontalAlignment="Right"
VerticalAlignment="Top"
RelativePanel.RightOf="symbllol"
Style="{ThemeResource BaseTextBlockStyle}"
Text="Rupee" />
</RelativePanel>
</StackPanel>
</Grid>
<TextBlock Grid.Row="2"
HorizontalAlignment="Center"
Style="{ThemeResource ScenarioDescriptionTextStyle}"
Text="{x:Bind description}"
TextWrapping="WrapWholeWords" />
<Grid Grid.Row="3">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<SymbolIcon Grid.Column="0"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Symbol="Phone" />
<SymbolIcon Grid.Column="1"
x:Name="People"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Symbol="People"
IsTapEnabled="True"
Tapped="ShowPopupOffsetClicked"
/>
<SymbolIcon Grid.Column="2"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Symbol="Mail" />
</Grid>
</Grid>
</DataTemplate>
Now how do I open up the popup when the user taps the symbol with the name People and with necessary bindings of data with a observablecollection say EventList.

There are a lot of ways to implement the UI like in your screenshot. As you've added template10 in your question, I suppose you are using Template10 in your project. And in Template10, we can use ModalDialog to implement this. Here I use a Minimal Template 10 project for example.
Firstly, we may need to change ModalBackground to make the background color looks like what in your screenshot. As the ModalDialog we used here is the root frame created by Bootstrapper automatically, so we need override CreateRootElement in App.xaml.cs like:
public override UIElement CreateRootElement(IActivatedEventArgs e)
{
var b = Current;
var frame = new Windows.UI.Xaml.Controls.Frame();
var nav = b.NavigationServiceFactory(BackButton.Attach, ExistingContent.Include, frame);
//change background
var background = new Windows.UI.Xaml.Media.SolidColorBrush(Windows.UI.Colors.Gray);
background.Opacity = 0.2;
return new Template10.Controls.ModalDialog
{
ModalBackground = background,
DisableBackButtonWhenModal = true,
Content = nav.Frame
};
}
Then we can edit Busy.xaml to implement the panel in your screenshot. In Busy.xaml, it's a UserControl used as the ModalContent of ModalDialog. For example,
<UserControl x:Class="T10Minimal.Views.Busy"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="using:T10Minimal.Views"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
d:DesignHeight="300"
d:DesignWidth="400"
mc:Ignorable="d">
<Grid Width="300"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Background="White"
CornerRadius="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
...
</Grid.RowDefinitions>
<TextBlock Margin="20,0"
VerticalAlignment="Center"
FontSize="24"
Foreground="Black">
Song Options
</TextBlock>
<Button Margin="12"
HorizontalAlignment="Right"
VerticalAlignment="Top"
Click="CloseClicked"
Foreground="Black"
Style="{StaticResource TextBlockButtonStyle}">
<SymbolIcon Symbol="Clear" />
</Button>
...
</Grid>
</UserControl>
The bindings might like the BusyText in the original control, you can change its type to your binding data's type and also change the SetBusy method. After this, you can call SetBusy method in your ShowPopupOffsetClicked method to open the "popup".
This is just a simple sample, you can refer to it to implement your own. And in the sample, I used the ModalDialog created as the root frame of the application. If you need more than one ModalDialog, you can refer to Search (and Login) Sample on GitHub.

Upgrade to Visual Studio 2015 gives false errors

I have upgraded a project from VS 2012 to VS 2015 and I am getting bizarre errors. On some windows it complains about Color and Brush definitions even though I am doing absolutely nothing with any colors or brushes. The project will compile but the editor gives errors. As an example, on the XAML code:
<ComboBox x:Name="cbCountry" Grid.Column="1" VerticalAlignment="Bottom" Height="28" FontSize="12" SelectionChanged="cbCountry_SelectionChanged"
HorizontalContentAlignment="Stretch" IsEditable="True" StaysOpenOnEdit="True" IsManipulationEnabled="True" KeyUp="cbCountry_KeyUp" />
complains about the color. Huh? What color? This is a pretty vanilla page with nothing fancy going on, anybody have any ideas how to eliminate these errors?
Update
I had some windows resources defined as:
<Window.Resources>
<DataTemplate x:Key="CityTemplate">
<StackPanel Orientation="Horizontal">
<Border BorderThickness="1" BorderBrush="Black">
<TextBlock Text="{Binding City}" />
</Border>
</StackPanel>
</DataTemplate>
</Window.Resources>
which does have a BorderBrush defined, but not for the combo. I tried taking a piece out at a time starting with the BorderBrush. It wasn't until I completely removed the <Windows.Resources> section that the error went away. Does anyone see anything wrong in the Windows Resources to cause this?
Update 2
The problem seems to be independent of any code behind. The entire XAML is below:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ig="http://schemas.infragistics.com/xaml"
x:Class="PTHWPF.View.Lookup"
Title="Lookup Place of Birth" Height="400" Width="600" Loaded="Window_Loaded"
Icon="/PTHWPF;component/Resources/Images/LookupMap.png">
<!--TextBlock.TextAlignment="Center" -->
<Window.Resources>
<DataTemplate x:Key="CityTemplate">
<StackPanel Orientation="Horizontal">
<Border BorderThickness="1" BorderBrush="Black">
<TextBlock Text="{Binding City}" />
</Border>
</StackPanel>
</DataTemplate>
</Window.Resources>
<Grid IsManipulationEnabled="True" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="110" />
<ColumnDefinition Width="280*" />
<ColumnDefinition Width="180*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="60" />
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Label Content="Country or State" Height="28" HorizontalAlignment="Right" x:Name="lbCountry" VerticalAlignment="Bottom" />
<ComboBox x:Name="cbCountry" Grid.Column="1" VerticalAlignment="Bottom" Height="28" FontSize="12" SelectionChanged="cbCountry_SelectionChanged"
HorizontalContentAlignment="Stretch" IsEditable="True" StaysOpenOnEdit="True" IsManipulationEnabled="True" KeyUp="cbCountry_KeyUp" >
</ComboBox>
<Label Content="City" Grid.Row="1" Height="28" HorizontalAlignment="Right" x:Name="lbCity" VerticalAlignment="Bottom" />
<ig:XamMultiColumnComboEditor SelectionChanged="cbCity_SelectionChanged"
Grid.Column="1" Grid.Row="1"
HorizontalAlignment="Stretch"
x:Name="cbCity" Height="28"
VerticalAlignment="Bottom"
DataContext="{Binding}"
DisplayMemberPath="City"
HorizontalContentAlignment="Left"
IsTabStop="True" MinWidth="250"
FilterMode="FilterOnPrimaryColumnOnly"/>
<DockPanel Grid.Column="1" Grid.Row="2" HorizontalAlignment="Center" >
<Button Background="#9F7F90FC" Height="30" x:Name="btnOk" Width="80" Style="{DynamicResource RoundedButton}" HorizontalAlignment="Left" IsDefault="True" Click="btnOk_Click" VerticalAlignment="Bottom" Margin="0,0,20,0">
<StackPanel Orientation="Horizontal">
<Image Height="20" Source="/PTHWPF;component/Resources/ok.png" Width="20" />
<AccessText Margin="5,3,0,0" x:Name="btnOkText" Text="_Ok"/>
</StackPanel>
</Button>
<Button Background="#9F7F90FC" BorderBrush="#95FFFFFF" Height="30" x:Name="btnCancel" Style="{DynamicResource RoundedButton}" Width="80" IsCancel="True" Click="btnCancel_Click" VerticalAlignment="Bottom" HorizontalAlignment="Right" Margin="20,0,0,0">
<StackPanel Background="{x:Null}" Orientation="Horizontal">
<Image Height="20" Source="/PTHWPF;component/Resources/Images/cancel.png" Width="20" />
<AccessText Margin="5,3,0,0" x:Name="btnCancelText" Text="_Cancel"/>
</StackPanel>
</Button>
</DockPanel>
</Grid>
</Window>

Apparently Visual Studio 2015 Enterprise Edition had some issues, this also included "Handler=..." errors such as found here:
https://connect.microsoft.com/VisualStudio/feedback/details/1611888/xaml-editor-error-invalid-value-for-property-handler-and-ischecked-bug-remains-in-the-enterprise-version-of-vs-2015
I encountered it as well on other XAML files, but it didn't cause the designer to fail.
Solution:
Upgrade to Service Pack 1 found here:
https://www.visualstudio.com/en-us/news/vs2015-update1-vs.aspx
It is a web update and it took over an hour to do. I will also require a reboot of windows to finish, so keep that in mind. Hopefully anyone finding this post won't spend days like I did to fix the problem.

Persistent Navigation Bar in XAML for Windows 8 App

How do I implement a persistent navigation bar. Basically an app bar that cannot be dismissed even by the right click action. MS as referred to this in this article ( https://msdn.microsoft.com/en-us/library/windows/apps/xaml/dn440584.aspx ) when discussing the flat navigation in the calculator app and also here ( http://blogs.windows.com/bloggingwindows/2014/05/13/windows-store-refresh-makes-it-easier-to-find-apps/ ) when reviewing changes to the windows store app in windows 8.1.

Here's how you do it.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" x:Name="NavigationPart" Orientation="Horizontal">
<Button Content="Home" />
<Button Content="Products" />
<Button Content="Contact" />
</StackPanel>
<Frame Grid.Row="1" x:Name="ContentPart" />
</Grid>
Best of luck!

After reading your question i started googling and was not able to find any already available app bars for that. So as far as i know there is nothing like persistent App Bar. IsSticky property does help to some extent but still can be dismissed by right click.
But still you can customize things by yourself...
As for eg. you have referred this page in your question.
You can make your own implementation for the same.
This is my implementation just to get you started...
<Page
x:Class="App2.BlankPage5"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App2"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="80"/>
<RowDefinition Height="120"/>
<RowDefinition />
</Grid.RowDefinitions>
<Grid Grid.Row="0" Background="Green">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Orientation="Horizontal">
<Rectangle Width="80" Height="80">
<Rectangle.Fill>
<ImageBrush ImageSource="Assets/windows-image.jpg" />
</Rectangle.Fill>
</Rectangle>
<TextBlock Text="Home" FontSize="40" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</StackPanel>
<TextBlock Text="Top Charts" Grid.Column="1" FontSize="40" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<TextBlock Text="Categories" Grid.Column="2" FontSize="40" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<TextBlock Text="Collection" Grid.Column="3" FontSize="40" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<TextBlock Text="Accounts" Grid.Column="4" FontSize="40" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Grid>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" Width="110" Height="110">
<Rectangle.Fill>
<ImageBrush ImageSource="Assets/back.png" />
</Rectangle.Fill>
</Rectangle>
<TextBlock Margin="10, 0, 0, 0" Text="Store" FontSize="70" Grid.Column="1" Foreground="Black" HorizontalAlignment="Left" VerticalAlignment="Center"/>
</Grid>
<Grid Grid.Row="2" >
<TextBlock Text="Your Content Here" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="100" Foreground="Black"/>
</Grid>
</Grid>
</Page>
It produces the following output :
I have not worked on the respective event handlers and i hope you can do that according to your needs.
A Basic Advice : Don't try to make too many changes to the already available design templates. Stick to them and only apply the required changes.

WPF ItemsControl content cropping rather than scrolling

I have a .NET 4.0 WPF application using the MVVM pattern and I've been unable to achieve the desired outcome on one of the screens (UserControl as View). I have stripped down most of the page to show the core of the problem. The page consists of a grid with three rows and one column. The first row contains header text and the last row contains a Save button. The middle row contains a grid with one row and column and displays an ObservableCollection in an ItemsControl with a data template of a custom user control. There are ten items in the collection and I want them to display in two columns and five rows so I have a WrapPanel as an ItemsPanelTemplate.
I want the ItemsControl to scroll within the available space but it is expanding to the size of content and most of it is being cropped off the bottom of the page.
I am listing the XAML for user control the ObservableCollection uses as a data template and the XAML for the main page below that. Any help is greatly appreciated.
<UserControl x:Class="OIL.UserControls.ShopNotes.ShopNoteComponent"
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="120" d:DesignWidth="150">
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Border Grid.Row="0" Grid.Column="0" Width="140" Margin="5,5,5,5" HorizontalAlignment="Center" VerticalAlignment="Top" BorderBrush="Black" BorderThickness="1" CornerRadius="5">
<StackPanel Width="120" Margin="0,5,0,5" HorizontalAlignment="Center" VerticalAlignment="Top" Orientation="Vertical">
<Image Height="25" Width="30" HorizontalAlignment="Left" Source="/OIL;component/Images/BlueCam.png">
<Image.ToolTip>
<Image Source="{Binding Path=ToolTipImagePath}" />
</Image.ToolTip>
</Image>
<Label Style="{DynamicResource LargeText}" Content="{Binding Path=ComponentTitle}" />
<CheckBox Width="80" Margin="0,5,0,5" HorizontalAlignment="Left" Style="{DynamicResource NormalText}" Content=" Mandatory?"
IsChecked="{Binding Path=ComponentMandatory, Mode=TwoWay}"
IsEnabled="{Binding Path=ComponentSelected}" />
<CheckBox Width="15" Margin="0,5,0,5" HorizontalAlignment="Center"
IsChecked="{Binding Path=ComponentSelected, Mode=TwoWay}" />
</StackPanel>
</Border>
</Grid>
And here is the main XAML page:
<UserControl x:Class="OIL.View.ConfiguratorViews.Configurator_ShopNotes_Tab"
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"
xmlns:igWPF="http://infragistics.com/Editors"
xmlns:uc="clr-namespace:OIL.UserControls.ShopNotes"
mc:Ignorable="d"
d:DesignHeight="570" d:DesignWidth="866">
<UserControl.Resources>
<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
<DataTemplate x:Key="ShopNotesComponentsTemplate">
<uc:ShopNoteComponent />
</DataTemplate>
</UserControl.Resources>
<Border Margin="10" CornerRadius="13" BorderThickness="3" BorderBrush="#FF666666">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
<RowDefinition Height="*" />
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Row="0" Grid.Column="0" Orientation="Horizontal">
<Button Height="30" Width="75" Margin="10,5,0,5" HorizontalAlignment="Center" VerticalAlignment="Center" Background="{x:Null}"
Command="{Binding Path=AddNewTemplateCommand}"
Content="Add" />
<Button Height="30" Width="75" Margin="10,5,0,5" HorizontalAlignment="Center" VerticalAlignment="Center" Background="{x:Null}"
Command="{Binding Path=EditTemplateCommand}"
Content="Edit" />
<Grid Margin="10,5,0,5">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Row="0" Grid.Column="0" Orientation="Horizontal" Visibility="{Binding Path=IsNewTemplate, Converter={StaticResource BooleanToVisibilityConverter}}">
<TextBox Height="30" Width="250" HorizontalAlignment="Left" VerticalAlignment="Center" Style="{DynamicResource NormalText}" Text="{Binding Path=TemplateDescription}" />
</StackPanel>
<StackPanel Grid.Row="0" Grid.Column="0" Orientation="Horizontal" Visibility="{Binding Path=IsEditedTemplate, Converter={StaticResource BooleanToVisibilityConverter}}">
<igWPF:XamComboEditor Name="cmbShopNotesTemplate" Height="30" HorizontalAlignment="Left" VerticalAlignment="Center"
ItemsSource="{Binding Path=ShopNoteTemplates, Mode=TwoWay}"
DisplayMemberPath="CONFIGURATION_DESC"
SelectedItem="{Binding Path=SelectedShopNoteTemplate, ValidatesOnDataErrors=True}"
Value="Select Shop Notes Template"
NullText="Select Shop Notes Template"
IsEditable="True">
</igWPF:XamComboEditor>
</StackPanel>
</Grid>
</StackPanel>
<Grid Grid.Row="1" Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition Height="40" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" Height="30" Margin="0,5,0,5" HorizontalAlignment="Center" VerticalAlignment="Center" Style="{DynamicResource NormalText}" Content="* Hover over camera icon to view Shop Note component" />
<ItemsControl Grid.Row="1" Grid.Column="0" HorizontalAlignment="Left"
ItemsSource="{Binding Path=ShopNoteComponents, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
ItemTemplate="{StaticResource ShopNotesComponentsTemplate}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Width="300" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</Grid>
<Button Grid.Row="2" Grid.Column="0" Height="30" Width="150" Margin="10,10,0,10" HorizontalAlignment="Left" VerticalAlignment="Center"
Background="{x:Null}"
Command="{Binding Path=SaveTemplateCommand}"
Content="Save" />
</Grid>
</Border>
EDIT: Changed question title as I have removed the ScrollViewer between starting the question and actually posting it. Also, noticed the Save button was in the inner grid rather than outer grid so I have corrected that (no change in rendering).

An ItemsControl does not have its own ScrollViewer like a ListBox. You can either replace you ItemsControl with a ListBox, or simply wrap it in a ScrollViwer, being careful to move the Grid.Row and Grid.Column settings like this:
<ScrollViewer Grid.Row="1" Grid.Column="0">
<ItemsControl HorizontalAlignment="Left" ItemsSource="{Binding Path=Items,
UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
ItemTemplate="{StaticResource ShopNotesComponentsTemplate}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Width="300" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</ScrollViewer>

WPF form inside windows form window

I want to make this Info.xaml file which is inside my windows form application to be loaded in the my current form but to fill it entirely on the click of the button.
This is my code:
<Window x:Class="RssDemo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="RSS Demo" mc:Ignorable="d" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" Height="576" Width="521">
<Window.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFE2E2E2" Offset="0" />
<GradientStop Color="White" Offset="1" />
</LinearGradientBrush>
</Window.Background>
<Window.Resources>
<XmlDataProvider x:Key="rssData" XPath="//item" Source="***********" />
</Window.Resources>
<Grid Margin="3">
<Grid.RowDefinitions>
<RowDefinition Height="177*" />
<RowDefinition Height="55*" />
<RowDefinition Height="122*" />
<RowDefinition Height="177*" />
</Grid.RowDefinitions>
<ListBox x:Name="lstItems" Margin="3,6,3,0" ItemsSource="{Binding Source={StaticResource rssData}}"
SelectedIndex="0">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Width="20" Margin="3" Source="{Binding XPath=enclosure/#url}" />
<TextBlock Margin="3" VerticalAlignment="Center" Text="{Binding XPath=title}" FontWeight="Bold" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<StackPanel Grid.Row="1" Orientation="Vertical" DataContext="{Binding ElementName=lstItems, Path=SelectedItem}" Margin="0,0,0,5">
<TextBlock Margin="3" FontSize="13" FontWeight="Bold" Text="{Binding XPath=title, Path=InnerText}" />
<TextBlock Margin="3" Opacity="0.72" Text="{Binding XPath=pubDate}" />
</StackPanel>
<ScrollViewer Grid.Row="2" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto" DataContext="{Binding ElementName=lstItems, Path=SelectedItem}" Margin="0,1,0,0" Grid.RowSpan="2">
<TextBlock ScrollViewer.CanContentScroll="True" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Auto" Margin="3"
FontStyle="Italic" Text="{Binding XPath=description, Path=InnerText}" TextWrapping="Wrap" TextAlignment="Justify" Width="489" AllowDrop="False"
Foreground="#FF0000E7" FontFamily="Lucida Sans Unicode" Height="352" />
</ScrollViewer>
</Grid>
</Window>

You may use *ElementHost as explained here*
http://blogs.msdn.com/b/calvin_hsia/archive/2007/12/11/6740119.aspx
Alternatively, you may look here too [if you can convert it to a usercontrol]
http://msdn.microsoft.com/en-us/library/ms745781.aspx
If you particularly want Windows Forms opening a WPF window then read here -
http://msdn.microsoft.com/en-us/library/system.windows.forms.integration.elementhost.enablemodelesskeyboardinterop.aspx
More info here -
http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/442782b1-00a1-4e2e-9cc6-ae99b6699126/