Hi,
I need to achieve the balloontooltip when i mouseover on particular cell.
How i achieve the same through cellvaluepresenterstyle ?
I am using xamDatagrid of 12.2 version.
Could any one can help me to achieve my requirement?
Thanks
Hello Chandra,
The following style will show a tooltip with the cell's value itself when hovering over any cell in the XamDataGrid:
<Style TargetType="ig:CellValuePresenter" >
<Setter Property="ToolTip" Value="{Binding RelativeSource={RelativeSource Self}, Path=Value}" />
</Style>
However, if the tootip is necessary on a specific field only, you may add a key to the style, then apply it to the desired field through the CellValuePresenterStyle property of FieldSettings object, e.g.:
<Style TargetType="ig:CellValuePresenter" x:Key="toolTipStyle">
...
<ig:FieldSettings CellValuePresenterStyle="{StaticResource toolTipStyle}" />
If you need any further assistance please do not hesitate to ask.
Hi Galina,
Thanks for your reply.
Actually, I am looking for BalloonTooltip(ToolTip with Balloon Style) which i need to apply for CellValuePresenter.
Can help me , how can i achieve the BallonToolTip?
Thanks in advance
Hi Chandra,
My apologies for the misunderstanding. In order to achieve the balloon style, the default ControlTemplate of the tooltip needs to be modified. Please find below the simple style I tested with:
<Style TargetType="ToolTip">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Rectangle RadiusX="10" RadiusY="10" Stroke="#FF000000"/>
<Path Fill="#FFFFFFFF" Stretch="Fill" Stroke="#FF000000" HorizontalAlignment="Left" Margin="30,-1.6,0,0" Width="20" Grid.Row="1"
Data="M22.166642,154.45381 L29.999666,187.66699 40.791059,154.54395"/>
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="My tooltip" TextWrapping="Wrap" FontSize="14" FontWeight="Bold"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
For further reference, please visit the following links:
http://msdn.microsoft.com/en-us/library/ms745107.aspx
http://jobijoy.blogspot.com/2008/12/xaml-balloon-comments-expression-blend.html
http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/f67dc703-3173-4505-9062-4983033205a8
I hope these would be helpful.
Thanks for your reply...
As per your suggestions, I have created controltemplate to achieve the balloon tooltip
<Style TargetType="ToolTip"> <Setter Property="HasDropShadow" Value="True" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate> <Grid> <Grid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="20" /> </Grid.RowDefinitions>
<Path Data="M80,159 L79.5,239.5 320.5,238.5 320.5,158.5 120,160 105,136.5 103.5,159 z" Fill="#FFF4F4F5" Stretch="Fill" Stroke="Black"></Path> <Label Content="{Binding Converter={StaticResource testconv}}" HorizontalAlignment="Left" Margin="20" FontSize="14" FontWeight="Bold" /> <Label Content="{Binding Converter={StaticResource testconv}}" HorizontalAlignment="Left" Margin="20" VerticalAlignment="Bottom"/> </Grid> </ControlTemplate> </Setter.Value> </Setter>
Cellvalupresenter Style:
<Style x:Key="TextCellStyle" TargetType="{x:Type igDP:CellValuePresenter}" > <Setter Property="VerticalContentAlignment" Value="Top"/> <Setter Property="ToolTip" Value="{Binding RelativeSource={RelativeSource Self}, Path=Value}"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate> <!--<Border CornerRadius="2" Name="MainBorder1" BorderThickness="2" BorderBrush="{Binding Converter={StaticResource testconv}, RelativeSource={RelativeSource AncestorType={x:Type igDP:CellValuePresenter}}}">--> <Border CornerRadius="2" Name="MainBorder1" BorderThickness="2" > <StackPanel Orientation="Horizontal"> <TextBox Text="{Binding RelativeSource={RelativeSource AncestorType={x:Type igDP:CellValuePresenter}}, Path=Value}" /> <Image x:Name="Image1" > </Image> </StackPanel> </Border> <ControlTemplate.Triggers> <DataTrigger Binding="{Binding Path=Value.CellStyle,RelativeSource={RelativeSource Mode=Self}}" Value="2" > <Setter Property="BorderBrush" Value="#FFCC00" TargetName="MainBorder1"/> </DataTrigger>
<DataTrigger Binding="{Binding Path=Value.Error,RelativeSource={RelativeSource Mode=Self}}" Value="Warning" > <Setter Property="Source" Value="/GridCustomControl;component/Images/WarningImg.png" TargetName="Image1"/> </DataTrigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style>
But how can i apply above style in Tooltip of cellvaluepresenterstyle ??
Can you help me to achieve this?
Applying the style (the one you created for the CellValuePresenter – TextCellStyle) needs to be done via the CellValuePresenterStyle property of the FieldSettings object. This can be done in the following ways, depending on what cells the style should be applicable:
<igDP:XamDataGrid
DataSource="{Binding Data}">
<igDP:XamDataGrid.FieldSettings>
<igDP:FieldSettings CellValuePresenterStyle="{StaticResource TextCellStyle}" />
</igDP:XamDataGrid.FieldSettings>
<igDP:XamDataGrid.FieldLayouts>
<igDP:FieldLayout>
<igDP:Field Name="Value0"/>
<igDP:Field Name="Value1">
<igDP:Field.Settings>
<igDP:FieldSettings
CellValuePresenterStyle="{StaticResource TextCellStyle}"/>
</igDP:Field.Settings>
</igDP:Field>
<igDP:Field Name="Value2"/>
</igDP:FieldLayout>
</igDP:XamDataGrid.FieldLayouts>
Please feel free to let me know if you need further assistance on the matter.
Regards,
Galina
Principal Software Engineer in Test
Infragistics Inc.
www.infragistics.com
I'm glad to hear I was helpful. Please let me know if you require any further assistance.
Thanks for your help..
It's helped me in some extent to achieve my requirement.
Thanks once again..
I made some amendments to the 2 styles in order to achieve your goal – please refer to the attached sample application for details.
Another way to go is leaving the tooltip control template as it was, but instead of adding a setter for the tooltip directly to the CellValuePresenter style, the tooltip should be added to the Control template of the CellValuePresenter, e.g.:
<Style x:Key="TextCellStyle" TargetType="{x:Type igDP:CellValuePresenter}">
<Setter Property="VerticalContentAlignment" Value="Top"/>
<!--<Setter Property="ToolTip" Value="{Binding RelativeSource={RelativeSource Self}, Path=Value}">
</Setter>-->
<!--<Border CornerRadius="2" Name="MainBorder1" BorderThickness="2" BorderBrush="{Binding Converter={StaticResource testconv}, RelativeSource={RelativeSource AncestorType={x:Type igDP:CellValuePresenter}}}">-->
<Border CornerRadius="2" Name="MainBorder1" BorderThickness="2" >
<Border.ToolTip>
<ToolTip Template="{StaticResource tooltiptemplate}" />
</Border.ToolTip>
<StackPanel Orientation="Horizontal">
<TextBox Text="{Binding RelativeSource={RelativeSource AncestorType={x:Type igDP:CellValuePresenter}}, Path=Value}" />
<Image x:Name="Image1" >
</Image>
</StackPanel>
</Border>
Please let me know if you need there’s something else I can assist with.
Thanks for your email..
Yes...Still i need your assistance.
i have modified your solution, when i tried keep mouse cursor on cell, it should show the value of cell
But in this case, its showing only 1st column cell value.
I am still following your case. I'm just checking if the provided solution was helpful or whether you need any further assistance on the matter.