Bagikan melalui

Gaya dan Templat Tooltip

Topik ini menjelaskan gaya dan templat untuk kontrol ToolTip. Anda dapat mengubah ControlTemplate default untuk memberi kontrol tampilan yang unik. Untuk informasi selengkapnya, lihat Membuat templat untuk kontrol.

Bagian Petunjuk Alat

Kontrol ToolTip tidak memiliki bagian yang diberi nama.

Status TipsAlat

Tabel berikut mencantumkan status visual untuk kontrol ToolTip.

Nama dari VisualState Nama dari VisualStateGroup Deskripsi
Tertutup OpenStates Kondisi bawaan.
Buka OpenStates ToolTip terlihat.
Sah StatusValidasi Kontrol menggunakan kelas Validation dan properti terpasang Validation.HasError adalah false.
Fokus Tidak Valid StatusValidasi Properti terlampir Validation.HasError menunjukkan bahwa kontrol true memiliki fokus.
Tidak valid atau tidak terfokus StatusValidasi Properti terlampir Validation.HasError adalah true yang memiliki kontrol namun tidak memiliki fokus.

Contoh ToolTip ControlTemplate

Contoh berikut menunjukkan cara menentukan ControlTemplate untuk kontrol ToolTip.

<Style x:Key="{x:Type ToolTip}"
       TargetType="ToolTip">
  <Setter Property="OverridesDefaultStyle"
          Value="true" />
  <Setter Property="HasDropShadow"
          Value="True" />
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="ToolTip">
        <Border Name="Border"
                BorderThickness="1"
                Width="{TemplateBinding Width}"
                Height="{TemplateBinding Height}">
          <Border.Background>
            <LinearGradientBrush StartPoint="0,0"
                                 EndPoint="0,1">
              <LinearGradientBrush.GradientStops>
                <GradientStopCollection>
                  <GradientStop Color="{DynamicResource ControlLightColor}"
                                Offset="0.0" />
                  <GradientStop Color="{DynamicResource ControlMediumColor}"
                                Offset="1.0" />
                </GradientStopCollection>
              </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>

          </Border.Background>
          <Border.BorderBrush>
            <SolidColorBrush Color="{DynamicResource BorderMediumColor}" />
          </Border.BorderBrush>
          <ContentPresenter Margin="4"
                            HorizontalAlignment="Left"
                            VerticalAlignment="Top" />
        </Border>
        <ControlTemplate.Triggers>
          <Trigger Property="HasDropShadow"
                   Value="true">
            <Setter TargetName="Border"
                    Property="CornerRadius"
                    Value="4" />
            <Setter TargetName="Border"
                    Property="SnapsToDevicePixels"
                    Value="true" />
          </Trigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

Contoh sebelumnya menggunakan satu atau beberapa sumber daya berikut.

<!--Control colors.-->
<Color x:Key="WindowColor">#FFE8EDF9</Color>
<Color x:Key="ContentAreaColorLight">#FFC5CBF9</Color>
<Color x:Key="ContentAreaColorDark">#FF7381F9</Color>

<Color x:Key="DisabledControlLightColor">#FFE8EDF9</Color>
<Color x:Key="DisabledControlDarkColor">#FFC5CBF9</Color>
<Color x:Key="DisabledForegroundColor">#FF888888</Color>

<Color x:Key="SelectedBackgroundColor">#FFC5CBF9</Color>
<Color x:Key="SelectedUnfocusedColor">#FFDDDDDD</Color>

<Color x:Key="ControlLightColor">White</Color>
<Color x:Key="ControlMediumColor">#FF7381F9</Color>
<Color x:Key="ControlDarkColor">#FF211AA9</Color>

<Color x:Key="ControlMouseOverColor">#FF3843C4</Color>
<Color x:Key="ControlPressedColor">#FF211AA9</Color>


<Color x:Key="GlyphColor">#FF444444</Color>
<Color x:Key="GlyphMouseOver">sc#1, 0.004391443, 0.002428215, 0.242281124</Color>

<!--Border colors-->
<Color x:Key="BorderLightColor">#FFCCCCCC</Color>
<Color x:Key="BorderMediumColor">#FF888888</Color>
<Color x:Key="BorderDarkColor">#FF444444</Color>

<Color x:Key="PressedBorderLightColor">#FF888888</Color>
<Color x:Key="PressedBorderDarkColor">#FF444444</Color>

<Color x:Key="DisabledBorderLightColor">#FFAAAAAA</Color>
<Color x:Key="DisabledBorderDarkColor">#FF888888</Color>

<Color x:Key="DefaultBorderBrushDarkColor">Black</Color>

<!--Control-specific resources.-->
<Color x:Key="HeaderTopColor">#FFC5CBF9</Color>
<Color x:Key="DatagridCurrentCellBorderColor">Black</Color>
<Color x:Key="SliderTrackDarkColor">#FFC5CBF9</Color>

<Color x:Key="NavButtonFrameColor">#FF3843C4</Color>

<LinearGradientBrush x:Key="MenuPopupBrush"
                     EndPoint="0.5,1"
                     StartPoint="0.5,0">
  <GradientStop Color="{DynamicResource ControlLightColor}"
                Offset="0" />
  <GradientStop Color="{DynamicResource ControlMediumColor}"
                Offset="0.5" />
  <GradientStop Color="{DynamicResource ControlLightColor}"
                Offset="1" />
</LinearGradientBrush>

<LinearGradientBrush x:Key="ProgressBarIndicatorAnimatedFill"
                     StartPoint="0,0"
                     EndPoint="1,0">
  <LinearGradientBrush.GradientStops>
    <GradientStopCollection>
      <GradientStop Color="#000000FF"
                    Offset="0" />
      <GradientStop Color="#600000FF"
                    Offset="0.4" />
      <GradientStop Color="#600000FF"
                    Offset="0.6" />
      <GradientStop Color="#000000FF"
                    Offset="1" />
    </GradientStopCollection>
  </LinearGradientBrush.GradientStops>
</LinearGradientBrush>

Untuk mendapatkan sampel lengkap, lihat Contoh Pengaturan Gaya dengan Template Kontrol.

Lihat juga