I have placed a popup on a button mouseover.Each time when i mouse over that button my custom designed popup is being showed perfectly.Butit doesn't point the button perfectly. How to do so ..? Now my popup looks like
I want that arrow mark to point that help button How to acheive it..
Here is my code for the button and popup in xaml
<telerik:RadButton Name="btnH" Grid.Column="1" HorizontalAlignment="Left" Margin="444,56,0,0" Grid.Row="2" VerticalAlignment="Top" Width="23" Height="23" BorderThickness="6" BorderBrush="#4E4E4E"> <Image Source="Images/help.png" /> <telerik:RadButton.Triggers> <EventTrigger RoutedEvent="MouseEnter"> <BeginStoryboard> <Storyboard TargetName="TooltipPopup" TargetProperty="IsOpen"> <BooleanAnimationUsingKeyFrames FillBehavior="HoldEnd"> <DiscreteBooleanKeyFrame KeyTime="00:00:00" Value="True" /> </BooleanAnimationUsingKeyFrames> </Storyboard> </BeginStoryboard> </EventTrigger>
and below is the custom usercontrol xaml which amn calling in popup
<UserControl 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:telerik="http://schemas.telerik.com/2008/xaml/presentation" x:Class="WPFTest.UCToolTip" mc:Ignorable="d" Height="231.493" Width="362.075" Background="Transparent" > <UserControl.Resources> <Style TargetType="{x:Type Hyperlink}"> <Setter Property="TextBlock.TextDecorations" Value="{x:Null}" /> </Style> </UserControl.Resources> <Grid Margin="10,0,0,0"> <Grid.RowDefinitions> <RowDefinition/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <Grid Background="red" Margin="0,0,182,133"> </Grid> <Polygon Points="0.5,0 15,0, 0,30" Stroke="Orange" Fill="Orange" Margin="0,98,0,101" /> </Grid> 4 Answers
Answers 1
This link will help you, please refer
https://msdn.microsoft.com/en-us/library/ms750577(v=vs.85).aspx
Answers 2
use this style for your Popup:
<Style TargetType="Popup"> <Style.Triggers> <Trigger Property="IsOpen" Value="true"> <Setter Property="PlacementTarget" Value="{Binding ElementName=btnH }" /> <Setter Property="Placement" Value="Top" /> <Setter Property="VerticalOffset" Value="-5" /> <Setter Property="HorizontalOffset" Value="5" /> </Trigger> </Style.Triggers> </Style> Answers 3
I think that Kylo pointed you to the right answer. If you get rid of the margin in the usercontrol it should work.
This is the code for the usercontrol.
<UserControl 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:telerik="http://schemas.telerik.com/2008/xaml/presentation" x:Class="WpfTest.UCToolTip" mc:Ignorable="d" Height="130" Width="180" Background="Transparent" > <UserControl.Resources> <Style TargetType="{x:Type Hyperlink}"> <Setter Property="TextBlock.TextDecorations" Value="{x:Null}" /> </Style> </UserControl.Resources> <Grid Margin="10,0,0,0"> <Grid.RowDefinitions> <RowDefinition/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <Grid Background="red" Margin="0,0,0,32"> </Grid> <Polygon Points="0.5,0 15,0, 0,30" Stroke="Orange" Fill="Orange" Margin="0,98,0,0" /> </Grid> </UserControl> And the code for the window.
<Window x:Class="WpfTest.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" xmlns:uc="clr-namespace:WpfTest" Title="MainWindow" Height="350" Width="525"> <Window.Resources> <Style TargetType="Popup"> <Style.Triggers> <Trigger Property="IsOpen" Value="true"> <Setter Property="PlacementTarget" Value="{Binding ElementName=btnH }" /> <Setter Property="Placement" Value="Top" /> <Setter Property="VerticalOffset" Value="0" /> <Setter Property="HorizontalOffset" Value="145" /> </Trigger> </Style.Triggers> </Style> </Window.Resources> <Grid> <telerik:RadButton Name="btnH" Grid.Column="1" HorizontalAlignment="Left" Margin="300,175,0,0" Grid.Row="2" VerticalAlignment="Top" Width="50" Height="23" BorderThickness="6" BorderBrush="#4E4E4E"> <Image Source="Images/help.png" /> <telerik:RadButton.Triggers> <EventTrigger RoutedEvent="MouseEnter"> <BeginStoryboard> <Storyboard TargetName="TooltipPopup" TargetProperty="IsOpen"> <BooleanAnimationUsingKeyFrames FillBehavior="HoldEnd"> <DiscreteBooleanKeyFrame KeyTime="00:00:00" Value="True" /> </BooleanAnimationUsingKeyFrames> </Storyboard> </BeginStoryboard> </EventTrigger> <EventTrigger RoutedEvent="MouseLeave"> <BeginStoryboard> <Storyboard TargetName="TooltipPopup" TargetProperty="IsOpen"> <BooleanAnimationUsingKeyFrames FillBehavior="HoldEnd"> <DiscreteBooleanKeyFrame KeyTime="00:00:00" Value="False" /> </BooleanAnimationUsingKeyFrames> </Storyboard> </BeginStoryboard> </EventTrigger> </telerik:RadButton.Triggers> </telerik:RadButton> <Popup x:Name="TooltipPopup" AllowsTransparency="True"> <StackPanel> <uc:UCToolTip></uc:UCToolTip> </StackPanel> </Popup> </Grid> </Window> Answers 4
Here is a small library with balloons for WPF that I think does what you want.
Usage:
<geometry:Balloon ConnectorAngle="25" CornerRadius="15" PlacementOptions="Bottom, Center" PlacementTarget="{Binding ElementName=Target}"> <!-- content here --> </geometry:Balloon> 
0 comments:
Post a Comment