UWP - Change Tooltip height/width

Question

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>

Answer 1

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>

Answer 2

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);