WPF הוספת tooltip ל-Header בתוך style

tkt

יש לי פרויקט שהורדתי מהאינטרנט עבור טאבים בצורה של chrome. הייתי רוצה להוסיף tooltip עבור כל טאב בהתאם לתוכן של ה-header.
ב-style יש כזו הגדרה

<Style TargetType="{x:Type local:ChromeTabItem}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:ChromeTabItem}">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="5" />
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="20" />
                            <ColumnDefinition Width="5" />
                        </Grid.ColumnDefinitions>
                        <Path Name="TabFill" Margin="0 0 0 1" Grid.ColumnSpan="4" VerticalAlignment="Top" Stretch="Fill" Data="M39,96 C48.75,96 59.25,0 76,0 92.75,0 247,0 258,0 269,0 285.5,95.75 295,96">
                            <Path.Fill>
                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                    <GradientStop Color="#FFEEEEEE" Offset="0"/>
                                    <GradientStop Color="#FFDDDDDD" Offset="1"/>
                                </LinearGradientBrush>
                            </Path.Fill>
                        </Path>
                        <Path Name="TabPath" Grid.ColumnSpan="4" VerticalAlignment="Top" Stretch="Fill" Stroke="#FF999999" Data="M39,96 C48.75,96 59.25,0 76,0 92.75,0 247,0 258,0 269,0 285.5,95.75 295,96" />
                        <Path Name="TabHighlight" Margin="0 0 0 1" Grid.ColumnSpan="4" VerticalAlignment="Top" Stretch="Fill" Stroke="White" Data="M39,96 C48.75,96 59.25,0 76,0 92.75,0 247,0 258,0 269,0 285.5,95.75 295,96">
                            <Path.RenderTransformOrigin>
                                <Point X=".5" Y=".5" />
                            </Path.RenderTransformOrigin>
                            <Path.RenderTransform>
                                <TransformGroup>
                                    <TranslateTransform Y=".5" />
                                    <ScaleTransform ScaleX=".96" ScaleY=".94" />
                                </TransformGroup>
                            </Path.RenderTransform>
                        </Path>
                        <Label Margin="10 0 0 0"  VerticalAlignment="Center" Content="{TemplateBinding Header}" Grid.Column="1" />
                        <Button KeyboardNavigation.IsTabStop="False" Margin="0 0 10 0" Style="{StaticResource CloseButtonStyle}" Grid.Column="2" Command="{x:Static local:ChromeTabItem.CloseTabCommand}" />
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsSelected" Value="True">
                            <Setter Property="Fill" TargetName="TabFill" Value="White" />
                            <Setter Property="Margin" TargetName="TabFill" Value="0 0 0 -1" />
                            <Setter Property="Margin" TargetName="TabPath" Value="0" />
                            <Setter Property="Stroke" TargetName="TabHighlight" Value="Transparent" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>

ניסיתי להוסיף tooitip לשורה הזו:

<Label Margin="10 0 0 0"  VerticalAlignment="Center" Content="{TemplateBinding Header}" ToolTip="{Binding Content.Text}" Grid.Column="1" />

אבל לא קרה כלום. ניסיתי גם לשים במקום זה את השורה

ToolTip="{TemplateBinding Header}"

אז הוא באמת הוסיף tooltip אבל אם היה לטאב template אז ברגע שה-tooltip הופיע נעלם הטקסט של ה-header. לא ברור לי למה.
אשמח לקבל הסבר איך זה עובד, תודה.

פורסם במקור בפורום CODE613 ב07/07/2013 11:38 (+03:00)

dovid

לפני התעמקות בקוד, אני רוצה להבין את המטרה,
מה העניין שהטולטיפ יציג בדיוק את אותו הדבר שמוצג כבר בלשונית?

פורסם במקור בפורום CODE613 ב07/07/2013 12:44 (+03:00)

tkt

במקרה ויש טקסט מידי ארוך לטאב יש גודל מקסימלי ואז הטקס חתוך. ב-chrome הפתרון הוא tooltip ורציתי לחקות את אותה התנהגות.

פורסם במקור בפורום CODE613 ב07/07/2013 14:43 (+03:00)

dovid

איפה ניסית לשים את השורה הזו:

ToolTip="{TemplateBinding Header}"

?

נסי לשים אותה בתוך שורת הפתיחה של הControlTemplate (שורה רביעית).
קשה לי להבין מה קורה שם בדיוק, אולי אני צריך לבדוק את הChromTab הזה.
מחר אולי יהיה לי זמן.

פורסם במקור בפורום CODE613 ב07/07/2013 16:54 (+03:00)

tkt

אני שמתי את השורה הזו בהגדרה של ה-label:
<Label Margin="10 0 0 0" VerticalAlignment="Center" Content="{TemplateBinding Header}" [u:1j4sfrr9]ToolTip="{Binding Content.Text}"[/u:1j4sfrr9] Grid.Column="1" />
אי אפשר לשים את זה בשורה הרביעית, הוא נותן שגיאה:
The property 'ToolTip' was not found in type 'ControlTemplate'.

פורסם במקור בפורום CODE613 ב07/07/2013 20:39 (+03:00)

dovid

נכון, אני טעיתי מה פתאום ToolTip בControlTemplate.
אבל באלמנט הגריד (שורה מתחת) זה אמור לעבוד.
תחליפי את <Grid> ב

<Grid ToolTip="{TemplateBinding Header}">

פורסם במקור בפורום CODE613 ב08/07/2013 11:49 (+03:00)

tkt

זה באמת הוסיף את ה-tooltip אבל אם היה header שהוגדר כך (מכיל טקסט + תמונה קטנה):

<tabs:ChromeTabItem.Header>
    <StackPanel Orientation="Horizontal">
         <Image Source="..\Images\questionnare.ico"/>
         <TextBlock Text="שאלון"/>
    </StackPanel>
</tabs:ChromeTabItem.Header>

אז ברגע שה -tooltip מופיע, ה-header נהיה ריק והתוכן שלו לא חוזר גם בהמשך, הערך ב-tooltip נשאר.
(אותה התנהגות קוראת גם אם אני שמה את השורה הזו בהגדרה של ה-label במיקום שהראיתי למעלה)

ממש לא ברור לי למה, זה נראה כאילו ה-tooltip שאב ממנו את התוכן של ה-header.

פורסם במקור בפורום CODE613 ב08/07/2013 12:39 (+03:00)

dovid

עכשיו הבנתי הכל. ברור למה.
את מגדירה שהטולטיפ יציג, את תוכן המאפיין Header.
תוכן הHeader במקרה והוא טקסט, אז הוא מחזיר את הערך.
במידה והוא אלמנט הוא מחזיר העתקט של Reference לאותו אלמנט UI.
אלמנט UI יכול להיות בן של אבא אחד בלבד, אז הוא עובר דירה.

הנה המחשה חיה:

<Button x:Name="Bt1" HorizontalAlignment="Left" Margin="269,194,0,0" VerticalAlignment="Top" Width="75">
     <TextBlock Text="123" />
</Button>
<Button Content="{Binding Content, ElementName=Bt1}" HorizontalAlignment="Left" Margin="269,219,0,0" VerticalAlignment="Top" Width="75" />

אז מה עושים? צריך לכתוב את האלמנטים של הHeader בטמפלט שלו ולא בו ישירות בתור Content שלו.
ואז להציב בו טקסט פשוט.
אז במקום הקוד של ההודעה אחרונה תכתבי ככה:

<TabItem.HeaderTemplate>
    <DataTemplate>
        <StackPanel Orientation="Horizontal">
            <Image Source="..\Images\questionnare.ico"/>
            <TextBlock Text="{TemplateBinding Content}"/>
        </StackPanel>
    </DataTemplate>
</TabItem.HeaderTemplate>

ואז באלמנט TabItem תכתבי Header="שאלון...".
אז הטולטיפ יציג רק טקסט.
אם את רוצה שהטולטיפ יהיה בדיוק כמו הHeader, תעתיקי את הטמפלט הנ"ל לטולטיפ.טמפלט.
נשמח לשמוע תוצאות.

פורסם במקור בפורום CODE613 ב08/07/2013 13:37 (+03:00)

tkt

לא כל כך הבנתי איפה לשים את ה-HeaderTemplate. ניסיתי לשים אותו בהגדרות של ה-tabitem כך:

<tabs:ChromeTabItem Header="שאלון " >
    <tabs:ChromeTabItem.HeaderTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <Image Source="..\Images\questionnare.ico"/>
                <TextBlock Text="{TemplateBinding Content}" />
             </StackPanel>
         </DataTemplate>
</tabs:ChromeTabItem.HeaderTemplate>

ובהרצה אני רואה רק טאב שיש לו header שאלון בלי התמונה וכך גם ב-tooltip.
האמת לא כל כך נורא שלא תופיע התמונה, זה לא מאוד עקרוני בשבילי רק מעניין מדוע.

פורסם במקור בפורום CODE613 ב10/07/2013 12:56 (+03:00)

dovid

מעניין.
אגב למה בהרצה? בזמן עיצוב לא מופיע כלום?

פורסם במקור בפורום CODE613 ב10/07/2013 16:15 (+03:00)

tkt

כן גם בזמן design אני לא רואה את ה-icon.

פורסם במקור בפורום CODE613 ב10/07/2013 21:02 (+03:00)

dovid

סתם בשביל הטסט,
מה קורה שאת מורידה לגמרי את השורה של הטקסטבוקס בטמפלט,
ומשאירה רק את האייקון?

פורסם במקור בפורום CODE613 ב10/07/2013 21:41 (+03:00)

tkt

זה לא מזיז לו! נשאר לי ה-header (גם ב-designer וכמובן בהרצה)
נראה שהוא בכלל לא משתמש ב-headerTamplate

פורסם במקור בפורום CODE613 ב10/07/2013 23:26 (+03:00)

dovid

אהה סוף סוף עליתי על זה.
את צדקת מהתחלה.
את השורה עם הלבל בקוד של ההודעה הראושנה שלך, השורה הזו:

<Label Margin="10 0 0 0" VerticalAlignment="Center" Content="{TemplateBinding Header}" 
Grid.Column="1" />

תחליפי בזו:

<ContentPresenter Margin="10 0 0 0" VerticalAlignment="Center"  Grid.Column="1"
 Content="{TemplateBinding HeaderedContentControl.Header}" ContentTemplate="{TemplateBinding HeaderedContentControl.HeaderTemplate}" ContentStringFormat="{TemplateBinding HeaderedContentControl.HeaderStringFormat}" ContentSource="Header" />

ואז, נראה לי, שגמרנו סופית את הבעייה.
מה עשינו? החלפנו פקד לבל קשוח, שלא "מכבד" את הגדרות הטמפלט, במקורי שכן "מכבד".

פורסם במקור בפורום CODE613 ב11/07/2013 19:52 (+03:00)

dovid

שכחתי להוסיף את הטולטיפ,
אז בשביל טולטיפ זהה לHeader, במקום השורה דלעיל שימי את זה:

<ContentPresenter Margin="10 0 0 0" VerticalAlignment="Center" Grid.Column="1" Content="{TemplateBinding HeaderedContentControl.Header}" ContentTemplate="{TemplateBinding HeaderedContentControl.HeaderTemplate}" ContentStringFormat="{TemplateBinding HeaderedContentControl.HeaderStringFormat}" ContentSource="Header">
    <ContentPresenter.ToolTip>
        <ContentControl Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderedContentControl.HeaderTemplate}" />
    </ContentPresenter.ToolTip>
</ContentPresenter>

פורסם במקור בפורום CODE613 ב11/07/2013 20:08 (+03:00)

tkt

זה עובד מעולה!
תודה רבה

פורסם במקור בפורום CODE613 ב11/07/2013 20:36 (+03:00)

תחומים - פורום חרדי מקצועי

WPF הוספת tooltip ל-Header בתוך style