locked
Create Right Click Menu in SketchFlow RRS feed

  • Question

  • Hi

    I am in a peculiar situation where I want to create a screen and put in a data grid (sketchables). And after having done that, on the same screen I want to create a right click menu with some options that would generate an action (basically picking an option would navigate me to different screen) instead of using buttons to do that.

    Can that be done in Blends SketchFlow ? If yes, please help and suggest.

    Much appreciated.

    Saurabh

    Thursday, February 23, 2012 11:06 PM

All replies

  • It should work just like normally creating a right click menu in WPF or SL, what xaml are you trying and what isn't working?
    Friday, February 24, 2012 12:20 AM
    Moderator
  • Actually, if you were to create a right-click menu and try to position it under the mouse, the mouse coordinates returned would be based on the entire sketchflow screen and most likely result in the menu not showing on the project screen because it would have placed it down and to the right of the project screen.  (Yep I confused myself as well. :) )

    Here's an example using a UserControl or Component as Sketchflow calls it named "rightClickMenu"...

    Screen 1

    <UserControl
    	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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:WpfPrototype2Screens" x:Name="Screen_1_Name"
    	mc:Ignorable="d"
    	x:Class="WpfPrototype2Screens.Screen_1"
    	Width="640" Height="480">
    
    	<Grid x:Name="LayoutRoot" Background="White" MouseRightButtonDown="showMenu">
    		<TextBlock HorizontalAlignment="Left" Style="{DynamicResource BasicTextBlock-Sketch}" VerticalAlignment="Top" MouseRightButtonDown="showMenu"><Run Text="Rigt-Click for Menu"/></TextBlock>
    	</Grid>
    </UserControl>

    Code-Behind for Screen 1

    using System;
    using System.Windows;
    using System.Windows.Controls;
    
    
    namespace WpfPrototype2Screens
    {
    	public partial class Screen_1 : UserControl
    	{
    		public Screen_1()
    		{
    			this.InitializeComponent();
    		}
    
    		private void showMenu(object sender, System.Windows.Input.MouseButtonEventArgs e)
    		{
    			Point mousePosition = e.GetPosition(this.LayoutRoot);
    			rightClickMenu rcm = new rightClickMenu();
    			rcm.HorizontalAlignment = HorizontalAlignment.Left;
    			rcm.VerticalAlignment = VerticalAlignment.Top;
    			rcm.Margin = new Thickness(mousePosition.X - 50, mousePosition.Y - 50, 0, 0);
    			rcm.Width = 100;
    			rcm.Height = 100;
    			this.LayoutRoot.Children.Add(rcm);
    		}
    	}
    }

    Then on the componet or UserControl you could put a MouseLeave event to hide the control

    private void hideMenu(object sender, System.Windows.Input.MouseEventArgs e)
    		{
    			this.Visibility = Visibility.Collapsed;
    		}

    But basically Sketchflow seems to treat the grid as canvas and if you don't specify where to get the X,Y coordinates from it gets confused unless you specify what container you want the coordinates in realtion to... Point mousePosition = e.GetPosition(this.LayoutRoot);  You also have to specify the horizontal and vertical alignment or it starts from the center of the screen.

    And the best way to understand what I mean is to change this.LayoutRoot to null and then have a popup menu show with the X, Y coordinates ToString.

    ~Christine

    To clarify because I'm not even sure I understood my answer...

    Using e.GetPosition(null) returns your mouse position based on the entire SketchFlow window.

    Using e.GetPosition(this.LayoutRoot) will return your mouse position in relation to the actual project or screen showing within the Sketchflow window.  With point 0, 0 being the top-left of the LayoutRoot.

    However, if you don't set the Horizontal and Vertical alignment to top and left.  It will place the control in the center if your coordinates were 0, 0.  Even though you clicked in the top left corner of the LayoutRoot, when placing the object it seems to translate that point to the center of the Layoutroot.

    Friday, February 24, 2012 12:53 AM
  • Now I see u used the rightclickmenu method/function but there is none in the above code. It throws an error when I build it for "rightclickmenu" could not be found.
    Monday, February 27, 2012 9:07 PM
  • Hello SA.

    I simply made a UserControl named "rightClickMenu".

    To add a UserControl...

    Right-Click your project in the Projects panel.

    Select "Add New Item"

    From the New Item Pop-Up... Select "UserControl" and give it a name.  I named it "rightClickMenu.xaml"

    Hit OK.

    Here is the xaml code from my sample...

    <UserControl
    	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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    	mc:Ignorable="d"
    	x:Class="WpfPrototype2Screens.rightClickMenu"
    	x:Name="UserControl"
    	d:DesignWidth="100" d:DesignHeight="100">
    
    	<Grid x:Name="LayoutRoot">
    		<Rectangle Fill="#FFF4F4F5" Stroke="Black" RadiusX="10" RadiusY="10" StrokeThickness="2"/>
    		<StackPanel Margin="0" Orientation="Vertical" VerticalAlignment="Center" HorizontalAlignment="Center">
    			<Button Content="Button" Style="{DynamicResource Button-Sketch}" Margin="0,10"/>
    			<Button Content="Button" Style="{DynamicResource Button-Sketch}" Margin="0,10"/>
    		</StackPanel>
    	</Grid>
    </UserControl>

    Sorry for the confusion.

    ~Christine

    I went ahead and uploaded the sample project to my SkyDrive. 
    https://skydrive.live.com/redir.aspx?cid=513b70517e544edb&resid=513B70517E544EDB!214&parid=513B70517E544EDB!131

    I had to remake the sample, so the namespace is different than what I had posted above.

    Monday, February 27, 2012 9:36 PM
  • I think that clarification really helped...atleast I can see the basic behaviour work.

    But, whats happening right now is that

    1. The textbox that initiates the popup menu cant be dynamic as you stated..it says it needs 2007 something..but I made it static and it works..though I would want to know what would I have to do to make it dynamic again    2. Everytime I right click the on the text box it generates the popup but doesnt clears the one previously generated...like the nmumber of right clicks I do, as many popups come up, one upon the other....so its not clearing..             

    In Anticipation          

    Thanks Christine

    Monday, February 27, 2012 10:22 PM
  • Actually I just let Blend create the xaml and it always seems to use Dynamic for those Sketchflow stlyes.

    And ... I am sorry the above code did not account for the mouse leave event.  I had long since deleted my original sample and was trying to recreate it. 

    Did you by chance download that sample I posted to SkyDrive?  I did account for it there....

    Here is all the code for the sample recreated and posted to SkyDrive, and remember I simply did this in Blend/Sketchflow and added a couple of methods to the code-behind...

    Screen 1 xaml... I forgot I had put the MouseRightButtonDown event on a TextBlock and in the following code I simply put it on the LayoutRoot.  You could easily change that.

    <UserControl 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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:WpfPrototype1Screens" x:Name="Screen_1_Name"
    	x:Class="WpfPrototype1Screens.Screen_1"
    	mc:Ignorable="d"
    	Width="1000" Height="700">
    
    	<Grid x:Name="LayoutRoot" Background="White" MouseRightButtonDown="showMenu">
    		<TextBlock HorizontalAlignment="Center" Style="{DynamicResource BasicTextBlock-Sketch}" Text="right-click for menu" VerticalAlignment="Center" FontSize="21.333"/>
    	</Grid>
    </UserControl>

    Could be changed to...

    <UserControl 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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:WpfPrototype1Screens" x:Name="Screen_1_Name"
    	x:Class="WpfPrototype1Screens.Screen_1"
    	mc:Ignorable="d"
    	Width="1000" Height="700">
    
    	<Grid x:Name="LayoutRoot" Background="White">
    		<TextBlock HorizontalAlignment="Center" Style="{DynamicResource BasicTextBlock-Sketch}" Text="right-click for menu" VerticalAlignment="Center" FontSize="21.333" MouseRightButtonDown="showMenu"/>
    	</Grid>
    </UserControl>

    The Code Behind for Screen 1...

    using System.Windows;
    using System.Windows.Controls;
    
    namespace WpfPrototype1Screens
    {
    	public partial class Screen_1 : UserControl
    	{
    		public Screen_1()
    		{
    			this.InitializeComponent();
    		}
    
    		private void showMenu(object sender, System.Windows.Input.MouseButtonEventArgs e)
    		{
    			Point mousePosition = e.GetPosition(this.LayoutRoot);
    			rightClickMenu rcm = new rightClickMenu();
    			rcm.HorizontalAlignment = HorizontalAlignment.Left;
    			rcm.VerticalAlignment = VerticalAlignment.Top;
    			rcm.Margin = new Thickness(mousePosition.X - 50, mousePosition.Y - 50, 0, 0);
    			rcm.Width = 100;
    			rcm.Height = 100;
    			this.LayoutRoot.Children.Add(rcm);
    		}
    	}
    }

    Now for the "rightClickMenu" UserControl which is created on the right-click event

    The Xaml...

    <UserControl
    	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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    	mc:Ignorable="d"
    	x:Class="WpfPrototype1Screens.rightClickMenu"
    	x:Name="UserControl"
    	d:DesignWidth="100" d:DesignHeight="100">
    
    	<Grid x:Name="LayoutRoot" MouseLeave="hideMenu">
    		<Rectangle Fill="#FFF4F4F5" Stroke="Black" RadiusX="10" RadiusY="10" StrokeThickness="2"/>
    		<StackPanel Margin="0" Orientation="Vertical" VerticalAlignment="Center" HorizontalAlignment="Center">
    			<Button Content="Button" Style="{DynamicResource Button-Sketch}" Margin="0,10"/>
    			<Button Content="Button" Style="{DynamicResource Button-Sketch}" Margin="0,10"/>
    		</StackPanel>
    	</Grid>
    </UserControl>

    Notice I put a "MouseLeave" event on the LayoutRoot so when you move your mouse off the control it hides it.

    Here is the Code-Behind...

    using System.Windows;
    using System.Windows.Controls;
    
    namespace WpfPrototype1Screens
    {
    	public partial class rightClickMenu : UserControl
    	{
    		public rightClickMenu()
    		{
    			this.InitializeComponent();
    		}
    
    		private void hideMenu(object sender, System.Windows.Input.MouseEventArgs e)
    		{
    			this.Visibility = Visibility.Collapsed;
    		}
    	}
    }

    I hope that clears things up a bit.  I'm not so bright and can be terrible at explaining things, so please forgive the confusion I caused.

    ~Christine

    Monday, February 27, 2012 10:54 PM
  • Is there a reason you aren't using the built in context menu support?
    Monday, February 27, 2012 11:12 PM
    Moderator
  • Is there a reason you aren't using the built in context menu support?

    Ummm... I didn't know it was there. :D  Sorry I never really use Sketchflow. 

    ~Christine

    Monday, February 27, 2012 11:29 PM
  • Hi Chuck

    I dont know how to use a context menu in Blend. And I am a BA not a developer so my understanding of technical things is very limited :)

    So far I am just managing with what Christine has spoonfed me..Thanks C

    Saurabh

    Monday, February 27, 2012 11:33 PM
  • Haha Christine :)

    You can do pretty much anything you can do in regular WPF and SL with a SketchFlow app, although there are some things that don't play nicely. 


    Monday, February 27, 2012 11:34 PM
    Moderator
  • It would be really helpful if you could tell me how to create a context menu in SketchFlow.

    Thanks in advance.

    SA

    Monday, February 27, 2012 11:44 PM
  • Are you using WPF or SL? What do you want to be in the context menu? What do you want it to do?
    Monday, February 27, 2012 11:57 PM
    Moderator
  • I think he is in wpf Chuck.

    Here's a sample on a TextBlock.

    <TextBlock x:Name="TextBlock" HorizontalAlignment="Left" Text="Basic Text" VerticalAlignment="Top" Width="78.483" Margin="8,8,0,0" Background="#FFE0E0E0">
    			<TextBlock.ContextMenu>
    				<ContextMenu>
    					<MenuItem x:Name="BoldItem" Header="_Bold" IsCheckable="True" StaysOpenOnClick="True" Checked="BoldChecked" Unchecked="BoldChecked"/>
    					<MenuItem x:Name="ItalicItem" Header="_Italic" IsCheckable="True" StaysOpenOnClick="True" Checked="ItalicChecked" Unchecked="ItalicChecked"/>
    				</ContextMenu>
    			</TextBlock.ContextMenu>
    		</TextBlock>

    private void BoldChecked(object sender, System.Windows.RoutedEventArgs e)
    		{
    			if (this.BoldItem.IsChecked == true)
    				this.TextBlock.FontWeight = FontWeights.Bold;
    			else
    				this.TextBlock.FontWeight = FontWeights.Normal;
    		}
    
    		private void ItalicChecked(object sender, System.Windows.RoutedEventArgs e)
    		{
    			if (this.ItalicItem.IsChecked == true)
    				this.TextBlock.FontStyle = FontStyles.Italic;
    			else
    				this.TextBlock.FontStyle = FontStyles.Normal;
    		}

    ~Christine
    Tuesday, February 28, 2012 3:09 AM
  • No I am using SL app, sorry.

    But I would check the code above, thanks.

    SA

    Tuesday, February 28, 2012 5:29 PM
  • Hi Christine 

    My menu is working as desired not using the context menu but with what you had provided earlier!

    Though the one thing that I am struggling to do is adding a trigger to the buttons in the right click menu, it says not supported in a SL project. I want to navigate to different screens clicking these buttons, is there a way to do that ?

    Appreciate your reply.

    Thanks

    Saurabh

    Tuesday, February 28, 2012 6:36 PM
  • Hey SA.

    You know, Chuck is probably going to say "I told ya so!" about us using the ContextMenu. :D  I think it may be simpler in getting around Sketchflow.

    I altered my project to be a Silverlight project and my control now looks like this...

    <UserControl
    	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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    	xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:pi="http://schemas.microsoft.com/prototyping/2010/interactivity"
    	mc:Ignorable="d"
    	x:Class="SilverlightPrototype1Screens.rightClickMenu"
    	d:DesignWidth="100" d:DesignHeight="100" MouseLeave="hideMenu">
    
    	<Grid x:Name="LayoutRoot" MouseLeave="hideMenu">
    		<Rectangle Fill="#FFF4F4F5" Stroke="Black" RadiusX="10" RadiusY="10" StrokeThickness="2"/>
    		<StackPanel Margin="0" Orientation="Vertical" VerticalAlignment="Center" HorizontalAlignment="Center">
    			<Button Content="screen 2" Margin="0,10">
    				<i:Interaction.Triggers>
    					<i:EventTrigger EventName="Click">
    						<pi:NavigateToScreenAction TargetScreen="SilverlightPrototype1Screens.Screen_2"/>
    					</i:EventTrigger>
    				</i:Interaction.Triggers>
    			</Button>
    			<Button Content="screen 3" Margin="0,10">
    				<i:Interaction.Triggers>
    					<i:EventTrigger EventName="Click">
    						<pi:NavigateToScreenAction TargetScreen="SilverlightPrototype1Screens.Screen_3"/>
    					</i:EventTrigger>
    				</i:Interaction.Triggers>
    			</Button>
    		</StackPanel>
    	</Grid>
    </UserControl>

    I'm pretty sure you need to add this namespace  xmlns:pi=http://schemas.microsoft.com/prototyping/2010/interactivity so that the triggers will work.

    Hopefully, Chuck is around and can tell us for sure.

    I'm uploading a working Silverlight copy to my SkyDrive now... it's going slow so I'll post the link in a second.

    https://skydrive.live.com/redir.aspx?cid=513b70517e544edb&resid=513B70517E544EDB!216&parid=513B70517E544EDB!132

    ~Christine

    Tuesday, February 28, 2012 8:12 PM
  • hahahaha...thanku..I hope he will ahve something to add 4 sure.

    I will try this and update you..thnx again!

    Regards

    Saurabh

    Tuesday, February 28, 2012 8:32 PM
  • Oh!  I forgot to mention.

    Have you noticed when you right-click a Silverlight App you get the Silverlight tag?

    I added an e.handled = true event to Screen_1 so it would not show up.  But I did not do it for the other 2 screens.

    So if you download my sample and see that in the code for Screen_1, that's what it was about.

    ~Christine

    Tuesday, February 28, 2012 8:33 PM
  • Cool that worked....! without actually adding that namespace..WooooHooo

    I'll fix that silverlight tag thingy...but thnx 4 sharing the solution.

    Thnx Christine 4 solving my issues nd helping out, truly appreciate!!!

    Best Regards

    Saurabh A

    Tuesday, February 28, 2012 8:43 PM
  • Hi Again

    The menu that I have only lists two options and if I add more the size of the menu border doesnt fit somehow, I have tried many things but I am not able to enlarge the size of the menu ? Can it not be done!

    Another Q: I want to have a 2 listboxs adjacent to each other whereas 1 is a list of items, when clicked on one of the items fills the 2nd listbox with the clicked item in the 1st listbox with some additional columns (having blank textboxes)

    Please suggest and thanks.

    Regards

    SA

    Wednesday, February 29, 2012 6:52 PM
  • Did you set the rcm.Width and rcm.Height in the showMenu method?

    You may also need to adjust the DesignWidth and Height in the rightClickMenu xaml if the menu is being cut off.

    As for the list boxes...

    <UserControl
    	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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    	mc:Ignorable="d"
    	x:Class="SilverlightPrototype1Screens.Screen_2"
    	Width="1000" Height="700">
    	<UserControl.Resources>
    		<ResourceDictionary>
    			<ResourceDictionary.MergedDictionaries>
    				<ResourceDictionary Source="ProjectDataSources.xaml"/>
    			</ResourceDictionary.MergedDictionaries>
    			<DataTemplate x:Key="DataTemplate1">
    				<StackPanel Orientation="Horizontal">
    					<Image Source="{Binding Property2}" HorizontalAlignment="Left" Height="64" Width="64"/>
    					<TextBlock Text="{Binding Property1}" Style="{StaticResource BasicTextBlock-Sketch}"/>
    				</StackPanel>
    			</DataTemplate>
    			<DataTemplate x:Key="DataTemplate2">
    				<StackPanel Margin="0,0,0,20">
    					<StackPanel Height="64" Orientation="Horizontal">
    						<Image Source="{Binding Property2}" HorizontalAlignment="Left" Width="64"/>
    						<TextBlock Text="{Binding Property1}" Style="{StaticResource BasicTextBlock-Sketch}" d:LayoutOverrides="Height"/>
    					</StackPanel>
    					<TextBox Style="{StaticResource BasicTextBox-Sketch}" TextWrapping="Wrap" Text="TextBox" Margin="20,0,0,0"/>
    					<TextBox Style="{StaticResource BasicTextBox-Sketch}" TextWrapping="Wrap" Text="TextBox" Margin="20,0,0,0"/>
    				</StackPanel>
    			</DataTemplate>
    		</ResourceDictionary>
    	</UserControl.Resources>
    
    	<Grid x:Name="LayoutRoot" Background="White" DataContext="{Binding Source={StaticResource SampleDataSource}}">
    		<TextBlock Style="{StaticResource BasicTextBlock-Sketch}" TextWrapping="Wrap" Text="Screen 2" VerticalAlignment="Top" Margin="466,241,483,0" d:LayoutOverrides="Width"/>
    		<ListBox x:Name="list1" HorizontalAlignment="Left" ItemTemplate="{StaticResource DataTemplate1}" ItemsSource="{Binding Collection}" Margin="144,293,0,107" Style="{StaticResource ListBox-Sketch}" Width="300" MouseLeftButtonUp="addItem"/>
    		<ListBox x:Name="list2" HorizontalAlignment="Right" ItemTemplate="{StaticResource DataTemplate2}" Margin="0,293,159,107" Style="{StaticResource ListBox-Sketch}" Width="300" MouseLeftButtonUp="deleteItem"/>
    	</Grid>
    </UserControl>


    And the code-behind...

    using System;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Documents;
    using System.Windows.Ink;
    using System.Windows.Input;
    using System.Windows.Media;
    using System.Windows.Media.Animation;
    using System.Windows.Shapes;
    
    namespace SilverlightPrototype1Screens
    {
    	public partial class Screen_2 : UserControl
    	{
    		public Screen_2()
    		{
    			InitializeComponent();
    		}
    
    		private void addItem(object sender, System.Windows.Input.MouseButtonEventArgs e)
    		{
    			this.list2.Items.Add(this.list1.SelectedItem);
    		}
    
    		private void deleteItem(object sender, System.Windows.Input.MouseButtonEventArgs e)
    		{
    			this.list2.Items.Remove(this.list2.SelectedItem);
    		}
    	}
    }

    Notice I set up a different dataTemplate for each.  DataTemplate2 is where I had added the 2 TextBoxes that show in list 2. And I had to put the add and delete on the leftMouseButtonUP since the actual list box select item will override the down event.

    ~Christine


    Wednesday, February 29, 2012 8:23 PM
  • I am missing that in my xaml <ResourceDictionary Source="ProjectDataSources.xaml"/> gwt an error !
    Wednesday, February 29, 2012 8:35 PM
  • Sorry I had just created a sample data source.

    Go to your Data tab and click the "Create Sample Data" button > New Sample Data

    It creates 2 properties for you.  By clicking the drop arrow to the right of the properties you can change them to string, number, image or boolean.

    I made Property 1 a string and Property 2 an image.

    Clean and build your project, then try to run it.

    ~Christine

    Wednesday, February 29, 2012 8:46 PM
  • I get this error message:

    Wednesday, February 29, 2012 9:04 PM
  • Check your MainPage.xaml.  Do you have the ListBoxDragDropTarget control on it?

    This tutorial discusses how to do a Drag Drop between lists in Silverlight. 

    http://www.codeproject.com/Articles/81105/How-to-Drag-and-Drop-between-ListBox-using-Silverl

    So you'd need to have the toolkit dll added to your project and this in your xaml...

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

    ~Christine


    Wednesday, February 29, 2012 9:22 PM
  • BTW, if you are using the drag drop method you can get rid of the code behind.  It isn't needed.

    I re-did mine to include the dragdropcontrol..

    <UserControl
    	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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    	xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"
    	mc:Ignorable="d"
    	x:Class="SilverlightPrototype1Screens.Screen_2"
    	Width="1000" Height="700">
    	<UserControl.Resources>
    		<ResourceDictionary>
    			<ResourceDictionary.MergedDictionaries>
    				<ResourceDictionary Source="ProjectDataSources.xaml"/>
    			</ResourceDictionary.MergedDictionaries>
    			<DataTemplate x:Key="ItemTemplate1">
    				<StackPanel>
    					<TextBlock Text="{Binding Property1}" Style="{StaticResource BasicTextBlock-Sketch}"/>
    					<Image Source="{Binding Property2}" HorizontalAlignment="Right" Height="64" Width="64"/>
    				</StackPanel>
    			</DataTemplate>
    			<DataTemplate x:Key="ItemTemplate2">
    				<StackPanel>
    					<TextBlock Text="{Binding Property1}" Style="{StaticResource BasicTextBlock-Sketch}"/>
    					<Image Source="{Binding Property2}" HorizontalAlignment="Right" Height="64" Width="64"/>
    					<TextBox Style="{StaticResource BasicTextBox-Sketch}" TextWrapping="Wrap" Text="TextBox"/>
    					<TextBox Style="{StaticResource BasicTextBox-Sketch}" TextWrapping="Wrap" Text="TextBox"/>
    				</StackPanel>
    			</DataTemplate>
    		</ResourceDictionary>
    	</UserControl.Resources>
    
    	<Grid x:Name="LayoutRoot" Background="White" DataContext="{Binding Source={StaticResource SampleDataSource}}">
    		<TextBlock Style="{StaticResource BasicTextBlock-Sketch}" TextWrapping="Wrap" Text="Screen 2" VerticalAlignment="Top" Margin="461,80,488,0" d:LayoutOverrides="Width" RenderTransformOrigin="0.51,0.6"/>
    		<toolkit:ListBoxDragDropTarget HorizontalAlignment="Left" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" Width="294" Margin="176,207,0,342" AllowDrop="True">
    			<ListBox x:Name="list1" ItemTemplate="{StaticResource ItemTemplate1}" ItemsSource="{Binding Collection}">
    				<ListBox.ItemContainerStyle>
    					<Style TargetType="ListBoxItem">
    						<Setter Property="Padding" Value="3"/>
    						<Setter Property="HorizontalContentAlignment" Value="Left"/>
    						<Setter Property="VerticalContentAlignment" Value="Top"/>
    						<Setter Property="Background" Value="Transparent"/>
    						<Setter Property="BorderThickness" Value="1"/>
    						<Setter Property="TabNavigation" Value="Local"/>
    						<Setter Property="Template">
    							<Setter.Value>
    								<ControlTemplate TargetType="ListBoxItem">
    									<Grid Background="{TemplateBinding Background}">
    										<VisualStateManager.VisualStateGroups>
    											<VisualStateGroup x:Name="CommonStates">
    												<VisualState x:Name="Normal"/>
    												<VisualState x:Name="MouseOver">
    													<Storyboard>
    														<DoubleAnimation Duration="0" To=".35" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor"/>
    													</Storyboard>
    												</VisualState>
    												<VisualState x:Name="Disabled">
    													<Storyboard>
    														<DoubleAnimation Duration="0" To=".55" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="contentPresenter"/>
    													</Storyboard>
    												</VisualState>
    											</VisualStateGroup>
    											<VisualStateGroup x:Name="SelectionStates">
    												<VisualState x:Name="Unselected"/>
    												<VisualState x:Name="Selected">
    													<Storyboard>
    														<DoubleAnimation Duration="0" To=".75" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor2"/>
    													</Storyboard>
    												</VisualState>
    											</VisualStateGroup>
    											<VisualStateGroup x:Name="FocusStates">
    												<VisualState x:Name="Focused">
    													<Storyboard>
    														<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisualElement">
    															<DiscreteObjectKeyFrame KeyTime="0">
    																<DiscreteObjectKeyFrame.Value>
    																	<Visibility>Visible</Visibility>
    																</DiscreteObjectKeyFrame.Value>
    															</DiscreteObjectKeyFrame>
    														</ObjectAnimationUsingKeyFrames>
    													</Storyboard>
    												</VisualState>
    												<VisualState x:Name="Unfocused"/>
    											</VisualStateGroup>
    										</VisualStateManager.VisualStateGroups>
    										<Rectangle x:Name="fillColor" Fill="#FFBADDE9" IsHitTestVisible="False" Opacity="0" RadiusY="1" RadiusX="1"/>
    										<Rectangle x:Name="fillColor2" Fill="#FFBADDE9" IsHitTestVisible="False" Opacity="0" RadiusY="1" RadiusX="1"/>
    										<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}"/>
    										<Rectangle x:Name="FocusVisualElement" RadiusY="1" RadiusX="1" Stroke="#FF6DBDD1" StrokeThickness="1" Visibility="Collapsed"/>
    									</Grid>
    								</ControlTemplate>
    							</Setter.Value>
    						</Setter>
    					</Style>
    				</ListBox.ItemContainerStyle>
    			</ListBox>
    		</toolkit:ListBoxDragDropTarget>
    		<toolkit:ListBoxDragDropTarget HorizontalAlignment="Right" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" Width="315" Margin="0,207,165,342" AllowDrop="True">
    			<ListBox x:Name="list2" ItemTemplate="{StaticResource ItemTemplate2}">
    				<ListBox.ItemContainerStyle>
    					<Style TargetType="ListBoxItem">
    						<Setter Property="Padding" Value="3"/>
    						<Setter Property="HorizontalContentAlignment" Value="Left"/>
    						<Setter Property="VerticalContentAlignment" Value="Top"/>
    						<Setter Property="Background" Value="Transparent"/>
    						<Setter Property="BorderThickness" Value="1"/>
    						<Setter Property="TabNavigation" Value="Local"/>
    						<Setter Property="Template">
    							<Setter.Value>
    								<ControlTemplate TargetType="ListBoxItem">
    									<Grid Background="{TemplateBinding Background}">
    										<VisualStateManager.VisualStateGroups>
    											<VisualStateGroup x:Name="CommonStates">
    												<VisualState x:Name="Normal"/>
    												<VisualState x:Name="MouseOver">
    													<Storyboard>
    														<DoubleAnimation Duration="0" To=".35" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor"/>
    													</Storyboard>
    												</VisualState>
    												<VisualState x:Name="Disabled">
    													<Storyboard>
    														<DoubleAnimation Duration="0" To=".55" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="contentPresenter"/>
    													</Storyboard>
    												</VisualState>
    											</VisualStateGroup>
    											<VisualStateGroup x:Name="SelectionStates">
    												<VisualState x:Name="Unselected"/>
    												<VisualState x:Name="Selected">
    													<Storyboard>
    														<DoubleAnimation Duration="0" To=".75" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor2"/>
    													</Storyboard>
    												</VisualState>
    											</VisualStateGroup>
    											<VisualStateGroup x:Name="FocusStates">
    												<VisualState x:Name="Focused">
    													<Storyboard>
    														<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisualElement">
    															<DiscreteObjectKeyFrame KeyTime="0">
    																<DiscreteObjectKeyFrame.Value>
    																	<Visibility>Visible</Visibility>
    																</DiscreteObjectKeyFrame.Value>
    															</DiscreteObjectKeyFrame>
    														</ObjectAnimationUsingKeyFrames>
    													</Storyboard>
    												</VisualState>
    												<VisualState x:Name="Unfocused"/>
    											</VisualStateGroup>
    										</VisualStateManager.VisualStateGroups>
    										<Rectangle x:Name="fillColor" Fill="#FFBADDE9" IsHitTestVisible="False" Opacity="0" RadiusY="1" RadiusX="1"/>
    										<Rectangle x:Name="fillColor2" Fill="#FFBADDE9" IsHitTestVisible="False" Opacity="0" RadiusY="1" RadiusX="1"/>
    										<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}"/>
    										<Rectangle x:Name="FocusVisualElement" RadiusY="1" RadiusX="1" Stroke="#FF6DBDD1" StrokeThickness="1" Visibility="Collapsed"/>
    									</Grid>
    								</ControlTemplate>
    							</Setter.Value>
    						</Setter>
    					</Style>
    				</ListBox.ItemContainerStyle>
    			</ListBox>
    		</toolkit:ListBoxDragDropTarget>
    	</Grid>
    </UserControl>

    ~Christine
    Wednesday, February 29, 2012 9:40 PM
  • Well I see the difference now, wheras the first one behaves like you click on an item in list 1 and it fills in list 2 automatically while in the second scenario its an actual drag and drop...:) I am good with the first scenario actually though both of them are working for me now.

    The only concern for me is that list1 is fine as it is in both the cases but the way I want to fill in list 2 is:

    • Listbox 2 has to have three columns, one for the value selected in list1, and two for having the blank textboxes which is different right now as it just piles up one on top of the other.

    BTW appreciate your prompt replies, it really helps.

    Please & Thanks.

    SA

    Wednesday, February 29, 2012 10:56 PM
  • I'm at home now and don't have the project.  So we're doing this from my very bad old lady memory.

    Open the screen that has the list boxes. 

    In the Objects and TimeLine panel select list2 or whatever you named it, right-click and select Edit Additional Templates > Edit Generated Items (The first in the list I believe.)

    The template should appear on your artboard and you can adjust it to look as you wish.

    An example.... (and don't copy the following, like I said I'm doing it by memory and won't have the code correct)

    <StackPanel> .... set the orientation to horizontal

      <TextBlock> ... bound to your list box property like Property1 and give it an actual width like 100 or 200.  You could also set the right margin at 5 or 10.

      <TextBox> ... give it an absolute width of say 100 or 200 and set it's right margin to 5 or 10

      <TextBox> ... same as the one above but no need to set the margin.

    </StackPanel>

    So that would give you your data, and 2 text boxes in a line.

    You can also set the bottom margin of the actual stackpanel to say 10 or whatever if you want some space between the items in the list.

    Try that and tell me how it works.

    ~Christine

    Wednesday, February 29, 2012 11:35 PM
  • You were so right with you memory :) It worked, I'll do a little bit of tweaking...

    but thanks a lot..!

    SA

    Wednesday, February 29, 2012 11:46 PM
  • Sweet! 

    You gotta love it when a project starts coming together.

    ~Christine

    Thursday, March 1, 2012 12:19 AM
  • How do I arrange the list 2 items in columns, they seem to be pretty distorted.

    Can't we arrange them in like column1 has the value selected from list1, column 2 & 3 have textboxes so that they look a little more organized. I tried my hand (Adding a grid in the data template 2, adding borders) but couldn't find the exact solution.

    Please and thanks

    Saurabh

    Friday, March 2, 2012 5:36 PM
  • Hey SA.

    What does your xaml for your template look like right now and what exactly do you want it to look like. 

    Do you want lines between the columns?  Are you wanting headers for the columns and the ability to sort?

    One option is always using a datagrid.  I've not tried the dragDrop control on one so I don't know if it would work.

    I have a Dr. Appt I've got to get to, but can try and play with it when I get back.  Just help me understand better what we're trying to make it look like.

    ~Christine

    ...

    Here is a post Chuck had done 2 years ago on dragging from listbox to datagrid.

    http://social.expression.microsoft.com/Forums/en-US/blend/thread/f5a8b0f3-4178-4d5b-9aa4-16ee3ce20354?prof=required

    Friday, March 2, 2012 6:16 PM
  • Thats how it looks like right now:

    From the pic above and xaml code below you can see I changed it to be a Grid instead of a stack panel so that i can have them in a row. But I need to add headers and I want these three things to be in columns, you can see how the text boxes are floating here and there because of the text length. I want it to be consistent and aligned. I hope you get my point.

    <DataTemplate x:Key="DataTemplate2">
        <Grid Height="32" Margin="0,0,0,20">
         
        <Grid.ColumnDefinitions>                      
                       
         <ColumnDefinition Width="Auto" MinWidth="40" />                    
         </Grid.ColumnDefinitions>
          <Image Source="{Binding Property2}" HorizontalAlignment="Right" Width="0" d:LayoutOverrides="GridBox" Margin="0,0,64,0"/>
          <TextBlock Text="{Binding Property1}" Style="{StaticResource BasicTextBlock-Sketch}" d:LayoutOverrides="Height" HorizontalAlignment="Left" Grid.Column="0" />
          <TextBox Style="{StaticResource BasicTextBox-Sketch}"  Text="" Margin="0,0,-84,0" VerticalAlignment="Top" HorizontalAlignment="Right" Width="60" Grid.Column="1"/>
          <TextBox Style="{StaticResource BasicTextBox-Sketch}"  Text="" Margin="0,0,-172,0" VerticalAlignment="Top" HorizontalAlignment="Right" Width="60" Grid.Column="2"/>
        </Grid>
       </DataTemplate>

    Friday, March 2, 2012 6:46 PM
  • Try This and see if it will work...

    <DataTemplate x:Key="DataTemplate4">
    				<Grid Height="32" Margin="0,0,0,20" Width="350">
    					<Grid.ColumnDefinitions>
    						<ColumnDefinition Width="150" />
    						<ColumnDefinition Width="100" />
    						<ColumnDefinition Width="100" />
    					</Grid.ColumnDefinitions>
    					<TextBlock Grid.Column="0" Text="{Binding Property1}" Style="{StaticResource BasicTextBlock-Sketch}" HorizontalAlignment="Left" Width="180" />
    					<TextBox Grid.Column="1" Style="{StaticResource BasicTextBox-Sketch}"  Text="" Margin="0" VerticalAlignment="Top" HorizontalAlignment="Center" Width="60"/>
    					<TextBox Grid.Column="2" Style="{StaticResource BasicTextBox-Sketch}"  Text="" Margin="0" VerticalAlignment="Top" HorizontalAlignment="Center" Width="60"/>
    				</Grid> 
    			</DataTemplate>

    If you will ever have more than 150px of data in the TextBlock or whatevr you set it to; you may want to set it to wrap and set the Template Grid to a min of 32 and Auto for the Height so it can expand. And set the TextBlock Height to Auto.

    Some Other Options...

    <DataTemplate x:Key="DataTemplate3">
    				<StackPanel Height="32" Margin="0,0,0,20" Width="340" Orientation="Horizontal">
    					<TextBlock Text="{Binding Property1}" Style="{StaticResource BasicTextBlock-Sketch}" HorizontalAlignment="Left" Width="180" Margin="0,0,20,0" />
    					<TextBox Style="{StaticResource BasicTextBox-Sketch}"  Text="" Margin="0,0,20,0" VerticalAlignment="Top" HorizontalAlignment="Left" Width="60"/>
    					<TextBox Style="{StaticResource BasicTextBox-Sketch}"  Text="" Margin="0,0,20,0" VerticalAlignment="Top" HorizontalAlignment="Left" Width="60"/>
    				</StackPanel> 
    			</DataTemplate>

    Well... I seem to have overwritten the 3rd.

    But if those won't work, let me know and we can come up with another something else.

    ~Christine

    You know, I see KS has been on the forums.  He/She excels at DataTemplates.  Perhaps we can get his 2 cents.

    Friday, March 2, 2012 9:20 PM
  • Nopes that seems to work absolutely fine now....I tried but I think it finally has to come through you everytime...thanks once again :)

    Have a nice weekend.

    SA

    Friday, March 2, 2012 10:44 PM
  • Nopes that seems to work absolutely fine now....I tried but I think it finally has to come through you everytime...thanks once again :)

    Have a nice weekend.

    SA

    You too!

    ~Christine

    Saturday, March 3, 2012 12:55 AM
  • Hi Christine

    The grid is working fine as I mentioned earlier, now I want to add column headers in the listbox ? How do we add it because I tried using Grid. Header but its not supported. If you know of a way to add, please share with me.

    <DataTemplate x:Key="DataTemplate2">
        <Grid Height="32" Margin="0,0,0,20" Width="350">
         <Grid.ColumnDefinitions>
          <ColumnDefinition Width="200"/>
          <ColumnDefinition Width="80" />
          <ColumnDefinition Width="80" />
         </Grid.ColumnDefinitions>
         <TextBlock Grid.Column="0" Text="{Binding Property1}" Style="{StaticResource BasicTextBlock-Sketch}" HorizontalAlignment="Left" Width="200" />
         <TextBox Grid.Column="1" Style="{StaticResource BasicTextBox-Sketch}"  Text="" Margin="0" VerticalAlignment="Top" HorizontalAlignment="Center" Width="60"/>
         <TextBox Grid.Column="2" Style="{StaticResource BasicTextBox-Sketch}"  Text="" Margin="0" VerticalAlignment="Top" HorizontalAlignment="Center" Width="60"/>
        </Grid>

       </DataTemplate>
      </ResourceDictionary>
     </UserControl.Resources>

    Thanks.

    Saurabh

    Tuesday, March 6, 2012 10:35 PM
  • Howdy SA.

    From what I know, and lets remind ourselves that isn't much, Grid and Listbox do not support headers.

    So you have a few options...

    You can switch to datagrids which do support headers.  I believe I had played around with trying to add the ListBoxDragDropTarget on a DataGrid and it did not work.  So if you are still doing drag and drop, you'll need to create your own drag and drop behavior.

    Another option...

    You could simulate column headers for your listboxes.  Since you set your columns to an absolute width, this might prove to be a good option for your project.

    <StackPanel HorizontalAlignment="Right" Margin="0,113,80,0" VerticalAlignment="Top" Width="400" Height="150">
    			<StackPanel Height="30" Orientation="Horizontal">
    				<StackPanel.Background>
    					<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
    						<GradientStop Color="#FFC8C8C8" Offset="1"/>
    						<GradientStop Color="White"/>
    					</LinearGradientBrush>
    				</StackPanel.Background>
    				<TextBlock Margin="0,0,1,0" Style="{StaticResource BasicTextBlock-Sketch}" TextWrapping="Wrap" Text="Column 1" VerticalAlignment="Center" HorizontalAlignment="Center" Width="200" TextAlignment="Center"/>
    				<TextBlock Margin="0" Style="{StaticResource BasicTextBlock-Sketch}" TextWrapping="Wrap" Text="Column 2" VerticalAlignment="Center" HorizontalAlignment="Center" Width="80" TextAlignment="Center"/>
    				<TextBlock Margin="0" Style="{StaticResource BasicTextBlock-Sketch}" TextWrapping="Wrap" Text="Column 3" VerticalAlignment="Center" HorizontalAlignment="Center" Width="80" TextAlignment="Center"/>
    			</StackPanel>
    			<toolkit:ListBoxDragDropTarget HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" Width="400" AllowDrop="True" Height="120">
    				<ListBox x:Name="list2" ItemTemplate="{StaticResource ItemTemplate2}" Margin="0">
    					<ListBox.ItemContainerStyle>
    						<Style TargetType="ListBoxItem">
    							<Setter Property="Padding" Value="3"/>
    							<Setter Property="HorizontalContentAlignment" Value="Left"/>
    							<Setter Property="VerticalContentAlignment" Value="Top"/>
    							<Setter Property="Background" Value="Transparent"/>
    							<Setter Property="BorderThickness" Value="1"/>
    							<Setter Property="TabNavigation" Value="Local"/>
    							<Setter Property="Template">
    								<Setter.Value>
    									<ControlTemplate TargetType="ListBoxItem">
    										<Grid Background="{TemplateBinding Background}">
    											<VisualStateManager.VisualStateGroups>
    												<VisualStateGroup x:Name="CommonStates">
    													<VisualState x:Name="Normal"/>
    													<VisualState x:Name="MouseOver">
    														<Storyboard>
    															<DoubleAnimation Duration="0" To=".35" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor"/>
    														</Storyboard>
    													</VisualState>
    													<VisualState x:Name="Disabled">
    														<Storyboard>
    															<DoubleAnimation Duration="0" To=".55" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="contentPresenter"/>
    														</Storyboard>
    													</VisualState>
    												</VisualStateGroup>
    												<VisualStateGroup x:Name="SelectionStates">
    													<VisualState x:Name="Unselected"/>
    													<VisualState x:Name="Selected">
    														<Storyboard>
    															<DoubleAnimation Duration="0" To=".75" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor2"/>
    														</Storyboard>
    													</VisualState>
    												</VisualStateGroup>
    												<VisualStateGroup x:Name="FocusStates">
    													<VisualState x:Name="Focused">
    														<Storyboard>
    															<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisualElement">
    																<DiscreteObjectKeyFrame KeyTime="0">
    																	<DiscreteObjectKeyFrame.Value>
    																		<Visibility>Visible</Visibility>
    																	</DiscreteObjectKeyFrame.Value>
    																</DiscreteObjectKeyFrame>
    															</ObjectAnimationUsingKeyFrames>
    														</Storyboard>
    													</VisualState>
    													<VisualState x:Name="Unfocused"/>
    												</VisualStateGroup>
    											</VisualStateManager.VisualStateGroups>
    											<Rectangle x:Name="fillColor" Fill="#FFBADDE9" IsHitTestVisible="False" Opacity="0" RadiusY="1" RadiusX="1"/>
    											<Rectangle x:Name="fillColor2" Fill="#FFBADDE9" IsHitTestVisible="False" Opacity="0" RadiusY="1" RadiusX="1"/>
    											<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}"/>
    											<Rectangle x:Name="FocusVisualElement" RadiusY="1" RadiusX="1" Stroke="#FF6DBDD1" StrokeThickness="1" Visibility="Collapsed"/>
    										</Grid>
    									</ControlTemplate>
    								</Setter.Value>
    							</Setter>
    						</Style>
    					</ListBox.ItemContainerStyle>
    				</ListBox>
    			</toolkit:ListBoxDragDropTarget>
    		</StackPanel>

    Well... I thought I had a third option.  But it's left me if I did.  Hopefully, even though we've made it incredibly long, Chuck will see this and come up with another ContextMenu type of thing that I don't know about.

    ~Christine


    Tuesday, March 6, 2012 11:32 PM
  • Oh I see now what you mean, thats why I coudn't find any property to set headers for the Grid....I am not actaully using the drag nd drop but just populating list2 with ehatever is selected in list1.

    The thing is that as shown above we had only three columns initially but I plan to add more and bcoz of the limited space its gonna scroll to the right, so a fixed header is not gonna work.

    I would try the above and hopefully it should work, but I will update you on further analysis.

    Thanks

    SA

    Tuesday, March 6, 2012 11:47 PM
  • Well its about the drag n drop isn't it ?

    As said, Im not using it I am using the simple add item nd delete item behaviour so, if I add a Datagrid should it work ?

    How can I replace the current grid with the datagrid ?

    Thanks

    Saurabh

    Tuesday, March 6, 2012 11:52 PM
  • To use a datagrid simply draw a datagrid on your project.  Drag the collection from your Data panel onto the datagrid.  The columns and rows will automatically be created for you.

    Unfortunately I don't use data grids in Silverlight and only use them in my wpf projects to display and edit large data tables I have on my server.  So I'm really not the best to help you out there.  I've always stuck with the lists because the Add, Remove, etc.. functions make them easy to work with and moving data between them is relatively painless.

    Here is the Silverlight Datagrid page... http://msdn.microsoft.com/en-us/library/system.windows.controls.datagrid(v=VS.95).aspx

    At the bottom you'll find an example.

    ...

    This page explains adding the data from a selected datagrid row to another empty datagrid.  http://www.c-sharpcorner.com/UploadFile/palmanojkumar/108072006073946AM/1.aspx

    http://social.msdn.microsoft.com/Forums/en/wpf/thread/4face39e-55d2-41db-b698-ff4c8271f658

    Most of the others I've found are from 2007 and in VB instead of C# or for WPF or WinForm which is a different dataGrid than the Silverlight.  I don't think the Silverlight one has all the functionality of the others, but I could be wrong.

    Most of the available videos are older from Silverlight 2, but there are a few on the Silverligh.net site.  http://www.silverlight.net/learn/data-networking/data-controls/get-started-using-the-datagrid-in-silverlight

    ...

    I am sorry I cannot be of more help.  Since this thread has gotten so long, and to make sure Chuck or Brian see it, you may want to start a new one specific to passing data between two Datagrids.

    ~Christine


    This video is for Silverlight 4 that talks about the enhancements of DataGrid for SL4... http://www.silverlight.net/learn/data-networking/data-controls/datagrid-enhancements

    http://www.silverlight.net/learn/data-networking/data-controls/simple-masterdetails-with-datagrid

    Wednesday, March 7, 2012 1:26 AM
  • Oh I see now what you mean, thats why I coudn't find any property to set headers for the Grid....I am not actaully using the drag nd drop but just populating list2 with ehatever is selected in list1.

    The thing is that as shown above we had only three columns initially but I plan to add more and bcoz of the limited space its gonna scroll to the right, so a fixed header is not gonna work.

    I would try the above and hopefully it should work, but I will update you on further analysis.

    Thanks

    SA

    If you decide not to go with a datagrid, using a scrollViewer would provide the "scroll to the right" functionality you want.

    ~Christine

    Wednesday, March 7, 2012 1:30 AM
  • Thanks a lot Christine....I ams till working on it!

    But in case I couldn't do what I intend I would probably start a new thread, as you rightly suggested.

    Thnx again :)

    Regards

    SA

    Wednesday, March 7, 2012 5:11 PM
  • Ok one last Q for this thread :) -

    How can I clear a text in the textbox when the user clicks in the textbox. For e.g if the default textbox has text "Search" and the user clicks in the texbox the text goes away!

    this wud help me not to use a datagrid and make use of this to let the user know wht they are filling in!

    Thanks.

    Wednesday, March 7, 2012 5:55 PM
  • I know you opened a new thread, but in case anyone ever looks at this one...

    Here is a sample...

    http://samples.msdn.microsoft.com/Silverlight/SampleBrowser/index.htm#/?sref=TextBoxSnippet

    ...

    <TextBox x:Name="SearchTB" Margin="20,5,0,0" Text="Search" HorizontalAlignment="Left" Height="35" Width="200" Foreground="Gray" GotFocus="SearchTB_GotFocus" LostFocus="SearchTB_LostFocus" />


    public partial class Page : UserControl { public Page() { InitializeComponent(); } //The foreground color of the text in SearchTB is set to Magenta when SearchTB //gets focus. private void SearchTB_GotFocus(object sender, RoutedEventArgs e) { SearchTB.Text = ""; SolidColorBrush Brush1 = new SolidColorBrush(); Brush1.Color = Colors.Magenta; SearchTB.Foreground = Brush1; } //The foreground color of the text in SearchTB is set to Blue when SearchTB //loses focus. Also, if SearchTB loses focus and no text is entered, the //text "Search" is displayed. private void SearchTB_LostFocus(object sender, RoutedEventArgs e) { if (SearchTB.Text == String.Empty) { SearchTB.Text = "Search"; SolidColorBrush Brush2 = new SolidColorBrush(); Brush2.Color = Colors.Blue; SearchTB.Foreground = Brush2; } } }


    This is also great sample site for Silverlight...

    http://www.silverlight.net/content/samples/sl4/toolkitcontrolsamples/run/default.html

    ~Christine

    Wednesday, March 7, 2012 8:18 PM