Reputation: 91
I'm leveraging a tooltip to show more details for every row in a grid. Details are shown as grid columns inside the tooltip, but I'm not able to change the tooltip width to show them all.
I tried changing the tooltip Width, MinWidth, MaxWidth properties, and even the internal grid width; but the tooltip always remains the same size.
.CS
Rectangle rect = new Rectangle();
rect.Opacity = 0.3;
rect.SetValue(Grid.RowProperty, r);
rect.SetValue(Grid.ColumnSpanProperty, 7);
rect.Fill = new SolidColorBrush(Colors.Azure);
rect.Margin = new Thickness(2);
MyTooltip mt = new MyTooltip(par);
mt.Style = Application.Current.Resources["LargeToolTipStyle"] as Style;
rect.SetValue(ToolTipService.ToolTipProperty, mt);
STYLES.XAML
<Style x:Key="LargeToolTipStyle" TargetType="local:MyTooltip">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToolTip">
<ContentPresenter
x:Name="LayoutRoot"
MaxWidth="800"
Padding="{TemplateBinding Padding}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTransitions="{TemplateBinding ContentTransitions}"
TextWrapping="Wrap">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="OpenStates">
<VisualState x:Name="Closed">
<Storyboard>
<FadeOutThemeAnimation TargetName="LayoutRoot" />
</Storyboard>
</VisualState>
<VisualState x:Name="Opened">
<Storyboard>
<FadeInThemeAnimation TargetName="LayoutRoot" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</ContentPresenter>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
MYTOOLTIP.XAML
<UserControl
x:Class="Client.MyTooltip"
...
d:DesignHeight="300"
d:DesignWidth="400">
<Grid Name="TooltipGrid" HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Name="TooltipHeaderTBL" Text="LEFT HEADER"
Grid.Column="0">
</TextBlock>
<TextBlock Name="TooltipHeaderTBR" Text="RIGHT HEADER"
Grid.Column="1">
</TextBlock>
<TextBlock Name="TooltipContentTBL" Text="Content sample (L)"
Grid.Row="1"
Grid.Column="0"></TextBlock>
<TextBlock Name="TooltipContentTBR" Text="Content sample (R)"
Grid.Row="1"
Grid.Column="1"></TextBlock>
</Grid>
</UserControl>
Upvotes: 1
Views: 1479
Reputation: 10627
The MaxWidth
of ToolTip
is 320 at default according to the ToolTip styles and templates. Since the ToolTip
style doesn't open the MaxWidth
property for setting that it may take no effects if you directly set MaxWidth
property for ToolTip
, only properties such as Foreground
, Background
, Padding
and so on can directly setting. So you may need to update the MaxWidth
for the ContentPresenter
by changing the default style for the ToolTip
as follows:
<Rectangle
Grid.Row="0"
Grid.ColumnSpan="3"
Fill="Azure"
Opacity="0.3">
<ToolTipService.ToolTip>
<ToolTip>
<ToolTip.Style>
<Style TargetType="ToolTip">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToolTip">
<ContentPresenter
x:Name="LayoutRoot"
MaxWidth="2000"
Padding="{TemplateBinding Padding}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTransitions="{TemplateBinding ContentTransitions}"
TextWrapping="Wrap">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="OpenStates">
<VisualState x:Name="Closed">
<Storyboard>
<FadeOutThemeAnimation TargetName="LayoutRoot" />
</Storyboard>
</VisualState>
<VisualState x:Name="Opened">
<Storyboard>
<FadeInThemeAnimation TargetName="LayoutRoot" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</ContentPresenter>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ToolTip.Style>
<Grid>
<Grid.RowDefinitions>
...
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
...
</Grid.ColumnDefinitions>
<TextBlock
Grid.Row="0"
Grid.Column="0"
Text="testtriptext on column 0testtriptext on column 0testtriptext on column 0testtriptext on column 0" />
<TextBlock
Grid.Row="1"
Grid.Column="1"
Text="testtriptext on column 1" />
<TextBlock
Grid.Row="2"
Grid.Column="2"
Text="testtriptext on column 2" />
</Grid>
</ToolTip>
</ToolTipService.ToolTip>
</Rectangle>
Upvotes: 2
Reputation: 91
The solution was right there: the style must be applied to a Tooltip object.
I was directly assigning the User Control as ToolTipService.ToolTipProperty, and then tried to edit the User Control style.
Defining a ToolTip object with the desired style, and assigning my User Control as its Content, did the trick.
Rectangle rect = new Rectangle();
rect.Opacity = 0.3;
rect.SetValue(Grid.RowProperty, r);
rect.SetValue(Grid.ColumnSpanProperty, 7);
rect.Fill = new SolidColorBrush(Colors.Azure);
rect.Margin = new Thickness(2);
MyTooltip mt = new MyTooltip(par);
ToolTip t = new ToolTip();
t.Content = mt;
t.Style = Application.Current.Resources["LargeToolTipStyle"] as Style;
rect.SetValue(ToolTipService.ToolTipProperty, t);
Upvotes: 1