I am trying to set up a ToolTip similar than Microsoft uses in Outlook 2013:
How can I incorporate the following behaviour:
ToolTip stays open as long as the mouse cursor is inside it
(my version: ToolTip closes automatically after certain time has elapsed)
Allow clicking components inside ToolTip (for example "See more online" above is clickable)
(my version: ToolTip is already closed when trying to move mouse cursor inside it)
ToolTip "scrolls" from top to down when it opens
(my version: ToolTip opens without animation)
XAML:
<TextBlock Text="ToolTip example" ToolTipService.ShowDuration="12000">
<TextBlock.ToolTip>
<ToolTip Padding="5">
<Grid>
</Grid>
</ToolTip>
</TextBlock.ToolTip>
</TextBlock>
Related
I'm implementing a custom simplified editor in WPF using AvalonEdit and MahApps.Metro. I am stuck trying to get the cut/copy/paste/undo/redo commands working using MahApps.Metro icon/circle buttons instead of a toolbar.
The AvalonEdit sample uses a toolbar, and if I add a similar toolbar to my current application, it works as expected.
I want to call the Cut/Copy/Paste from a series of icon buttons on my app layout instead of inside a toolbar. My MahApps.Metro buttons are as follows. I've tried it with and without the Command Target set. In both cases nothing happens when I click them.
<Button Width="48"
Height="48"
Margin="24,0,0,0"
Style="{DynamicResource MahApps.Metro.Styles.MetroCircleButtonStyle}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Command="Undo"
CommandTarget="{Binding ElementName=xmlTextEditor.TextArea}">
<iconPacks:PackIconMaterial Kind="UndoVariant" />
</Button>
I'm relatively new to WPF so I might be missing something really basic here. Any help is appreciated.
I'm trying to change an image using events like Click, MouseEnter and MouseLeave. In first place I tried to do it with Buttons in order to have "Click" event too, but I don't know how to remove that lightblue background that appears by default when I put the mouse over the button with a png background.
After this, I tried to use , setting the resource image.png in its Source.
The main problem is that I don't know what to do in code-behind to change between Image Resources in order to change the Source of the control.
I want to know too if I can use a "Click Event" with an control
Update1:
Ok, I tried it by using Binding
For now I think its solved, but I have another problem.
I don't know exactly how to remove that "border". I tried to put the borderbrush property of the buttons to 0, but it seems to be another property or another control.
UI
Thanks.
You can put an image as the content of a button, and add an Click event to that Button. This way, an event gets called when you press the button.
<Button Margin="0,10" Name="mainButton" Click="mainButton_Click">
<Button.Content>
<Image Source="C:/reference-to-image" Height="30"/>
</Button.Content>
</Button>
In the background you can than change the Picture.
This question shows how to do that in the background.
WPF Image UriSource and Data Binding using http:\\ URL
PS. If you want to change the behavior of controls on certain events things like pressing the left mouse button on it, you have to overwrite the event triggers using
<Style TargetType="TextBlock">
<Style.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<EventTrigger.Actions>
...
Hope this helps.
UPDATE
You can set the BorderThickness to 0 and than set the Value of the Padding Property to 0. The Button Control has a predefined padding value, which makes it look like it has a border.
Padding is the space inside the control and the content e.g the space between the button and the picture
<StackPanel Orientation="Horizontal">
<Button Click="Button_Click" Padding="0" BorderThickness="0">
<Image Source="link-to-pic" Height="100"/>
</Button>
<Button Click="Button_Click" Padding="0" BorderThickness="0">
<Image Source="link-to-pic" Height="100"/>
</Button>
</StackPanel>
There is a command property in wpf that I am trying to execute on an image click. I am basically changing the style of a scroller. I downloaded sample styles from here and after changing my style I end up with something like:
ok so let me explain. on the top there is an arrow pointing upwards on top of an image. I plan to get rid of the top arrow but the reason why I need it is because in the xaml it has a command that when clicked it scrolls upward. the code for that up arrow is:
<RepeatButton
Style="{StaticResource ScrollBarButton}"
Margin="0,15,0,0"
VerticalAlignment="Top"
Background="#FFFFFFFF"
Grid.Row="0"
Command="{x:Static ScrollBar.LineUpCommand}" <!-- This is the line that enables to scroll upwards when clicked -->
theme:ScrollChrome.ScrollGlyph="UpArrow"
RenderTransformOrigin="0.5, 0.5">
<RepeatButton.RenderTransform>
<ScaleTransform ScaleX="4" ScaleY="2"/>
</RepeatButton.RenderTransform>
</RepeatButton>
In short I am interested in the following property:
Command="{x:Static ScrollBar.LineUpCommand}"
It would be nice if I could get rid of the top arrow and place that command in the image instead. The problem is that the image control does not have the property command. I know I can make the alpha of the top arrow equal to 0 and make it appear like there is only an image but I am curios of understanding how does this work and moreover I would like to add more functionality such as changing the image appearance on mouse enter etc..
Create a button with control template just having an image and bind to the
Command of the button. More on this can be found here:
Attach ICommand in WPF UserControl
Or try using eventtocommand available in mvvm light tookit
Within a Desktop app I have a toggle button:
<ToggleButton x:Name="CFStglBtn" Checked="cfsCBox_Checked"
Unchecked="cfsCBox_Unchecked"
IsChecked="True" HorizontalAlignment="Left" Margin="5,0,0,0">
<StackPanel Orientation="Horizontal">
<Image Source="assets\telephone.png" Margin="3,0,0,0" />
<TextBlock Text="CFS" FontSize="10" Margin="5,5,5,0"
Foreground="DarkSlateGray"/>
</StackPanel>
</ToggleButton>
For the Checked event I am setting a value and then executing a method FilterView();
//ommitting code
Unchecked state is just the opposite. resets a variable and executed the method again
The question I have is I noticed when I uncheck the toggle button the button continues to pulse or flash ( going from blue to chrome) as if it still has focus. The button will stay like this until another button is clicked.
Is there a way to remove this focus so that when the button is unchecked the button goes back to a unchecked state without the flashing / pulsing color.
As you can see from above this is a standard toggle button no styles or custom
I tested this on just a regular button and I found the same occured when clicked the button will continue to pulse / flash until another button is clicked.
How do you work around this or prevent this effect from happening.
Thank you
Set the Button Focusable="False".
This is happening because of the button chrome built into the default template for the control. Your only workaround is to re-template the Button. This article should get you started.
The book says
The WPF Button class only adds two
simple concepts on top of what
ButtonBase already provides: being a
cancel button or a default button.
These two mechanisms are handy short-
cuts for dialogs. If Button.IsCancel
is setto true on a Button inside a
dialog (that is, a Window shown via
its ShowDialog method), the Window is
automatically closed with a
DialogResult of false. If
Button.IsDefault is set to true,
pressing Enter causes the Button to be
clicked unless focus is explicitly
taken away from it.
But in this sample window
<Window xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
Title="About WPF Unleashed" SizeToContent="WidthAndHeight"
Background="OrangeRed" >
<StackPanel>
<Label FontWeight="Bold" FontSize="20" Foreground="White">
WPF Unleashed (Version 3.0)
</Label>
<Label> 2006 SAMS Publishing</Label>
<Label>Installed Chapters:</Label>
<ListBox>
<ListBoxItem>Chapter 1</ListBoxItem>
<ListBoxItem>Chapter 2</ListBoxItem>
</ListBox>
<TextBox AcceptsReturn="False">HELLO TEXT</TextBox>
<RadioButton>HELLO RADIO BUTTON</RadioButton>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<Button IsCancel="True" MinWidth="75" Margin="10">Cancel</Button>
<Button x:Name="OKBUTTON" IsDefault="True" MinWidth="75" Margin="10">OK</Button>
</StackPanel>
<StatusBar>You have successfully registered this product.</StatusBar>
</StackPanel>
</Window>
If I press Enter or even click it, the modal Window(By ShowDialog()) does not get closed (leave aside the return value).
Is that an error in the book ?
I believe it is an error. IsDefault and IsCancel simply means that some access-key-magic is applied when the window is created, so that the button is clicked when you hit 'Enter' and 'ESC' respectively.
If you want a Window to close - you need to:
(from MSDN )
When a dialog box is accepted, it should return a dialog box result of true, which is achieved by setting the DialogResult property when the OK button is clicked
...
Note that setting the DialogResult property also causes the window to close automatically, which alleviates the need to explicitly call Close.