I'm a noobie when it comes to WPF xaml so i'm hoping my question is so easy it can be answered in one line.
I'm looking for the best way to display an icon next to a block of text.
When a user hovers over the block of text or the icon i want to change the icon to another one.
Also, is it best practice to create one image with all my icons inside?? and move the background to the correct area?
One approach might be to bind the visibility of the image to the IsMouseOver property of the TextBlock, like this:
<StackPanel Orientation="Horizontal">
<StackPanel.Resources>
<BooleanToVisibilityConverter x:Key="BoolToVis" />
</StackPanel.Resources>
<Image
Source="foo.jpg"
Margin="0 0 5 0"
Visibility="{Binding IsMouseOver,ElementName=text,Converter={StaticResource BoolToVis}"
/>
<TextBlock x:Name="text" Text="Mouse over me to show the image!" />
</StackPanel>
That's untested, but it should be sound. Let me know if it works for you.
Related
I have a user control that shows a TextBox along with a small help icon.
My goal is to have a ToolTip pop-up, show some databound text and stay open when the mouse hovers over the help icon.
So, to that end I have created a HelpText dependency property in the user control allowing me to bind a help text string to the user control.
So, my user control looks something like this
<UserControl Name="textField" ...>
<StackPanel Orientation="Horizontal">
<TextBox Text="{Binding ElementName=textField,Path=Text}"/>
<Image Source="{StaticResource Help.Icon}">
<Image.ToolTip>
<ToolTip Content="{Binding ElementName=textField,Path=HelpText}"/>
</Image.ToolTip>
</Image>
</StackPanel>
</UserControl>
This code does show the tooltip, except that it is empty! Also, the StaysOpen property does not make any difference as the tooltip shuts down after a few seconds.
Funny thing is that when I set the same binding directly on the Image control's ToolTip property the bound text is shown allright in the tooltip pop-up, however it still does not stay open:
<Image Source="{StaticResource Help.Icon}" ToolTip="{Binding ElementName=textField,Path=HelpText}">
So my to questions are:
How come the binding against the user control's HelpText dependency property does not work in the first code sample but does work in the second?
How do I make the ToolTip stay open or rather how do I make the ToolTip both stay open and show the databound text?
Thanks!
ToolTips are not part of the same VisualTree as the rest of your XAML, so the DataContext is not inherited the way you would expect it to be.
Writing ToolTip="{Binding SomeProperty}" will automatically set the ToolTip's DataContext to SomeProperty, however if you build a custom ToolTip you must do this yourself.
<ToolTip DataContext="{Binding PlacementTarget.DataContext,
RelativeSource={RelativeSource Self}}" ... />
This will bind the ToolTip's DataContext to the DataContext of whatever object the ToolTip is on.
To accomplish what you're trying to do, your <ToolTip> would probably look like this, since PlacementTarget would be your Image:
<!-- Could also use something like Tag if DataContext is actually used -->
<Image DataContext="{Binding ElementName=textField, Path=HelpText}"
Source="{StaticResource Help.Icon}">
<Image.ToolTip>
<ToolTip Content="{Binding PlacementTarget.DataContext,
RelativeSource={RelativeSource Self}}"/>
</Image.ToolTip>
</Image>
As for why it won't stay open, I'm not positive but it might be because the ToolTipService.ShowDuration property defaults to 5 seconds, and that probably overwrites the StaysOpen property.
You can try setting it to something higher, such as
<Image ToolTipService.ShowDuration="60000" ... />
Or you can try this workaround of using a Popup styled to look like a ToolTip instead. The code would probably look something like this:
<Popup PlacementTarget="{Binding ElementName=MyImage}"
IsOpen="{Binding IsMouseOver, ElementName=MyImage, Mode=OneWay}">
<TextBlock Text="{Binding ElementName=textField, Path=HelpText}" />
</Popup>
I have a page in my WP7 app consisting of a TextBox beside a ListPicker. In their default modes, they don't line up properly; the ListPicker has a different padding to the TextBox, and its height is also different.
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<StackPanel Orientation="Horizontal">
<TextBox HorizontalAlignment="Left" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top"/>
<toolkit:ListPicker Width="170" ItemsSource="{Binding l}" Style="{StaticResource ListPickerStyle1}" VerticalAlignment="Top"/>
</StackPanel>
</Grid>
Manually tweaking the ListPicker's template to fit in correctly here is tricky and error prone. For example, when its height is adjusted, the caption (i.e. the text of the selected item) is no longer in the centre of the component.
My app is currently failing MS app review because the components are not all the same height.
Is there an easy way for me to set the toolkit:ListPicker to have the same appearance as a TextBox?
The simplest solution will be to take a copy of the the default style and tweak that using Blend to be exactly how you want it to look. This will take a little trial and error to sort out.
You can then use the implicit styling rules to apply it to all ListPickers without having to explicitly set the style on each instance:
<Style x:Key="MyListPickerStyle
TargetType="toolkit:ListPicker>
.... your tweaks here
</Style>
<Style TargetType="toolkit:ListPicker"
BasedOn="{StaticResource MyListPickerStyle}" />
It may be easier to tweak the TextBox Style of course :)
I have a WPF page with quite a few objects. At the bottom of all these items, I have a label that needs to have textwrapping in the content. That answer is simple, with the use of a Textblock this should be a cinch. However, even though I use those items, I still can't get th e text to wrap. So I'm assuming that there must be other settings in the other objects that I need to check/modify. In pseudo code, my XAML looks like
<Page>
<Stackpanel vertical>
<Border>
<Stackpanel vertical>
<label></label>
<Stackpanel horizontal>
<label></label>
</stackpanel>
<label>
<textblock TextWrapping="Wrap">
</label>
</border>
</stackpanel>
</page>
What am I missing here? Should I be checking other elements? I have already made sure that none of the nesting elements have any height specified - they are all set to auto.
I'm going to go ahead and post this as an answer in case someone else gets stuck on this.
When you set the Width and Height properties of the TextBlock control, it will first horizontally increase in size to accommodate as much text as it can before wrapping the text (if the TextWrapping property is set to Wrap). Once it decides it needs to wrap the text, if the Height is set to Auto, the text box will resize vertically to accommodate the text (until it hits the bottom of whatever UI container you put it in). If you do not want the text box to resize past a certain point, you will need to set values for the MaxWidth and MaxHeight properties. This will force the TextBlock to wrap at a certain width.
With my XamlPadX, this wraps:
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="300">
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Vertical">
<Label>L1</Label>
<StackPanel Orientation="Horizontal">
<Label>L2</Label>
</StackPanel>
<Label>
<TextBlock TextWrapping="Wrap">
This text wraps.
This text wraps.
This text wraps.
This text wraps.
This text wraps.
This text wraps.
This text wraps.
</TextBlock>
</Label>
</StackPanel>
</StackPanel>
</Page>
So the problem must be somewhere else.
I want to get this.
buttons http://www.shrani.si/f/X/6Y/24Jhn9D3/buttns.png
Everything works so far, buttons act as filter and are bind to the grid control.
All i want is the icons and counter on the button.
Whats the correct way of implementing those?
<ToggleButton x:Name="IsErrorShown" Margin="4" Width="100" Content="{lex:LocText Errors, Assembly=Client}">
I have tried adding image like this:
<ToggleButton x:Name="IsErrorShown" Margin="4" Width="100" Content="{lex:LocText Errors, Assembly=Client}">
<StackPanel>
<Image Source="Resources/Warning"/>
</StackPanel>
</ToggleButton>
but i get error that prop. Content is defined more then once.
A WPF Button (or ToggleButton) is a content control, into which you can put anything.
I haven't checked, but these buttons probably have a horizontal stack panel or a DockPanel, with an Image and then one or two TextBlocks. You could make a template for these, and also use binding to set the TextBlock Text content from your viewmodel.
Snoop ( http://snoopwpf.codeplex.com/ ) is a great tool for finding out how other people have built things in WPF.
The Adam Nathan WPF book is excellent, and if you don't have it you should get it. http://www.amazon.co.uk/Windows-Presentation-Foundation-Unleashed-WPF/dp/0672328917
Here's an example:
<ToggleButton Height="24" Width="100">
<DockPanel>
<Image Source="c:\\temp\\me.jpg" Margin="3"/>
<TextBlock Text="20 Errors"/>
</DockPanel>
</ToggleButton>
How can I set the ChildWindow Title content from a style?
Setting the content to text is straightforward:
Setter Property="Title" Value="My Title Text"
How can I put a StackPanel or Image in the Title from the Setter? I know I could extract the entire style for the control and modify the Chrome but I would like to avoid having all that XAML to wade through just to change a small part.
<basics:ChildWindow.Title>
<StackPanel>
<TextBlock Text="Moo Title"/>
<Rectangle Fill="DarkCyan" Height="25" Width="25"/>
</StackPanel>
</basics:ChildWindow.Title>
Why do you want to use a setter in the first place?