Photosuru has a neat effect - when you mouseover the thumbnail image a popup opens showing the image enlarged. I am trying to get this to work on a listbox, similar to a tooltip, I need to mouseover an item and have the popup open. The problem, the popup only shows the item selected in the listbox. I tried looking through Photosuru code for the answer, but found it too advanced for me. Note: I can't use tooltip as it is needed for something else.
Here's the xaml:
<Window.Resources>
<XmlDataProvider x:Key="MyPartsXML"
Source="F:\ListBoxSync\MyParts.xml"
XPath="MyParts"/>
</Window.Resources>
<Grid x:Name="MainGrid"
DataContext="{Binding ElementName=PartsList, Path=SelectedItem}"
Width="Auto"
VerticalAlignment="Stretch">
<ListBox ItemsSource="{Binding Source={StaticResource MyPartsXML},
XPath=//MyParts//parts}"
IsSynchronizedWithCurrentItem="True"
Name="PartsList"
HorizontalAlignment="Left">
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderThickness="2" BorderBrush="Black" Margin="10">
<TextBlock Name="lstbxBlock"
Text="{Binding XPath=item}"
MouseEnter="item_MouseEnter"
MouseLeave="item_MouseLeave"/>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Popup x:Name="Pops"
IsOpen="False"
Placement="Right"
StaysOpen="False"
PlacementTarget="{Binding ElementName=txtBxitem}"
HorizontalAlignment="Left">
<StackPanel>
<TextBox Text="{Binding XPath=color}"/>
<TextBox Text="{Binding XPath=size}"/>
</StackPanel>
</Popup>
<TextBox Text="{Binding XPath=color}"/>
<TextBox Text="{Binding XPath=size}"/>
</Grid>
The code behind:
private void item_MouseEnter(object sender, MouseEventArgs e)
{
this.Pops.IsOpen = true;
}
private void item_MouseLeave(object sender, MouseEventArgs e)
{
this.Pops.IsOpen = false;
}
Hope this isn't overkill, but here's the xml:
<?xml version="1.0" encoding="ISO-8859-1" ?>
<MyParts>
<parts>
<item>Part1</item>
<color>Red</color>
<size>SM</size>
</parts>
<parts>
<item>Part2</item>
<color>Green</color>
<size>LG</size>
</parts>
<parts>
<item>Part3</item>
<color>Blue</color>
<size>XXL</size>
</parts>
<parts>
<item>Part4</item>
<color>Yellow</color>
<size>LG</size>
</parts>
<parts>
<item>Part5</item>
<color>Green</color>
<size>XL</size>
</parts>
First, thanks for your excellent sample code to reproduce your issue. The problem is that the data context of the popup is never set so it gets it from it parent, the grid which you set to currently selected item. In the code behind you can set the correct data contect of the popup.
private void item_MouseEnter(object sender, MouseEventArgs e)
{
Pops.DataContext = (sender as FrameworkElement).DataContext;
Pops.PlacementTarget = (sender as UIElement);
Pops.IsOpen = true;
}
Also, you can't set the placement target like you do in xaml, it is not possible to just reference a control in a data template. The code behind fix will set placement target but hide your regular tooltip unless you add an offset to one of them. Personally I don't think its a good idea to have two popups on mouse over.
<html>
<title>CodeAve.com(JavaScript: Hover
Window within Previous Page)</title>
<body bgcolor="#FFFFFF">
<script language="JavaScript">
<!--
// This is the function that will open the
// new window when the mouse is moved over the link
function open_new_window()
{
new_window = open("","hoverwindow","width=300,height=200,left=10,top=10");
// open new document
new_window.document.open();
// Text of the new document
// Replace your " with ' or \" or your document.write statements will fail
new_window.document.write("<html><title>JavaScript New Window</title>");
new_window.document.write("<body bgcolor=\"#FFFFFF\">");
new_window.document.write("This is a new html document created by JavaScript ");
new_window.document.write("statements contained in the previous document.");
new_window.document.write("<br>");
new_window.document.write("</body></html>");
// close the document
new_window.document.close();
}
// This is the function that will close the
// new window when the mouse is moved off the link
function close_window()
{
new_window.close();
}
// -->
</script>
Open Hover Window
</body>
</html>
Some code I found that completes this using simple Javascript. You could definitely incorporate this into .NET using your custom controls pretty easily. This shows how the functionality of the popup should be setup though.
Related
I have three Text Box called TxtDocumentTitle1, TxtDocumentTitle2,TxtDocumentTitle3 lastly there is a Add More Button. Client can Click Add more Button so that it generates Text box naming TxtDocumentTitle4. If more needed he/she can Add more Text Boxes.
Sample XAML code of View
<Grid Height="450" Width="700" Background="White">
<TextBlock Height="23" HorizontalAlignment="Left" Margin="67,20,0,0" Name="textBlocKname" Text="Document Title1:" VerticalAlignment="Top" Width="110" />
<TextBlock Height="23" HorizontalAlignment="Left" Margin="67,87,0,0" Name="textBlockAddress" Text="Document Title2:" VerticalAlignment="Top" Width="110" />
<TextBlock Height="23" HorizontalAlignment="Left" Margin="67,154,0,0" Name="textBlockCompanyName" Text="Document Title3:" VerticalAlignment="Top" Width="110" />
<TextBox Height="46" Margin="67,37,87,0" Name="txtDocumentTitle1" VerticalAlignment="Top" FontSize="24" />
<TextBox Height="46" HorizontalAlignment="Left" Margin="67,106,0,0" Name="txtDocumentTitle3" VerticalAlignment="Top" Width="546" FontSize="24" />
<TextBox Height="46" HorizontalAlignment="Left" Margin="67,171,0,0" Name="txtDocumentTitle2" VerticalAlignment="Top" Width="546" FontSize="24" />
<Button Content="Add More" Height="37" HorizontalAlignment="Right" Margin="0,223,87,0" Name="btnAddmore" VerticalAlignment="Top" Width="102" />
</Grid>
You can achieve this easily via Binding. if your Window does not have a ViewModel open your window's xaml.cs and make it like this:
public Window1()
{
InitializeComponent();
DataContext = this;
}
public ObservableCollection<TextBoxVm> Items { get { return _items; } }
private ObservableCollection<TextBoxVm> _items = new ObservableCollection<TextBoxVm>();
if not, just add the two last lines to the viewModel of your window.
Now you need to define a class derived from DependencyObject and name it say TextBoxVm. create two DependencyPropertys in it (use propdp snippet) as follows:
public string Text
{
get { return (string)GetValue(TextProperty); }
set { SetValue(TextProperty, value); }
}
public static readonly DependencyProperty TextProperty =
DependencyProperty.Register("Text", typeof(string), typeof(TextBoxVm), new UIPropertyMetadata("default text",
(d,e)=>
{
var vm = (TextBoxVm)d;
var val = (string)e.NewValue;
MyDataService.FindAndUpdateItemInDatabase(vm.Id, val);//you can access database with something like this
}));
public string TitleText
{
get { return (string)GetValue(TitleTextProperty); }
set { SetValue(TitleTextProperty, value); }
}
public static readonly DependencyProperty TitleTextProperty =
DependencyProperty.Register("TitleText", typeof(string), typeof(TextBoxVm), new UIPropertyMetadata("default title"));
This would be the xaml code:
<ItemsControl ItemsSource="{Binding Items}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<WrapPanel>
<TextBlock Text="{Binding TitleText}"/>
<TextBox Text="{Binding Text}"/>
</WrapPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Now the only thing left is to write Button logic. simply add TextBoxVm to Items when Button is clicked.
Items.Add(new TextBoxVm {
TitleText = string.Format("Document Title{0}:", Items.Count+1)
});
Edit Note:
this approach is standard MVVM (expect for the button click event, which should be done using Command). So if you want to add controls in code (which is not recommended) search this :
add control to wpf grid programmatically.
*Above Answer from Bizz Gives Solution of My Question * Beside that it Rise me a Question about *DependencyObject * after Few Research i found this about Dependancy Object which may be Helpful for New comer to WPF like me :)
What is DependencyObject??
Dependency object is the base object for all WPF objects. All the UI Elements like Buttons TextBox etc and the Content Elements like Paragraph, Italic, Span etc all are derived from Dependency Object.
Dependency objects are used for WPF property system. By default, what ever the property system we have in DOT Net CLR is very basic. But Dependency properies provide lots of addtional features/services to support Data Binding.
Once you create any property as a dependency property, then automatically you get following feature implemented for you. ie. Change Notification, Validation, Call Back, Inheritance, DataBinding, Styles, Default Values etc.
If you need to implement all these features on your own for all properties where you need these feature, then it will be a big process and head ache for you. So, these all coming out of the box from Dependency Object class.
Basically dependency object class contains a dictionary. So, when ever set any value or retrieve value, then it will change the value or read from that Dictionary. So, it is nothing but a key value pair.
For Detail Info abouT DependencyObject
http://www.codeproject.com/Articles/140620/WPF-Tutorial-Dependency-Property
http://www.pinfaq.com/32/what-is-dependency-object-in-wpf-where-should-i-use-it
I ve a list from sharepoint and i collect from this list an hyperlink.
As i want my textbox to be like an hyperlink I ve added an event on mousedown to open this hyperlink, My concern is how to collect this hyperlink in the codebehind with the sender.
For the moment I've just hide this hyperlink in the tooltip maybe i can manage this differently any suggestion will be grantly appreciated.
My point so far, i don't know how to get this tooltip in the code behind.
Thanks
My XAML Code :
<ListBox Name="ListboxTips" ItemsSource="{Binding}" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<StackPanel Orientation="Horizontal">
<Image Source="{Binding Path=Picture}" Height="20"></Image>
<TextBlock MouseDown="TextBlock_MouseDown_URL" TextDecorations="Underline"
Margin="10,10,20,10" Width="160" TextWrapping="Wrap"
Text="{Binding Path=TitleTip}"
ToolTip="{Binding Path=URL}"/>
</StackPanel>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
My code behind :
foreach (SPSClient.ListItem item in TipsList)
{
var tips = new Tips();
tips.TitleTip = item.FieldValues.Values.ElementAt(1).ToString();
tips.App = item.FieldValues.Values.ElementAt(4).ToString();
// get the Hyperlink field URL value
tips.URL = ((FieldUrlValue)(item["LinkDoc"])).Url.ToString();
//should collect the description of the url
//tips.URLdesc = ((FieldUrlValue)(item["LinkDoc"])).Description.ToString();
tips.Picture = item.FieldValues.Values.ElementAt(4).ToString();
colTips.Add(tips);
}
ListboxTips.DataContext = colTips;
....
private void TextBlock_MouseDown_URL(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
//string test = (ToolTip)(sender as Control).ToString();
System.Diagnostics.Process.Start("http://www.link.com");
//System.Diagnostics.Process.Start(test);
}
Thanks a lot,
You can just access the property directly. It is not elegant, but will work!
private void TextBlock_MouseDown_URL(object sender, MouseButtonEventArgs e)
{
TextBlock txtBlock = sender as TexBlock;
// just access the property
string url = txtBlock.ToolTip as string;
}
A more elegant approach might be to use a Button, Hyperlink or something that exposes a Command, so that you can bind the 'click' action to a command on your view model that performs the action you wish to execute.
usually you stick any data you want to trespass somewhere to Tag attribute.
<TextBlock .. Tag="{Binding Path=URL}" />
This is easily retrievable as a public property:
private void TextBlock_MouseDown_URL(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
var tb = sender as TextBlock;
if(tb != null)
{
var neededUrl = tb.Tag;
}
}
How do i access the object UserNames, that is bound to the list??
What i did so far:
Item of the list is object in my case:
new List<UserNames>();
this.users.Add(new UserNames() {Id = 1, UserName = "name 1"});
I am using data template for which i have label and button.
My List is as follows:
<ListBox Grid.Column="1" Grid.Row="1" Name="listBox1" ItemsSource="{Binding}" SelectedValuePath="Id">
<ListBox.ItemTemplate>
<DataTemplate>
<WrapPanel Orientation="Vertical">
<StackPanel>
<Label Content="{Binding UserName}" />
</StackPanel>
<StackPanel Name="ButtonStackPanel">
<Button Name="MyButton" Content="Click Me" Click="MyButton_Click">
</Button>
</StackPanel>
</WrapPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Where my method for Button is. As you can see i did try to utilise the parent option, but without sucess
private void MyButton_Click(object sender, RoutedEventArgs e)
{
//StackPanel panel = (StackPanel)((Button)sender).Parent;
//WrapPanel wrapPanel = (WrapPanel) panel.Parent;
//ListItem listItem = (ListItem) wrapPanel.Parent;
//ListBox box = (ListBox) listItem.Parent;
//UserNames itemToReport = (UserNames) (box.SelectedItem);
//MessageBox.Show(itemToReport.UserName);
}
You can use the Button's DataContext, since it will be your UserName object
private void MyButton_Click(object sender, RoutedEventArgs e)
{
Button b = sender as Button;
UserNames data = b.DataContext as UserNames;
MessageBox.Show(data.UserName);
}
I've always thought that with WPF, your application is the DataContext, while the UI objects like Buttons, ListBoxes, TextBoxes, etc are simply a pretty layer that sits on top of the DataContext to allow the User to interact with it.
In the XAML, set the Tag property to the current item.
In the click handler, cast it back.
Usernames user = (sender as Button).Tag as Usernames;
To bind a datacollection it is often easiest to use an ObservableCollection (if the data is changing runtime). When you do the binding you have to define a datacontext, a datasoure and a datapath. I will advice you to read some more about binding on MSDN :D
This will work for you -
MessageBox.Show(((sender as Button).DataContext as UserNames).UserName);
I have a documentviewer which i used in my wpf project to show xps document reports of having around 600 pages which is working great. But from user point of view i like to show the current page number as a tooltip on my scrollviewer while dragging the scroll stating the current page number in view. Somewhat like in a PDF file like this -
I was looking out for some ideas how to implement this. Just a current page number if not possible to show a thumbnail image would be good enough for me.
Is there any in-built support in documentviewer for this functionality??
Thanks for any help..
I cannot find anything like IsScrolling so i would approach it like this:
<Popup Name="docPopup" AllowsTransparency="True" PlacementTarget="{x:Reference docViewer}" Placement="Center">
<Border Background="Black" CornerRadius="5" Padding="10" BorderBrush="White" BorderThickness="1">
<TextBlock Foreground="White">
<Run Text="{Binding ElementName=docViewer, Path=MasterPageNumber, Mode=OneWay}"/>
<Run Text=" / "/>
<Run Text="{Binding ElementName=docViewer, Path=PageCount, Mode=OneWay}"/>
</TextBlock>
</Border>
</Popup>
<DocumentViewer Name="docViewer" ScrollViewer.ScrollChanged="docViewer_ScrollChanged"/>
The popup should be displayed when the document is scrolled, then it should fade out after some time. This is done in the handler:
DoubleAnimationUsingKeyFrames anim;
private void docViewer_ScrollChanged(object sender, ScrollChangedEventArgs e)
{
if (anim == null)
{
anim = new DoubleAnimationUsingKeyFrames();
anim.Duration = (Duration)TimeSpan.FromSeconds(1);
anim.KeyFrames.Add(new DiscreteDoubleKeyFrame(1, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(0))));
anim.KeyFrames.Add(new DiscreteDoubleKeyFrame(1, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(0.5))));
anim.KeyFrames.Add(new LinearDoubleKeyFrame(0, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(1))));
}
anim.Completed -= anim_Completed;
docPopup.Child.BeginAnimation(UIElement.OpacityProperty, null);
docPopup.Child.Opacity = 1;
docPopup.IsOpen = true;
anim.Completed += anim_Completed;
docPopup.Child.BeginAnimation(UIElement.OpacityProperty, anim);
}
void anim_Completed(object sender, EventArgs e)
{
docPopup.IsOpen = false;
}
Edit: The event fires also on scrolls done via mouse-wheel etc. you could wrap everything in the handler in if (Mouse.LeftButton == MouseButtonState.Pressed), not 100% accurate but who scrolls with the MouseWheel while left-clicking?
How can I prevent the windows phone 7 from sending a MouseLeftButtonUp-event to my Grid (that I use as Button) while the user is scrolling?
This issue sometimes leads to a navigation to another page just when the user scrolling.
Or should I use a Button-Template for this?
Example code:
<ScrollViewer>
<StackPanel>
<Grid x:Name="Button1" MouseLeftButtonUp="Button1_LeftMouseButtonUp">
<TextBlock Margin="12 15" />
</Grid>
</StackPanel>
</ScrollViewer>
Instead of LeftMouseButtonUp event try this
private void Button1_ManipulationCompleted(object sender, ManipulationCompletedEventArgs e)
{
if (!e.IsInertial)
{
//Button Click Code
}
}