Bagikan melalui

Gaya dan Template ListBox

  • Artikel

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

Bagian Kotak Daftar

Kontrol ListBox tidak memiliki bagian bernama.

Saat Anda membuat ControlTemplate untuk ListBox, templat Anda mungkin berisi ItemsPresenter dalam ScrollViewer. (Menampilkan ItemsPresenter setiap item di ListBox; mengaktifkan ScrollViewer pengguliran dalam kontrol). ItemsPresenter Jika bukan anak langsung dari ScrollViewer, Anda harus memberikan ItemsPresenter nama, ItemsPresenter.

Status Kotak Daftar

Tabel berikut mencantumkan status visual untuk ListBox kontrol.

Nama VisualState Nama VisualStateGroup Deskripsi
Valid ValidationStates Kontrol valid.
InvalidFocused ValidationStates Kontrol tidak valid dan memiliki fokus.
Tidak validUnfocused ValidationStates Kontrol tidak valid dan tidak memiliki fokus.

Bagian ListBoxItem

Kontrol ListBoxItem tidak memiliki bagian bernama.

Status ListBoxItem

Tabel berikut mencantumkan status visual untuk ListBox kontrol.

Nama VisualState Nama VisualStateGroup Deskripsi
Normal CommonStates Status default.
MouseOver CommonStates Penunjuk mouse diposisikan di atas kontrol.
Nonaktif CommonStates Item dinonaktifkan.
Terfokus FocusStates Item memiliki fokus.
Tidak fokus FocusStates Item tidak memiliki fokus.
Tidak dipilih SelectionStates Item tidak dipilih.
Dipilih SelectionStates Item saat ini diplate dipilih.
DipilihTidak fokus SelectionStates Item dipilih, tetapi tidak memiliki fokus.
Valid ValidationStates Kontrol menggunakan Validation kelas dan properti terlampir Validation.HasError adalah false.
InvalidFocused ValidationStates Properti Validation.HasError terlampir memiliki true kontrol memiliki fokus.
Tidak validUnfocused ValidationStates Properti Validation.HasError terlampir memiliki true kontrol tidak memiliki fokus.

Contoh ControlTemplate ListBox

Contoh berikut menunjukkan cara menentukan ControlTemplate untuk ListBox kontrol dan ListBoxItem .

<Style x:Key="{x:Type ListBox}"
       TargetType="ListBox">
  <Setter Property="SnapsToDevicePixels"
          Value="true" />
  <Setter Property="OverridesDefaultStyle"
          Value="true" />
  <Setter Property="ScrollViewer.HorizontalScrollBarVisibility"
          Value="Auto" />
  <Setter Property="ScrollViewer.VerticalScrollBarVisibility"
          Value="Auto" />
  <Setter Property="ScrollViewer.CanContentScroll"
          Value="true" />
  <Setter Property="MinWidth"
          Value="120" />
  <Setter Property="MinHeight"
          Value="95" />
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="ListBox">
        <Border Name="Border"
                BorderThickness="1"
                CornerRadius="2">
          <Border.Background>
            <SolidColorBrush Color="{StaticResource ControlLightColor}" />
          </Border.Background>
          <Border.BorderBrush>
            <SolidColorBrush Color="{StaticResource BorderMediumColor}" />
          </Border.BorderBrush>
          <ScrollViewer Margin="0"
                        Focusable="false">
            <StackPanel Margin="2"
                        IsItemsHost="True" />
          </ScrollViewer>
        </Border>
        <ControlTemplate.Triggers>
          <Trigger Property="IsEnabled"
                   Value="false">
            <Setter TargetName="Border"
                    Property="Background">
              <Setter.Value>
                <SolidColorBrush Color="{StaticResource DisabledControlLightColor}" />
              </Setter.Value>
            </Setter>
            <Setter TargetName="Border"
                    Property="BorderBrush">
              <Setter.Value>
                <SolidColorBrush Color="{DynamicResource DisabledBorderLightColor}" />
              </Setter.Value>

            </Setter>
          </Trigger>
          <Trigger Property="IsGrouping"
                   Value="true">
            <Setter Property="ScrollViewer.CanContentScroll"
                    Value="false" />
          </Trigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

<Style x:Key="{x:Type ListBoxItem}"
       TargetType="ListBoxItem">
  <Setter Property="SnapsToDevicePixels"
          Value="true" />
  <Setter Property="OverridesDefaultStyle"
          Value="true" />
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="ListBoxItem">
        <Border x:Name="Border"
                Padding="2"
                SnapsToDevicePixels="true">
          <Border.Background>
            <SolidColorBrush Color="Transparent" />
          </Border.Background>
          <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="SelectionStates">
              <VisualState x:Name="Unselected" />
              <VisualState x:Name="Selected">
                <Storyboard>
                  <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                                Storyboard.TargetProperty="(Panel.Background).
                    (SolidColorBrush.Color)">
                    <EasingColorKeyFrame KeyTime="0"
                                         Value="{StaticResource SelectedBackgroundColor}" />
                  </ColorAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>
              <VisualState x:Name="SelectedUnfocused">
                <Storyboard>
                  <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                                Storyboard.TargetProperty="(Panel.Background).
                    (SolidColorBrush.Color)">
                    <EasingColorKeyFrame KeyTime="0"
                                         Value="{StaticResource SelectedUnfocusedColor}" />
                  </ColorAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>
            </VisualStateGroup>
          </VisualStateManager.VisualStateGroups>
          <ContentPresenter />
        </Border>
      </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 sampel lengkapnya, lihat Menata dengan Sampel ControlTemplates.

Baca juga